{"id":1045,"date":"2025-03-24T08:52:48","date_gmt":"2025-03-23T23:52:48","guid":{"rendered":"https:\/\/dexall.co.jp\/articles\/?p=1045"},"modified":"2025-03-24T08:52:48","modified_gmt":"2025-03-23T23:52:48","slug":"javafx%e5%ae%8c%e5%85%a8%e3%82%ac%e3%82%a4%e3%83%892024%ef%bc%9a%e3%83%87%e3%82%b9%e3%82%af%e3%83%88%e3%83%83%e3%83%97%e3%82%a2%e3%83%97%e3%83%aa%e9%96%8b%e7%99%ba%e3%82%92%e5%9f%ba%e7%a4%8e%e3%81%8b","status":"publish","type":"post","link":"https:\/\/dexall.co.jp\/articles\/?p=1045","title":{"rendered":"JavaFX\u5b8c\u5168\u30ac\u30a4\u30c92024\uff1a\u30c7\u30b9\u30af\u30c8\u30c3\u30d7\u30a2\u30d7\u30ea\u958b\u767a\u3092\u57fa\u790e\u304b\u3089\u5b9f\u8df5\u307e\u3067\u89e3\u8aac\u30109\u3064\u306e\u30b9\u30c6\u30c3\u30d7\u3011"},"content":{"rendered":"\n<h1 class=\"wp-block-heading\" id=\"i-0\">JavaFX\u3068\u306f\uff1f\u6700\u65b0\u30d0\u30fc\u30b8\u30e7\u30f3\u306e\u7279\u5fb4\u3068\u6d3b\u7528\u30e1\u30ea\u30c3\u30c8<\/h1>\n\n\n\n<div class=\"toc\"><br \/>\n<b>Warning<\/b>:  Undefined array key \"is_admin\" in <b>\/home\/xs392991\/dexall.co.jp\/public_html\/articles\/wp-content\/themes\/sango-theme\/library\/gutenberg\/dist\/classes\/Toc.php<\/b> on line <b>116<\/b><br \/>\n<br \/>\n<b>Warning<\/b>:  Undefined array key \"is_category_top\" in <b>\/home\/xs392991\/dexall.co.jp\/public_html\/articles\/wp-content\/themes\/sango-theme\/library\/gutenberg\/dist\/classes\/Toc.php<\/b> on line <b>121<\/b><br \/>\n<br \/>\n<b>Warning<\/b>:  Undefined array key \"is_top\" in <b>\/home\/xs392991\/dexall.co.jp\/public_html\/articles\/wp-content\/themes\/sango-theme\/library\/gutenberg\/dist\/classes\/Toc.php<\/b> on line <b>128<\/b><br \/>\n    <div id=\"toc_container\" class=\"sgb-toc--bullets js-smooth-scroll\" data-dialog-title=\"\u76ee\u6b21\">\n      <p class=\"toc_title\">\u76ee\u6b21 <\/p>\n      <ul class=\"toc_list\">  <li class=\"first\">    <a href=\"#i-0\">JavaFX\u3068\u306f\uff1f\u6700\u65b0\u30d0\u30fc\u30b8\u30e7\u30f3\u306e\u7279\u5fb4\u3068\u6d3b\u7528\u30e1\u30ea\u30c3\u30c8<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-1\">JavaFX\u306e\u5b9a\u7fa9\u3068\u57fa\u672c\u6982\u5ff5\u3092\u7406\u89e3\u3057\u3088\u3046<\/a>      <\/li>      <li>        <a href=\"#i-2\">JavaFX 21\u306e\u9769\u65b0\u7684\u306a\u65b0\u6a5f\u80fd\u3068\u6539\u5584\u70b9<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-3\">\u306a\u305c\u4ecaJavaFX\u3092\u5b66\u3076\u3079\u304d\u306a\u306e\u304b<\/a>      <\/li>    <\/ul>  <\/li>  <li>    <a href=\"#i-4\">JavaFX\u958b\u767a\u74b0\u5883\u306e\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u624b\u9806<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-5\">\u5fc5\u8981\u306a\u30c4\u30fc\u30eb\u3068SDK\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u65b9\u6cd5<\/a>      <\/li>      <li>        <a href=\"#i-6\">IDE\u306e\u8a2d\u5b9a\u3068\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u4f5c\u6210\u306e\u30b9\u30c6\u30c3\u30d7<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-9\">\u30c8\u30e9\u30d6\u30eb\u30b7\u30e5\u30fc\u30c6\u30a3\u30f3\u30b0\u3068\u6ce8\u610f\u70b9<\/a>      <\/li>    <\/ul>  <\/li>  <li>    <a href=\"#i-10\">JavaFX\u306e\u57fa\u672c\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3068\u30ec\u30a4\u30a2\u30a6\u30c8<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-11\">\u4e3b\u8981\u306aUI\u30b3\u30f3\u30c8\u30ed\u30fc\u30eb\u306e\u4f7f\u3044\u65b9<\/a>      <\/li>      <li>        <a href=\"#i-13\">\u52b9\u679c\u7684\u306a\u30ec\u30a4\u30a2\u30a6\u30c8\u8a2d\u8a08\u306e\u30c6\u30af\u30cb\u30c3\u30af<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-15\">\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u30c7\u30b6\u30a4\u30f3\u306e\u5b9f\u88c5\u65b9\u6cd5<\/a>      <\/li>    <\/ul>  <\/li>  <li>    <a href=\"#i-16\">FXML\u3092\u4f7f\u7528\u3057\u305fUI\u8a2d\u8a08\u306e\u5b9f\u8df5<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-17\">Scene Builder\u306e\u52b9\u7387\u7684\u306a\u6d3b\u7528\u6cd5<\/a>      <\/li>      <li>        <a href=\"#i-20\">FXML\u3068\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u306e\u9023\u643a\u624b\u6cd5<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-24\">\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9\u3068\u30b3\u30fc\u30c9\u4f8b<\/a>      <\/li>    <\/ul>  <\/li>  <li>    <a href=\"#i-29\">\u30a4\u30d9\u30f3\u30c8\u51e6\u7406\u3068\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306e\u5b9f\u88c5<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-30\">\u52b9\u679c\u7684\u306a\u30a4\u30d9\u30f3\u30c8\u30cf\u30f3\u30c9\u30ea\u30f3\u30b0\u306e\u65b9\u6cd5<\/a>      <\/li>      <li>        <a href=\"#i-33\">\u30b9\u30e0\u30fc\u30ba\u306a\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u4f5c\u6210\u306e\u30b3\u30c4<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-37\">\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u6700\u9069\u5316\u306e\u30c6\u30af\u30cb\u30c3\u30af<\/a>      <\/li>    <\/ul>  <\/li>  <li>    <a href=\"#i-41\">CSS\u306b\u3088\u308b\u30b9\u30bf\u30a4\u30ea\u30f3\u30b0\u3068\u30c6\u30fc\u30de\u8a2d\u5b9a<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-42\">JavaFX\u5c02\u7528CSS\u306e\u57fa\u672c\u6587\u6cd5\u3068\u4f7f\u3044\u65b9<\/a>      <\/li>      <li>        <a href=\"#i-45\">\u30e2\u30c0\u30f3\u306aUI\u30c7\u30b6\u30a4\u30f3\u306e\u5b9f\u88c5\u4f8b<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-48\">\u30ab\u30b9\u30bf\u30e0\u30c6\u30fc\u30de\u306e\u4f5c\u6210\u3068\u9069\u7528\u65b9\u6cd5<\/a>      <\/li>    <\/ul>  <\/li>  <li>    <a href=\"#i-53\">\u30c7\u30fc\u30bf\u30d0\u30a4\u30f3\u30c7\u30a3\u30f3\u30b0\u3068MVVM\u30d1\u30bf\u30fc\u30f3<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-54\">\u52b9\u7387\u7684\u306a\u30c7\u30fc\u30bf\u30d0\u30a4\u30f3\u30c7\u30a3\u30f3\u30b0\u306e\u5b9f\u88c5<\/a>      <\/li>      <li>        <a href=\"#i-58\">MVVM\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\u306e\u5c0e\u5165\u65b9\u6cd5<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-61\">\u30b3\u30fc\u30c9\u4fdd\u5b88\u6027\u3092\u9ad8\u3081\u308b\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9<\/a>      <\/li>    <\/ul>  <\/li>  <li>    <a href=\"#i-65\">\u5b9f\u8df5\u7684\u306a\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u958b\u767a\u4f8b<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-66\">\u30bf\u30b9\u30af\u7ba1\u7406\u30a2\u30d7\u30ea\u306e\u958b\u767a\u624b\u9806<\/a>      <\/li>      <li>        <a href=\"#i-71\">\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u9023\u643a\u306e\u5b9f\u88c5\u65b9\u6cd5<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-74\">\u30c7\u30d7\u30ed\u30a4\u3068\u914d\u5e03\u306e\u6ce8\u610f\u70b9<\/a>      <\/li>    <\/ul>  <\/li>  <li>    <a href=\"#i-77\">JavaFX\u958b\u767a\u306e\u30c8\u30e9\u30d6\u30eb\u30b7\u30e5\u30fc\u30c6\u30a3\u30f3\u30b0<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-78\">\u4e00\u822c\u7684\u306a\u958b\u767a\u4e0a\u306e\u554f\u984c\u3068\u89e3\u6c7a\u7b56<\/a>      <\/li>      <li>        <a href=\"#i-85\">\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u6539\u5584\u306e\u305f\u3081\u306e\u30c7\u30d0\u30c3\u30b0\u624b\u6cd5<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-89\">\u30b3\u30df\u30e5\u30cb\u30c6\u30a3\u30ea\u30bd\u30fc\u30b9\u3068\u30b5\u30dd\u30fc\u30c8\u60c5\u5831<\/a>      <\/li>    <\/ul>  <\/li>  <li class=\"last\">    <a href=\"#i-93\">\u307e\u3068\u3081\uff1aJavaFX\u958b\u767a\u306e\u6b21\u306e\u30b9\u30c6\u30c3\u30d7<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-94\">JavaFX\u958b\u767a\u306e\u4e3b\u8981\u30dd\u30a4\u30f3\u30c8<\/a>      <\/li>      <li>        <a href=\"#i-95\">\u4eca\u5f8c\u306e\u5b66\u7fd2\u30ed\u30fc\u30c9\u30de\u30c3\u30d7<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-96\">\u30ea\u30bd\u30fc\u30b9\u3068\u53c2\u8003\u60c5\u5831<\/a>      <\/li>    <\/ul>  <\/li><\/ul>\n      <a href=\"#\" class=\"sgb-toc-button js-toc-button\" rel=\"nofollow\" data-open-dialog=\"true\"><i class=\"fa fa-list\"><\/i><span class=\"sgb-toc-button__text\">\u76ee\u6b21\u3078<\/span><\/a>\n    <\/div><\/div><h2 class=\"wp-block-heading\" id=\"i-1\">JavaFX\u306e\u5b9a\u7fa9\u3068\u57fa\u672c\u6982\u5ff5\u3092\u7406\u89e3\u3057\u3088\u3046<\/h2>\n\n\n\n<p>JavaFX\u306f\u3001\u30c7\u30b9\u30af\u30c8\u30c3\u30d7\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3084\u30ea\u30c3\u30c1\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u958b\u767a\u3059\u308b\u305f\u3081\u306e\u6700\u65b0\u306eJava\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3067\u3059\u3002\u5f93\u6765\u306eSwing\u306b\u4ee3\u308f\u308b\u6b21\u4e16\u4ee3GUI\u30c4\u30fc\u30eb\u30ad\u30c3\u30c8\u3068\u3057\u3066\u8a2d\u8a08\u3055\u308c\u3001\u30e2\u30c0\u30f3\u306aUI\u306e\u958b\u767a\u306b\u5fc5\u8981\u306a\u6a5f\u80fd\u3092\u7dcf\u5408\u7684\u306b\u63d0\u4f9b\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-sgb-block-simple sgb-box-simple sgb-box-simple--title-normal sgb-box-simple--with-border\"><div style=\"background-color:var(--wp--preset--color--sango-main);color:#FFF\" class=\"sgb-box-simple__title\">JavaFX\u306e\u4e3b\u8981\u306a\u7279\u5fb4\uff1a<\/div><div class=\"sgb-box-simple__body\" style=\"border-color:var(--wp--preset--color--sango-main);background-color:#FFF\">\n<ul class=\"wp-block-list\">\n<li><strong>\u5ba3\u8a00\u7684UI\u5b9a\u7fa9<\/strong>: FXML\u3092\u4f7f\u7528\u3057\u305fUI\u8a2d\u8a08\u304c\u53ef\u80fd<\/li>\n\n\n\n<li><strong>\u30ea\u30c3\u30c1\u306a\u30b0\u30e9\u30d5\u30a3\u30c3\u30af\u30b9<\/strong>: 2D\/3D\u30b0\u30e9\u30d5\u30a3\u30c3\u30af\u30b9\u306e\u30b5\u30dd\u30fc\u30c8<\/li>\n\n\n\n<li><strong>CSS\u5bfe\u5fdc<\/strong>: \u30e2\u30c0\u30f3\u306a\u30b9\u30bf\u30a4\u30ea\u30f3\u30b0\u6a5f\u80fd<\/li>\n\n\n\n<li><strong>\u30de\u30eb\u30c1\u30e1\u30c7\u30a3\u30a2<\/strong>: \u97f3\u58f0\u30fb\u52d5\u753b\u306e\u7d71\u5408\u30b5\u30dd\u30fc\u30c8<\/li>\n\n\n\n<li><strong>Web\u30d3\u30e5\u30fc<\/strong>: HTML5\u30b3\u30f3\u30c6\u30f3\u30c4\u306e\u7d44\u307f\u8fbc\u307f<\/li>\n<\/ul>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-2\">JavaFX 21\u306e\u9769\u65b0\u7684\u306a\u65b0\u6a5f\u80fd\u3068\u6539\u5584\u70b9<\/h2>\n\n\n\n<p>\u6700\u65b0\u306eJavaFX 21\u3067\u306f\u3001\u4ee5\u4e0b\u306e\u91cd\u8981\u306a\u6a5f\u80fd\u304c\u8ffd\u52a0\u30fb\u6539\u5584\u3055\u308c\u3066\u3044\u307e\u3059\uff1a<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u306e\u5411\u4e0a\n<ul class=\"wp-block-list\">\n<li>\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u30a8\u30f3\u30b8\u30f3\u306e\u6700\u9069\u5316<\/li>\n\n\n\n<li>\u30e1\u30e2\u30ea\u4f7f\u7528\u52b9\u7387\u306e\u6539\u5584<\/li>\n\n\n\n<li>\u8d77\u52d5\u6642\u9593\u306e\u77ed\u7e2e<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>\u65b0\u898f\u30b3\u30f3\u30c8\u30ed\u30fc\u30eb\u3068API\n<ul class=\"wp-block-list\">\n<li>\u6539\u826f\u3055\u308c\u305fTableView\u30b3\u30f3\u30c8\u30ed\u30fc\u30eb<\/li>\n\n\n\n<li>\u62e1\u5f35\u3055\u308c\u305f\u30c1\u30e3\u30fc\u30c8\u30e9\u30a4\u30d6\u30e9\u30ea<\/li>\n\n\n\n<li>\u65b0\u3057\u3044\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3API<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0\u30b5\u30dd\u30fc\u30c8\u306e\u5f37\u5316\n<ul class=\"wp-block-list\">\n<li>Apple Silicon\u5bfe\u5fdc\u306e\u6539\u5584<\/li>\n\n\n\n<li>Linux\u30b5\u30dd\u30fc\u30c8\u306e\u5f37\u5316<\/li>\n\n\n\n<li>HiDPI\u30c7\u30a3\u30b9\u30d7\u30ec\u30a4\u306e\u30b5\u30dd\u30fc\u30c8\u5411\u4e0a<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<p>\u57fa\u672c\u7684\u306aJavaFX\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u4f8b\uff1a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">import javafx.application.Application;\nimport javafx.scene.Scene;\nimport javafx.scene.control.Label;\nimport javafx.scene.layout.StackPane;\nimport javafx.stage.Stage;\n\npublic class HelloFX extends Application {\n    @Override\n    public void start(Stage primaryStage) {\n        \/\/ UI\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u4f5c\u6210\n        Label label = new Label(\"Hello, JavaFX 21!\");\n\n        \/\/ \u30ec\u30a4\u30a2\u30a6\u30c8\u306e\u8a2d\u5b9a\n        StackPane root = new StackPane(label);\n\n        \/\/ \u30b7\u30fc\u30f3\u306e\u4f5c\u6210\n        Scene scene = new Scene(root, 300, 200);\n\n        \/\/ \u30b9\u30c6\u30fc\u30b8\u306e\u8a2d\u5b9a\u3068\u8868\u793a\n        primaryStage.setTitle(\"JavaFX Application\");\n        primaryStage.setScene(scene);\n        primaryStage.show();\n    }\n\n    public static void main(String[] args) {\n        launch(args);\n    }\n}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-3\">\u306a\u305c\u4ecaJavaFX\u3092\u5b66\u3076\u3079\u304d\u306a\u306e\u304b<\/h2>\n\n\n\n<p>JavaFX\u3092\u9078\u629e\u3059\u308b\u4e3b\u306a\u7406\u7531\uff1a<\/p>\n\n\n<div id=\"id-c16cb48d-2eb4-429a-98a5-7b9056118977\">\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\u30e1\u30ea\u30c3\u30c8<\/th><th>\u8aac\u660e<\/th><\/tr><\/thead><tbody><tr><td>\u30af\u30ed\u30b9\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0\u5bfe\u5fdc<\/td><td>Windows\u3001macOS\u3001Linux\u3067\u540c\u3058\u30b3\u30fc\u30c9\u304c\u52d5\u4f5c<\/td><\/tr><tr><td>\u8c4a\u5bcc\u306aUI\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8<\/td><td>200\u4ee5\u4e0a\u306e\u6a19\u6e96\u30b3\u30f3\u30c8\u30ed\u30fc\u30eb\u3092\u63d0\u4f9b<\/td><\/tr><tr><td>\u30e2\u30c0\u30f3\u306a\u958b\u767a\u624b\u6cd5<\/td><td>FXML\u3001CSS\u3001MVVM\u30d1\u30bf\u30fc\u30f3\u306e\u30b5\u30dd\u30fc\u30c8<\/td><\/tr><tr><td>\u512a\u308c\u305f\u30c4\u30fc\u30eb\u652f\u63f4<\/td><td>Scene Builder\u7b49\u306e\u8996\u899a\u7684\u306a\u958b\u767a\u30c4\u30fc\u30eb<\/td><\/tr><tr><td>\u30a2\u30af\u30c6\u30a3\u30d6\u306a\u30b3\u30df\u30e5\u30cb\u30c6\u30a3<\/td><td>\u8c4a\u5bcc\u306a\u30b5\u30fc\u30c9\u30d1\u30fc\u30c6\u30a3\u30e9\u30a4\u30d6\u30e9\u30ea\u3068\u60c5\u5831\u6e90<\/td><\/tr><\/tbody><\/table><\/figure>\n<\/div>\n\n\n<p>\u5b9f\u52d9\u3067\u306e\u6d3b\u7528\u4f8b\uff1a<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u696d\u52d9\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u958b\u767a<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u5728\u5eab\u7ba1\u7406\u30b7\u30b9\u30c6\u30e0<\/li>\n\n\n\n<li>\u9867\u5ba2\u7ba1\u7406\u30c4\u30fc\u30eb<\/li>\n\n\n\n<li>\u30c7\u30fc\u30bf\u5206\u6790\u30c0\u30c3\u30b7\u30e5\u30dc\u30fc\u30c9<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u79d1\u5b66\u6280\u8853\u8a08\u7b97\u30c4\u30fc\u30eb<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u30c7\u30fc\u30bf\u53ef\u8996\u5316\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3<\/li>\n\n\n\n<li>\u30b7\u30df\u30e5\u30ec\u30fc\u30b7\u30e7\u30f3\u30c4\u30fc\u30eb<\/li>\n\n\n\n<li>\u8a08\u6e2c\u6a5f\u5668\u5236\u5fa1\u30bd\u30d5\u30c8\u30a6\u30a7\u30a2<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u30de\u30eb\u30c1\u30e1\u30c7\u30a3\u30a2\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u30e1\u30c7\u30a3\u30a2\u30d7\u30ec\u30fc\u30e4\u30fc<\/li>\n\n\n\n<li>\u753b\u50cf\u7de8\u96c6\u30c4\u30fc\u30eb<\/li>\n\n\n\n<li>\u6559\u80b2\u7528\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u30b3\u30f3\u30c6\u30f3\u30c4<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<p>JavaFX\u306f\u3001\u7279\u306b\u4ee5\u4e0b\u306e\u958b\u767a\u8005\u306b\u6700\u9069\u3067\u3059\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30a8\u30f3\u30bf\u30fc\u30d7\u30e9\u30a4\u30ba\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u958b\u767a\u8005<\/li>\n\n\n\n<li>\u30c7\u30b9\u30af\u30c8\u30c3\u30d7\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u958b\u767a\u8005<\/li>\n\n\n\n<li>\u30af\u30ed\u30b9\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u958b\u767a\u8005<\/li>\n\n\n\n<li>\u30ea\u30c3\u30c1\u30af\u30e9\u30a4\u30a2\u30f3\u30c8UI\u3092\u5fc5\u8981\u3068\u3059\u308b\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u30c1\u30fc\u30e0<\/li>\n<\/ul>\n\n\n\n<p>JavaFX\u306e\u5b66\u7fd2\u306f\u3001\u73fe\u4ee3\u306e\u30c7\u30b9\u30af\u30c8\u30c3\u30d7\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u958b\u767a\u306b\u304a\u3044\u3066\u91cd\u8981\u306a\u30b9\u30ad\u30eb\u3068\u306a\u3063\u3066\u3044\u307e\u3059\u3002\u7279\u306b\u3001Java\u306e\u77e5\u8b58\u3092\u6d3b\u304b\u3057\u306a\u304c\u3089\u30e2\u30c0\u30f3\u306aUI\u3092\u958b\u767a\u3057\u305f\u3044\u5834\u5408\u3001JavaFX\u306f\u6700\u9069\u306a\u9078\u629e\u80a2\u3068\u306a\u308b\u3067\u3057\u3087\u3046\u3002<\/p>\n\n\n\n<h1 class=\"wp-block-heading\" id=\"i-4\">JavaFX\u958b\u767a\u74b0\u5883\u306e\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u624b\u9806<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-5\">\u5fc5\u8981\u306a\u30c4\u30fc\u30eb\u3068SDK\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u65b9\u6cd5<\/h2>\n\n\n\n<p>JavaFX\u958b\u767a\u74b0\u5883\u3092\u69cb\u7bc9\u3059\u308b\u305f\u3081\u306b\u3001\u4ee5\u4e0b\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304c\u5fc5\u8981\u3067\u3059\uff1a<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Java Development Kit (JDK) 17\u4ee5\u964d<\/strong>\n<ul class=\"wp-block-list\">\n<li>OpenJDK\u307e\u305f\u306fOracle JDK\u3092\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9<\/li>\n\n\n\n<li>JAVA_HOME\u74b0\u5883\u5909\u6570\u306e\u8a2d\u5b9a\u304c\u5fc5\u8981<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>JavaFX SDK<\/strong>\n<ul class=\"wp-block-list\">\n<li>OpenJFX\u306e\u516c\u5f0f\u30b5\u30a4\u30c8\u304b\u3089\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9<\/li>\n\n\n\n<li>\u30d0\u30fc\u30b8\u30e7\u30f3\u306fJDK\u3068\u4e92\u63db\u6027\u306e\u3042\u308b\u3082\u306e\u3092\u9078\u629e<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u7d71\u5408\u958b\u767a\u74b0\u5883\uff08IDE\uff09<\/strong>\n<ul class=\"wp-block-list\">\n<li>IntelliJ IDEA<\/li>\n\n\n\n<li>Eclipse<\/li>\n\n\n\n<li>NetBeans<br>\u306e\u3044\u305a\u308c\u304b\u3092\u63a8\u5968<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<p>\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u624b\u9806\uff1a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\"># 1. JDK\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u78ba\u8a8d\njava -version\n\n# 2. JAVA_HOME\u74b0\u5883\u5909\u6570\u306e\u8a2d\u5b9a\n# Windows\nset JAVA_HOME=C:\\Program Files\\Java\\jdk-17\n\n# macOS\/Linux\nexport JAVA_HOME=\/Library\/Java\/JavaVirtualMachines\/jdk-17.jdk\/Contents\/Home\n\n# 3. PATH\u74b0\u5883\u5909\u6570\u306e\u66f4\u65b0\n# Windows\nset PATH=%JAVA_HOME%\\bin;%PATH%\n\n# macOS\/Linux\nexport PATH=$JAVA_HOME\/bin:$PATH<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-6\">IDE\u306e\u8a2d\u5b9a\u3068\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u4f5c\u6210\u306e\u30b9\u30c6\u30c3\u30d7<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-7\">IntelliJ IDEA\u3067\u306e\u8a2d\u5b9a<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u4f5c\u6210\uff1a<\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!-- pom.xml \u306e\u4f9d\u5b58\u95a2\u4fc2\u8a2d\u5b9a --&gt;\n&lt;dependency&gt;\n    &lt;groupId&gt;org.openjfx&lt;\/groupId&gt;\n    &lt;artifactId&gt;javafx-controls&lt;\/artifactId&gt;\n    &lt;version&gt;21&lt;\/version&gt;\n&lt;\/dependency&gt;\n&lt;dependency&gt;\n    &lt;groupId&gt;org.openjfx&lt;\/groupId&gt;\n    &lt;artifactId&gt;javafx-fxml&lt;\/artifactId&gt;\n    &lt;version&gt;21&lt;\/version&gt;\n&lt;\/dependency&gt;<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li>Maven\u8a2d\u5b9a\u306e\u8ffd\u52a0\uff1a<\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;plugin&gt;\n    &lt;groupId&gt;org.openjfx&lt;\/groupId&gt;\n    &lt;artifactId&gt;javafx-maven-plugin&lt;\/artifactId&gt;\n    &lt;version&gt;0.0.8&lt;\/version&gt;\n    &lt;configuration&gt;\n        &lt;mainClass&gt;com.example.MainApp&lt;\/mainClass&gt;\n    &lt;\/configuration&gt;\n&lt;\/plugin&gt;<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-8\">\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u57fa\u672c\u69cb\u9020<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">src\/\n\u251c\u2500\u2500 main\/\n\u2502   \u251c\u2500\u2500 java\/\n\u2502   \u2502   \u2514\u2500\u2500 com\/\n\u2502   \u2502       \u2514\u2500\u2500 example\/\n\u2502   \u2502           \u251c\u2500\u2500 MainApp.java\n\u2502   \u2502           \u2514\u2500\u2500 controller\/\n\u2502   \u2514\u2500\u2500 resources\/\n\u2502       \u251c\u2500\u2500 fxml\/\n\u2502       \u2514\u2500\u2500 css\/<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-9\">\u30c8\u30e9\u30d6\u30eb\u30b7\u30e5\u30fc\u30c6\u30a3\u30f3\u30b0\u3068\u6ce8\u610f\u70b9<\/h2>\n\n\n\n<p>\u3088\u304f\u3042\u308b\u554f\u984c\u3068\u89e3\u6c7a\u7b56\uff1a<\/p>\n\n\n<div id=\"id-6b5d7086-3e1e-4b3d-a0fc-4255f0c4f07f\">\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\u554f\u984c<\/th><th>\u89e3\u6c7a\u7b56<\/th><\/tr><\/thead><tbody><tr><td>JavaFX\u30e9\u30f3\u30bf\u30a4\u30e0\u304c\u898b\u3064\u304b\u3089\u306a\u3044<\/td><td>\u30e2\u30b8\u30e5\u30fc\u30eb\u30d1\u30b9\u306e\u8a2d\u5b9a\u3092\u78ba\u8a8d<\/td><\/tr><tr><td>FXML\u30d5\u30a1\u30a4\u30eb\u304c\u8aad\u307f\u8fbc\u3081\u306a\u3044<\/td><td>\u30ea\u30bd\u30fc\u30b9\u30d1\u30b9\u306e\u6307\u5b9a\u65b9\u6cd5\u3092\u78ba\u8a8d<\/td><\/tr><tr><td>\u5b9f\u884c\u6642\u306b\u30a8\u30e9\u30fc\u304c\u767a\u751f<\/td><td>VM\u30aa\u30d7\u30b7\u30e7\u30f3\u306e\u8a2d\u5b9a\u3092\u78ba\u8a8d<\/td><\/tr><\/tbody><\/table><\/figure>\n<\/div>\n\n\n<p class=\"is-style-sango-paragraph-exclamation-alt\">\u91cd\u8981\u306a\u6ce8\u610f\u70b9\uff1a<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30e2\u30b8\u30e5\u30fc\u30eb\u5316\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u5834\u5408<\/strong>\n<ul class=\"wp-block-list\">\n<li>module-info.java\u30d5\u30a1\u30a4\u30eb\u306e\u9069\u5207\u306a\u8a2d\u5b9a<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">   module com.example {\n       requires javafx.controls;\n       requires javafx.fxml;\n\n       opens com.example to javafx.fxml;\n       exports com.example;\n   }<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>\u975e\u30e2\u30b8\u30e5\u30fc\u30eb\u5316\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u5834\u5408<\/strong>\n<ul class=\"wp-block-list\">\n<li>VM\u5f15\u6570\u306e\u8a2d\u5b9a<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">   --add-modules javafx.controls,javafx.fxml<\/pre>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><strong>\u30af\u30ed\u30b9\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0\u958b\u767a\u6642\u306e\u6ce8\u610f<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u30d1\u30b9\u306e\u533a\u5207\u308a\u6587\u5b57\u306f<code>\/<\/code>\u3092\u4f7f\u7528<\/li>\n\n\n\n<li>\u30ea\u30bd\u30fc\u30b9\u306e\u30d1\u30b9\u306f\u76f8\u5bfe\u30d1\u30b9\u3067\u6307\u5b9a<\/li>\n\n\n\n<li>\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0\u56fa\u6709\u306e\u6a5f\u80fd\u306f\u9069\u5207\u306b\u5206\u96e2<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<p class=\"is-style-sango-paragraph-idea-alt\">\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u6642\u306e\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u6700\u65b0\u306e\u5b89\u5b9a\u7248\u3092\u4f7f\u7528<\/li>\n\n\n\n<li>\u4f9d\u5b58\u95a2\u4fc2\u306e\u7ba1\u7406\u306bMaven\u304bGradle\u3092\u4f7f\u7528<\/li>\n\n\n\n<li>\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u306e\u6d3b\u7528<\/li>\n\n\n\n<li>\u30d0\u30fc\u30b8\u30e7\u30f3\u4e92\u63db\u6027\u306e\u78ba\u8a8d<\/li>\n<\/ul>\n\n\n\n<h1 class=\"wp-block-heading\" id=\"i-10\">JavaFX\u306e\u57fa\u672c\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3068\u30ec\u30a4\u30a2\u30a6\u30c8<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-11\">\u4e3b\u8981\u306aUI\u30b3\u30f3\u30c8\u30ed\u30fc\u30eb\u306e\u4f7f\u3044\u65b9<\/h2>\n\n\n\n<p>JavaFX\u306f\u8c4a\u5bcc\u306aUI\u30b3\u30f3\u30c8\u30ed\u30fc\u30eb\u3092\u63d0\u4f9b\u3057\u3066\u304a\u308a\u3001\u30e2\u30c0\u30f3\u306a\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u958b\u767a\u306b\u5fc5\u8981\u306a\u8981\u7d20\u304c\u63c3\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-12\">\u57fa\u672c\u7684\u306a\u30b3\u30f3\u30c8\u30ed\u30fc\u30eb<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30c6\u30ad\u30b9\u30c8\u95a2\u9023\u30b3\u30f3\u30c8\u30ed\u30fc\u30eb<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ \u30e9\u30d9\u30eb - \u9759\u7684\u30c6\u30ad\u30b9\u30c8\u306e\u8868\u793a\nLabel label = new Label(\"Hello JavaFX\");\nlabel.setStyle(\"-fx-font-size: 14px;\");\n\n\/\/ \u30c6\u30ad\u30b9\u30c8\u30d5\u30a3\u30fc\u30eb\u30c9 - \u5358\u884c\u30c6\u30ad\u30b9\u30c8\u5165\u529b\nTextField textField = new TextField();\ntextField.setPromptText(\"\u30e6\u30fc\u30b6\u30fc\u540d\u3092\u5165\u529b\"); \/\/ \u30d7\u30ec\u30fc\u30b9\u30db\u30eb\u30c0\u30fc\n\n\/\/ \u30c6\u30ad\u30b9\u30c8\u30a8\u30ea\u30a2 - \u8907\u6570\u884c\u30c6\u30ad\u30b9\u30c8\u5165\u529b\nTextArea textArea = new TextArea();\ntextArea.setPrefRowCount(5); \/\/ \u63a8\u5968\u884c\u6570\u306e\u8a2d\u5b9a<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>\u30dc\u30bf\u30f3\u3068\u9078\u629e\u30b3\u30f3\u30c8\u30ed\u30fc\u30eb<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ \u6a19\u6e96\u30dc\u30bf\u30f3\nButton button = new Button(\"\u30af\u30ea\u30c3\u30af\");\nbutton.setOnAction(e -&gt; System.out.println(\"\u30dc\u30bf\u30f3\u304c\u30af\u30ea\u30c3\u30af\u3055\u308c\u307e\u3057\u305f\"));\n\n\/\/ \u30c1\u30a7\u30c3\u30af\u30dc\u30c3\u30af\u30b9\nCheckBox checkBox = new CheckBox(\"\u30aa\u30d7\u30b7\u30e7\u30f3\u3092\u6709\u52b9\u5316\");\ncheckBox.selectedProperty().addListener((obs, oldVal, newVal) -&gt; {\n    System.out.println(\"\u9078\u629e\u72b6\u614b: \" + newVal);\n});\n\n\/\/ \u30e9\u30b8\u30aa\u30dc\u30bf\u30f3\nToggleGroup group = new ToggleGroup();\nRadioButton radio1 = new RadioButton(\"\u30aa\u30d7\u30b7\u30e7\u30f31\");\nRadioButton radio2 = new RadioButton(\"\u30aa\u30d7\u30b7\u30e7\u30f32\");\nradio1.setToggleGroup(group);\nradio2.setToggleGroup(group);<\/pre>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><strong>\u30ea\u30b9\u30c8\u3068\u8868\u793a\u30b3\u30f3\u30c8\u30ed\u30fc\u30eb<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ \u30ea\u30b9\u30c8\u30d3\u30e5\u30fc\nListView&lt;String&gt; listView = new ListView&lt;&gt;();\nlistView.getItems().addAll(\"\u9805\u76ee1\", \"\u9805\u76ee2\", \"\u9805\u76ee3\");\n\n\/\/ \u30c6\u30fc\u30d6\u30eb\u30d3\u30e5\u30fc\nTableView&lt;Person&gt; tableView = new TableView&lt;&gt;();\nTableColumn&lt;Person, String&gt; nameCol = new TableColumn&lt;&gt;(\"\u540d\u524d\");\nnameCol.setCellValueFactory(new PropertyValueFactory&lt;&gt;(\"name\"));\ntableView.getColumns().add(nameCol);<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-13\">\u52b9\u679c\u7684\u306a\u30ec\u30a4\u30a2\u30a6\u30c8\u8a2d\u8a08\u306e\u30c6\u30af\u30cb\u30c3\u30af<\/h2>\n\n\n\n<p>JavaFX\u306f\u69d8\u3005\u306a\u30ec\u30a4\u30a2\u30a6\u30c8\u30da\u30a4\u30f3\u3092\u63d0\u4f9b\u3057\u3001UI\u306e\u67d4\u8edf\u306a\u914d\u7f6e\u304c\u53ef\u80fd\u3067\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-14\">\u4e3b\u8981\u306a\u30ec\u30a4\u30a2\u30a6\u30c8\u30da\u30a4\u30f3<\/h3>\n\n\n<div id=\"id-7f146cd2-65a8-43bc-ba85-31219dd68da9\">\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\u30ec\u30a4\u30a2\u30a6\u30c8\u30da\u30a4\u30f3<\/th><th>\u7279\u5fb4<\/th><th>\u4f7f\u7528\u5834\u9762<\/th><\/tr><\/thead><tbody><tr><td>VBox<\/td><td>\u8981\u7d20\u3092\u5782\u76f4\u306b\u914d\u7f6e<\/td><td>\u30d5\u30a9\u30fc\u30e0\u3001\u30e1\u30cb\u30e5\u30fc<\/td><\/tr><tr><td>HBox<\/td><td>\u8981\u7d20\u3092\u6c34\u5e73\u306b\u914d\u7f6e<\/td><td>\u30c4\u30fc\u30eb\u30d0\u30fc\u3001\u30b9\u30c6\u30fc\u30bf\u30b9\u30d0\u30fc<\/td><\/tr><tr><td>GridPane<\/td><td>\u683c\u5b50\u72b6\u306b\u914d\u7f6e<\/td><td>\u8907\u96d1\u306a\u30d5\u30a9\u30fc\u30e0\u3001\u30c0\u30c3\u30b7\u30e5\u30dc\u30fc\u30c9<\/td><\/tr><tr><td>BorderPane<\/td><td>5\u3064\u306e\u9818\u57df\u306b\u914d\u7f6e<\/td><td>\u30e1\u30a4\u30f3\u30ec\u30a4\u30a2\u30a6\u30c8<\/td><\/tr><tr><td>StackPane<\/td><td>\u8981\u7d20\u3092\u91cd\u306d\u3066\u914d\u7f6e<\/td><td>\u30aa\u30fc\u30d0\u30fc\u30ec\u30a4\u3001\u30ab\u30fc\u30c9<\/td><\/tr><\/tbody><\/table><\/figure>\n<\/div>\n\n\n<p>\u5b9f\u88c5\u4f8b\uff1a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ \u8907\u5408\u30ec\u30a4\u30a2\u30a6\u30c8\u306e\u4f5c\u6210\npublic class ComplexLayout extends Application {\n    @Override\n    public void start(Stage primaryStage) {\n        \/\/ \u30e1\u30a4\u30f3\u30ec\u30a4\u30a2\u30a6\u30c8\n        BorderPane root = new BorderPane();\n\n        \/\/ \u30c4\u30fc\u30eb\u30d0\u30fc\uff08\u4e0a\u90e8\uff09\n        HBox toolbar = new HBox(10); \/\/ spacing = 10\n        toolbar.getChildren().addAll(\n            new Button(\"\u65b0\u898f\"),\n            new Button(\"\u958b\u304f\"),\n            new Button(\"\u4fdd\u5b58\")\n        );\n        root.setTop(toolbar);\n\n        \/\/ \u30b5\u30a4\u30c9\u30e1\u30cb\u30e5\u30fc\uff08\u5de6\u5074\uff09\n        VBox sidebar = new VBox(10);\n        sidebar.getChildren().addAll(\n            new Label(\"\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\"),\n            new ListView&lt;&gt;()\n        );\n        root.setLeft(sidebar);\n\n        \/\/ \u30e1\u30a4\u30f3\u30b3\u30f3\u30c6\u30f3\u30c4\uff08\u4e2d\u592e\uff09\n        GridPane content = new GridPane();\n        content.setHgap(10);\n        content.setVgap(10);\n        content.addRow(0, new Label(\"\u540d\u524d:\"), new TextField());\n        content.addRow(1, new Label(\"\u8aac\u660e:\"), new TextArea());\n        root.setCenter(content);\n\n        Scene scene = new Scene(root, 800, 600);\n        primaryStage.setScene(scene);\n        primaryStage.show();\n    }\n}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-15\">\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u30c7\u30b6\u30a4\u30f3\u306e\u5b9f\u88c5\u65b9\u6cd5<\/h2>\n\n\n\n<p>JavaFX\u3067\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u306aUI\u3092\u5b9f\u73fe\u3059\u308b\u305f\u3081\u306e\u4e3b\u8981\u306a\u30c6\u30af\u30cb\u30c3\u30af\uff1a<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30d0\u30a4\u30f3\u30c7\u30a3\u30f3\u30b0\u3092\u4f7f\u7528\u3057\u305f\u30b5\u30a4\u30ba\u5236\u5fa1<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ \u30a6\u30a3\u30f3\u30c9\u30a6\u30b5\u30a4\u30ba\u306b\u5fdc\u3058\u3066\u8981\u7d20\u306e\u30b5\u30a4\u30ba\u3092\u8abf\u6574\ncontent.prefWidthProperty().bind(scene.widthProperty().multiply(0.8));\ncontent.prefHeightProperty().bind(scene.heightProperty().multiply(0.8));<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>\u52d5\u7684\u306a\u30ec\u30a4\u30a2\u30a6\u30c8\u8abf\u6574<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">public class ResponsiveLayout extends Application {\n    @Override\n    public void start(Stage stage) {\n        StackPane root = new StackPane();\n\n        \/\/ \u30ec\u30a4\u30a2\u30a6\u30c8\u306e\u5207\u308a\u66ff\u3048\n        scene.widthProperty().addListener((obs, oldVal, newVal) -&gt; {\n            if (newVal.doubleValue() &lt; 600) {\n                \/\/ \u72ed\u3044\u753b\u9762\u7528\u30ec\u30a4\u30a2\u30a6\u30c8\n                switchToNarrowLayout();\n            } else {\n                \/\/ \u5e83\u3044\u753b\u9762\u7528\u30ec\u30a4\u30a2\u30a6\u30c8\n                switchToWideLayout();\n            }\n        });\n    }\n\n    private void switchToNarrowLayout() {\n        \/\/ \u30e2\u30d0\u30a4\u30eb\u5411\u3051\u30ec\u30a4\u30a2\u30a6\u30c8\u306e\u5b9f\u88c5\n    }\n\n    private void switchToWideLayout() {\n        \/\/ \u30c7\u30b9\u30af\u30c8\u30c3\u30d7\u5411\u3051\u30ec\u30a4\u30a2\u30a6\u30c8\u306e\u5b9f\u88c5\n    }\n}<\/pre>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><strong>\u30b5\u30a4\u30ba\u30af\u30e9\u30b9\u306e\u6d3b\u7528<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30b5\u30a4\u30ba\u5236\u7d04\nNode component = new Button(\"\u30b5\u30a4\u30ba\u8abf\u6574\u53ef\u80fd\");\ncomponent.setMinSize(100, 50);\ncomponent.setPrefSize(200, 100);\ncomponent.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);<\/pre>\n\n\n\n<p class=\"is-style-sango-paragraph-idea-alt\">\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u30c7\u30b6\u30a4\u30f3\u306e\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30d5\u30ec\u30c3\u30af\u30b9\u30b0\u30ed\u30a6\u3092\u9069\u5207\u306b\u8a2d\u5b9a<\/li>\n\n\n\n<li>\u30d1\u30fc\u30bb\u30f3\u30c6\u30fc\u30b8\u30d9\u30fc\u30b9\u306e\u30b5\u30a4\u30ba\u6307\u5b9a<\/li>\n\n\n\n<li>\u52d5\u7684\u306a\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u8868\u793a\/\u975e\u8868\u793a\u306e\u5236\u5fa1<\/li>\n\n\n\n<li>\u30e1\u30c7\u30a3\u30a2\u30af\u30a8\u30ea\u306b\u76f8\u5f53\u3059\u308b\u753b\u9762\u30b5\u30a4\u30ba\u691c\u77e5<\/li>\n\n\n\n<li>\u30b0\u30ea\u30c3\u30c9\u30b7\u30b9\u30c6\u30e0\u306e\u6d3b\u7528<\/li>\n<\/ul>\n\n\n\n<p>\u3053\u308c\u3089\u306e\u6280\u8853\u3092\u7d44\u307f\u5408\u308f\u305b\u308b\u3053\u3068\u3067\u3001\u69d8\u3005\u306a\u753b\u9762\u30b5\u30a4\u30ba\u306b\u5bfe\u5fdc\u3059\u308b\u67d4\u8edf\u306aUI\u3092\u5b9f\u73fe\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<h1 class=\"wp-block-heading\" id=\"i-16\">FXML\u3092\u4f7f\u7528\u3057\u305fUI\u8a2d\u8a08\u306e\u5b9f\u8df5<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-17\">Scene Builder\u306e\u52b9\u7387\u7684\u306a\u6d3b\u7528\u6cd5<\/h2>\n\n\n\n<p>Scene Builder\u306f\u3001JavaFX\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306eUI\u3092\u30d3\u30b8\u30e5\u30a2\u30eb\u306b\u8a2d\u8a08\u3067\u304d\u308b\u5f37\u529b\u306a\u30c4\u30fc\u30eb\u3067\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-18\">Scene Builder\u306e\u4e3b\u8981\u6a5f\u80fd<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u30e9\u30a4\u30d6\u30e9\u30ea<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u6a19\u6e96\u30b3\u30f3\u30c8\u30ed\u30fc\u30eb\u306e\u30c9\u30e9\u30c3\u30b0\uff06\u30c9\u30ed\u30c3\u30d7<\/li>\n\n\n\n<li>\u30ab\u30b9\u30bf\u30e0\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u8ffd\u52a0<\/li>\n\n\n\n<li>\u30b3\u30f3\u30c6\u30ca\u30ec\u30a4\u30a2\u30a6\u30c8\u306e\u8996\u899a\u7684\u306a\u8a2d\u5b9a<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u30d7\u30ed\u30d1\u30c6\u30a3\u30a8\u30c7\u30a3\u30bf<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u30b9\u30bf\u30a4\u30eb\u8a2d\u5b9a<\/li>\n\n\n\n<li>\u30ec\u30a4\u30a2\u30a6\u30c8\u5236\u7d04\u306e\u8abf\u6574<\/li>\n\n\n\n<li>\u30a4\u30d9\u30f3\u30c8\u30cf\u30f3\u30c9\u30e9\u30fc\u306e\u5272\u308a\u5f53\u3066<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-19\">\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u69cb\u6210\u4f8b<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">src\/\n\u251c\u2500\u2500 main\/\n\u2502   \u251c\u2500\u2500 java\/\n\u2502   \u2502   \u2514\u2500\u2500 com\/example\/\n\u2502   \u2502       \u251c\u2500\u2500 MainApp.java\n\u2502   \u2502       \u251c\u2500\u2500 controller\/\n\u2502   \u2502       \u2502   \u2514\u2500\u2500 MainController.java\n\u2502   \u2502       \u2514\u2500\u2500 model\/\n\u2502   \u2502           \u2514\u2500\u2500 DataModel.java\n\u2502   \u2514\u2500\u2500 resources\/\n\u2502       \u251c\u2500\u2500 fxml\/\n\u2502       \u2502   \u2514\u2500\u2500 main.fxml\n\u2502       \u2514\u2500\u2500 css\/\n\u2502           \u2514\u2500\u2500 styles.css<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-20\">FXML\u3068\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u306e\u9023\u643a\u624b\u6cd5<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-21\">FXML\u57fa\u672c\u69cb\u9020<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;?xml version=\"1.0\" encoding=\"UTF-8\"?&gt;\n&lt;?import javafx.scene.layout.VBox?&gt;\n&lt;?import javafx.scene.control.Button?&gt;\n&lt;?import javafx.scene.control.TextField?&gt;\n\n&lt;VBox xmlns:fx=\"http:\/\/javafx.com\/fxml\" \n      fx:controller=\"com.example.controller.MainController\"\n      spacing=\"10\" alignment=\"CENTER\"&gt;\n\n    &lt;TextField fx:id=\"nameField\" promptText=\"\u540d\u524d\u3092\u5165\u529b\"\/&gt;\n    &lt;Button text=\"\u9001\u4fe1\" onAction=\"#handleSubmit\"\/&gt;\n\n&lt;\/VBox&gt;<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-22\">\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u30af\u30e9\u30b9\u306e\u5b9f\u88c5<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">public class MainController {\n    @FXML\n    private TextField nameField;\n\n    @FXML\n    private void initialize() {\n        \/\/ \u521d\u671f\u5316\u51e6\u7406\n        nameField.setPromptText(\"\u30d5\u30eb\u30cd\u30fc\u30e0\u3092\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044\");\n    }\n\n    @FXML\n    private void handleSubmit() {\n        String name = nameField.getText();\n        System.out.println(\"\u5165\u529b\u3055\u308c\u305f\u540d\u524d: \" + name);\n    }\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-23\">FXML\u30ed\u30fc\u30c0\u30fc\u306e\u4f7f\u7528<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">public class MainApp extends Application {\n    @Override\n    public void start(Stage primaryStage) {\n        try {\n            \/\/ FXML\u30d5\u30a1\u30a4\u30eb\u306e\u30ed\u30fc\u30c9\n            FXMLLoader loader = new FXMLLoader(\n                getClass().getResource(\"\/fxml\/main.fxml\")\n            );\n            Parent root = loader.load();\n\n            \/\/ \u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u306e\u53d6\u5f97\n            MainController controller = loader.getController();\n\n            \/\/ \u30b7\u30fc\u30f3\u306e\u8a2d\u5b9a\n            Scene scene = new Scene(root);\n            primaryStage.setScene(scene);\n            primaryStage.show();\n\n        } catch (IOException e) {\n            e.printStackTrace();\n        }\n    }\n}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-24\">\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9\u3068\u30b3\u30fc\u30c9\u4f8b<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-25\">1. \u30a4\u30f3\u30b8\u30a7\u30af\u30b7\u30e7\u30f3\u65b9\u5f0f\u306e\u6d3b\u7528<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">public class AdvancedController {\n    @FXML private TextField userInput;\n    @FXML private Label resultLabel;\n    @FXML private Button submitButton;\n\n    private Service&lt;String&gt; backendService;\n\n    @Inject\n    public void setService(Service&lt;String&gt; service) {\n        this.backendService = service;\n    }\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-26\">2. \u30ab\u30b9\u30bf\u30e0\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u4f5c\u6210<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ CustomComponent.fxml\n&lt;fx:root type=\"VBox\" xmlns:fx=\"http:\/\/javafx.com\/fxml\"&gt;\n    &lt;Label fx:id=\"title\"\/&gt;\n    &lt;TextField fx:id=\"input\"\/&gt;\n&lt;\/fx:root&gt;\n\n\/\/ CustomComponent.java\npublic class CustomComponent extends VBox {\n    @FXML private Label title;\n    @FXML private TextField input;\n\n    public CustomComponent() {\n        FXMLLoader loader = new FXMLLoader(getClass().getResource(\"CustomComponent.fxml\"));\n        loader.setRoot(this);\n        loader.setController(this);\n\n        try {\n            loader.load();\n        } catch (IOException e) {\n            throw new RuntimeException(e);\n        }\n    }\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-27\">3. \u30a4\u30d9\u30f3\u30c8\u30cf\u30f3\u30c9\u30ea\u30f3\u30b0\u306e\u30d1\u30bf\u30fc\u30f3<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">public class EventHandlingController {\n    @FXML\n    private void initialize() {\n        \/\/ \u30d7\u30ed\u30d1\u30c6\u30a3\u30d0\u30a4\u30f3\u30c7\u30a3\u30f3\u30b0\n        resultLabel.textProperty().bind(\n            Bindings.when(checkbox.selectedProperty())\n                .then(\"\u9078\u629e\u6e08\u307f\")\n                .otherwise(\"\u672a\u9078\u629e\")\n        );\n\n        \/\/ \u30a4\u30d9\u30f3\u30c8\u30cf\u30f3\u30c9\u30e9\u30fc\n        button.setOnAction(event -&gt; {\n            \/\/ \u975e\u540c\u671f\u51e6\u7406\n            CompletableFuture.supplyAsync(this::processData)\n                .thenAcceptAsync(result -&gt; {\n                    Platform.runLater(() -&gt; {\n                        resultLabel.setText(result);\n                    });\n                });\n        });\n    }\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-28\">FXML\u30c7\u30b6\u30a4\u30f3\u306e\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u547d\u540d\u898f\u5247\u306e\u7d71\u4e00<\/strong>\n<ul class=\"wp-block-list\">\n<li>fx:id \u306f\u610f\u5473\u306e\u3042\u308b\u540d\u524d\u3092\u4f7f\u7528<\/li>\n\n\n\n<li>\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u30e1\u30bd\u30c3\u30c9\u306f\u52d5\u8a5e\u3067\u958b\u59cb<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u30e2\u30b8\u30e5\u30fc\u30eb\u5316<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u518d\u5229\u7528\u53ef\u80fd\u306a\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092FXML\u3067\u5206\u5272<\/li>\n\n\n\n<li>\u30ab\u30b9\u30bf\u30e0\u30b3\u30f3\u30c8\u30ed\u30fc\u30eb\u306e\u6d3b\u7528<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u30ec\u30a4\u30a2\u30a6\u30c8\u306e\u6700\u9069\u5316<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u9069\u5207\u306a\u30da\u30a4\u30f3\u306e\u9078\u629e<\/li>\n\n\n\n<li>\u30a2\u30f3\u30ab\u30fc\u30da\u30a4\u30f3\u306e\u5236\u7d04\u3092\u52b9\u679c\u7684\u306b\u4f7f\u7528<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u30b9\u30bf\u30a4\u30ea\u30f3\u30b0<\/strong>\n<ul class=\"wp-block-list\">\n<li>CSS\u30af\u30e9\u30b9\u306e\u6d3b\u7528<\/li>\n\n\n\n<li>\u30a4\u30f3\u30e9\u30a4\u30f3\u30b9\u30bf\u30a4\u30eb\u306e\u6700\u5c0f\u5316<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<h1 class=\"wp-block-heading\" id=\"i-29\">\u30a4\u30d9\u30f3\u30c8\u51e6\u7406\u3068\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306e\u5b9f\u88c5<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-30\">\u52b9\u679c\u7684\u306a\u30a4\u30d9\u30f3\u30c8\u30cf\u30f3\u30c9\u30ea\u30f3\u30b0\u306e\u65b9\u6cd5<\/h2>\n\n\n\n<p>JavaFX\u306e\u30a4\u30d9\u30f3\u30c8\u30b7\u30b9\u30c6\u30e0\u306f\u3001\u30e6\u30fc\u30b6\u30fc\u30a4\u30f3\u30bf\u30e9\u30af\u30b7\u30e7\u30f3\u3092\u51e6\u7406\u3059\u308b\u305f\u3081\u306e\u5f37\u529b\u306a\u6a5f\u80fd\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-31\">\u57fa\u672c\u7684\u306a\u30a4\u30d9\u30f3\u30c8\u51e6\u7406<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">public class EventHandlingExample {\n    @FXML\n    private Button actionButton;\n    @FXML\n    private TextField inputField;\n\n    @FXML\n    private void initialize() {\n        \/\/ \u30e1\u30bd\u30c3\u30c9\u53c2\u7167\u3092\u4f7f\u7528\u3057\u305f\u30a4\u30d9\u30f3\u30c8\u30cf\u30f3\u30c9\u30e9\u30fc\n        actionButton.setOnAction(this::handleButtonClick);\n\n        \/\/ \u30e9\u30e0\u30c0\u5f0f\u3092\u4f7f\u7528\u3057\u305f\u30a4\u30d9\u30f3\u30c8\u30cf\u30f3\u30c9\u30e9\u30fc\n        inputField.setOnKeyPressed(event -&gt; {\n            if (event.getCode() == KeyCode.ENTER) {\n                processInput();\n            }\n        });\n    }\n\n    private void handleButtonClick(ActionEvent event) {\n        \/\/ \u30a4\u30d9\u30f3\u30c8\u306e\u767a\u751f\u6e90\u3092\u53d6\u5f97\n        Button source = (Button) event.getSource();\n        \/\/ \u30a4\u30d9\u30f3\u30c8\u306e\u4f1d\u64ad\u3092\u505c\u6b62\n        event.consume();\n    }\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-32\">\u30a4\u30d9\u30f3\u30c8\u30d5\u30a3\u30eb\u30bf\u30fc\u3068\u30cf\u30f3\u30c9\u30e9\u30fc<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">public void setupEventHandling(Node node) {\n    \/\/ \u30a4\u30d9\u30f3\u30c8\u30d5\u30a3\u30eb\u30bf\u30fc\uff08\u30ad\u30e3\u30d7\u30c1\u30e3\u30fc\u30d5\u30a7\u30fc\u30ba\uff09\n    node.addEventFilter(MouseEvent.MOUSE_CLICKED, event -&gt; {\n        System.out.println(\"\u30d5\u30a3\u30eb\u30bf\u30fc: \u30af\u30ea\u30c3\u30af\u30a4\u30d9\u30f3\u30c8\u3092\u30ad\u30e3\u30d7\u30c1\u30e3\u30fc\");\n    });\n\n    \/\/ \u30a4\u30d9\u30f3\u30c8\u30cf\u30f3\u30c9\u30e9\u30fc\uff08\u30d0\u30d6\u30ea\u30f3\u30b0\u30d5\u30a7\u30fc\u30ba\uff09\n    node.addEventHandler(MouseEvent.MOUSE_CLICKED, event -&gt; {\n        System.out.println(\"\u30cf\u30f3\u30c9\u30e9\u30fc: \u30af\u30ea\u30c3\u30af\u30a4\u30d9\u30f3\u30c8\u3092\u51e6\u7406\");\n    });\n}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-33\">\u30b9\u30e0\u30fc\u30ba\u306a\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u4f5c\u6210\u306e\u30b3\u30c4<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-34\">1. \u30c8\u30e9\u30f3\u30b8\u30b7\u30e7\u30f3\u306e\u57fa\u672c<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">public class AnimationExample extends Application {\n    @Override\n    public void start(Stage stage) {\n        Rectangle rect = new Rectangle(100, 100, Color.BLUE);\n\n        \/\/ \u30d5\u30a7\u30fc\u30c9\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\n        FadeTransition fade = new FadeTransition(Duration.seconds(2), rect);\n        fade.setFromValue(1.0);\n        fade.setToValue(0.0);\n        fade.setCycleCount(Timeline.INDEFINITE);\n        fade.setAutoReverse(true);\n\n        \/\/ \u79fb\u52d5\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\n        TranslateTransition translate = new TranslateTransition(Duration.seconds(2), rect);\n        translate.setByX(200);\n        translate.setCycleCount(Timeline.INDEFINITE);\n        translate.setAutoReverse(true);\n\n        \/\/ \u30d1\u30e9\u30ec\u30eb\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\n        ParallelTransition parallel = new ParallelTransition(fade, translate);\n        parallel.play();\n    }\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-35\">2. \u30bf\u30a4\u30e0\u30e9\u30a4\u30f3\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">public void createTimeline() {\n    Timeline timeline = new Timeline(\n        new KeyFrame(Duration.ZERO, new KeyValue(node.translateXProperty(), 0)),\n        new KeyFrame(Duration.seconds(1), \n            event -&gt; System.out.println(\"\u4e2d\u9593\u70b9\u5230\u9054\"),\n            new KeyValue(node.translateXProperty(), 100)),\n        new KeyFrame(Duration.seconds(2), new KeyValue(node.translateXProperty(), 0))\n    );\n\n    timeline.setCycleCount(Animation.INDEFINITE);\n    timeline.play();\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-36\">3. \u30ab\u30b9\u30bf\u30e0\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">public class CustomAnimation {\n    private AnimationTimer timer;\n    private long lastUpdate = 0;\n\n    public void startAnimation() {\n        timer = new AnimationTimer() {\n            @Override\n            public void handle(long now) {\n                if (lastUpdate == 0) {\n                    lastUpdate = now;\n                    return;\n                }\n\n                \/\/ \u7d4c\u904e\u6642\u9593\u306e\u8a08\u7b97\uff08\u30ca\u30ce\u79d2\u2192\u79d2\uff09\n                double elapsedSeconds = (now - lastUpdate) \/ 1_000_000_000.0;\n                updateAnimation(elapsedSeconds);\n                lastUpdate = now;\n            }\n        };\n        timer.start();\n    }\n\n    private void updateAnimation(double elapsedSeconds) {\n        \/\/ \u30d5\u30ec\u30fc\u30e0\u3054\u3068\u306e\u66f4\u65b0\u51e6\u7406\n    }\n}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-37\">\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u6700\u9069\u5316\u306e\u30c6\u30af\u30cb\u30c3\u30af<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-38\">1. \u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306e\u6700\u9069\u5316<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">public class OptimizedAnimation {\n    private static final int BUFFER_SIZE = 1000;\n    private final double[] bufferX = new double[BUFFER_SIZE];\n    private final double[] bufferY = new double[BUFFER_SIZE];\n\n    public void optimizeAnimation() {\n        \/\/ \u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u5024\u306e\u4e8b\u524d\u8a08\u7b97\n        for (int i = 0; i &lt; BUFFER_SIZE; i++) {\n            bufferX[i] = Math.cos(i * 0.01) * 100;\n            bufferY[i] = Math.sin(i * 0.01) * 100;\n        }\n\n        \/\/ \u30e1\u30e2\u30ea\u52b9\u7387\u306e\u826f\u3044\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\n        AnimationTimer timer = new AnimationTimer() {\n            private int frame = 0;\n\n            @Override\n            public void handle(long now) {\n                node.setTranslateX(bufferX[frame]);\n                node.setTranslateY(bufferY[frame]);\n                frame = (frame + 1) % BUFFER_SIZE;\n            }\n        };\n    }\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-39\">2. \u30a4\u30d9\u30f3\u30c8\u6700\u9069\u5316<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">public class EventOptimization {\n    \/\/ \u30a4\u30d9\u30f3\u30c8\u306e\u6700\u9069\u5316\n    private final BooleanProperty isDirty = new SimpleBooleanProperty(false);\n    private final Timeline updateTimeline = new Timeline(\n        new KeyFrame(Duration.millis(16), event -&gt; updateUI())\n    );\n\n    public void setupOptimizedEventHandling() {\n        \/\/ \u8907\u6570\u306e\u30a4\u30d9\u30f3\u30c8\u3092\u30d0\u30c3\u30c1\u51e6\u7406\n        isDirty.addListener((obs, old, newValue) -&gt; {\n            if (newValue) {\n                updateTimeline.play();\n            }\n        });\n\n        \/\/ \u30a4\u30d9\u30f3\u30c8\u306e\u30c7\u30d0\u30a6\u30f3\u30b9\n        PauseTransition pause = new PauseTransition(Duration.millis(200));\n        pause.setOnFinished(event -&gt; processInput());\n\n        inputField.textProperty().addListener((obs, old, newValue) -&gt; {\n            pause.playFromStart();\n        });\n    }\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-40\">\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u6700\u9069\u5316\u306e\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30e1\u30e2\u30ea\u7ba1\u7406<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u4e0d\u8981\u306a\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306e\u505c\u6b62<\/li>\n\n\n\n<li>\u30ea\u30bd\u30fc\u30b9\u306e\u9069\u5207\u306a\u89e3\u653e<\/li>\n\n\n\n<li>\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u30d7\u30fc\u30ea\u30f3\u30b0\u306e\u6d3b\u7528<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u6700\u9069\u5316<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u30ad\u30e3\u30c3\u30b7\u30e5\u306e\u9069\u5207\u306a\u4f7f\u7528<\/li>\n\n\n\n<li>\u30af\u30ea\u30c3\u30d4\u30f3\u30b0\u306e\u6d3b\u7528<\/li>\n\n\n\n<li>\u30ec\u30a4\u30e4\u30fc\u5316\u306b\u3088\u308b\u63cf\u753b\u306e\u6700\u9069\u5316<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u30a4\u30d9\u30f3\u30c8\u6700\u9069\u5316<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u30a4\u30d9\u30f3\u30c8\u306e\u30d0\u30c3\u30c1\u51e6\u7406<\/li>\n\n\n\n<li>\u30c7\u30d0\u30a6\u30f3\u30b7\u30f3\u30b0\u3068\u30b9\u30ed\u30c3\u30c8\u30ea\u30f3\u30b0<\/li>\n\n\n\n<li>\u30a4\u30d9\u30f3\u30c8\u30d0\u30d6\u30ea\u30f3\u30b0\u306e\u5236\u5fa1<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<p>\u3053\u308c\u3089\u306e\u30c6\u30af\u30cb\u30c3\u30af\u3092\u9069\u5207\u306b\u7d44\u307f\u5408\u308f\u305b\u308b\u3053\u3068\u3067\u3001\u30b9\u30e0\u30fc\u30ba\u3067\u52b9\u7387\u7684\u306a\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3068\u30a4\u30d9\u30f3\u30c8\u51e6\u7406\u3092\u5b9f\u73fe\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<h1 class=\"wp-block-heading\" id=\"i-41\">CSS\u306b\u3088\u308b\u30b9\u30bf\u30a4\u30ea\u30f3\u30b0\u3068\u30c6\u30fc\u30de\u8a2d\u5b9a<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-42\">JavaFX\u5c02\u7528CSS\u306e\u57fa\u672c\u6587\u6cd5\u3068\u4f7f\u3044\u65b9<\/h2>\n\n\n\n<p>JavaFX\u306eCSS\u306f\u3001Web\u306eCSS\u3068\u4f3c\u305f\u6587\u6cd5\u3092\u6301\u3061\u306a\u304c\u3089\u3001JavaFX\u5c02\u7528\u306e\u6a5f\u80fd\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-43\">\u57fa\u672c\u7684\u306a\u30b9\u30bf\u30a4\u30ea\u30f3\u30b0<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/* styles.css *\/\n.button {\n    -fx-background-color: #2196f3;\n    -fx-text-fill: white;\n    -fx-padding: 8px 16px;\n    -fx-cursor: hand;\n}\n\n.button:hover {\n    -fx-background-color: #1976d2;\n}\n\n.text-field {\n    -fx-background-radius: 4px;\n    -fx-border-color: #e0e0e0;\n    -fx-border-radius: 4px;\n    -fx-padding: 8px;\n}\n\n.label {\n    -fx-font-family: \"Segoe UI\", Arial, sans-serif;\n    -fx-font-size: 14px;\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-44\">CSS\u306e\u9069\u7528\u65b9\u6cd5<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">public class StyleApplication extends Application {\n    @Override\n    public void start(Stage stage) {\n        Scene scene = new Scene(root);\n\n        \/\/ CSS\u30d5\u30a1\u30a4\u30eb\u306e\u9069\u7528\n        scene.getStylesheets().add(\n            getClass().getResource(\"\/css\/styles.css\").toExternalForm()\n        );\n\n        \/\/ \u30a4\u30f3\u30e9\u30a4\u30f3\u30b9\u30bf\u30a4\u30eb\u306e\u9069\u7528\n        button.setStyle(\"-fx-background-color: #ff4081;\");\n\n        \/\/ \u30b9\u30bf\u30a4\u30eb\u30af\u30e9\u30b9\u306e\u8ffd\u52a0\n        node.getStyleClass().add(\"custom-style\");\n    }\n}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-45\">\u30e2\u30c0\u30f3\u306aUI\u30c7\u30b6\u30a4\u30f3\u306e\u5b9f\u88c5\u4f8b<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-46\">1. \u30de\u30c6\u30ea\u30a2\u30eb\u30c7\u30b6\u30a4\u30f3\u30b9\u30bf\u30a4\u30eb<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/* material-theme.css *\/\n.root {\n    -fx-background-color: #fafafa;\n}\n\n\/* \u30a8\u30ec\u30d9\u30fc\u30b7\u30e7\u30f3\u52b9\u679c *\/\n.card {\n    -fx-background-color: white;\n    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.26), 10, 0.12, 0, 4);\n    -fx-background-radius: 4px;\n    -fx-padding: 16px;\n}\n\n\/* \u30d5\u30ed\u30fc\u30c6\u30a3\u30f3\u30b0\u30a2\u30af\u30b7\u30e7\u30f3\u30dc\u30bf\u30f3 *\/\n.fab {\n    -fx-background-color: #ff4081;\n    -fx-background-radius: 28px;\n    -fx-min-width: 56px;\n    -fx-min-height: 56px;\n    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.30), 15, 0.16, 0, 6);\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-47\">2. \u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3068\u30c8\u30e9\u30f3\u30b8\u30b7\u30e7\u30f3<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.button {\n    -fx-transition: -fx-background-color 0.3s ease-in-out;\n}\n\n.text-field:focused {\n    -fx-scale-x: 1.02;\n    -fx-scale-y: 1.02;\n    -fx-transition: -fx-scale-x 0.2s ease-out, -fx-scale-y 0.2s ease-out;\n}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-48\">\u30ab\u30b9\u30bf\u30e0\u30c6\u30fc\u30de\u306e\u4f5c\u6210\u3068\u9069\u7528\u65b9\u6cd5<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-49\">1. \u30c6\u30fc\u30de\u69cb\u9020\u306e\u8a2d\u8a08<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/* theme-variables.css *\/\n* {\n    \/* \u30ab\u30e9\u30fc\u30d1\u30ec\u30c3\u30c8 *\/\n    -theme-primary: #2196f3;\n    -theme-primary-dark: #1976d2;\n    -theme-accent: #ff4081;\n    -theme-text: #212121;\n    -theme-text-light: #757575;\n\n    \/* \u30b5\u30a4\u30ba\u5909\u6570 *\/\n    -theme-spacing-unit: 8px;\n    -theme-border-radius: 4px;\n\n    \/* \u30d5\u30a9\u30f3\u30c8\u8a2d\u5b9a *\/\n    -theme-font-family: \"Segoe UI\";\n    -theme-font-size-normal: 14px;\n    -theme-font-size-large: 16px;\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-50\">2. \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u30b9\u30bf\u30a4\u30eb\u306e\u5b9f\u88c5<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/* custom-theme.css *\/\n@import \"theme-variables.css\";\n\n\/* \u30d9\u30fc\u30b9\u30b9\u30bf\u30a4\u30eb *\/\n.root {\n    -fx-font-family: -theme-font-family;\n    -fx-font-size: -theme-font-size-normal;\n    -fx-background-color: white;\n}\n\n\/* \u30ab\u30b9\u30bf\u30e0\u30dc\u30bf\u30f3\u30b9\u30bf\u30a4\u30eb *\/\n.primary-button {\n    -fx-background-color: -theme-primary;\n    -fx-text-fill: white;\n    -fx-padding: -theme-spacing-unit -theme-spacing-unit * 2;\n    -fx-background-radius: -theme-border-radius;\n}\n\n\/* \u30ab\u30b9\u30bf\u30e0\u30c6\u30ad\u30b9\u30c8\u30d5\u30a3\u30fc\u30eb\u30c9\u30b9\u30bf\u30a4\u30eb *\/\n.themed-text-field {\n    -fx-background-color: white;\n    -fx-border-color: -theme-text-light;\n    -fx-border-radius: -theme-border-radius;\n    -fx-padding: -theme-spacing-unit;\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-51\">3. \u30c6\u30fc\u30de\u306e\u52d5\u7684\u5207\u308a\u66ff\u3048<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">public class ThemeSwitcher {\n    private final Scene scene;\n    private final String lightTheme = \"\/css\/light-theme.css\";\n    private final String darkTheme = \"\/css\/dark-theme.css\";\n\n    public void switchTheme(boolean isDarkMode) {\n        scene.getStylesheets().clear();\n        String theme = isDarkMode ? darkTheme : lightTheme;\n        scene.getStylesheets().add(\n            getClass().getResource(theme).toExternalForm()\n        );\n    }\n\n    public void applyCustomStyles(Node node, String... styles) {\n        node.getStyleClass().addAll(styles);\n    }\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-52\">\u30b9\u30bf\u30a4\u30ea\u30f3\u30b0\u306e\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u968e\u5c64\u69cb\u9020\u306e\u6d3b\u7528<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u610f\u5473\u306e\u3042\u308b\u30af\u30e9\u30b9\u540d\u306e\u4f7f\u7528<\/li>\n\n\n\n<li>\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u968e\u5c64\u306b\u57fa\u3065\u304f\u30bb\u30ec\u30af\u30bf<\/li>\n\n\n\n<li>\u518d\u5229\u7528\u53ef\u80fd\u306a\u30b9\u30bf\u30a4\u30eb\u306e\u4f5c\u6210<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u5909\u6570\u306e\u6d3b\u7528<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u30ab\u30e9\u30fc\u30d1\u30ec\u30c3\u30c8\u306e\u5b9a\u7fa9<\/li>\n\n\n\n<li>\u30b5\u30a4\u30ba\u3068\u30b9\u30da\u30fc\u30b7\u30f3\u30b0\u306e\u6a19\u6e96\u5316<\/li>\n\n\n\n<li>\u30d5\u30a9\u30f3\u30c8\u30d5\u30a1\u30df\u30ea\u30fc\u306e\u4e00\u5143\u7ba1\u7406<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u30e1\u30f3\u30c6\u30ca\u30f3\u30b9\u6027<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u30e2\u30b8\u30e5\u30fc\u30eb\u5316\u3055\u308c\u305fCSS<\/li>\n\n\n\n<li>\u547d\u540d\u898f\u5247\u306e\u7d71\u4e00<\/li>\n\n\n\n<li>\u30b3\u30e1\u30f3\u30c8\u306b\u3088\u308b\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u5316<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u8003\u616e<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u904e\u5ea6\u306b\u8907\u96d1\u306a\u30bb\u30ec\u30af\u30bf\u306e\u56de\u907f<\/li>\n\n\n\n<li>\u9069\u5207\u306a\u30b9\u30b3\u30fc\u30d7\u8a2d\u5b9a<\/li>\n\n\n\n<li>\u52b9\u7387\u7684\u306a\u30b9\u30bf\u30a4\u30eb\u306e\u7d99\u627f<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<h1 class=\"wp-block-heading\" id=\"i-53\">\u30c7\u30fc\u30bf\u30d0\u30a4\u30f3\u30c7\u30a3\u30f3\u30b0\u3068MVVM\u30d1\u30bf\u30fc\u30f3<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-54\">\u52b9\u7387\u7684\u306a\u30c7\u30fc\u30bf\u30d0\u30a4\u30f3\u30c7\u30a3\u30f3\u30b0\u306e\u5b9f\u88c5<\/h2>\n\n\n\n<p>JavaFX\u306e\u30c7\u30fc\u30bf\u30d0\u30a4\u30f3\u30c7\u30a3\u30f3\u30b0\u306f\u3001UI\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3068\u30c7\u30fc\u30bf\u30e2\u30c7\u30eb\u3092\u52b9\u7387\u7684\u306b\u9023\u643a\u3055\u305b\u308b\u6a5f\u80fd\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-55\">1. \u30d7\u30ed\u30d1\u30c6\u30a3\u306e\u57fa\u672c<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">public class Person {\n    \/\/ \u5358\u7d14\u306aStringProperty\u306e\u4f8b\n    private final StringProperty name = new SimpleStringProperty();\n    public StringProperty nameProperty() {\n        return name;\n    }\n    public String getName() {\n        return name.get();\n    }\n    public void setName(String value) {\n        name.set(value);\n    }\n\n    \/\/ \u6570\u5024\u30d7\u30ed\u30d1\u30c6\u30a3\u306e\u4f8b\n    private final IntegerProperty age = new SimpleIntegerProperty();\n    public IntegerProperty ageProperty() {\n        return age;\n    }\n    public int getAge() {\n        return age.get();\n    }\n    public void setAge(int value) {\n        age.set(value);\n    }\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-56\">2. \u53cc\u65b9\u5411\u30d0\u30a4\u30f3\u30c7\u30a3\u30f3\u30b0<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">public class BindingExample {\n    @FXML\n    private TextField nameField;\n    @FXML\n    private Label nameLabel;\n\n    private final Person person = new Person();\n\n    @FXML\n    private void initialize() {\n        \/\/ \u53cc\u65b9\u5411\u30d0\u30a4\u30f3\u30c7\u30a3\u30f3\u30b0\n        nameField.textProperty().bindBidirectional(person.nameProperty());\n\n        \/\/ \u5358\u65b9\u5411\u30d0\u30a4\u30f3\u30c7\u30a3\u30f3\u30b0\n        nameLabel.textProperty().bind(person.nameProperty());\n\n        \/\/ \u30d0\u30a4\u30f3\u30c7\u30a3\u30f3\u30b0\u5f0f\n        IntegerProperty age = person.ageProperty();\n        BooleanBinding isAdult = age.greaterThanOrEqual(20);\n\n        \/\/ \u30ea\u30b9\u30ca\u30fc\u306e\u8ffd\u52a0\n        isAdult.addListener((obs, oldValue, newValue) -&gt; {\n            System.out.println(\"\u6210\u4eba\u72b6\u614b\u304c\u5909\u66f4: \" + newValue);\n        });\n    }\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-57\">3. \u30ab\u30b9\u30bf\u30e0\u30d0\u30a4\u30f3\u30c7\u30a3\u30f3\u30b0<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">public class CustomBindingExample {\n    public static StringBinding createFullNameBinding(\n            StringProperty firstName, \n            StringProperty lastName) {\n        return Bindings.createStringBinding(\n            () -&gt; firstName.get() + \" \" + lastName.get(),\n            firstName, lastName\n        );\n    }\n\n    public static NumberBinding calculateBMI(\n            DoubleProperty weight, \n            DoubleProperty height) {\n        return weight.divide(height.multiply(height));\n    }\n}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-58\">MVVM\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\u306e\u5c0e\u5165\u65b9\u6cd5<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-59\">1. \u57fa\u672c\u69cb\u9020<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ Model\npublic class UserModel {\n    private final StringProperty username = new SimpleStringProperty();\n    private final StringProperty email = new SimpleStringProperty();\n\n    \/\/ getters, setters, properties\n}\n\n\/\/ ViewModel\npublic class UserViewModel {\n    private final UserModel model;\n    private final StringProperty usernameError = new SimpleStringProperty();\n\n    public UserViewModel(UserModel model) {\n        this.model = model;\n\n        \/\/ \u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\n        model.usernameProperty().addListener((obs, old, newValue) -&gt; {\n            validateUsername(newValue);\n        });\n    }\n\n    private void validateUsername(String username) {\n        if (username == null || username.length() &lt; 3) {\n            usernameError.set(\"\u30e6\u30fc\u30b6\u30fc\u540d\u306f3\u6587\u5b57\u4ee5\u4e0a\u5fc5\u8981\u3067\u3059\");\n        } else {\n            usernameError.set(\"\");\n        }\n    }\n\n    \/\/ \u30b3\u30de\u30f3\u30c9\n    public Command saveCommand = new Command(\n        this::canSave,  \/\/ \u5b9f\u884c\u53ef\u80fd\u6761\u4ef6\n        this::save      \/\/ \u5b9f\u884c\u51e6\u7406\n    );\n}\n\n\/\/ View\npublic class UserView extends VBox {\n    private final UserViewModel viewModel;\n\n    @FXML\n    private TextField usernameField;\n    @FXML\n    private Label errorLabel;\n    @FXML\n    private Button saveButton;\n\n    public UserView(UserViewModel viewModel) {\n        this.viewModel = viewModel;\n        FXMLLoader.load(this);\n\n        \/\/ \u30d0\u30a4\u30f3\u30c7\u30a3\u30f3\u30b0\u306e\u8a2d\u5b9a\n        usernameField.textProperty().bindBidirectional(\n            viewModel.getUsernameProperty()\n        );\n        errorLabel.textProperty().bind(\n            viewModel.getUsernameErrorProperty()\n        );\n        saveButton.disableProperty().bind(\n            viewModel.saveCommand.notExecutableProperty()\n        );\n    }\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-60\">2. \u30b3\u30de\u30f3\u30c9\u30d1\u30bf\u30fc\u30f3\u306e\u5b9f\u88c5<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">public class Command {\n    private final BooleanProperty executable = new SimpleBooleanProperty(true);\n    private final Supplier&lt;Boolean&gt; canExecute;\n    private final Runnable execute;\n\n    public Command(Supplier&lt;Boolean&gt; canExecute, Runnable execute) {\n        this.canExecute = canExecute;\n        this.execute = execute;\n\n        updateExecutable();\n    }\n\n    public void execute() {\n        if (canExecute.get()) {\n            execute.run();\n        }\n    }\n\n    private void updateExecutable() {\n        executable.set(canExecute.get());\n    }\n\n    public BooleanProperty executableProperty() {\n        return executable;\n    }\n\n    public ReadOnlyBooleanProperty notExecutableProperty() {\n        return executable.not();\n    }\n}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-61\">\u30b3\u30fc\u30c9\u4fdd\u5b88\u6027\u3092\u9ad8\u3081\u308b\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-62\">1. \u4f9d\u5b58\u6027\u6ce8\u5165\u306e\u6d3b\u7528<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">public class DependencyInjection {\n    \/\/ \u30b5\u30fc\u30d3\u30b9\u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30fc\u30b9\n    public interface UserService {\n        CompletableFuture&lt;User&gt; saveUser(User user);\n    }\n\n    \/\/ ViewModel\u3067\u306e\u4f7f\u7528\n    public class UserViewModel {\n        private final UserService userService;\n\n        @Inject\n        public UserViewModel(UserService userService) {\n            this.userService = userService;\n        }\n    }\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-63\">2. \u30c6\u30b9\u30c8\u5bb9\u6613\u6027\u306e\u5411\u4e0a<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">public class ViewModelTest {\n    @Test\n    public void testUsernameValidation() {\n        \/\/ \u30e2\u30c3\u30af\u30b5\u30fc\u30d3\u30b9\u306e\u4f5c\u6210\n        UserService mockService = mock(UserService.class);\n\n        \/\/ ViewModel\u306e\u30c6\u30b9\u30c8\n        UserViewModel viewModel = new UserViewModel(mockService);\n        viewModel.setUsername(\"ab\");  \/\/ \u77ed\u3059\u304e\u308b\u540d\u524d\n\n        assertTrue(viewModel.hasErrors());\n        assertEquals(\"\u30e6\u30fc\u30b6\u30fc\u540d\u306f3\u6587\u5b57\u4ee5\u4e0a\u5fc5\u8981\u3067\u3059\", \n                    viewModel.getUsernameError());\n    }\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-64\">MVVM\u306e\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u8cac\u4efb\u306e\u5206\u96e2<\/strong>\n<ul class=\"wp-block-list\">\n<li>View\u306f\u30e6\u30fc\u30b6\u30fc\u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30fc\u30b9\u306e\u307f\u3092\u62c5\u5f53<\/li>\n\n\n\n<li>ViewModel\u306f\u30d7\u30ec\u30bc\u30f3\u30c6\u30fc\u30b7\u30e7\u30f3\u30ed\u30b8\u30c3\u30af\u3092\u62c5\u5f53<\/li>\n\n\n\n<li>Model\u306f\u30d3\u30b8\u30cd\u30b9\u30ed\u30b8\u30c3\u30af\u3068\u30c7\u30fc\u30bf\u3092\u62c5\u5f53<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u30d0\u30a4\u30f3\u30c7\u30a3\u30f3\u30b0\u306e\u6700\u9069\u5316<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u5fc5\u8981\u306a\u5834\u5408\u306e\u307f\u53cc\u65b9\u5411\u30d0\u30a4\u30f3\u30c7\u30a3\u30f3\u30b0\u3092\u4f7f\u7528<\/li>\n\n\n\n<li>\u30ea\u30bd\u30fc\u30b9\u30ea\u30fc\u30af\u3092\u9632\u3050\u305f\u3081\u306e\u30d0\u30a4\u30f3\u30c7\u30a3\u30f3\u30b0\u89e3\u9664<\/li>\n\n\n\n<li>\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u3092\u8003\u616e\u3057\u305f\u30d0\u30a4\u30f3\u30c7\u30a3\u30f3\u30b0\u8a2d\u8a08<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u30b3\u30fc\u30c9\u306e\u69cb\u9020\u5316<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u6a5f\u80fd\u3054\u3068\u306e\u30d1\u30c3\u30b1\u30fc\u30b8\u5206\u3051<\/li>\n\n\n\n<li>\u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30fc\u30b9\u306b\u3088\u308b\u758e\u7d50\u5408\u5316<\/li>\n\n\n\n<li>\u30e6\u30cb\u30c3\u30c8\u30c6\u30b9\u30c8\u306e\u4f5c\u6210<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<h1 class=\"wp-block-heading\" id=\"i-65\">\u5b9f\u8df5\u7684\u306a\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u958b\u767a\u4f8b<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-66\">\u30bf\u30b9\u30af\u7ba1\u7406\u30a2\u30d7\u30ea\u306e\u958b\u767a\u624b\u9806<\/h2>\n\n\n\n<p>\u5b9f\u8df5\u7684\u306a\u4f8b\u3068\u3057\u3066\u3001\u30bf\u30b9\u30af\u7ba1\u7406\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u958b\u767a\u30d7\u30ed\u30bb\u30b9\u3092\u8aac\u660e\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-67\">1. \u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u69cb\u9020<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">src\/\n\u251c\u2500\u2500 main\/\n\u2502   \u251c\u2500\u2500 java\/\n\u2502   \u2502   \u2514\u2500\u2500 com\/example\/taskmanager\/\n\u2502   \u2502       \u251c\u2500\u2500 MainApp.java\n\u2502   \u2502       \u251c\u2500\u2500 model\/\n\u2502   \u2502       \u2502   \u251c\u2500\u2500 Task.java\n\u2502   \u2502       \u2502   \u2514\u2500\u2500 TaskRepository.java\n\u2502   \u2502       \u251c\u2500\u2500 viewmodel\/\n\u2502   \u2502       \u2502   \u2514\u2500\u2500 TaskViewModel.java\n\u2502   \u2502       \u251c\u2500\u2500 view\/\n\u2502   \u2502       \u2502   \u251c\u2500\u2500 TaskView.java\n\u2502   \u2502       \u2502   \u2514\u2500\u2500 TaskDialog.java\n\u2502   \u2502       \u2514\u2500\u2500 util\/\n\u2502   \u2502           \u2514\u2500\u2500 DatabaseUtil.java\n\u2502   \u2514\u2500\u2500 resources\/\n\u2502       \u251c\u2500\u2500 fxml\/\n\u2502       \u2502   \u251c\u2500\u2500 TaskView.fxml\n\u2502       \u2502   \u2514\u2500\u2500 TaskDialog.fxml\n\u2502       \u2514\u2500\u2500 css\/\n\u2502           \u2514\u2500\u2500 styles.css<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-68\">2. \u30e2\u30c7\u30eb\u306e\u5b9f\u88c5<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">public class Task {\n    private final LongProperty id = new SimpleLongProperty();\n    private final StringProperty title = new SimpleStringProperty();\n    private final StringProperty description = new SimpleStringProperty();\n    private final ObjectProperty&lt;LocalDate&gt; dueDate = new SimpleObjectProperty&lt;&gt;();\n    private final BooleanProperty completed = new SimpleBooleanProperty();\n\n    \/\/ getters, setters, properties\n    public LongProperty idProperty() { return id; }\n    public StringProperty titleProperty() { return title; }\n    \/\/ ... \u305d\u306e\u4ed6\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u30e1\u30bd\u30c3\u30c9\n}\n\npublic class TaskRepository {\n    private final Connection connection;\n\n    public TaskRepository() {\n        this.connection = DatabaseUtil.getConnection();\n    }\n\n    public List&lt;Task&gt; findAll() throws SQLException {\n        List&lt;Task&gt; tasks = new ArrayList&lt;&gt;();\n        String sql = \"SELECT id, title, description, due_date, completed FROM tasks\";\n\n        try (PreparedStatement stmt = connection.prepareStatement(sql)) {\n            ResultSet rs = stmt.executeQuery();\n            while (rs.next()) {\n                Task task = new Task();\n                task.setId(rs.getLong(\"id\"));\n                task.setTitle(rs.getString(\"title\"));\n                task.setDescription(rs.getString(\"description\"));\n                task.setDueDate(rs.getDate(\"due_date\").toLocalDate());\n                task.setCompleted(rs.getBoolean(\"completed\"));\n                tasks.add(task);\n            }\n        }\n        return tasks;\n    }\n\n    public void save(Task task) throws SQLException {\n        String sql = task.getId() == 0 ?\n            \"INSERT INTO tasks (title, description, due_date, completed) VALUES (?, ?, ?, ?)\" :\n            \"UPDATE tasks SET title=?, description=?, due_date=?, completed=? WHERE id=?\";\n\n        try (PreparedStatement stmt = connection.prepareStatement(sql)) {\n            stmt.setString(1, task.getTitle());\n            stmt.setString(2, task.getDescription());\n            stmt.setDate(3, Date.valueOf(task.getDueDate()));\n            stmt.setBoolean(4, task.isCompleted());\n\n            if (task.getId() != 0) {\n                stmt.setLong(5, task.getId());\n            }\n\n            stmt.executeUpdate();\n        }\n    }\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-69\">3. \u30d3\u30e5\u30fc\u30e2\u30c7\u30eb\u306e\u5b9f\u88c5<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">public class TaskViewModel {\n    private final TaskRepository repository;\n    private final ObservableList&lt;Task&gt; tasks = FXCollections.observableArrayList();\n    private final BooleanProperty loading = new SimpleBooleanProperty();\n\n    public TaskViewModel(TaskRepository repository) {\n        this.repository = repository;\n        loadTasks();\n    }\n\n    private void loadTasks() {\n        loading.set(true);\n        CompletableFuture.supplyAsync(() -&gt; {\n            try {\n                return repository.findAll();\n            } catch (SQLException e) {\n                throw new RuntimeException(e);\n            }\n        }).thenAcceptAsync(loadedTasks -&gt; {\n            Platform.runLater(() -&gt; {\n                tasks.setAll(loadedTasks);\n                loading.set(false);\n            });\n        });\n    }\n\n    public Command saveTaskCommand = new Command(\n        this::validateTask,\n        this::saveTask\n    );\n\n    private boolean validateTask() {\n        \/\/ \u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\u30ed\u30b8\u30c3\u30af\n        return true;\n    }\n\n    private void saveTask() {\n        \/\/ \u30bf\u30b9\u30af\u4fdd\u5b58\u30ed\u30b8\u30c3\u30af\n    }\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-70\">4. \u30d3\u30e5\u30fc\u306e\u5b9f\u88c5<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!-- TaskView.fxml --&gt;\n&lt;?xml version=\"1.0\" encoding=\"UTF-8\"?&gt;\n&lt;?import javafx.scene.layout.*?&gt;\n&lt;?import javafx.scene.control.*?&gt;\n\n&lt;VBox xmlns:fx=\"http:\/\/javafx.com\/fxml\" \n      fx:controller=\"com.example.taskmanager.view.TaskViewController\"\n      spacing=\"10\" padding=\"10\"&gt;\n\n    &lt;HBox spacing=\"10\" alignment=\"CENTER_LEFT\"&gt;\n        &lt;Button text=\"\u65b0\u898f\u30bf\u30b9\u30af\" onAction=\"#handleNewTask\"\/&gt;\n        &lt;Button text=\"\u66f4\u65b0\" onAction=\"#handleRefresh\"\/&gt;\n    &lt;\/HBox&gt;\n\n    &lt;TableView fx:id=\"taskTable\" VBox.vgrow=\"ALWAYS\"&gt;\n        &lt;columns&gt;\n            &lt;TableColumn fx:id=\"titleColumn\" text=\"\u30bf\u30a4\u30c8\u30eb\"\/&gt;\n            &lt;TableColumn fx:id=\"dueDateColumn\" text=\"\u671f\u9650\"\/&gt;\n            &lt;TableColumn fx:id=\"completedColumn\" text=\"\u5b8c\u4e86\"\/&gt;\n        &lt;\/columns&gt;\n    &lt;\/TableView&gt;\n&lt;\/VBox&gt;<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">public class TaskViewController {\n    @FXML\n    private TableView&lt;Task&gt; taskTable;\n    @FXML\n    private TableColumn&lt;Task, String&gt; titleColumn;\n    @FXML\n    private TableColumn&lt;Task, LocalDate&gt; dueDateColumn;\n    @FXML\n    private TableColumn&lt;Task, Boolean&gt; completedColumn;\n\n    private TaskViewModel viewModel;\n\n    @FXML\n    private void initialize() {\n        viewModel = new TaskViewModel(new TaskRepository());\n\n        \/\/ \u30c6\u30fc\u30d6\u30eb\u306e\u8a2d\u5b9a\n        titleColumn.setCellValueFactory(\n            cell -&gt; cell.getValue().titleProperty()\n        );\n        dueDateColumn.setCellValueFactory(\n            cell -&gt; cell.getValue().dueDateProperty()\n        );\n        completedColumn.setCellValueFactory(\n            cell -&gt; cell.getValue().completedProperty()\n        );\n\n        taskTable.setItems(viewModel.getTasks());\n    }\n}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-71\">\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u9023\u643a\u306e\u5b9f\u88c5\u65b9\u6cd5<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-72\">1. \u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u63a5\u7d9a\u306e\u7ba1\u7406<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">public class DatabaseUtil {\n    private static final String URL = \"jdbc:sqlite:tasks.db\";\n\n    public static Connection getConnection() throws SQLException {\n        return DriverManager.getConnection(URL);\n    }\n\n    public static void initializeDatabase() {\n        try (Connection conn = getConnection()) {\n            String sql = \"\"\"\n                CREATE TABLE IF NOT EXISTS tasks (\n                    id INTEGER PRIMARY KEY AUTOINCREMENT,\n                    title TEXT NOT NULL,\n                    description TEXT,\n                    due_date DATE,\n                    completed BOOLEAN DEFAULT FALSE\n                )\n                \"\"\";\n            try (Statement stmt = conn.createStatement()) {\n                stmt.execute(sql);\n            }\n        } catch (SQLException e) {\n            throw new RuntimeException(\"\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u306e\u521d\u671f\u5316\u306b\u5931\u6557\u3057\u307e\u3057\u305f\", e);\n        }\n    }\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-73\">2. \u30c8\u30e9\u30f3\u30b6\u30af\u30b7\u30e7\u30f3\u7ba1\u7406<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">public class TransactionManager {\n    public static &lt;T&gt; T executeInTransaction(\n            Connection conn, \n            SqlFunction&lt;T&gt; operation) throws SQLException {\n        boolean autoCommit = conn.getAutoCommit();\n        conn.setAutoCommit(false);\n        try {\n            T result = operation.apply(conn);\n            conn.commit();\n            return result;\n        } catch (SQLException e) {\n            conn.rollback();\n            throw e;\n        } finally {\n            conn.setAutoCommit(autoCommit);\n        }\n    }\n}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-74\">\u30c7\u30d7\u30ed\u30a4\u3068\u914d\u5e03\u306e\u6ce8\u610f\u70b9<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-75\">1. \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30d1\u30c3\u30b1\u30fc\u30b8\u30f3\u30b0<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!-- pom.xml --&gt;\n&lt;build&gt;\n    &lt;plugins&gt;\n        &lt;plugin&gt;\n            &lt;groupId&gt;org.apache.maven.plugins&lt;\/groupId&gt;\n            &lt;artifactId&gt;maven-shade-plugin&lt;\/artifactId&gt;\n            &lt;version&gt;3.4.1&lt;\/version&gt;\n            &lt;executions&gt;\n                &lt;execution&gt;\n                    &lt;phase&gt;package&lt;\/phase&gt;\n                    &lt;goals&gt;\n                        &lt;goal&gt;shade&lt;\/goal&gt;\n                    &lt;\/goals&gt;\n                    &lt;configuration&gt;\n                        &lt;transformers&gt;\n                            &lt;transformer implementation=\"org.apache.maven.plugins.shade.resource.ManifestResourceTransformer\"&gt;\n                                &lt;mainClass&gt;com.example.taskmanager.MainApp&lt;\/mainClass&gt;\n                            &lt;\/transformer&gt;\n                        &lt;\/transformers&gt;\n                    &lt;\/configuration&gt;\n                &lt;\/execution&gt;\n            &lt;\/executions&gt;\n        &lt;\/plugin&gt;\n    &lt;\/plugins&gt;\n&lt;\/build&gt;<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-76\">2. \u30c7\u30d7\u30ed\u30a4\u30e1\u30f3\u30c8\u30c1\u30a7\u30c3\u30af\u30ea\u30b9\u30c8<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30d1\u30c3\u30b1\u30fc\u30b8\u30f3\u30b0\u524d\u306e\u78ba\u8a8d<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u4f9d\u5b58\u95a2\u4fc2\u306e\u89e3\u6c7a<\/li>\n\n\n\n<li>\u30ea\u30bd\u30fc\u30b9\u30d5\u30a1\u30a4\u30eb\u306e\u5305\u542b<\/li>\n\n\n\n<li>\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u63a5\u7d9a\u8a2d\u5b9a\u306e\u74b0\u5883\u5206\u3051<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u5b9f\u884c\u74b0\u5883\u306e\u8981\u4ef6<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u5fc5\u8981\u306aJava\u30d0\u30fc\u30b8\u30e7\u30f3<\/li>\n\n\n\n<li>\u5916\u90e8\u4f9d\u5b58\u95a2\u4fc2<\/li>\n\n\n\n<li>\u5fc5\u8981\u306a\u30b7\u30b9\u30c6\u30e0\u6a29\u9650<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u914d\u5e03\u6642\u306e\u6ce8\u610f\u70b9<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u30a4\u30f3\u30b9\u30c8\u30fc\u30e9\u30fc\u306e\u4f5c\u6210<\/li>\n\n\n\n<li>\u8d77\u52d5\u30b9\u30af\u30ea\u30d7\u30c8\u306e\u63d0\u4f9b<\/li>\n\n\n\n<li>\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u306e\u6574\u5099<\/li>\n\n\n\n<li>\u30ed\u30b0\u8a2d\u5b9a\u306e\u78ba\u8a8d<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<p>\u3053\u306e\u30bf\u30b9\u30af\u7ba1\u7406\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u4f8b\u3092\u901a\u3058\u3066\u3001JavaFX\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u5b9f\u8df5\u7684\u306a\u958b\u767a\u624b\u6cd5\u3092\u5b66\u3076\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<h1 class=\"wp-block-heading\" id=\"i-77\">JavaFX\u958b\u767a\u306e\u30c8\u30e9\u30d6\u30eb\u30b7\u30e5\u30fc\u30c6\u30a3\u30f3\u30b0<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-78\">\u4e00\u822c\u7684\u306a\u958b\u767a\u4e0a\u306e\u554f\u984c\u3068\u89e3\u6c7a\u7b56<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-79\">1. \u8d77\u52d5\u6642\u306e\u554f\u984c<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"i-80\">\u30e2\u30b8\u30e5\u30fc\u30eb\u30d1\u30b9\u306e\u554f\u984c<\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ \u30a8\u30e9\u30fc\u30e1\u30c3\u30bb\u30fc\u30b8\nError: JavaFX runtime components are missing, and are required to run this application\n\n\/\/ \u89e3\u6c7a\u7b561: VM\u30aa\u30d7\u30b7\u30e7\u30f3\u306e\u8ffd\u52a0\n--module-path \/path\/to\/javafx-sdk\/lib --add-modules javafx.controls,javafx.fxml\n\n\/\/ \u89e3\u6c7a\u7b562: module-info.java\u306e\u8a2d\u5b9a\nmodule com.example.application {\n    requires javafx.controls;\n    requires javafx.fxml;\n\n    exports com.example.application;\n    opens com.example.application to javafx.fxml;\n}<\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"i-81\">FXML\u30ed\u30fc\u30c7\u30a3\u30f3\u30b0\u30a8\u30e9\u30fc<\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ \u3088\u304f\u3042\u308b\u554f\u984c\u30b3\u30fc\u30c9\nFXMLLoader loader = new FXMLLoader(getClass().getResource(\"view.fxml\"));\n\n\/\/ \u89e3\u6c7a\u7b56\uff1a\u6b63\u3057\u3044\u30d1\u30b9\u6307\u5b9a\nFXMLLoader loader = new FXMLLoader(getClass().getResource(\"\/fxml\/view.fxml\"));\n\n\/\/ \u30c7\u30d0\u30c3\u30b0\u7528\u30b3\u30fc\u30c9\npublic void debugFXMLLoading(String fxmlPath) {\n    URL resource = getClass().getResource(fxmlPath);\n    if (resource == null) {\n        System.err.println(\"FXML\u30d5\u30a1\u30a4\u30eb\u304c\u898b\u3064\u304b\u308a\u307e\u305b\u3093: \" + fxmlPath);\n        \/\/ \u30af\u30e9\u30b9\u30ed\u30fc\u30c0\u30fc\u306e\u691c\u7d22\u30d1\u30b9\u3092\u51fa\u529b\n        ClassLoader classLoader = getClass().getClassLoader();\n        System.err.println(\"\u30af\u30e9\u30b9\u30ed\u30fc\u30c0\u30fc\u306e\u691c\u7d22\u30d1\u30b9:\");\n        if (classLoader instanceof URLClassLoader) {\n            for (URL url : ((URLClassLoader) classLoader).getURLs()) {\n                System.err.println(url);\n            }\n        }\n    }\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-82\">2. \u30ec\u30a4\u30a2\u30a6\u30c8\u306e\u554f\u984c<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"i-83\">\u30b5\u30a4\u30ba\u8abf\u6574\u306e\u554f\u984c<\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ \u554f\u984c\u306e\u3042\u308b\u30b3\u30fc\u30c9\nVBox container = new VBox();\ncontainer.getChildren().add(new Button(\"\u30dc\u30bf\u30f3\"));\n\n\/\/ \u89e3\u6c7a\u7b56\uff1a\u5236\u7d04\u306e\u9069\u5207\u306a\u8a2d\u5b9a\nVBox container = new VBox();\ncontainer.setPrefWidth(Region.USE_COMPUTED_SIZE);\ncontainer.setPrefHeight(Region.USE_COMPUTED_SIZE);\nButton button = new Button(\"\u30dc\u30bf\u30f3\");\nbutton.setMaxWidth(Double.MAX_VALUE); \/\/ \u89aa\u306b\u5408\u308f\u305b\u3066\u5e45\u3092\u8abf\u6574\ncontainer.getChildren().add(button);<\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"i-84\">\u30ec\u30a4\u30a2\u30a6\u30c8\u306e\u30c7\u30d0\u30c3\u30b0<\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">public class LayoutDebugger {\n    public static void enableDebugMode(Region region) {\n        \/\/ \u30ec\u30a4\u30a2\u30a6\u30c8\u306e\u5883\u754c\u3092\u53ef\u8996\u5316\n        region.setStyle(\"-fx-border-color: red; -fx-border-width: 1;\");\n\n        \/\/ \u30b5\u30a4\u30ba\u60c5\u5831\u3092\u51fa\u529b\n        region.layoutBoundsProperty().addListener((obs, old, bounds) -&gt; {\n            System.out.printf(\"Layout bounds: (%.1f, %.1f) %.1f x %.1f%n\",\n                bounds.getMinX(), bounds.getMinY(),\n                bounds.getWidth(), bounds.getHeight());\n        });\n    }\n}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-85\">\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u6539\u5584\u306e\u305f\u3081\u306e\u30c7\u30d0\u30c3\u30b0\u624b\u6cd5<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-86\">1. \u30e1\u30e2\u30ea\u30ea\u30fc\u30af\u691c\u51fa<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">public class MemoryLeakDetector {\n    private static final WeakHashMap&lt;Object, String&gt; objectMap = new WeakHashMap&lt;&gt;();\n\n    public static void trackObject(Object obj, String description) {\n        objectMap.put(obj, description);\n        System.gc();\n\n        \/\/ \u6b8b\u5b58\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u78ba\u8a8d\n        objectMap.forEach((key, value) -&gt; \n            System.out.println(\"\u6b8b\u5b58\u30aa\u30d6\u30b8\u30a7\u30af\u30c8: \" + value));\n    }\n\n    public static void checkListeners(Node node) {\n        \/\/ \u30ea\u30b9\u30ca\u30fc\u306e\u767b\u9332\u72b6\u6cc1\u3092\u78ba\u8a8d\n        List&lt;EventHandler&lt;Event&gt;&gt; handlers = node.getEventHandlers();\n        System.out.println(\"\u767b\u9332\u3055\u308c\u3066\u3044\u308b\u30a4\u30d9\u30f3\u30c8\u30cf\u30f3\u30c9\u30e9\u30fc\u6570: \" + handlers.size());\n    }\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-87\">2. \u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u30d7\u30ed\u30d5\u30a1\u30a4\u30ea\u30f3\u30b0<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">public class PerformanceMonitor {\n    private static long lastUpdate = 0;\n    private static int frameCount = 0;\n\n    public static void startMonitoring(Scene scene) {\n        AnimationTimer timer = new AnimationTimer() {\n            @Override\n            public void handle(long now) {\n                frameCount++;\n                if (lastUpdate == 0) {\n                    lastUpdate = now;\n                    return;\n                }\n\n                if (now - lastUpdate &gt; 1_000_000_000) { \/\/ 1\u79d2\n                    double fps = frameCount;\n                    System.out.printf(\"FPS: %.2f%n\", fps);\n                    frameCount = 0;\n                    lastUpdate = now;\n                }\n            }\n        };\n        timer.start();\n    }\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-88\">3. UI\u30d5\u30ea\u30fc\u30ba\u306e\u9632\u6b62<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">public class TaskExecutor {\n    public static &lt;T&gt; void executeAsync(\n            Task&lt;T&gt; task, \n            Consumer&lt;T&gt; onSuccess, \n            Consumer&lt;Throwable&gt; onError) {\n\n        task.setOnSucceeded(event -&gt; {\n            Platform.runLater(() -&gt; onSuccess.accept(task.getValue()));\n        });\n\n        task.setOnFailed(event -&gt; {\n            Platform.runLater(() -&gt; onError.accept(task.getException()));\n        });\n\n        new Thread(task).start();\n    }\n}\n\n\/\/ \u4f7f\u7528\u4f8b\nTask&lt;Data&gt; task = new Task&lt;&gt;() {\n    @Override\n    protected Data call() throws Exception {\n        \/\/ \u91cd\u3044\u51e6\u7406\n        return processData();\n    }\n};\n\nTaskExecutor.executeAsync(\n    task,\n    result -&gt; updateUI(result),\n    error -&gt; showError(error)\n);<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-89\">\u30b3\u30df\u30e5\u30cb\u30c6\u30a3\u30ea\u30bd\u30fc\u30b9\u3068\u30b5\u30dd\u30fc\u30c8\u60c5\u5831<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-90\">1. \u4e3b\u8981\u306a\u60c5\u5831\u6e90<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>OpenJFX\u516c\u5f0f\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8<\/li>\n\n\n\n<li>JavaFX GitHub Issues<\/li>\n\n\n\n<li>Stack Overflow JavaFX\u30bf\u30b0<\/li>\n\n\n\n<li>JavaFX\u30d5\u30a9\u30fc\u30e9\u30e0<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-91\">2. \u30c7\u30d0\u30c3\u30b0\u30c4\u30fc\u30eb<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Scene Builder<\/li>\n\n\n\n<li>Java Mission Control<\/li>\n\n\n\n<li>VisualVM<\/li>\n\n\n\n<li>Eclipse Memory Analyzer<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-92\">\u30c8\u30e9\u30d6\u30eb\u30b7\u30e5\u30fc\u30c6\u30a3\u30f3\u30b0\u306e\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u6bb5\u968e\u7684\u306a\u30c7\u30d0\u30c3\u30b0<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u554f\u984c\u306e\u5207\u308a\u5206\u3051<\/li>\n\n\n\n<li>\u6700\u5c0f\u518d\u73fe\u30b3\u30fc\u30c9\u306e\u4f5c\u6210<\/li>\n\n\n\n<li>\u30ed\u30b0\u306e\u6d3b\u7528<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u6027\u80fd\u6700\u9069\u5316<\/strong>\n<ul class=\"wp-block-list\">\n<li>Platform.runLater\u306e\u9069\u5207\u306a\u4f7f\u7528<\/li>\n\n\n\n<li>\u30d0\u30a4\u30f3\u30c7\u30a3\u30f3\u30b0\u306e\u6700\u9069\u5316<\/li>\n\n\n\n<li>\u30e1\u30e2\u30ea\u30ea\u30fc\u30af\u306e\u9632\u6b62<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u958b\u767a\u74b0\u5883\u306e\u6574\u5099<\/strong>\n<ul class=\"wp-block-list\">\n<li>IDE\u306e\u9069\u5207\u306a\u8a2d\u5b9a<\/li>\n\n\n\n<li>\u30c7\u30d0\u30c3\u30b0\u30c4\u30fc\u30eb\u306e\u6d3b\u7528<\/li>\n\n\n\n<li>\u30c6\u30b9\u30c8\u74b0\u5883\u306e\u6e96\u5099<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<h1 class=\"wp-block-heading\" id=\"i-93\">\u307e\u3068\u3081\uff1aJavaFX\u958b\u767a\u306e\u6b21\u306e\u30b9\u30c6\u30c3\u30d7<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-94\">JavaFX\u958b\u767a\u306e\u4e3b\u8981\u30dd\u30a4\u30f3\u30c8<\/h2>\n\n\n\n<p>\u672c\u8a18\u4e8b\u3067\u306f\u3001JavaFX\u3092\u4f7f\u7528\u3057\u305f\u30c7\u30b9\u30af\u30c8\u30c3\u30d7\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u958b\u767a\u306b\u3064\u3044\u3066\u3001\u4ee5\u4e0b\u306e\u91cd\u8981\u306a\u5074\u9762\u3092\u8a73\u3057\u304f\u89e3\u8aac\u3057\u3066\u304d\u307e\u3057\u305f\uff1a<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u57fa\u790e\u77e5\u8b58\u3068\u74b0\u5883\u69cb\u7bc9<\/strong>\n<ul class=\"wp-block-list\">\n<li>JavaFX\u306e\u57fa\u672c\u6982\u5ff5\u3068\u7279\u5fb4<\/li>\n\n\n\n<li>\u958b\u767a\u74b0\u5883\u306e\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u65b9\u6cd5<\/li>\n\n\n\n<li>\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u69cb\u6210\u306e\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>UI\u30c7\u30b6\u30a4\u30f3\u3068\u30a4\u30f3\u30bf\u30e9\u30af\u30b7\u30e7\u30f3<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u57fa\u672c\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u6d3b\u7528<\/li>\n\n\n\n<li>\u30ec\u30a4\u30a2\u30a6\u30c8\u8a2d\u8a08\u306e\u624b\u6cd5<\/li>\n\n\n\n<li>FXML\u3092\u4f7f\u7528\u3057\u305f\u52b9\u7387\u7684\u306a\u958b\u767a<\/li>\n\n\n\n<li>CSS\u306b\u3088\u308b\u30b9\u30bf\u30a4\u30ea\u30f3\u30b0<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u8a2d\u8a08<\/strong>\n<ul class=\"wp-block-list\">\n<li>MVVM\u30d1\u30bf\u30fc\u30f3\u306e\u5b9f\u88c5<\/li>\n\n\n\n<li>\u30c7\u30fc\u30bf\u30d0\u30a4\u30f3\u30c7\u30a3\u30f3\u30b0\u306e\u6d3b\u7528<\/li>\n\n\n\n<li>\u5b9f\u8df5\u7684\u306a\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u958b\u767a\u4f8b<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u54c1\u8cea\u3068\u30e1\u30f3\u30c6\u30ca\u30f3\u30b9<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u30c8\u30e9\u30d6\u30eb\u30b7\u30e5\u30fc\u30c6\u30a3\u30f3\u30b0\u624b\u6cd5<\/li>\n\n\n\n<li>\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u6700\u9069\u5316<\/li>\n\n\n\n<li>\u30c7\u30d0\u30c3\u30b0\u3068\u30c6\u30b9\u30c8\u624b\u6cd5<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-95\">\u4eca\u5f8c\u306e\u5b66\u7fd2\u30ed\u30fc\u30c9\u30de\u30c3\u30d7<\/h2>\n\n\n\n<p>JavaFX\u306e\u958b\u767a\u30b9\u30ad\u30eb\u3092\u3055\u3089\u306b\u5411\u4e0a\u3055\u305b\u308b\u305f\u3081\u306b\u3001\u4ee5\u4e0b\u306e\u30b9\u30c6\u30c3\u30d7\u3092\u63a8\u5968\u3057\u307e\u3059\uff1a<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u5fdc\u7528\u6280\u8853\u306e\u7fd2\u5f97<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u30ab\u30b9\u30bf\u30e0\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u4f5c\u6210<\/li>\n\n\n\n<li>\u9ad8\u5ea6\u306a\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306e\u5b9f\u88c5<\/li>\n\n\n\n<li>3D\u30b0\u30e9\u30d5\u30a3\u30c3\u30af\u30b9\u306e\u6d3b\u7528<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u5b9f\u8df5\u7684\u306a\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u958b\u767a<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u30aa\u30fc\u30d7\u30f3\u30bd\u30fc\u30b9\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3078\u306e\u53c2\u52a0<\/li>\n\n\n\n<li>\u5b9f\u52d9\u7684\u306a\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u958b\u767a<\/li>\n\n\n\n<li>\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u30c1\u30e5\u30fc\u30cb\u30f3\u30b0<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u6700\u65b0\u52d5\u5411\u306e\u30ad\u30e3\u30c3\u30c1\u30a2\u30c3\u30d7<\/strong>\n<ul class=\"wp-block-list\">\n<li>JavaFX\u306e\u65b0\u30d0\u30fc\u30b8\u30e7\u30f3\u60c5\u5831<\/li>\n\n\n\n<li>\u30b3\u30df\u30e5\u30cb\u30c6\u30a3\u306e\u6d3b\u7528<\/li>\n\n\n\n<li>\u65b0\u3057\u3044\u958b\u767a\u624b\u6cd5\u306e\u5b66\u7fd2<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-96\">\u30ea\u30bd\u30fc\u30b9\u3068\u53c2\u8003\u60c5\u5831<\/h2>\n\n\n\n<p>\u3055\u3089\u306a\u308b\u5b66\u7fd2\u306e\u305f\u3081\u306b\u3001\u4ee5\u4e0b\u306e\u30ea\u30bd\u30fc\u30b9\u3092\u6d3b\u7528\u3059\u308b\u3053\u3068\u3092\u304a\u52e7\u3081\u3057\u307e\u3059\uff1a<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u516c\u5f0f\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8<\/strong>\n<ul class=\"wp-block-list\">\n<li>OpenJFX\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8<\/li>\n\n\n\n<li>JavaFX API\u30ea\u30d5\u30a1\u30ec\u30f3\u30b9<\/li>\n\n\n\n<li>\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u3068\u30ac\u30a4\u30c9<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u30b3\u30df\u30e5\u30cb\u30c6\u30a3\u30ea\u30bd\u30fc\u30b9<\/strong>\n<ul class=\"wp-block-list\">\n<li>JavaFX\u30d5\u30a9\u30fc\u30e9\u30e0<\/li>\n\n\n\n<li>GitHub\u4e0a\u306e\u30b5\u30f3\u30d7\u30eb\u30d7\u30ed\u30b8\u30a7\u30af\u30c8<\/li>\n\n\n\n<li>\u6280\u8853\u30d6\u30ed\u30b0\u3068\u8a18\u4e8b<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<p>JavaFX\u306f\u7d99\u7d9a\u7684\u306b\u9032\u5316\u3092\u7d9a\u3051\u308b\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3067\u3042\u308a\u3001\u5b9a\u671f\u7684\u306a\u5b66\u7fd2\u3068\u5b9f\u8df5\u3092\u901a\u3058\u3066\u3001\u3088\u308a\u52b9\u679c\u7684\u306a\u30c7\u30b9\u30af\u30c8\u30c3\u30d7\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u958b\u767a\u304c\u53ef\u80fd\u306b\u306a\u308a\u307e\u3059\u3002\u672c\u8a18\u4e8b\u3067\u5b66\u3093\u3060\u57fa\u790e\u3092\u6d3b\u304b\u3057\u3001\u5b9f\u8df5\u7684\u306a\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u958b\u767a\u306b\u6311\u6226\u3057\u3066\u3044\u305f\u3060\u3051\u308c\u3070\u5e78\u3044\u3067\u3059\u3002<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>JavaFX\u3068\u306f\uff1f\u6700\u65b0\u30d0\u30fc\u30b8\u30e7\u30f3\u306e\u7279\u5fb4\u3068\u6d3b\u7528\u30e1\u30ea\u30c3\u30c8 Warning: Undefined array key &#8220;is_admin&#8221; in \/home\/xs392991\/dexall.co.jp\/public_html\/ &#8230; <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":{"0":"post-1045","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-java","7":"nothumb"},"_links":{"self":[{"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=\/wp\/v2\/posts\/1045","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1045"}],"version-history":[{"count":2,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=\/wp\/v2\/posts\/1045\/revisions"}],"predecessor-version":[{"id":1062,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=\/wp\/v2\/posts\/1045\/revisions\/1062"}],"wp:attachment":[{"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1045"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1045"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1045"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}