{"id":3202,"date":"2025-03-24T08:46:40","date_gmt":"2025-03-23T23:46:40","guid":{"rendered":"https:\/\/dexall.co.jp\/articles\/?p=3202"},"modified":"2025-03-24T08:47:11","modified_gmt":"2025-03-23T23:47:11","slug":"%e3%80%90%e4%bf%9d%e5%ad%98%e7%89%88%e3%80%91laravel%e3%81%aeselect%e5%ae%9f%e8%a3%85%e5%ae%8c%e5%85%a8%e3%82%ac%e3%82%a4%e3%83%89%ef%bc%9a%e5%88%9d%e5%bf%83%e8%80%85%e3%81%a7%e3%82%82%e5%88%86","status":"publish","type":"post","link":"https:\/\/dexall.co.jp\/articles\/?p=3202","title":{"rendered":"\u3010\u4fdd\u5b58\u7248\u3011Laravel\u306eSelect\u5b9f\u88c5\u5b8c\u5168\u30ac\u30a4\u30c9\uff1a\u521d\u5fc3\u8005\u3067\u3082\u5206\u304b\u308b7\u3064\u306e\u5b9f\u8df5\u30c6\u30af\u30cb\u30c3\u30af"},"content":{"rendered":"\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\">Laravel\u306eSelect\u3068\u306f\uff1f\u57fa\u790e\u304b\u3089\u5b8c\u5168\u7406\u89e3<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-1\">Form::select\u306e\u57fa\u672c\u7684\u306a\u4f7f\u3044\u65b9\u3068\u69cb\u6587<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-2\">HTML::select\u3068Form::select\u306e\u9055\u3044\u3068\u4f7f\u3044\u5206\u3051<\/a>      <\/li>    <\/ul>  <\/li>  <li>    <a href=\"#i-3\">Laravel Select\u306e\u5b9f\u88c5\u624b\u9806\u3092\u5fb9\u5e95\u89e3\u8aac<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-4\">\u30b7\u30f3\u30d7\u30eb\u306a\u30bb\u30ec\u30af\u30c8\u30dc\u30c3\u30af\u30b9\u306e\u4f5c\u6210\u65b9\u6cd5<\/a>      <\/li>      <li>        <a href=\"#i-5\">\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u3068\u9023\u643a\u3057\u305f\u30bb\u30ec\u30af\u30c8\u30dc\u30c3\u30af\u30b9\u306e\u5b9f\u88c5<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-6\">\u9078\u629e\u6e08\u307f\u30aa\u30d7\u30b7\u30e7\u30f3\u306e\u8a2d\u5b9a\u65b9\u6cd5\uff08selected\u5c5e\u6027\uff09<\/a>      <\/li>    <\/ul>  <\/li>  <li>    <a href=\"#i-7\">\u5b9f\u8df5\u7684\u306aSelect\u5b9f\u88c5\u30c6\u30af\u30cb\u30c3\u30af<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-8\">\u52d5\u7684\u306a\u30bb\u30ec\u30af\u30c8\u30dc\u30c3\u30af\u30b9\u306e\u4f5c\u6210\u65b9\u6cd5<\/a>      <\/li>      <li>        <a href=\"#i-9\">\u30ab\u30b9\u30b1\u30fc\u30c9\uff08\u9023\u52d5\uff09\u30bb\u30ec\u30af\u30c8\u30dc\u30c3\u30af\u30b9\u306e\u5b9f\u88c5<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-10\">\u975e\u540c\u671f\u901a\u4fe1\u3092\u4f7f\u7528\u3057\u305f\u30bb\u30ec\u30af\u30c8\u30dc\u30c3\u30af\u30b9\u306e\u66f4\u65b0<\/a>      <\/li>    <\/ul>  <\/li>  <li>    <a href=\"#i-11\">Laravel\u306eSelect\u3092\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u3059\u308b<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-12\">\u30bb\u30ec\u30af\u30c8\u30dc\u30c3\u30af\u30b9\u306e\u30b9\u30bf\u30a4\u30ea\u30f3\u30b0\u65b9\u6cd5<\/a>      <\/li>      <li>        <a href=\"#i-13\">\u30d7\u30ec\u30fc\u30b9\u30db\u30eb\u30c0\u30fc\u3068\u30c7\u30d5\u30a9\u30eb\u30c8\u5024\u306e\u8a2d\u5b9a<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-14\">\u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\u30eb\u30fc\u30eb\u306e\u8ffd\u52a0\u65b9\u6cd5<\/a>      <\/li>    <\/ul>  <\/li>  <li>    <a href=\"#i-15\">Laravel Select\u306e\u5b9f\u88c5\u306b\u304a\u3051\u308b\u6ce8\u610f\u70b9<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-16\">\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u5bfe\u7b56\u3068XSS\u5bfe\u7b56<\/a>      <\/li>      <li>        <a href=\"#i-17\">\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u6700\u9069\u5316\u306e\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-18\">\u4e00\u822c\u7684\u306a\u30a8\u30e9\u30fc\u3068\u305d\u306e\u89e3\u6c7a\u65b9\u6cd5<\/a>      <\/li>    <\/ul>  <\/li>  <li>    <a href=\"#i-19\">\u5b9f\u8df5\u7684\u306a\u30b3\u30fc\u30c9\u4f8b\u3067\u5b66\u3076Select\u5fdc\u7528<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-20\">\u90fd\u9053\u5e9c\u770c\u3068\u5e02\u533a\u753a\u6751\u306e\u9023\u52d5\u30bb\u30ec\u30af\u30c8\u5b9f\u88c5\u4f8b<\/a>      <\/li>      <li>        <a href=\"#i-21\">\u8907\u6570\u9078\u629e\u53ef\u80fd\u306a\u30bb\u30ec\u30af\u30c8\u30dc\u30c3\u30af\u30b9\u306e\u4f5c\u6210<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-22\">\u691c\u7d22\u53ef\u80fd\u306a\u30bb\u30ec\u30af\u30c8\u30dc\u30c3\u30af\u30b9\u306e\u5b9f\u88c5\u65b9\u6cd5<\/a>      <\/li>    <\/ul>  <\/li>  <li class=\"last\">    <a href=\"#i-23\">Laravel Select\u306b\u95a2\u3059\u308b\u30c8\u30e9\u30d6\u30eb\u30b7\u30e5\u30fc\u30c6\u30a3\u30f3\u30b0<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-24\">\u5024\u304c\u6b63\u3057\u304f\u9001\u4fe1\u3055\u308c\u306a\u3044\u5834\u5408\u306e\u5bfe\u51e6\u6cd5<\/a>      <\/li>      <li>        <a href=\"#i-25\">JavaScript\u30a4\u30d9\u30f3\u30c8\u304c\u767a\u706b\u3057\u306a\u3044\u554f\u984c\u306e\u89e3\u6c7a<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-26\">\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u3068\u306e\u9023\u643a\u6642\u306e\u4e00\u822c\u7684\u306a\u554f\u984c\u89e3\u6c7a<\/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-0\">Laravel\u306eSelect\u3068\u306f\uff1f\u57fa\u790e\u304b\u3089\u5b8c\u5168\u7406\u89e3<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Laravel\u306eSelect\u306f\u3001HTML\u306e\u30bb\u30ec\u30af\u30c8\u30dc\u30c3\u30af\u30b9\uff08\u30c9\u30ed\u30c3\u30d7\u30c0\u30a6\u30f3\u30ea\u30b9\u30c8\uff09\u3092\u7c21\u5358\u306b\u4f5c\u6210\u3059\u308b\u305f\u3081\u306e\u30d8\u30eb\u30d1\u30fc\u6a5f\u80fd\u3067\u3059\u3002\u30d5\u30a9\u30fc\u30e0\u8981\u7d20\u306e\u4e2d\u3067\u3082\u7279\u306b\u91cd\u8981\u306a\u6a5f\u80fd\u306e\u4e00\u3064\u3067\u3001\u30e6\u30fc\u30b6\u30fc\u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30fc\u30b9\u306e\u91cd\u8981\u306a\u90e8\u5206\u3092\u62c5\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-1\">Form::select\u306e\u57fa\u672c\u7684\u306a\u4f7f\u3044\u65b9\u3068\u69cb\u6587<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Form::select\u306f\u3001Laravel\u306e\u5f37\u529b\u306a\u30d5\u30a9\u30fc\u30e0\u30d3\u30eb\u30c0\u30fc\u306e\u4e00\u90e8\u3068\u3057\u3066\u63d0\u4f9b\u3055\u308c\u3066\u3044\u308b\u6a5f\u80fd\u3067\u3059\u3002\u57fa\u672c\u7684\u306a\u69cb\u6587\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059\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=\"\">\/\/ \u57fa\u672c\u7684\u306a\u4f7f\u3044\u65b9\nForm::select('name', $options, $default, $attributes);\n\n\/\/ \u5177\u4f53\u7684\u306a\u5b9f\u88c5\u4f8b\n$options = [\n    '1' =&gt; '\u9078\u629e\u80a21',\n    '2' =&gt; '\u9078\u629e\u80a22',\n    '3' =&gt; '\u9078\u629e\u80a23'\n];\n\n\/\/ \u30b7\u30f3\u30d7\u30eb\u306a\u5b9f\u88c5\n{!! Form::select('choice', $options, null, ['class' =&gt; 'form-control']) !!}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u5404\u30d1\u30e9\u30e1\u30fc\u30bf\u306e\u8a73\u7d30\u8aac\u660e\uff1a<\/p>\n\n\n<div id=\"id-2980d08f-3f10-4620-8cee-d32a0ffce973\">\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\u30d1\u30e9\u30e1\u30fc\u30bf<\/th><th>\u8aac\u660e<\/th><th>\u4f8b<\/th><\/tr><\/thead><tbody><tr><td>name<\/td><td>\u30d5\u30a9\u30fc\u30e0\u8981\u7d20\u306e\u540d\u524d<\/td><td>\u2018user_type\u2019<\/td><\/tr><tr><td>options<\/td><td>\u9078\u629e\u80a2\u306e\u914d\u5217<\/td><td>[\u2018admin\u2019 =&gt; \u2018\u7ba1\u7406\u8005\u2019, \u2018user\u2019 =&gt; \u2018\u30e6\u30fc\u30b6\u30fc\u2019]<\/td><\/tr><tr><td>default<\/td><td>\u30c7\u30d5\u30a9\u30eb\u30c8\u3067\u9078\u629e\u3055\u308c\u308b\u5024<\/td><td>\u2018user\u2019<\/td><\/tr><tr><td>attributes<\/td><td>HTML\u5c5e\u6027\u306e\u914d\u5217<\/td><td>[\u2018class\u2019 =&gt; \u2018form-control\u2019, \u2018id\u2019 =&gt; \u2018user-type\u2019]<\/td><\/tr><\/tbody><\/table><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"i-2\">HTML::select\u3068Form::select\u306e\u9055\u3044\u3068\u4f7f\u3044\u5206\u3051<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Laravel\u3067\u306fHTML::select\u3068Form::select\u3068\u3044\u30462\u3064\u306e\u30d8\u30eb\u30d1\u30fc\u6a5f\u80fd\u304c\u63d0\u4f9b\u3055\u308c\u3066\u3044\u307e\u3059\u304c\u3001\u305d\u308c\u305e\u308c\u306b\u7279\u5fb4\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Form::select\u306e\u7279\u5fb4\uff1a<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u30d5\u30a9\u30fc\u30e0\u30d3\u30eb\u30c0\u30fc\u306e\u4e00\u90e8\u3068\u3057\u3066\u6a5f\u80fd<\/li>\n\n\n\n<li>CSRF\u4fdd\u8b77\u304c\u81ea\u52d5\u7684\u306b\u9069\u7528\u3055\u308c\u308b<\/li>\n\n\n\n<li>\u30e2\u30c7\u30eb\u30d0\u30a4\u30f3\u30c7\u30a3\u30f3\u30b0\u304c\u5bb9\u6613<\/li>\n\n\n\n<li>\u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\u3068\u306e\u9023\u643a\u304c\u7c21\u5358<\/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=\"\">\/\/ Form::select\u306e\u4f8b\n{!! Form::open(['route' =&gt; 'user.store']) !!}\n    {!! Form::select('country', $countries, null, ['class' =&gt; 'form-control']) !!}\n{!! Form::close() !!}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>HTML::select\u306e\u7279\u5fb4\uff1a<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u3088\u308a\u8efd\u91cf\u3067\u5358\u7d14\u306a\u5b9f\u88c5<\/li>\n\n\n\n<li>\u30d5\u30a9\u30fc\u30e0\u30d3\u30eb\u30c0\u30fc\u306b\u4f9d\u5b58\u3057\u306a\u3044<\/li>\n\n\n\n<li>\u5358\u72ec\u3067\u306e\u4f7f\u7528\u304c\u53ef\u80fd<\/li>\n\n\n\n<li>\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u306e\u81ea\u7531\u5ea6\u304c\u9ad8\u3044<\/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=\"\">\/\/ HTML::select\u306e\u4f8b\n{!! HTML::select('country', $countries, null, ['class' =&gt; 'form-control']) !!}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u4f7f\u3044\u5206\u3051\u306e\u30dd\u30a4\u30f3\u30c8\uff1a<\/strong><\/p>\n\n\n<div id=\"id-e13339c4-d1ca-4273-9cab-a7fdd92e8a62\">\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\u4f7f\u7528\u30b7\u30fc\u30f3<\/th><th>\u63a8\u5968\u3055\u308c\u308b\u9078\u629e<\/th><th>\u7406\u7531<\/th><\/tr><\/thead><tbody><tr><td>\u30d5\u30a9\u30fc\u30e0\u9001\u4fe1\u3092\u4f34\u3046\u5834\u5408<\/td><td>Form::select<\/td><td>CSRF\u4fdd\u8b77\u3084\u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\u9023\u643a\u304c\u5bb9\u6613<\/td><\/tr><tr><td>\u5358\u7d14\u306a\u8868\u793a\u7528\u9014\u306e\u5834\u5408<\/td><td>HTML::select<\/td><td>\u3088\u308a\u8efd\u91cf\u3067\u5358\u7d14\u306a\u5b9f\u88c5\u304c\u53ef\u80fd<\/td><\/tr><tr><td>API\u3068\u306e\u9023\u643a<\/td><td>Form::select<\/td><td>\u30e2\u30c7\u30eb\u30d0\u30a4\u30f3\u30c7\u30a3\u30f3\u30b0\u304c\u6d3b\u7528\u53ef\u80fd<\/td><\/tr><tr><td>\u9759\u7684\u306a\u30b3\u30f3\u30c6\u30f3\u30c4<\/td><td>HTML::select<\/td><td>\u30aa\u30fc\u30d0\u30fc\u30d8\u30c3\u30c9\u304c\u5c11\u306a\u3044<\/td><\/tr><\/tbody><\/table><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">\u4ee5\u4e0a\u304c\u3001Laravel\u306eSelect\u306e\u57fa\u672c\u7684\u306a\u6982\u5ff5\u3068\u4f7f\u3044\u65b9\u306e\u89e3\u8aac\u3067\u3059\u3002\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u306f\u3001\u3088\u308a\u5b9f\u8df5\u7684\u306a\u5b9f\u88c5\u624b\u9806\u306b\u3064\u3044\u3066\u8a73\u3057\u304f\u8aac\u660e\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-3\">Laravel Select\u306e\u5b9f\u88c5\u624b\u9806\u3092\u5fb9\u5e95\u89e3\u8aac<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-4\">\u30b7\u30f3\u30d7\u30eb\u306a\u30bb\u30ec\u30af\u30c8\u30dc\u30c3\u30af\u30b9\u306e\u4f5c\u6210\u65b9\u6cd5<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u307e\u305a\u3001\u6700\u3082\u57fa\u672c\u7684\u306a\u30bb\u30ec\u30af\u30c8\u30dc\u30c3\u30af\u30b9\u306e\u5b9f\u88c5\u304b\u3089\u898b\u3066\u3044\u304d\u307e\u3057\u3087\u3046\u3002\u4ee5\u4e0b\u306e\u30b9\u30c6\u30c3\u30d7\u3067\u5b9f\u88c5\u3067\u304d\u307e\u3059\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=\"\">\/\/ routes\/web.php\nRoute::get('\/form', [FormController::class, 'show']);\nRoute::post('\/form', [FormController::class, 'store']);\n\n\/\/ app\/Http\/Controllers\/FormController.php\npublic function show()\n{\n    $options = [\n        'option1' =&gt; '\u9078\u629e\u80a21',\n        'option2' =&gt; '\u9078\u629e\u80a22',\n        'option3' =&gt; '\u9078\u629e\u80a23'\n    ];\n\n    return view('form', compact('options'));\n}\n\n\/\/ resources\/views\/form.blade.php\n{!! Form::open(['url' =&gt; '\/form']) !!}\n    {!! Form::select('choice', $options, null, [\n        'class' =&gt; 'form-control',\n        'placeholder' =&gt; '\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044'\n    ]) !!}\n    {!! Form::submit('\u9001\u4fe1', ['class' =&gt; 'btn btn-primary']) !!}\n{!! Form::close() !!}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-5\">\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u3068\u9023\u643a\u3057\u305f\u30bb\u30ec\u30af\u30c8\u30dc\u30c3\u30af\u30b9\u306e\u5b9f\u88c5<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u5b9f\u969b\u306e\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3067\u306f\u3001\u9078\u629e\u80a2\u3092\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u304b\u3089\u53d6\u5f97\u3059\u308b\u3053\u3068\u304c\u4e00\u822c\u7684\u3067\u3059\u3002\u4ee5\u4e0b\u306b\u5b9f\u88c5\u4f8b\u3092\u793a\u3057\u307e\u3059\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=\"\">\/\/ app\/Models\/Category.php\nclass Category extends Model\n{\n    protected $fillable = ['name', 'slug'];\n}\n\n\/\/ app\/Http\/Controllers\/ProductController.php\npublic function create()\n{\n    \/\/ \u30ab\u30c6\u30b4\u30ea\u30fc\u306e\u4e00\u89a7\u3092\u53d6\u5f97\n    $categories = Category::pluck('name', 'id');\n\n    return view('products.create', compact('categories'));\n}\n\n\/\/ resources\/views\/products\/create.blade.php\n{!! Form::open(['route' =&gt; 'products.store']) !!}\n    {!! Form::select('category_id', $categories, null, [\n        'class' =&gt; 'form-control',\n        'placeholder' =&gt; '\u30ab\u30c6\u30b4\u30ea\u30fc\u3092\u9078\u629e'\n    ]) !!}\n{!! Form::close() !!}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u5b9f\u88c5\u306e\u30dd\u30a4\u30f3\u30c8\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>pluck()<\/code>\u30e1\u30bd\u30c3\u30c9\u3092\u4f7f\u7528\u3057\u3066\u3001\u30ad\u30fc\u3068\u5024\u306e\u30da\u30a2\u3092\u7c21\u5358\u306b\u53d6\u5f97<\/li>\n\n\n\n<li>\u30bb\u30ec\u30af\u30c8\u30dc\u30c3\u30af\u30b9\u306ename\u5c5e\u6027\u306f\u5916\u90e8\u30ad\u30fc\u306e\u30ab\u30e9\u30e0\u540d\u306b\u5408\u308f\u305b\u308b<\/li>\n\n\n\n<li>\u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\u30eb\u30fc\u30eb\u3082\u5916\u90e8\u30ad\u30fc\u306e\u5236\u7d04\u306b\u5408\u308f\u305b\u308b<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-6\">\u9078\u629e\u6e08\u307f\u30aa\u30d7\u30b7\u30e7\u30f3\u306e\u8a2d\u5b9a\u65b9\u6cd5\uff08selected\u5c5e\u6027\uff09<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u30d5\u30a9\u30fc\u30e0\u306e\u7de8\u96c6\u6642\u306a\u3069\u3001\u65e2\u5b58\u306e\u30c7\u30fc\u30bf\u3092\u8868\u793a\u3059\u308b\u5834\u5408\u306e\u5b9f\u88c5\u65b9\u6cd5\u3092\u8aac\u660e\u3057\u307e\u3059\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=\"\">\/\/ app\/Http\/Controllers\/ProductController.php\npublic function edit(Product $product)\n{\n    $categories = Category::pluck('name', 'id');\n\n    return view('products.edit', compact('product', 'categories'));\n}\n\n\/\/ resources\/views\/products\/edit.blade.php\n{!! Form::model($product, ['route' =&gt; ['products.update', $product-&gt;id], 'method' =&gt; 'PUT']) !!}\n    {!! Form::select('category_id', $categories, null, [\n        'class' =&gt; 'form-control'\n    ]) !!}\n{!! Form::close() !!}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Form::model\u3092\u4f7f\u7528\u3059\u308b\u5229\u70b9\uff1a<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u30e2\u30c7\u30eb\u306e\u30c7\u30fc\u30bf\u304c\u81ea\u52d5\u7684\u306b\u30d5\u30a9\u30fc\u30e0\u306b\u8a2d\u5b9a\u3055\u308c\u308b<\/li>\n\n\n\n<li>\u53e4\u3044\u30ea\u30af\u30a8\u30b9\u30c8\u30c7\u30fc\u30bf\u306e\u81ea\u52d5\u5fa9\u5143<\/li>\n\n\n\n<li>\u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\u30a8\u30e9\u30fc\u6642\u306e\u5165\u529b\u5024\u4fdd\u6301<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u65b9\u6cd5\u3067\u3082\u9078\u629e\u5024\u3092\u8a2d\u5b9a\u3067\u304d\u307e\u3059\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=\"\">\/\/ \u76f4\u63a5value\u3092\u6307\u5b9a\u3059\u308b\u5834\u5408\n{!! Form::select('category_id', $categories, $product-&gt;category_id) !!}\n\n\/\/ old()\u30d8\u30eb\u30d1\u30fc\u3092\u4f7f\u7528\u3059\u308b\u5834\u5408\n{!! Form::select('category_id', $categories, old('category_id', $product-&gt;category_id)) !!}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u9078\u629e\u6e08\u307f\u5024\u306e\u8a2d\u5b9a\u306b\u304a\u3051\u308b\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9\uff1a<\/p>\n\n\n<div id=\"id-e41439dc-9676-4d30-b182-7140c45ab9ee\">\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\u72b6\u6cc1<\/th><th>\u63a8\u5968\u3055\u308c\u308b\u65b9\u6cd5<\/th><th>\u7406\u7531<\/th><\/tr><\/thead><tbody><tr><td>\u65b0\u898f\u4f5c\u6210\u30d5\u30a9\u30fc\u30e0<\/td><td>\u30c7\u30d5\u30a9\u30eb\u30c8\u5024\u307e\u305f\u306fnull<\/td><td>\u30e6\u30fc\u30b6\u30fc\u306e\u9078\u629e\u3092\u4fc3\u3059<\/td><\/tr><tr><td>\u7de8\u96c6\u30d5\u30a9\u30fc\u30e0<\/td><td>Form::model<\/td><td>\u65e2\u5b58\u30c7\u30fc\u30bf\u306e\u81ea\u52d5\u8a2d\u5b9a<\/td><\/tr><tr><td>\u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\u5f8c<\/td><td>old()\u30d8\u30eb\u30d1\u30fc<\/td><td>\u5165\u529b\u5024\u306e\u4fdd\u6301<\/td><\/tr><tr><td>API\u30d5\u30a9\u30fc\u30e0<\/td><td>\u76f4\u63a5\u5024\u3092\u6307\u5b9a<\/td><td>\u30b7\u30f3\u30d7\u30eb\u306a\u5b9f\u88c5<\/td><\/tr><\/tbody><\/table><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">\u3053\u308c\u3089\u306e\u5b9f\u88c5\u624b\u9806\u3092\u7406\u89e3\u3059\u308b\u3053\u3068\u3067\u3001\u57fa\u672c\u7684\u306a\u30bb\u30ec\u30af\u30c8\u30dc\u30c3\u30af\u30b9\u304b\u3089\u3001\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u3068\u9023\u643a\u3057\u305f\u52d5\u7684\u306a\u30d5\u30a9\u30fc\u30e0\u307e\u3067\u3001\u69d8\u3005\u306a\u30cb\u30fc\u30ba\u306b\u5bfe\u5fdc\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u306f\u3001\u3088\u308a\u5b9f\u8df5\u7684\u306a\u5b9f\u88c5\u30c6\u30af\u30cb\u30c3\u30af\u306b\u3064\u3044\u3066\u89e3\u8aac\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-7\">\u5b9f\u8df5\u7684\u306aSelect\u5b9f\u88c5\u30c6\u30af\u30cb\u30c3\u30af<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-8\">\u52d5\u7684\u306a\u30bb\u30ec\u30af\u30c8\u30dc\u30c3\u30af\u30b9\u306e\u4f5c\u6210\u65b9\u6cd5<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u52d5\u7684\u306a\u30bb\u30ec\u30af\u30c8\u30dc\u30c3\u30af\u30b9\u306f\u3001\u30e6\u30fc\u30b6\u30fc\u306e\u64cd\u4f5c\u306b\u5fdc\u3058\u3066\u5185\u5bb9\u304c\u5909\u5316\u3059\u308bUI\u3092\u5b9f\u73fe\u3057\u307e\u3059\u3002\u4ee5\u4e0b\u306b\u3001\u5178\u578b\u7684\u306a\u5b9f\u88c5\u4f8b\u3092\u793a\u3057\u307e\u3059\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=\"\">\/\/ app\/Http\/Controllers\/ProductController.php\npublic function getProducts(Request $request)\n{\n    $category_id = $request-&gt;input('category_id');\n    $products = Product::where('category_id', $category_id)\n        -&gt;get(['id', 'name'])\n        -&gt;map(function($product) {\n            return [\n                'id' =&gt; $product-&gt;id,\n                'name' =&gt; $product-&gt;name\n            ];\n        });\n\n    return response()-&gt;json($products);\n}\n\n\/\/ resources\/views\/products\/index.blade.php\n&lt;div class=\"form-group\"&gt;\n    {!! Form::select('category_id', $categories, null, [\n        'class' =&gt; 'form-control',\n        'id' =&gt; 'category-select',\n        'placeholder' =&gt; '\u30ab\u30c6\u30b4\u30ea\u30fc\u3092\u9078\u629e'\n    ]) !!}\n&lt;\/div&gt;\n\n&lt;div class=\"form-group\"&gt;\n    {!! Form::select('product_id', [], null, [\n        'class' =&gt; 'form-control',\n        'id' =&gt; 'product-select',\n        'placeholder' =&gt; '\u5546\u54c1\u3092\u9078\u629e'\n    ]) !!}\n&lt;\/div&gt;\n\n@push('scripts')\n&lt;script&gt;\ndocument.getElementById('category-select').addEventListener('change', function() {\n    const categoryId = this.value;\n    const productSelect = document.getElementById('product-select');\n\n    \/\/ \u9078\u629e\u80a2\u3092\u30af\u30ea\u30a2\n    productSelect.innerHTML = '&lt;option value=\"\"&gt;\u5546\u54c1\u3092\u9078\u629e&lt;\/option&gt;';\n\n    if (categoryId) {\n        fetch(`\/api\/products?category_id=${categoryId}`)\n            .then(response =&gt; response.json())\n            .then(products =&gt; {\n                products.forEach(product =&gt; {\n                    const option = new Option(product.name, product.id);\n                    productSelect.add(option);\n                });\n            });\n    }\n});\n&lt;\/script&gt;\n@endpush<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-9\">\u30ab\u30b9\u30b1\u30fc\u30c9\uff08\u9023\u52d5\uff09\u30bb\u30ec\u30af\u30c8\u30dc\u30c3\u30af\u30b9\u306e\u5b9f\u88c5<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u3088\u308a\u8907\u96d1\u306a\u9023\u52d5\u30bb\u30ec\u30af\u30c8\u30dc\u30c3\u30af\u30b9\uff08\u4f8b\uff1a\u90fd\u9053\u5e9c\u770c\u2192\u5e02\u533a\u753a\u6751\uff09\u306e\u5b9f\u88c5\u4f8b\u3092\u793a\u3057\u307e\u3059\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=\"\">\/\/ app\/Http\/Controllers\/LocationController.php\nclass LocationController extends Controller\n{\n    public function getCities(Request $request)\n    {\n        $prefecture_id = $request-&gt;input('prefecture_id');\n        $cities = City::where('prefecture_id', $prefecture_id)\n            -&gt;orderBy('name')\n            -&gt;get(['id', 'name']);\n\n        return response()-&gt;json($cities);\n    }\n}\n\n\/\/ resources\/views\/location\/select.blade.php\n@php\n    $prefectures = Prefecture::orderBy('name')-&gt;pluck('name', 'id');\n@endphp\n\n&lt;div id=\"location-selects\"&gt;\n    {!! Form::select('prefecture_id', $prefectures, null, [\n        'class' =&gt; 'form-control mb-3',\n        'id' =&gt; 'prefecture-select',\n        'placeholder' =&gt; '\u90fd\u9053\u5e9c\u770c\u3092\u9078\u629e'\n    ]) !!}\n\n    {!! Form::select('city_id', [], null, [\n        'class' =&gt; 'form-control',\n        'id' =&gt; 'city-select',\n        'placeholder' =&gt; '\u5e02\u533a\u753a\u6751\u3092\u9078\u629e'\n    ]) !!}\n&lt;\/div&gt;\n\n@push('scripts')\n&lt;script&gt;\nclass LocationSelector {\n    constructor() {\n        this.prefectureSelect = document.getElementById('prefecture-select');\n        this.citySelect = document.getElementById('city-select');\n        this.initializeEventListeners();\n    }\n\n    initializeEventListeners() {\n        this.prefectureSelect.addEventListener('change', () =&gt; this.onPrefectureChange());\n    }\n\n    async onPrefectureChange() {\n        const prefectureId = this.prefectureSelect.value;\n        this.clearCitySelect();\n\n        if (prefectureId) {\n            try {\n                const cities = await this.fetchCities(prefectureId);\n                this.populateCitySelect(cities);\n            } catch (error) {\n                console.error('\u90fd\u5e02\u30c7\u30fc\u30bf\u306e\u53d6\u5f97\u306b\u5931\u6557\u3057\u307e\u3057\u305f:', error);\n                alert('\u90fd\u5e02\u30c7\u30fc\u30bf\u306e\u53d6\u5f97\u306b\u5931\u6557\u3057\u307e\u3057\u305f\u3002\u518d\u5ea6\u304a\u8a66\u3057\u304f\u3060\u3055\u3044\u3002');\n            }\n        }\n    }\n\n    clearCitySelect() {\n        this.citySelect.innerHTML = '&lt;option value=\"\"&gt;\u5e02\u533a\u753a\u6751\u3092\u9078\u629e&lt;\/option&gt;';\n    }\n\n    async fetchCities(prefectureId) {\n        const response = await fetch(`\/api\/cities?prefecture_id=${prefectureId}`);\n        if (!response.ok) throw new Error('API request failed');\n        return await response.json();\n    }\n\n    populateCitySelect(cities) {\n        cities.forEach(city =&gt; {\n            const option = new Option(city.name, city.id);\n            this.citySelect.add(option);\n        });\n    }\n}\n\nnew LocationSelector();\n&lt;\/script&gt;\n@endpush<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-10\">\u975e\u540c\u671f\u901a\u4fe1\u3092\u4f7f\u7528\u3057\u305f\u30bb\u30ec\u30af\u30c8\u30dc\u30c3\u30af\u30b9\u306e\u66f4\u65b0<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u5927\u91cf\u306e\u30c7\u30fc\u30bf\u3092\u6271\u3046\u5834\u5408\u3084\u3001\u52d5\u7684\u306a\u30d5\u30a3\u30eb\u30bf\u30ea\u30f3\u30b0\u304c\u5fc5\u8981\u306a\u5834\u5408\u306e\u5b9f\u88c5\u4f8b\u3067\u3059\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=\"\">\/\/ app\/Http\/Controllers\/ProductController.php\npublic function search(Request $request)\n{\n    $query = $request-&gt;input('query');\n    $products = Product::where('name', 'LIKE', \"%{$query}%\")\n        -&gt;orWhere('code', 'LIKE', \"%{$query}%\")\n        -&gt;limit(20)\n        -&gt;get(['id', 'name', 'code']);\n\n    return response()-&gt;json($products);\n}\n\n\/\/ resources\/views\/products\/search.blade.php\n&lt;div class=\"form-group\"&gt;\n    {!! Form::select('product_id', [], null, [\n        'class' =&gt; 'form-control select2',\n        'id' =&gt; 'product-search',\n        'placeholder' =&gt; '\u5546\u54c1\u3092\u691c\u7d22'\n    ]) !!}\n&lt;\/div&gt;\n\n@push('scripts')\n&lt;script&gt;\n$(document).ready(function() {\n    $('#product-search').select2({\n        ajax: {\n            url: '\/api\/products\/search',\n            dataType: 'json',\n            delay: 250,\n            data: function(params) {\n                return {\n                    query: params.term,\n                    page: params.page\n                };\n            },\n            processResults: function(data) {\n                return {\n                    results: data.map(item =&gt; ({\n                        id: item.id,\n                        text: `${item.name} (${item.code})`\n                    }))\n                };\n            },\n            cache: true\n        },\n        minimumInputLength: 2,\n        placeholder: '\u5546\u54c1\u3092\u691c\u7d22...',\n        language: 'ja'\n    });\n});\n&lt;\/script&gt;\n@endpush<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u5b9f\u88c5\u6642\u306e\u6ce8\u610f\u70b9\u3068\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9\uff1a<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u30a8\u30e9\u30fc\u30cf\u30f3\u30c9\u30ea\u30f3\u30b0<\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30cd\u30c3\u30c8\u30ef\u30fc\u30af\u30a8\u30e9\u30fc\u306e\u9069\u5207\u306a\u51e6\u7406<\/li>\n\n\n\n<li>\u30e6\u30fc\u30b6\u30fc\u3078\u306e\u30d5\u30a3\u30fc\u30c9\u30d0\u30c3\u30af\u8868\u793a<\/li>\n\n\n\n<li>\u30c7\u30d0\u30c3\u30b0\u60c5\u5831\u306e\u30ed\u30b0\u8a18\u9332<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u6700\u9069\u5316<\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30c7\u30d0\u30a6\u30f3\u30b9\u51e6\u7406\u306e\u5b9f\u88c5<\/li>\n\n\n\n<li>\u9069\u5207\u306a\u30ad\u30e3\u30c3\u30b7\u30e5\u6226\u7565<\/li>\n\n\n\n<li>\u7d50\u679c\u306e\u5236\u9650\uff08\u30da\u30fc\u30b8\u30cd\u30fc\u30b7\u30e7\u30f3\uff09<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li>UX\u5411\u4e0a\u306e\u305f\u3081\u306eTips<\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30ed\u30fc\u30c7\u30a3\u30f3\u30b0\u8868\u793a<\/li>\n\n\n\n<li>\u30d7\u30ec\u30fc\u30b9\u30db\u30eb\u30c0\u30fc\u30c6\u30ad\u30b9\u30c8<\/li>\n\n\n\n<li>\u30a8\u30e9\u30fc\u30e1\u30c3\u30bb\u30fc\u30b8\u306e\u591a\u8a00\u8a9e\u5bfe\u5fdc<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\u3053\u308c\u3089\u306e\u5b9f\u88c5\u30c6\u30af\u30cb\u30c3\u30af\u3092\u6d3b\u7528\u3059\u308b\u3053\u3068\u3067\u3001\u3088\u308a\u6d17\u7df4\u3055\u308c\u305f\u52d5\u7684\u306a\u30d5\u30a9\u30fc\u30e0\u3092\u4f5c\u6210\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u306f\u3001\u30bb\u30ec\u30af\u30c8\u30dc\u30c3\u30af\u30b9\u306e\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u65b9\u6cd5\u306b\u3064\u3044\u3066\u8a73\u3057\u304f\u89e3\u8aac\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-11\">Laravel\u306eSelect\u3092\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u3059\u308b<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-12\">\u30bb\u30ec\u30af\u30c8\u30dc\u30c3\u30af\u30b9\u306e\u30b9\u30bf\u30a4\u30ea\u30f3\u30b0\u65b9\u6cd5<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u57fa\u672c\u7684\u306a\u30b9\u30bf\u30a4\u30ea\u30f3\u30b0\u304b\u3089\u9ad8\u5ea6\u306a\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u307e\u3067\u3001\u6bb5\u968e\u7684\u306b\u89e3\u8aac\u3057\u307e\u3059\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=\"\">\/\/ \u57fa\u672c\u7684\u306a\u30af\u30e9\u30b9\u9069\u7528\n{!! Form::select('category', $categories, null, [\n    'class' =&gt; 'form-control custom-select',\n    'style' =&gt; 'width: 200px; border-radius: 8px;'\n]) !!}\n\n\/\/ \u3088\u308a\u8a73\u7d30\u306a\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\n&lt;style&gt;\n.custom-select {\n    appearance: none;\n    background-image: url(\"data:image\/svg+xml,...\"); \/* \u30ab\u30b9\u30bf\u30e0\u77e2\u5370 *\/\n    background-repeat: no-repeat;\n    background-position: right 0.75rem center;\n    padding: 0.5rem 2rem 0.5rem 1rem;\n    border: 1px solid #e2e8f0;\n    border-radius: 0.375rem;\n    transition: all 0.2s ease-in-out;\n}\n\n.custom-select:hover {\n    border-color: #cbd5e0;\n    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.1);\n}\n\n.custom-select:focus {\n    border-color: #4299e1;\n    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.2);\n    outline: none;\n}\n\n\/* \u7121\u52b9\u72b6\u614b\u306e\u30b9\u30bf\u30a4\u30eb *\/\n.custom-select:disabled {\n    background-color: #f7fafc;\n    cursor: not-allowed;\n    opacity: 0.7;\n}\n&lt;\/style&gt;<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u30e2\u30c0\u30f3\u306aUI\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3068\u306e\u7d71\u5408\u4f8b\uff08Tailwind CSS\uff09\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=\"\">\/\/ resources\/views\/components\/select.blade.php\n@props(['options' =&gt; [], 'name', 'selected' =&gt; null])\n\n&lt;select\n    name=\"{{ $name }}\"\n    {{ $attributes-&gt;merge(['class' =&gt; 'block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm']) }}\n&gt;\n    @foreach($options as $value =&gt; $label)\n        &lt;option value=\"{{ $value }}\" {{ $selected == $value ? 'selected' : '' }}&gt;\n            {{ $label }}\n        &lt;\/option&gt;\n    @endforeach\n&lt;\/select&gt;\n\n\/\/ \u4f7f\u7528\u4f8b\n&lt;x-select\n    name=\"category\"\n    :options=\"$categories\"\n    :selected=\"old('category')\"\n    class=\"mt-1\"\n\/&gt;<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-13\">\u30d7\u30ec\u30fc\u30b9\u30db\u30eb\u30c0\u30fc\u3068\u30c7\u30d5\u30a9\u30eb\u30c8\u5024\u306e\u8a2d\u5b9a<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u69d8\u3005\u306a\u30b7\u30fc\u30f3\u3067\u306e\u30d7\u30ec\u30fc\u30b9\u30db\u30eb\u30c0\u30fc\u3068\u30c7\u30d5\u30a9\u30eb\u30c8\u5024\u306e\u5b9f\u88c5\u65b9\u6cd5\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=\"\">\/\/ Controller\npublic function create()\n{\n    $priorities = [\n        'low' =&gt; '\u4f4e',\n        'medium' =&gt; '\u4e2d',\n        'high' =&gt; '\u9ad8'\n    ];\n\n    \/\/ \u30c7\u30d5\u30a9\u30eb\u30c8\u5024\u3092'medium'\u306b\u8a2d\u5b9a\n    $defaultPriority = 'medium';\n\n    return view('tasks.create', compact('priorities', 'defaultPriority'));\n}\n\n\/\/ View\n{!! Form::select('priority', \n    ['' =&gt; '\u512a\u5148\u5ea6\u3092\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044'] + $priorities, \/\/ \u30d7\u30ec\u30fc\u30b9\u30db\u30eb\u30c0\u30fc\u306e\u8ffd\u52a0\n    $defaultPriority,\n    ['class' =&gt; 'form-control']\n) !!}\n\n\/\/ \u6761\u4ef6\u4ed8\u304d\u30c7\u30d5\u30a9\u30eb\u30c8\u5024\n$defaultCategory = Auth::user()-&gt;isAdmin() ? 'admin' : 'user';\n\n\/\/ \u8907\u6570\u9078\u629e\u306e\u5834\u5408\u306e\u30c7\u30d5\u30a9\u30eb\u30c8\u5024\n$selectedTags = ['php', 'laravel'];\n{!! Form::select('tags[]', \n    $availableTags, \n    $selectedTags, \n    ['class' =&gt; 'form-control', 'multiple' =&gt; true]\n) !!}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-14\">\u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\u30eb\u30fc\u30eb\u306e\u8ffd\u52a0\u65b9\u6cd5<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u30d5\u30a9\u30fc\u30e0\u30ea\u30af\u30a8\u30b9\u30c8\u3068\u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\u306e\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=\"\">\/\/ app\/Http\/Requests\/ProductRequest.php\nclass ProductRequest extends FormRequest\n{\n    public function rules()\n    {\n        return [\n            'category_id' =&gt; [\n                'required',\n                'exists:categories,id',\n                Rule::prohibitedIf(function() {\n                    return $this-&gt;user()-&gt;cannot('select_category');\n                })\n            ],\n            'tags' =&gt; 'array|min:1|max:5',\n            'tags.*' =&gt; 'exists:tags,id'\n        ];\n    }\n\n    public function messages()\n    {\n        return [\n            'category_id.required' =&gt; '\u30ab\u30c6\u30b4\u30ea\u30fc\u306f\u5fc5\u9808\u3067\u3059',\n            'category_id.exists' =&gt; '\u9078\u629e\u3055\u308c\u305f\u30ab\u30c6\u30b4\u30ea\u30fc\u306f\u7121\u52b9\u3067\u3059',\n            'tags.min' =&gt; '\u5c11\u306a\u304f\u3068\u30821\u3064\u306e\u30bf\u30b0\u3092\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044',\n            'tags.max' =&gt; '\u30bf\u30b0\u306f\u6700\u59275\u3064\u307e\u3067\u9078\u629e\u53ef\u80fd\u3067\u3059'\n        ];\n    }\n}\n\n\/\/ Controller\npublic function store(ProductRequest $request)\n{\n    $validated = $request-&gt;validated();\n    \/\/ \u51e6\u7406\u7d9a\u884c...\n}\n\n\/\/ View\n&lt;div class=\"form-group\"&gt;\n    {!! Form::select('category_id', $categories, null, [\n        'class' =&gt; 'form-control ' . ($errors-&gt;has('category_id') ? 'is-invalid' : ''),\n        'required' =&gt; true\n    ]) !!}\n\n    @error('category_id')\n        &lt;div class=\"invalid-feedback\"&gt;\n            {{ $message }}\n        &lt;\/div&gt;\n    @enderror\n&lt;\/div&gt;\n\n@push('scripts')\n&lt;script&gt;\n\/\/ \u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u30b5\u30a4\u30c9\u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\nconst categorySelect = document.querySelector('[name=\"category_id\"]');\ncategorySelect.addEventListener('change', function() {\n    if (!this.value) {\n        this.classList.add('is-invalid');\n        this.setCustomValidity('\u30ab\u30c6\u30b4\u30ea\u30fc\u3092\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044');\n    } else {\n        this.classList.remove('is-invalid');\n        this.setCustomValidity('');\n    }\n});\n&lt;\/script&gt;\n@endpush<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u6642\u306e\u4e3b\u8981\u306a\u30dd\u30a4\u30f3\u30c8\uff1a<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u30a2\u30af\u30bb\u30b7\u30d3\u30ea\u30c6\u30a3\u3078\u306e\u914d\u616e\n<ul class=\"wp-block-list\">\n<li>ARIA\u5c5e\u6027\u306e\u9069\u5207\u306a\u8a2d\u5b9a<\/li>\n\n\n\n<li>\u30ad\u30fc\u30dc\u30fc\u30c9\u64cd\u4f5c\u306e\u30b5\u30dd\u30fc\u30c8<\/li>\n\n\n\n<li>\u30b9\u30af\u30ea\u30fc\u30f3\u30ea\u30fc\u30c0\u30fc\u5bfe\u5fdc<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u30c7\u30b6\u30a4\u30f3\u5bfe\u5fdc\n<ul class=\"wp-block-list\">\n<li>\u30e2\u30d0\u30a4\u30eb\u3067\u306e\u4f7f\u3044\u3084\u3059\u3055<\/li>\n\n\n\n<li>\u30bf\u30c3\u30c1\u30c7\u30d0\u30a4\u30b9\u3067\u306e\u64cd\u4f5c\u611f<\/li>\n\n\n\n<li>\u753b\u9762\u30b5\u30a4\u30ba\u306b\u5fdc\u3058\u305f\u9069\u5207\u306a\u30b5\u30a4\u30ba\u8abf\u6574<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u306e\u6700\u9069\u5316\n<ul class=\"wp-block-list\">\n<li>CSS\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306e\u9069\u5207\u306a\u4f7f\u7528<\/li>\n\n\n\n<li>\u52b9\u7387\u7684\u306a\u30a4\u30d9\u30f3\u30c8\u30cf\u30f3\u30c9\u30ea\u30f3\u30b0<\/li>\n\n\n\n<li>\u4e0d\u8981\u306aDOM\u64cd\u4f5c\u306e\u524a\u6e1b<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">\u3053\u308c\u3089\u306e\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u6280\u8853\u3092\u9069\u5207\u306b\u7d44\u307f\u5408\u308f\u305b\u308b\u3053\u3068\u3067\u3001\u6a5f\u80fd\u7684\u3067\u7f8e\u3057\u3044\u30bb\u30ec\u30af\u30c8\u30dc\u30c3\u30af\u30b9\u3092\u5b9f\u88c5\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u306f\u3001\u5b9f\u88c5\u306b\u304a\u3051\u308b\u6ce8\u610f\u70b9\u306b\u3064\u3044\u3066\u89e3\u8aac\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-15\">Laravel Select\u306e\u5b9f\u88c5\u306b\u304a\u3051\u308b\u6ce8\u610f\u70b9<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-16\">\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u5bfe\u7b56\u3068XSS\u5bfe\u7b56<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u30bb\u30ec\u30af\u30c8\u30dc\u30c3\u30af\u30b9\u306e\u5b9f\u88c5\u306b\u304a\u3044\u3066\u3001\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u306f\u6700\u3082\u91cd\u8981\u306a\u8003\u616e\u4e8b\u9805\u306e\u4e00\u3064\u3067\u3059\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=\"\">\/\/ \u8106\u5f31\u6027\u306e\u3042\u308b\u5b9f\u88c5\uff08\u3053\u308c\u306f\u907f\u3051\u308b\u3079\u304d\uff09\n{!! \"&lt;select name='category'&gt;\" . implode('', $options) . \"&lt;\/select&gt;\" !!}\n\n\/\/ \u5b89\u5168\u306a\u5b9f\u88c5\n\/\/ Blade\u306e\u30a8\u30b9\u30b1\u30fc\u30d7\u6a5f\u80fd\u3092\u6d3b\u7528\n&lt;select name=\"category\"&gt;\n    @foreach($options as $value =&gt; $label)\n        &lt;option value=\"{{ $value }}\"&gt;{{ $label }}&lt;\/option&gt;\n    @endforeach\n&lt;\/select&gt;\n\n\/\/ Form::select\u3092\u4f7f\u7528\u3057\u305f\u5b89\u5168\u306a\u5b9f\u88c5\n{!! Form::select('category', $options, null, ['class' =&gt; 'form-control']) !!}\n\n\/\/ \u30e6\u30fc\u30b6\u30fc\u5165\u529b\u3092\u542b\u3080\u52d5\u7684\u306a\u30aa\u30d7\u30b7\u30e7\u30f3\u3092\u6271\u3046\u5834\u5408\npublic function getOptions(Request $request)\n{\n    $search = $request-&gt;input('q');\n\n    return Product::where('name', 'LIKE', '%' . e($search) . '%')\n        -&gt;get()\n        -&gt;map(function ($product) {\n            return [\n                'id' =&gt; $product-&gt;id,\n                'text' =&gt; e($product-&gt;name) \/\/ HTML\u30a8\u30b9\u30b1\u30fc\u30d7\n            ];\n        });\n}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u30c1\u30a7\u30c3\u30af\u30ea\u30b9\u30c8\uff1a<\/p>\n\n\n<div id=\"id-93b34918-957f-4703-ae7f-922143762585\">\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\u5bfe\u7b56\u9805\u76ee<\/th><th>\u5b9f\u88c5\u65b9\u6cd5<\/th><th>\u8aac\u660e<\/th><\/tr><\/thead><tbody><tr><td>XSS\u5bfe\u7b56<\/td><td>Blade\u30a8\u30b9\u30b1\u30fc\u30d7<\/td><td>\u5909\u6570\u51fa\u529b\u6642\u306b<code>{{ }}<\/code>\u3092\u4f7f\u7528<\/td><\/tr><tr><td>CSRF\u5bfe\u7b56<\/td><td>CSRF\u30c8\u30fc\u30af\u30f3<\/td><td><code>@csrf<\/code>\u30c7\u30a3\u30ec\u30af\u30c6\u30a3\u30d6\u3092\u4f7f\u7528<\/td><\/tr><tr><td>SQL\u30a4\u30f3\u30b8\u30a7\u30af\u30b7\u30e7\u30f3\u5bfe\u7b56<\/td><td>\u30af\u30a8\u30ea\u30d3\u30eb\u30c0\/Eloquent<\/td><td>\u751f\u306eSQL\u3092\u907f\u3051\u308b<\/td><\/tr><tr><td>\u5165\u529b\u691c\u8a3c<\/td><td>\u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3<\/td><td>FormRequest\u3092\u4f7f\u7528<\/td><\/tr><tr><td>\u30a2\u30af\u30bb\u30b9\u5236\u5fa1<\/td><td>\u30dd\u30ea\u30b7\u30fc\/\u30b2\u30fc\u30c8<\/td><td>\u6a29\u9650\u30c1\u30a7\u30c3\u30af\u3092\u5b9f\u88c5<\/td><\/tr><\/tbody><\/table><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"i-17\">\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<p class=\"wp-block-paragraph\">\u5927\u898f\u6a21\u306a\u30c7\u30fc\u30bf\u3092\u6271\u3046\u5834\u5408\u306e\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u6700\u9069\u5316\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=\"\">\/\/ \u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u3067\u306e\u6700\u9069\u5316\npublic function getCategories()\n{\n    \/\/ \u30ad\u30e3\u30c3\u30b7\u30e5\u306e\u6d3b\u7528\n    return Cache::remember('categories', 3600, function () {\n        return Category::select(['id', 'name'])  \/\/ \u5fc5\u8981\u306a\u30ab\u30e9\u30e0\u306e\u307f\u53d6\u5f97\n            -&gt;orderBy('name')\n            -&gt;get()\n            -&gt;map(function ($category) {\n                return [\n                    'id' =&gt; $category-&gt;id,\n                    'text' =&gt; $category-&gt;name\n                ];\n            });\n    });\n}\n\n\/\/ \u5927\u91cf\u30c7\u30fc\u30bf\u306e\u5834\u5408\u306e\u9045\u5ef6\u8aad\u307f\u8fbc\u307f\npublic function getProducts(Request $request)\n{\n    return Product::select(['id', 'name'])\n        -&gt;when($request-&gt;input('search'), function ($query, $search) {\n            return $query-&gt;where('name', 'LIKE', \"%{$search}%\");\n        })\n        -&gt;paginate(20);  \/\/ \u30da\u30fc\u30b8\u30cd\u30fc\u30b7\u30e7\u30f3\n}\n\n\/\/ N+1\u554f\u984c\u306e\u89e3\u6c7a\npublic function getProductsWithCategory()\n{\n    return Product::with('category:id,name')  \/\/ Eager Loading\n        -&gt;select(['id', 'name', 'category_id'])\n        -&gt;get();\n}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u6700\u9069\u5316\u306e\u30dd\u30a4\u30f3\u30c8\uff1a<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u30af\u30a8\u30ea\u306e\u6700\u9069\u5316<\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30a4\u30f3\u30c7\u30c3\u30af\u30b9\u306e\u9069\u5207\u306a\u8a2d\u5b9a<\/li>\n\n\n\n<li>\u5fc5\u8981\u306a\u30ab\u30e9\u30e0\u306e\u307f\u306e\u53d6\u5f97<\/li>\n\n\n\n<li>Eager Loading\u306e\u6d3b\u7528<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u306e\u6700\u9069\u5316<\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30c7\u30d0\u30a6\u30f3\u30b9\u51e6\u7406\u306e\u5b9f\u88c5<\/li>\n\n\n\n<li>\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u306e\u52b9\u7387\u5316<\/li>\n\n\n\n<li>\u4e0d\u8981\u306a\u518d\u63cf\u753b\u306e\u9632\u6b62<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u30ad\u30e3\u30c3\u30b7\u30e5\u6226\u7565<\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u9069\u5207\u306a\u30ad\u30e3\u30c3\u30b7\u30e5\u671f\u9593\u306e\u8a2d\u5b9a<\/li>\n\n\n\n<li>\u90e8\u5206\u7684\u306a\u30ad\u30e3\u30c3\u30b7\u30e5\u306e\u6d3b\u7528<\/li>\n\n\n\n<li>\u30ad\u30e3\u30c3\u30b7\u30e5\u306e\u81ea\u52d5\u66f4\u65b0<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-18\">\u4e00\u822c\u7684\u306a\u30a8\u30e9\u30fc\u3068\u305d\u306e\u89e3\u6c7a\u65b9\u6cd5<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u3088\u304f\u3042\u308b\u30a8\u30e9\u30fc\u3068\u305d\u306e\u5bfe\u51e6\u6cd5\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. \u5024\u304c\u6b63\u3057\u304f\u9001\u4fe1\u3055\u308c\u306a\u3044\u554f\u984c\n\/\/ \u554f\u984c\u306e\u3042\u308b\u5b9f\u88c5\n&lt;select name=\"category\"&gt;  \/\/ name\u5c5e\u6027\u304c\u914d\u5217\u306e\u5834\u5408\u306b\u5bfe\u5fdc\u3057\u3066\u3044\u306a\u3044\n\n\/\/ \u6b63\u3057\u3044\u5b9f\u88c5\n&lt;select name=\"categories[]\" multiple&gt;  \/\/ \u8907\u6570\u9078\u629e\u306e\u5834\u5408\u306f\u914d\u5217\u3068\u3057\u3066\u6271\u3046\n\n\/\/ 2. \u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\u30a8\u30e9\u30fc\u5f8c\u306e\u5024\u4fdd\u6301\n\/\/ \u554f\u984c\u306e\u3042\u308b\u5b9f\u88c5\n{!! Form::select('category_id', $categories) !!}  \/\/ old()\u5024\u3092\u8003\u616e\u3057\u3066\u3044\u306a\u3044\n\n\/\/ \u6b63\u3057\u3044\u5b9f\u88c5\n{!! Form::select('category_id', $categories, old('category_id')) !!}\n\n\/\/ 3. \u30ea\u30ec\u30fc\u30b7\u30e7\u30f3\u5148\u306e\u30c7\u30fc\u30bf\u53d6\u5f97\u30a8\u30e9\u30fc\n\/\/ \u554f\u984c\u306e\u3042\u308b\u5b9f\u88c5\n$products = Product::where('category_id', $category_id)-&gt;get();  \/\/ \u5b58\u5728\u78ba\u8a8d\u306a\u3057\n\n\/\/ \u6b63\u3057\u3044\u5b9f\u88c5\n$products = Product::where('category_id', $category_id)\n    -&gt;whereHas('category')  \/\/ \u30ea\u30ec\u30fc\u30b7\u30e7\u30f3\u5148\u306e\u5b58\u5728\u78ba\u8a8d\n    -&gt;get();\n\n\/\/ 4. \u975e\u540c\u671f\u8aad\u307f\u8fbc\u307f\u306e\u30a8\u30e9\u30fc\u30cf\u30f3\u30c9\u30ea\u30f3\u30b0\n@push('scripts')\n&lt;script&gt;\nasync function loadOptions() {\n    try {\n        const response = await fetch('\/api\/options');\n        if (!response.ok) {\n            throw new Error('API request failed');\n        }\n        const data = await response.json();\n        updateSelectOptions(data);\n    } catch (error) {\n        console.error('Error loading options:', error);\n        showErrorMessage('\u30aa\u30d7\u30b7\u30e7\u30f3\u306e\u8aad\u307f\u8fbc\u307f\u306b\u5931\u6557\u3057\u307e\u3057\u305f');\n    }\n}\n\nfunction showErrorMessage(message) {\n    const errorDiv = document.createElement('div');\n    errorDiv.className = 'alert alert-danger';\n    errorDiv.textContent = message;\n    \/\/ \u30a8\u30e9\u30fc\u30e1\u30c3\u30bb\u30fc\u30b8\u306e\u8868\u793a\u51e6\u7406\n}\n&lt;\/script&gt;\n@endpush<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u30a8\u30e9\u30fc\u9632\u6b62\u306e\u305f\u3081\u306e\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9\uff1a<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u5165\u529b\u5024\u306e\u691c\u8a3c<\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u5fc5\u9808\u30c1\u30a7\u30c3\u30af<\/li>\n\n\n\n<li>\u578b\u30c1\u30a7\u30c3\u30af<\/li>\n\n\n\n<li>\u7bc4\u56f2\u30c1\u30a7\u30c3\u30af<\/li>\n\n\n\n<li>\u5b58\u5728\u30c1\u30a7\u30c3\u30af<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u30a8\u30e9\u30fc\u30cf\u30f3\u30c9\u30ea\u30f3\u30b0<\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>try-catch\u69cb\u6587\u306e\u6d3b\u7528<\/li>\n\n\n\n<li>\u30e6\u30fc\u30b6\u30fc\u30d5\u30ec\u30f3\u30c9\u30ea\u30fc\u306a\u30a8\u30e9\u30fc\u30e1\u30c3\u30bb\u30fc\u30b8<\/li>\n\n\n\n<li>\u30ed\u30b0\u8a18\u9332<\/li>\n\n\n\n<li>\u30d5\u30a9\u30fc\u30eb\u30d0\u30c3\u30af\u51e6\u7406<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u30c7\u30fc\u30bf\u306e\u6574\u5408\u6027\u78ba\u4fdd<\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30c8\u30e9\u30f3\u30b6\u30af\u30b7\u30e7\u30f3\u306e\u9069\u5207\u306a\u4f7f\u7528<\/li>\n\n\n\n<li>\u30c7\u30c3\u30c9\u30ed\u30c3\u30af\u306e\u9632\u6b62<\/li>\n\n\n\n<li>\u4e00\u610f\u6027\u5236\u7d04\u306e\u8a2d\u5b9a<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\u3053\u308c\u3089\u306e\u6ce8\u610f\u70b9\u3092\u610f\u8b58\u3059\u308b\u3053\u3068\u3067\u3001\u3088\u308a\u5805\u7262\u3067\u4fe1\u983c\u6027\u306e\u9ad8\u3044\u30bb\u30ec\u30af\u30c8\u30dc\u30c3\u30af\u30b9\u306e\u5b9f\u88c5\u304c\u53ef\u80fd\u306b\u306a\u308a\u307e\u3059\u3002\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u306f\u3001\u3088\u308a\u5b9f\u8df5\u7684\u306a\u30b3\u30fc\u30c9\u4f8b\u3092\u7528\u3044\u3066\u5fdc\u7528\u7684\u306a\u5b9f\u88c5\u65b9\u6cd5\u3092\u89e3\u8aac\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-19\">\u5b9f\u8df5\u7684\u306a\u30b3\u30fc\u30c9\u4f8b\u3067\u5b66\u3076Select\u5fdc\u7528<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-20\">\u90fd\u9053\u5e9c\u770c\u3068\u5e02\u533a\u753a\u6751\u306e\u9023\u52d5\u30bb\u30ec\u30af\u30c8\u5b9f\u88c5\u4f8b<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u5b9f\u969b\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3067\u3088\u304f\u4f7f\u7528\u3055\u308c\u308b\u3001\u90fd\u9053\u5e9c\u770c\u3068\u5e02\u533a\u753a\u6751\u306e\u9023\u52d5\u30bb\u30ec\u30af\u30c8\u306e\u5b8c\u5168\u306a\u5b9f\u88c5\u4f8b\u3092\u793a\u3057\u307e\u3059\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=\"\">\/\/ app\/Models\/Prefecture.php\nclass Prefecture extends Model\n{\n    public function cities()\n    {\n        return $this-&gt;hasMany(City::class);\n    }\n}\n\n\/\/ app\/Models\/City.php\nclass City extends Model\n{\n    public function prefecture()\n    {\n        return $this-&gt;belongsTo(Prefecture::class);\n    }\n}\n\n\/\/ app\/Http\/Controllers\/LocationController.php\nclass LocationController extends Controller\n{\n    public function index()\n    {\n        $prefectures = Prefecture::orderBy('code')-&gt;pluck('name', 'id');\n        return view('location.index', compact('prefectures'));\n    }\n\n    public function getCities(Request $request)\n    {\n        $cities = City::where('prefecture_id', $request-&gt;prefecture_id)\n            -&gt;orderBy('code')\n            -&gt;get(['id', 'name'])\n            -&gt;map(function ($city) {\n                return [\n                    'id' =&gt; $city-&gt;id,\n                    'name' =&gt; $city-&gt;name\n                ];\n            });\n\n        return response()-&gt;json($cities);\n    }\n}\n\n\/\/ resources\/views\/location\/index.blade.php\n@extends('layouts.app')\n\n@section('content')\n&lt;div class=\"container\"&gt;\n    &lt;form id=\"address-form\" method=\"POST\" action=\"{{ route('address.store') }}\"&gt;\n        @csrf\n        &lt;div class=\"row\"&gt;\n            &lt;div class=\"col-md-6\"&gt;\n                {!! Form::select('prefecture_id', \n                    ['' =&gt; '\u90fd\u9053\u5e9c\u770c\u3092\u9078\u629e'] + $prefectures-&gt;toArray(), \n                    old('prefecture_id'),\n                    ['class' =&gt; 'form-control', 'id' =&gt; 'prefecture']\n                ) !!}\n            &lt;\/div&gt;\n            &lt;div class=\"col-md-6\"&gt;\n                {!! Form::select('city_id',\n                    ['' =&gt; '\u5e02\u533a\u753a\u6751\u3092\u9078\u629e'],\n                    old('city_id'),\n                    ['class' =&gt; 'form-control', 'id' =&gt; 'city']\n                ) !!}\n            &lt;\/div&gt;\n        &lt;\/div&gt;\n    &lt;\/form&gt;\n&lt;\/div&gt;\n\n@push('scripts')\n&lt;script&gt;\nclass AddressSelector {\n    constructor() {\n        this.prefectureSelect = document.getElementById('prefecture');\n        this.citySelect = document.getElementById('city');\n        this.initializeEventListeners();\n        this.restoreOldValues();\n    }\n\n    initializeEventListeners() {\n        this.prefectureSelect.addEventListener('change', () =&gt; this.onPrefectureChange());\n    }\n\n    async onPrefectureChange() {\n        const prefectureId = this.prefectureSelect.value;\n        await this.updateCities(prefectureId);\n    }\n\n    async updateCities(prefectureId) {\n        this.clearCitySelect();\n        if (!prefectureId) return;\n\n        try {\n            const cities = await this.fetchCities(prefectureId);\n            this.populateCitySelect(cities);\n        } catch (error) {\n            console.error('\u5e02\u533a\u753a\u6751\u30c7\u30fc\u30bf\u306e\u53d6\u5f97\u306b\u5931\u6557\u3057\u307e\u3057\u305f:', error);\n            this.showError('\u5e02\u533a\u753a\u6751\u30c7\u30fc\u30bf\u306e\u53d6\u5f97\u306b\u5931\u6557\u3057\u307e\u3057\u305f');\n        }\n    }\n\n    async fetchCities(prefectureId) {\n        const response = await fetch(`\/api\/cities?prefecture_id=${prefectureId}`);\n        if (!response.ok) throw new Error('API request failed');\n        return await response.json();\n    }\n\n    clearCitySelect() {\n        this.citySelect.innerHTML = '&lt;option value=\"\"&gt;\u5e02\u533a\u753a\u6751\u3092\u9078\u629e&lt;\/option&gt;';\n    }\n\n    populateCitySelect(cities) {\n        cities.forEach(city =&gt; {\n            const option = new Option(city.name, city.id);\n            this.citySelect.add(option);\n        });\n    }\n\n    showError(message) {\n        const errorDiv = document.createElement('div');\n        errorDiv.className = 'alert alert-danger mt-2';\n        errorDiv.textContent = message;\n        this.citySelect.parentNode.appendChild(errorDiv);\n        setTimeout(() =&gt; errorDiv.remove(), 3000);\n    }\n\n    restoreOldValues() {\n        const oldPrefectureId = this.prefectureSelect.value;\n        if (oldPrefectureId) {\n            this.onPrefectureChange();\n        }\n    }\n}\n\ndocument.addEventListener('DOMContentLoaded', () =&gt; {\n    new AddressSelector();\n});\n&lt;\/script&gt;\n@endpush<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-21\">\u8907\u6570\u9078\u629e\u53ef\u80fd\u306a\u30bb\u30ec\u30af\u30c8\u30dc\u30c3\u30af\u30b9\u306e\u4f5c\u6210<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u30bf\u30b0\u9078\u629e\u306a\u3069\u3067\u3088\u304f\u4f7f\u7528\u3055\u308c\u308b\u3001\u8907\u6570\u9078\u629e\u53ef\u80fd\u306a\u30bb\u30ec\u30af\u30c8\u30dc\u30c3\u30af\u30b9\u306e\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=\"\">\/\/ app\/Http\/Controllers\/TagController.php\nclass TagController extends Controller\n{\n    public function create()\n    {\n        $tags = Tag::orderBy('name')-&gt;pluck('name', 'id');\n        $selectedTags = old('tags', []);\n\n        return view('posts.create', compact('tags', 'selectedTags'));\n    }\n\n    public function store(Request $request)\n    {\n        $validated = $request-&gt;validate([\n            'title' =&gt; 'required|max:255',\n            'content' =&gt; 'required',\n            'tags' =&gt; 'array|exists:tags,id'\n        ]);\n\n        $post = Post::create($validated);\n        $post-&gt;tags()-&gt;sync($request-&gt;tags);\n\n        return redirect()-&gt;route('posts.show', $post);\n    }\n}\n\n\/\/ resources\/views\/posts\/create.blade.php\n&lt;div class=\"form-group\"&gt;\n    &lt;label for=\"tags\"&gt;\u30bf\u30b0\u3092\u9078\u629e&lt;\/label&gt;\n    {!! Form::select('tags[]', \n        $tags, \n        $selectedTags,\n        [\n            'class' =&gt; 'form-control select2-multiple',\n            'multiple' =&gt; 'multiple',\n            'data-placeholder' =&gt; '\u30bf\u30b0\u3092\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044'\n        ]\n    ) !!}\n&lt;\/div&gt;\n\n@push('scripts')\n&lt;script&gt;\n$(document).ready(function() {\n    $('.select2-multiple').select2({\n        theme: 'bootstrap4',\n        width: '100%',\n        language: 'ja',\n        allowClear: true,\n        closeOnSelect: false,\n        maximumSelectionLength: 5,\n        templateSelection: function(data) {\n            if (!data.id) return data.text;\n            return $('&lt;span&gt;').addClass('badge badge-primary mr-1')\n                .text(data.text);\n        }\n    });\n});\n&lt;\/script&gt;\n@endpush<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-22\">\u691c\u7d22\u53ef\u80fd\u306a\u30bb\u30ec\u30af\u30c8\u30dc\u30c3\u30af\u30b9\u306e\u5b9f\u88c5\u65b9\u6cd5<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u5927\u91cf\u306e\u30c7\u30fc\u30bf\u304b\u3089\u9078\u629e\u3059\u308b\u5fc5\u8981\u304c\u3042\u308b\u5834\u5408\u306e\u3001\u691c\u7d22\u6a5f\u80fd\u4ed8\u304d\u30bb\u30ec\u30af\u30c8\u30dc\u30c3\u30af\u30b9\u306e\u5b9f\u88c5\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=\"\">\/\/ app\/Http\/Controllers\/ProductController.php\nclass ProductController extends Controller\n{\n    public function search(Request $request)\n    {\n        $term = $request-&gt;input('term');\n\n        return Product::select(['id', 'name', 'code', 'price'])\n            -&gt;where(function($query) use ($term) {\n                $query-&gt;where('name', 'LIKE', \"%{$term}%\")\n                    -&gt;orWhere('code', 'LIKE', \"%{$term}%\");\n            })\n            -&gt;when($request-&gt;input('category_id'), function($query, $categoryId) {\n                return $query-&gt;where('category_id', $categoryId);\n            })\n            -&gt;take(20)\n            -&gt;get()\n            -&gt;map(function($product) {\n                return [\n                    'id' =&gt; $product-&gt;id,\n                    'text' =&gt; \"{$product-&gt;name} ({$product-&gt;code}) - \u00a5{$product-&gt;price}\"\n                ];\n            });\n    }\n}\n\n\/\/ resources\/views\/orders\/create.blade.php\n&lt;div class=\"form-group\"&gt;\n    &lt;label for=\"product_id\"&gt;\u5546\u54c1\u691c\u7d22&lt;\/label&gt;\n    &lt;select name=\"product_id\" id=\"product-select\" class=\"form-control\"&gt;&lt;\/select&gt;\n&lt;\/div&gt;\n\n@push('scripts')\n&lt;script&gt;\nclass ProductSelector {\n    constructor(element, options = {}) {\n        this.element = element;\n        this.options = {\n            minimumInputLength: 2,\n            placeholder: '\u5546\u54c1\u540d\u307e\u305f\u306f\u5546\u54c1\u30b3\u30fc\u30c9\u3067\u691c\u7d22...',\n            allowClear: true,\n            ajax: {\n                url: '\/api\/products\/search',\n                dataType: 'json',\n                delay: 250,\n                cache: true,\n                data: (params) =&gt; ({\n                    term: params.term,\n                    category_id: document.getElementById('category_id')?.value\n                }),\n                processResults: (data) =&gt; ({\n                    results: data\n                }),\n                transport: async (params, success, failure) =&gt; {\n                    try {\n                        const response = await fetch(`${params.url}?${new URLSearchParams(params.data)}`);\n                        if (!response.ok) throw new Error('API request failed');\n                        const data = await response.json();\n                        success(data);\n                    } catch (error) {\n                        failure(error);\n                    }\n                }\n            },\n            templateResult: (data) =&gt; {\n                if (!data.id) return data.text;\n\n                return $('&lt;div&gt;').append([\n                    $('&lt;strong&gt;').text(data.text.split('(')[0]),\n                    $('&lt;small&gt;').addClass('text-muted ml-1')\n                        .text(data.text.match(\/\\((.*?)\\)\/)[1]),\n                    $('&lt;span&gt;').addClass('float-right')\n                        .text(data.text.split('- ')[1])\n                ]);\n            },\n            ...options\n        };\n\n        this.init();\n    }\n\n    init() {\n        $(this.element).select2(this.options)\n            .on('select2:select', this.onSelect.bind(this))\n            .on('select2:unselect', this.onUnselect.bind(this));\n    }\n\n    onSelect(e) {\n        \/\/ \u9078\u629e\u6642\u306e\u51e6\u7406\n        const selectedId = e.params.data.id;\n        this.updateOrderForm(selectedId);\n    }\n\n    onUnselect(e) {\n        \/\/ \u9078\u629e\u89e3\u9664\u6642\u306e\u51e6\u7406\n        this.clearOrderForm();\n    }\n\n    updateOrderForm(productId) {\n        \/\/ \u6ce8\u6587\u30d5\u30a9\u30fc\u30e0\u306e\u66f4\u65b0\u51e6\u7406\n    }\n\n    clearOrderForm() {\n        \/\/ \u30d5\u30a9\u30fc\u30e0\u306e\u30af\u30ea\u30a2\u51e6\u7406\n    }\n}\n\ndocument.addEventListener('DOMContentLoaded', () =&gt; {\n    new ProductSelector('#product-select');\n});\n&lt;\/script&gt;\n@endpush<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u3053\u308c\u3089\u306e\u5b9f\u88c5\u4f8b\u306f\u3001\u5b9f\u969b\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3067\u3059\u3050\u306b\u6d3b\u7528\u3067\u304d\u308b\u5f62\u3067\u63d0\u4f9b\u3055\u308c\u3066\u3044\u307e\u3059\u3002\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u306f\u3001\u3053\u308c\u3089\u306e\u5b9f\u88c5\u306b\u95a2\u9023\u3059\u308b\u30c8\u30e9\u30d6\u30eb\u30b7\u30e5\u30fc\u30c6\u30a3\u30f3\u30b0\u306b\u3064\u3044\u3066\u89e3\u8aac\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-23\">Laravel Select\u306b\u95a2\u3059\u308b\u30c8\u30e9\u30d6\u30eb\u30b7\u30e5\u30fc\u30c6\u30a3\u30f3\u30b0<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-24\">\u5024\u304c\u6b63\u3057\u304f\u9001\u4fe1\u3055\u308c\u306a\u3044\u5834\u5408\u306e\u5bfe\u51e6\u6cd5<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u3088\u304f\u3042\u308b\u9001\u4fe1\u5024\u306e\u554f\u984c\u3068\u305d\u306e\u89e3\u6c7a\u65b9\u6cd5\u3092\u89e3\u8aac\u3057\u307e\u3059\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=\"\">\/\/ \u554f\u984c1: \u8907\u6570\u9078\u629e\u6642\u306e\u5024\u304c\u9001\u4fe1\u3055\u308c\u306a\u3044\n\/\/ \u8aa4\u3063\u305f\u5b9f\u88c5\n{!! Form::select('tags', $tags, null, ['multiple' =&gt; true]) !!}  \/\/ name\u5c5e\u6027\u304c\u914d\u5217\u306b\u306a\u3063\u3066\u3044\u306a\u3044\n\n\/\/ \u6b63\u3057\u3044\u5b9f\u88c5\n{!! Form::select('tags[]', $tags, null, ['multiple' =&gt; true]) !!}  \/\/ \u914d\u5217\u3068\u3057\u3066\u9001\u4fe1\n\n\/\/ \u554f\u984c2: \u9078\u629e\u5024\u304cnull\u306b\u306a\u308b\nclass PostController extends Controller\n{\n    public function store(Request $request)\n    {\n        \/\/ \u30c7\u30d0\u30c3\u30b0\u65b9\u6cd5\n        \\Log::info('\u9001\u4fe1\u5024:', $request-&gt;all());\n        \\Log::info('\u30bf\u30b0\u5024:', $request-&gt;input('tags'));\n\n        \/\/ \u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\u6642\u306e\u5bfe\u51e6\n        $validated = $request-&gt;validate([\n            'tags' =&gt; 'nullable|array',  \/\/ nullable\u3092\u8ffd\u52a0\n            'tags.*' =&gt; 'exists:tags,id'\n        ]);\n\n        \/\/ null\u5024\u306e\u9069\u5207\u306a\u51e6\u7406\n        $tags = $request-&gt;input('tags', []);  \/\/ \u30c7\u30d5\u30a9\u30eb\u30c8\u5024\u3092\u8a2d\u5b9a\n        $post-&gt;tags()-&gt;sync($tags);\n    }\n}\n\n\/\/ View\u3067\u306e\u5bfe\u51e6\n@php\n    $selectedTags = old('tags', $post-&gt;tags-&gt;pluck('id')-&gt;toArray());\n@endphp\n\n{!! Form::select('tags[]', \n    $tags, \n    $selectedTags,  \/\/ \u914d\u5217\u3068\u3057\u3066\u5024\u3092\u6e21\u3059\n    ['multiple' =&gt; true, 'class' =&gt; 'form-control']\n) !!}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-25\">JavaScript\u30a4\u30d9\u30f3\u30c8\u304c\u767a\u706b\u3057\u306a\u3044\u554f\u984c\u306e\u89e3\u6c7a<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u30a4\u30d9\u30f3\u30c8\u95a2\u9023\u306e\u554f\u984c\u3068\u305d\u306e\u5bfe\u51e6\u65b9\u6cd5\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=\"\">\/\/ \u554f\u984c1: \u52d5\u7684\u306b\u8ffd\u52a0\u3055\u308c\u305f\u30bb\u30ec\u30af\u30c8\u30dc\u30c3\u30af\u30b9\u306e\u30a4\u30d9\u30f3\u30c8\u304c\u52d5\u4f5c\u3057\u306a\u3044\n\/\/ \u8aa4\u3063\u305f\u5b9f\u88c5\n$('#dynamic-select').on('change', function() {\n    \/\/ \u3053\u306e\u30a4\u30d9\u30f3\u30c8\u306f\u52d5\u7684\u306b\u8ffd\u52a0\u3055\u308c\u305f\u8981\u7d20\u306b\u306f\u9069\u7528\u3055\u308c\u306a\u3044\n});\n\n\/\/ \u6b63\u3057\u3044\u5b9f\u88c5\n$(document).on('change', '#dynamic-select', function() {\n    \/\/ \u59d4\u8b72\u306b\u3088\u308b\u30a4\u30d9\u30f3\u30c8\u30cf\u30f3\u30c9\u30ea\u30f3\u30b0\n});\n\n\/\/ \u554f\u984c2: Select2\u306e\u30a4\u30d9\u30f3\u30c8\u304c\u6b63\u3057\u304f\u52d5\u4f5c\u3057\u306a\u3044\nclass SelectManager {\n    constructor() {\n        this.initializeSelect2();\n        this.bindEvents();\n    }\n\n    initializeSelect2() {\n        $('.select2-element').select2({\n            \/\/ Select2\u306e\u521d\u671f\u5316\n        }).on('select2:select', (e) =&gt; {\n            this.handleSelection(e);\n        });\n    }\n\n    bindEvents() {\n        \/\/ \u52d5\u7684\u306b\u8ffd\u52a0\u3055\u308c\u305f\u8981\u7d20\u306e\u305f\u3081\u306e\u51e6\u7406\n        $(document).on('select2:select', '.select2-element', (e) =&gt; {\n            this.handleSelection(e);\n        });\n    }\n\n    handleSelection(e) {\n        const selectedId = e.params.data.id;\n        \/\/ \u9078\u629e\u51e6\u7406\n    }\n\n    \/\/ \u30c7\u30d0\u30c3\u30b0\u7528\u30e1\u30bd\u30c3\u30c9\n    debugEvents() {\n        $('.select2-element').on('select2:open', () =&gt; {\n            console.log('Select2 opened');\n        });\n    }\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-26\">\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u3068\u306e\u9023\u643a\u6642\u306e\u4e00\u822c\u7684\u306a\u554f\u984c\u89e3\u6c7a<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u95a2\u9023\u306e\u554f\u984c\u3068\u305d\u306e\u89e3\u6c7a\u65b9\u6cd5\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=\"\">\/\/ \u554f\u984c1: N+1\u554f\u984c\u306e\u89e3\u6c7a\nclass ProductController extends Controller\n{\n    public function index()\n    {\n        \/\/ \u554f\u984c\u306e\u3042\u308b\u30af\u30a8\u30ea\n        $products = Product::all();  \/\/ N+1\u554f\u984c\u304c\u767a\u751f\n\n        \/\/ \u6700\u9069\u5316\u3055\u308c\u305f\u30af\u30a8\u30ea\n        $products = Product::with(['category', 'tags'])  \/\/ Eager Loading\n            -&gt;select(['id', 'name', 'category_id'])\n            -&gt;get();\n    }\n}\n\n\/\/ \u554f\u984c2: \u30ea\u30ec\u30fc\u30b7\u30e7\u30f3\u30c7\u30fc\u30bf\u306e\u53d6\u5f97\u30a8\u30e9\u30fc\nclass CategoryController extends Controller\n{\n    public function getProducts(Request $request)\n    {\n        try {\n            $category = Category::findOrFail($request-&gt;category_id);\n\n            $products = $category-&gt;products()\n                -&gt;select(['id', 'name', 'price'])\n                -&gt;when($request-&gt;search, function($query, $search) {\n                    return $query-&gt;where('name', 'LIKE', \"%{$search}%\");\n                })\n                -&gt;get();\n\n            return response()-&gt;json($products);\n\n        } catch (ModelNotFoundException $e) {\n            \\Log::error('\u30ab\u30c6\u30b4\u30ea\u304c\u898b\u3064\u304b\u308a\u307e\u305b\u3093:', [\n                'category_id' =&gt; $request-&gt;category_id,\n                'error' =&gt; $e-&gt;getMessage()\n            ]);\n\n            return response()-&gt;json([\n                'error' =&gt; '\u30ab\u30c6\u30b4\u30ea\u304c\u898b\u3064\u304b\u308a\u307e\u305b\u3093'\n            ], 404);\n        }\n    }\n}\n\n\/\/ \u554f\u984c3: \u30c7\u30fc\u30bf\u306e\u6574\u5408\u6027\u30a8\u30e9\u30fc\nclass OrderController extends Controller\n{\n    public function store(Request $request)\n    {\n        DB::beginTransaction();\n\n        try {\n            $product = Product::lockForUpdate()  \/\/ \u6392\u4ed6\u30ed\u30c3\u30af\n                -&gt;findOrFail($request-&gt;product_id);\n\n            if ($product-&gt;stock &lt; $request-&gt;quantity) {\n                throw new \\Exception('\u5728\u5eab\u304c\u4e0d\u8db3\u3057\u3066\u3044\u307e\u3059');\n            }\n\n            \/\/ \u6ce8\u6587\u51e6\u7406\n            $order = Order::create([\n                'product_id' =&gt; $product-&gt;id,\n                'quantity' =&gt; $request-&gt;quantity\n            ]);\n\n            \/\/ \u5728\u5eab\u66f4\u65b0\n            $product-&gt;decrement('stock', $request-&gt;quantity);\n\n            DB::commit();\n            return response()-&gt;json($order);\n\n        } catch (\\Exception $e) {\n            DB::rollBack();\n            \\Log::error('\u6ce8\u6587\u51e6\u7406\u30a8\u30e9\u30fc:', [\n                'product_id' =&gt; $request-&gt;product_id,\n                'error' =&gt; $e-&gt;getMessage()\n            ]);\n\n            return response()-&gt;json([\n                'error' =&gt; $e-&gt;getMessage()\n            ], 422);\n        }\n    }\n}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u30c8\u30e9\u30d6\u30eb\u30b7\u30e5\u30fc\u30c6\u30a3\u30f3\u30b0\u306e\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9\uff1a<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u30c7\u30d0\u30c3\u30b0\u306e\u57fa\u672c\u30b9\u30c6\u30c3\u30d7<\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30ed\u30b0\u306e\u78ba\u8a8d<\/li>\n\n\n\n<li>\u30c7\u30d0\u30c3\u30b0\u51fa\u529b\u306e\u6d3b\u7528<\/li>\n\n\n\n<li>\u30d6\u30e9\u30a6\u30b6\u306e\u958b\u767a\u8005\u30c4\u30fc\u30eb\u306e\u5229\u7528<\/li>\n\n\n\n<li>SQL\u6587\u306e\u78ba\u8a8d<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u30a8\u30e9\u30fc\u767a\u751f\u6642\u306e\u5bfe\u5fdc\u624b\u9806<\/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=\"\">   \/\/ \u30c7\u30d0\u30c3\u30b0\u30e2\u30fc\u30c9\u306e\u6d3b\u7528\n   if (config('app.debug')) {\n       \\Log::debug('\u30c7\u30d0\u30c3\u30b0\u60c5\u5831:', [\n           'request' =&gt; $request-&gt;all(),\n           'sql' =&gt; DB::getQueryLog(),\n           'trace' =&gt; debug_backtrace()\n       ]);\n   }<\/pre>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li>\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u554f\u984c\u306e\u89e3\u6c7a<\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30af\u30a8\u30ea\u306e\u6700\u9069\u5316<\/li>\n\n\n\n<li>\u30ad\u30e3\u30c3\u30b7\u30e5\u306e\u6d3b\u7528<\/li>\n\n\n\n<li>\u975e\u540c\u671f\u51e6\u7406\u306e\u5c0e\u5165<\/li>\n<\/ul>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li>\u4e00\u822c\u7684\u306a\u30a8\u30e9\u30fc\u30e1\u30c3\u30bb\u30fc\u30b8\u3068\u89e3\u6c7a\u7b56<\/li>\n<\/ol>\n\n\n<div id=\"id-aacab941-0ecc-4393-bb4d-d24bc212e83b\">\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\u30a8\u30e9\u30fc<\/th><th>\u539f\u56e0<\/th><th>\u89e3\u6c7a\u7b56<\/th><\/tr><\/thead><tbody><tr><td>Undefined index<\/td><td>\u914d\u5217\u306e\u30ad\u30fc\u304c\u5b58\u5728\u3057\u306a\u3044<\/td><td>\u30c7\u30fc\u30bf\u306e\u5b58\u5728\u78ba\u8a8d\u3092\u8ffd\u52a0<\/td><\/tr><tr><td>Method not found<\/td><td>\u30af\u30e9\u30b9\u306e\u30e1\u30bd\u30c3\u30c9\u304c\u672a\u5b9a\u7fa9<\/td><td>\u540d\u524d\u7a7a\u9593\u3068\u30af\u30e9\u30b9\u5b9a\u7fa9\u306e\u78ba\u8a8d<\/td><\/tr><tr><td>SQLSTATE[23000]<\/td><td>\u5916\u90e8\u30ad\u30fc\u5236\u7d04\u9055\u53cd<\/td><td>\u30c7\u30fc\u30bf\u306e\u6574\u5408\u6027\u30c1\u30a7\u30c3\u30af\u3092\u8ffd\u52a0<\/td><\/tr><tr><td>Memory exhausted<\/td><td>\u30e1\u30e2\u30ea\u4f7f\u7528\u91cf\u304c\u904e\u5927<\/td><td>\u30af\u30a8\u30ea\u306e\u6700\u9069\u5316\u3068\u30c1\u30e3\u30f3\u30af\u51e6\u7406<\/td><\/tr><\/tbody><\/table><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">\u4ee5\u4e0a\u306e\u30c8\u30e9\u30d6\u30eb\u30b7\u30e5\u30fc\u30c6\u30a3\u30f3\u30b0\u624b\u6cd5\u3092\u6d3b\u7528\u3059\u308b\u3053\u3068\u3067\u3001Laravel Select\u306e\u5b9f\u88c5\u306b\u304a\u3051\u308b\u591a\u304f\u306e\u554f\u984c\u3092\u52b9\u679c\u7684\u306b\u89e3\u6c7a\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Warning: Undefined array key &#8220;is_admin&#8221; in \/home\/xs392991\/dexall.co.jp\/public_html\/articles\/wp-content\/themes\/ &#8230; <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[33,12],"tags":[],"class_list":["post-3202","post","type-post","status-publish","format-standard","category-php-laravel","category-php","nothumb"],"_links":{"self":[{"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=\/wp\/v2\/posts\/3202","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=3202"}],"version-history":[{"count":2,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=\/wp\/v2\/posts\/3202\/revisions"}],"predecessor-version":[{"id":3204,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=\/wp\/v2\/posts\/3202\/revisions\/3204"}],"wp:attachment":[{"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3202"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3202"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3202"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}