{"id":2515,"date":"2025-03-24T08:47:07","date_gmt":"2025-03-23T23:47:07","guid":{"rendered":"https:\/\/dexall.co.jp\/articles\/?p=2515"},"modified":"2025-03-24T08:47:37","modified_gmt":"2025-03-23T23:47:37","slug":"%e3%80%90%e4%bf%9d%e5%ad%98%e7%89%88%e3%80%91laravel%e3%81%a8bootstrap%e3%81%ae%e5%ae%8c%e5%85%a8%e7%b5%b1%e5%90%88%e3%82%ac%e3%82%a4%e3%83%89-15%e5%88%86%e3%81%a7%e5%ae%9f%e7%8f%be%e3%81%99","status":"publish","type":"post","link":"https:\/\/dexall.co.jp\/articles\/?p=2515","title":{"rendered":"\u3010\u4fdd\u5b58\u7248\u3011Laravel\u3068Bootstrap\u306e\u5b8c\u5168\u7d71\u5408\u30ac\u30a4\u30c9 &#8211; 15\u5206\u3067\u5b9f\u73fe\u3059\u308b\u30e2\u30c0\u30f3UI\u69cb\u7bc9"},"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\u3068Bootstrap\u3092\u7d44\u307f\u5408\u308f\u305b\u308b\u30e1\u30ea\u30c3\u30c8<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-1\">\u958b\u767a\u6642\u9593\u309250%\u77ed\u7e2e\u3067\u304d\u308b\u52b9\u7387\u7684\u306aUI\u69cb\u7bc9<\/a>      <\/li>      <li>        <a href=\"#i-2\">\u30e1\u30f3\u30c6\u30ca\u30f3\u30b9\u6027\u306b\u512a\u308c\u305f\u30e2\u30c0\u30f3\u306a\u958b\u767a\u624b\u6cd5<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-3\">\u5b9f\u969b\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3067\u306e\u52b9\u679c<\/a>      <\/li>    <\/ul>  <\/li>  <li>    <a href=\"#i-4\">\u74b0\u5883\u69cb\u7bc9\u304b\u3089\u7d71\u5408\u307e\u3067\u306e\u624b\u9806<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-5\">Composer\u3092\u4f7f\u7528\u3057\u305fBootstrap\u30d1\u30c3\u30b1\u30fc\u30b8\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/a>      <\/li>      <li>        <a href=\"#i-6\">npm\/yarn\u306b\u3088\u308b\u4f9d\u5b58\u95a2\u4fc2\u306e\u89e3\u6c7a\u65b9\u6cd5<\/a>      <\/li>      <li>        <a href=\"#i-7\">webpack.mix.js\u306e\u9069\u5207\u306a\u8a2d\u5b9a\u65b9\u6cd5<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-8\">\u52d5\u4f5c\u78ba\u8a8d\u3068\u30c8\u30e9\u30d6\u30eb\u30b7\u30e5\u30fc\u30c6\u30a3\u30f3\u30b0<\/a>      <\/li>    <\/ul>  <\/li>  <li>    <a href=\"#i-9\">Bootstrap\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u52b9\u7387\u7684\u306a\u6d3b\u7528\u6cd5<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-10\">Blade\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3067\u306e\u30b0\u30ea\u30c3\u30c9\u30b7\u30b9\u30c6\u30e0\u306e\u5b9f\u88c5<\/a>      <\/li>      <li>        <a href=\"#i-11\">\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u30c7\u30b6\u30a4\u30f3\u306e\u5b9f\u73fe\u65b9\u6cd5<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-12\">\u30ab\u30b9\u30bf\u30e0SCSS\u306e\u7d71\u5408\u30c6\u30af\u30cb\u30c3\u30af<\/a>      <\/li>    <\/ul>  <\/li>  <li>    <a href=\"#i-13\">\u5b9f\u8df5\u7684\u306aUI\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u5b9f\u88c5\u4f8b<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-14\">\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u30d0\u30fc\u306e\u6700\u9069\u306a\u5b9f\u88c5\u65b9\u6cd5<\/a>      <\/li>      <li>        <a href=\"#i-15\">\u30d5\u30a9\u30fc\u30e0\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30ab\u30b9\u30bf\u30de\u30a4\u30ba<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-16\">\u30e2\u30fc\u30c0\u30eb\u3068\u30a2\u30e9\u30fc\u30c8\u306e\u52d5\u7684\u306a\u5236\u5fa1<\/a>      <\/li>    <\/ul>  <\/li>  <li class=\"last\">    <a href=\"#i-17\">\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u6700\u9069\u5316\u3068\u30c7\u30d0\u30c3\u30b0<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-18\">\u30a2\u30bb\u30c3\u30c8\u306e\u52b9\u7387\u7684\u306a\u8aad\u307f\u8fbc\u307f\u65b9\u6cd5<\/a>      <\/li>      <li>        <a href=\"#i-19\">\u4e00\u822c\u7684\u306a\u7d71\u5408\u30a8\u30e9\u30fc\u3068\u305d\u306e\u89e3\u6c7a\u6cd5<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-20\">\u672c\u756a\u74b0\u5883\u3067\u306e\u30c7\u30d7\u30ed\u30a4\u30e1\u30f3\u30c8\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9<\/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\u3068Bootstrap\u3092\u7d44\u307f\u5408\u308f\u305b\u308b\u30e1\u30ea\u30c3\u30c8<\/h2>\n\n\n\n<p>Laravel\u3068Bootstrap\u306e\u7d44\u307f\u5408\u308f\u305b\u306f\u3001\u30e2\u30c0\u30f3\u306aWeb\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u958b\u767a\u306b\u304a\u3044\u3066\u5f37\u529b\u306a\u9078\u629e\u80a2\u3068\u306a\u3063\u3066\u3044\u307e\u3059\u3002\u3053\u306e\u7d44\u307f\u5408\u308f\u305b\u304c\u3082\u305f\u3089\u3059\u5177\u4f53\u7684\u306a\u30e1\u30ea\u30c3\u30c8\u3092\u3001\u5b9f\u969b\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u4e8b\u4f8b\u3068\u3068\u3082\u306b\u89e3\u8aac\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-1\">\u958b\u767a\u6642\u9593\u309250%\u77ed\u7e2e\u3067\u304d\u308b\u52b9\u7387\u7684\u306aUI\u69cb\u7bc9<\/h3>\n\n\n\n<p>Laravel\u3068Bootstrap\u306e\u7d71\u5408\u306b\u3088\u308a\u3001\u4ee5\u4e0b\u306e\u70b9\u3067\u958b\u767a\u6642\u9593\u3092\u5927\u5e45\u306b\u77ed\u7e2e\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\uff1a<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30dc\u30a4\u30e9\u30fc\u30d7\u30ec\u30fc\u30c8\u30b3\u30fc\u30c9\u306e\u524a\u6e1b<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Bootstrap\u306e\u8c4a\u5bcc\u306a\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u7fa4\u306b\u3088\u308a\u3001\u57fa\u672c\u7684\u306aUI\u8981\u7d20\u306e\u5b9f\u88c5\u6642\u9593\u3092\u7d0460%\u524a\u6e1b<\/li>\n\n\n\n<li>Laravel\u306e\u8a8d\u8a3c\u6a5f\u80fd\u3068Bootstrap\u306e\u30e2\u30fc\u30c0\u30eb\/\u30d5\u30a9\u30fc\u30e0\u306e\u7d44\u307f\u5408\u308f\u305b\u3067\u3001\u30ed\u30b0\u30a4\u30f3\u6a5f\u80fd\u306e\u5b9f\u88c5\u6642\u9593\u3092\u7d0470%\u77ed\u7e2e<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u958b\u767a\u30d5\u30ed\u30fc\u306e\u52b9\u7387\u5316<\/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=\"\">   \/\/ resources\/views\/components\/button.blade.php\n   &lt;button {{ $attributes-&gt;merge(['class' =&gt; 'btn btn-primary']) }}&gt;\n       {{ $slot }}\n   &lt;\/button&gt;\n\n   \/\/ \u4f7f\u7528\u4f8b\n   &lt;x-button class=\"mt-4\"&gt;\n       \u9001\u4fe1\u3059\u308b\n   &lt;\/x-button&gt;<\/pre>\n\n\n\n<p>\u3053\u306e\u3088\u3046\u306b\u3001Laravel\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u30b7\u30b9\u30c6\u30e0\u3068Bootstrap\u306e\u30af\u30e9\u30b9\u3092\u7d44\u307f\u5408\u308f\u305b\u308b\u3053\u3068\u3067\u3001\u518d\u5229\u7528\u53ef\u80fd\u306aUI\u90e8\u54c1\u3092\u52b9\u7387\u7684\u306b\u4f5c\u6210\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><strong>\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u30c7\u30b6\u30a4\u30f3\u306e\u81ea\u52d5\u5bfe\u5fdc<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Bootstrap\u306e\u30b0\u30ea\u30c3\u30c9\u30b7\u30b9\u30c6\u30e0\u306b\u3088\u308a\u3001\u30de\u30eb\u30c1\u30c7\u30d0\u30a4\u30b9\u5bfe\u5fdc\u306e\u5b9f\u88c5\u6642\u9593\u3092\u7d0445%\u524a\u6e1b<\/li>\n\n\n\n<li>\u30e1\u30c7\u30a3\u30a2\u30af\u30a8\u30ea\u306e\u8a18\u8ff0\u91cf\u309280%\u4ee5\u4e0a\u524a\u6e1b<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-2\">\u30e1\u30f3\u30c6\u30ca\u30f3\u30b9\u6027\u306b\u512a\u308c\u305f\u30e2\u30c0\u30f3\u306a\u958b\u767a\u624b\u6cd5<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u30d9\u30fc\u30b9\u306e\u958b\u767a<\/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=\"\">   \/\/ app\/View\/Components\/Card.php\n   class Card extends Component\n   {\n       public $title;\n       public $subtitle;\n\n       public function __construct($title, $subtitle = null)\n       {\n           $this-&gt;title = $title;\n           $this-&gt;subtitle = $subtitle;\n       }\n\n       public function render()\n       {\n           return view('components.card');\n       }\n   }<\/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=\"\">   &lt;!-- resources\/views\/components\/card.blade.php --&gt;\n   &lt;div class=\"card\"&gt;\n       &lt;div class=\"card-body\"&gt;\n           &lt;h5 class=\"card-title\"&gt;{{ $title }}&lt;\/h5&gt;\n           @if($subtitle)\n               &lt;h6 class=\"card-subtitle mb-2 text-muted\"&gt;{{ $subtitle }}&lt;\/h6&gt;\n           @endif\n           {{ $slot }}\n       &lt;\/div&gt;\n   &lt;\/div&gt;<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>\u4fdd\u5b88\u6027\u3092\u9ad8\u3081\u308b\u8a2d\u8a08\u30d1\u30bf\u30fc\u30f3<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30d3\u30e5\u30fc\u3068\u30ed\u30b8\u30c3\u30af\u306e\u660e\u78ba\u306a\u5206\u96e2<\/li>\n\n\n\n<li>\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u518d\u5229\u7528\u6027\u5411\u4e0a<\/li>\n\n\n\n<li>\u30b9\u30bf\u30a4\u30eb\u306e\u4e00\u8cab\u6027\u7dad\u6301<\/li>\n<\/ul>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>\u30a2\u30c3\u30d7\u30c7\u30fc\u30c8\u5bfe\u5fdc\u306e\u5bb9\u6613\u3055<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Composer\u306b\u3088\u308b\u4f9d\u5b58\u95a2\u4fc2\u306e\u7ba1\u7406<\/li>\n\n\n\n<li>npm\u306b\u3088\u308b\u30a2\u30bb\u30c3\u30c8\u7ba1\u7406<\/li>\n\n\n\n<li>\u30d0\u30fc\u30b8\u30e7\u30f3\u4e92\u63db\u6027\u306e\u7dad\u6301\u304c\u5bb9\u6613<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-3\">\u5b9f\u969b\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3067\u306e\u52b9\u679c<\/h3>\n\n\n\n<p>\u5f53\u793e\u3067\u5b9f\u65bd\u3057\u305f\u4e2d\u898f\u6a21\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\uff08\u753b\u9762\u657030\u3001\u958b\u767a\u671f\u95933\u30f6\u6708\uff09\u3067\u306e\u5b9f\u7e3e\uff1a<\/p>\n\n\n<div id=\"id-3190d4ed-538c-4e3c-a2c6-1657b44a6dc5\">\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\u9805\u76ee<\/th><th>\u5f93\u6765\u306e\u958b\u767a<\/th><th>Laravel+Bootstrap<\/th><th>\u524a\u6e1b\u7387<\/th><\/tr><\/thead><tbody><tr><td>UI\u5b9f\u88c5\u6642\u9593<\/td><td>240\u6642\u9593<\/td><td>120\u6642\u9593<\/td><td>50%<\/td><\/tr><tr><td>CSS\u8a18\u8ff0\u91cf<\/td><td>2,500\u884c<\/td><td>800\u884c<\/td><td>68%<\/td><\/tr><tr><td>\u4fdd\u5b88\u30b3\u30b9\u30c8<\/td><td>100\u4e07\u5186\/\u5e74<\/td><td>40\u4e07\u5186\/\u5e74<\/td><td>60%<\/td><\/tr><\/tbody><\/table><\/figure>\n<\/div>\n\n\n<p>\u3053\u306e\u7d44\u307f\u5408\u308f\u305b\u306b\u3088\u308a\u3001\u958b\u767a\u52b9\u7387\u3068\u4fdd\u5b88\u6027\u306e\u4e21\u9762\u3067\u5927\u304d\u306a\u6539\u5584\u3092\u5b9f\u73fe\u3067\u304d\u307e\u3059\u3002\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u306f\u3001\u3053\u308c\u3089\u306e\u30e1\u30ea\u30c3\u30c8\u3092\u6700\u5927\u9650\u306b\u6d3b\u7528\u3059\u308b\u305f\u3081\u306e\u74b0\u5883\u69cb\u7bc9\u624b\u9806\u3092\u8a73\u3057\u304f\u89e3\u8aac\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-4\">\u74b0\u5883\u69cb\u7bc9\u304b\u3089\u7d71\u5408\u307e\u3067\u306e\u624b\u9806<\/h2>\n\n\n\n<p>Laravel\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3078\u306eBootstrap\u5c0e\u5165\u306f\u3001\u9069\u5207\u306a\u624b\u9806\u3067\u884c\u3046\u3053\u3068\u3067\u78ba\u5b9f\u306b\u6210\u529f\u3055\u305b\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u3053\u3053\u3067\u306f\u3001\u65b0\u898f\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3067\u306e\u5c0e\u5165\u304b\u3089\u65e2\u5b58\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3078\u306e\u8ffd\u52a0\u307e\u3067\u3001\u8a73\u7d30\u306a\u624b\u9806\u3092\u89e3\u8aac\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-5\">Composer\u3092\u4f7f\u7528\u3057\u305fBootstrap\u30d1\u30c3\u30b1\u30fc\u30b8\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u65b0\u898fLaravel\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u4f5c\u6210<\/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=\"\">   # \u65b0\u898f\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u4f5c\u6210\n   composer create-project laravel\/laravel your-project\n   cd your-project\n\n   # \u8a8d\u8a3c\u6a5f\u80fd\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\uff08\u30aa\u30d7\u30b7\u30e7\u30f3\uff09\n   composer require laravel\/ui\n   php artisan ui bootstrap --auth<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>\u65e2\u5b58\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3078\u306e\u5c0e\u5165<\/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=\"\">   # \u65e2\u5b58\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3067\u306e\u5c0e\u5165\u624b\u9806\n   composer require laravel\/ui\n   php artisan ui bootstrap<\/pre>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><strong>\u8a2d\u5b9a\u306e\u78ba\u8a8d\u3068\u30ab\u30b9\u30bf\u30de\u30a4\u30ba<\/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=\"\">   \/\/ config\/app.php \u3067\u306e\u78ba\u8a8d\u9805\u76ee\n   return [\n       \/\/ \u30d7\u30ed\u30d0\u30a4\u30c0\u30fc\u306e\u78ba\u8a8d\n       'providers' =&gt; [\n           \/\/ ... \u4ed6\u306e\u30d7\u30ed\u30d0\u30a4\u30c0\u30fc\n           Illuminate\\View\\ViewServiceProvider::class,\n       ],\n\n       \/\/ \u30a8\u30a4\u30ea\u30a2\u30b9\u306e\u78ba\u8a8d\n       'aliases' =&gt; [\n           \/\/ ... \u4ed6\u306e\u30a8\u30a4\u30ea\u30a2\u30b9\n           'View' =&gt; Illuminate\\Support\\Facades\\View::class,\n       ],\n   ];<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-6\">npm\/yarn\u306b\u3088\u308b\u4f9d\u5b58\u95a2\u4fc2\u306e\u89e3\u6c7a\u65b9\u6cd5<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30d1\u30c3\u30b1\u30fc\u30b8\u306e\u30a4\u30f3\u30b9\u30c8\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=\"\">   # npm\u306e\u5834\u5408\n   npm install\n   npm install --save bootstrap @popperjs\/core\n\n   # yarn\u306e\u5834\u5408\n   yarn\n   yarn add bootstrap @popperjs\/core<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>package.json\u306e\u78ba\u8a8d<\/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=\"\">   {\n     \"private\": true,\n     \"scripts\": {\n       \"dev\": \"npm run development\",\n       \"development\": \"mix\",\n       \"watch\": \"mix watch\",\n       \"prod\": \"npm run production\",\n       \"production\": \"mix --production\"\n     },\n     \"devDependencies\": {\n       \"@popperjs\/core\": \"^2.11.6\",\n       \"axios\": \"^1.1.2\",\n       \"bootstrap\": \"^5.2.3\",\n       \"laravel-mix\": \"^6.0.49\",\n       \"lodash\": \"^4.17.21\",\n       \"postcss\": \"^8.4.14\",\n       \"sass\": \"^1.56.1\"\n     }\n   }<\/pre>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><strong>\u30a2\u30bb\u30c3\u30c8\u306e\u30b3\u30f3\u30d1\u30a4\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=\"\">   # \u958b\u767a\u74b0\u5883\u3067\u306e\u5b9f\u884c\n   npm run dev\n\n   # \u672c\u756a\u74b0\u5883\u7528\u306b\u30d3\u30eb\u30c9\n   npm run prod<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-7\">webpack.mix.js\u306e\u9069\u5207\u306a\u8a2d\u5b9a\u65b9\u6cd5<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u57fa\u672c\u8a2d\u5b9a<\/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=\"\">   \/\/ webpack.mix.js\n   const mix = require('laravel-mix');\n\n   mix.js('resources\/js\/app.js', 'public\/js')\n      .sass('resources\/sass\/app.scss', 'public\/css')\n      .sourceMaps();\n\n   \/\/ \u958b\u767a\u6642\u306e\u30db\u30c3\u30c8\u30ea\u30ed\u30fc\u30c9\u8a2d\u5b9a\n   if (!mix.inProduction()) {\n       mix.webpackConfig({\n           devtool: 'source-map'\n       }).browserSync({\n           proxy: 'your-project.test'\n       });\n   }<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>SCSS\u30d5\u30a1\u30a4\u30eb\u306e\u69cb\u6210<\/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=\"\">   \/\/ resources\/sass\/app.scss\n\n   \/\/ \u5909\u6570\u306e\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\n   $primary: #4a5568;\n   $secondary: #718096;\n\n   \/\/ Bootstrap\u306e\u8aad\u307f\u8fbc\u307f\n   @import 'bootstrap\/scss\/bootstrap';\n\n   \/\/ \u30ab\u30b9\u30bf\u30e0\u30b9\u30bf\u30a4\u30eb\n   @import 'custom\/variables';\n   @import 'custom\/components';\n   @import 'custom\/utilities';<\/pre>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><strong>JavaScript\u306e\u8a2d\u5b9a<\/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=\"\">   \/\/ resources\/js\/app.js\n\n   import '.\/bootstrap';\n   import * as bootstrap from 'bootstrap';\n\n   \/\/ Bootstrap\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u521d\u671f\u5316\n   window.bootstrap = bootstrap;\n\n   \/\/ \u30c4\u30fc\u30eb\u30c1\u30c3\u30d7\u306e\u6709\u52b9\u5316\n   var tooltipTriggerList = [].slice.call(\n       document.querySelectorAll('[data-bs-toggle=\"tooltip\"]')\n   );\n   var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {\n       return new bootstrap.Tooltip(tooltipTriggerEl);\n   });<\/pre>\n\n\n\n<ol start=\"4\" class=\"wp-block-list\">\n<li><strong>\u30ec\u30a4\u30a2\u30a6\u30c8\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u306e\u8a2d\u5b9a<\/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=\"\">   &lt;!-- resources\/views\/layouts\/app.blade.php --&gt;\n   &lt;!DOCTYPE html&gt;\n   &lt;html lang=\"{{ str_replace('_', '-', app()-&gt;getLocale()) }}\"&gt;\n   &lt;head&gt;\n       &lt;meta charset=\"utf-8\"&gt;\n       &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"&gt;\n\n       &lt;!-- CSRF Token --&gt;\n       &lt;meta name=\"csrf-token\" content=\"{{ csrf_token() }}\"&gt;\n\n       &lt;title&gt;{{ config('app.name', 'Laravel') }}&lt;\/title&gt;\n\n       &lt;!-- Styles --&gt;\n       &lt;link href=\"{{ asset('css\/app.css') }}\" rel=\"stylesheet\"&gt;\n   &lt;\/head&gt;\n   &lt;body&gt;\n       &lt;div id=\"app\"&gt;\n           @yield('content')\n       &lt;\/div&gt;\n\n       &lt;!-- Scripts --&gt;\n       &lt;script src=\"{{ asset('js\/app.js') }}\" defer&gt;&lt;\/script&gt;\n   &lt;\/body&gt;\n   &lt;\/html&gt;<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-8\">\u52d5\u4f5c\u78ba\u8a8d\u3068\u30c8\u30e9\u30d6\u30eb\u30b7\u30e5\u30fc\u30c6\u30a3\u30f3\u30b0<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u521d\u671f\u8a2d\u5b9a\u306e\u78ba\u8a8d\u30dd\u30a4\u30f3\u30c8<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>npm run dev\u306e\u5b9f\u884c\u5f8c\u306bpublic\/css\/app.css\u3068public\/js\/app.js\u304c\u751f\u6210\u3055\u308c\u3066\u3044\u308b\u304b<\/li>\n\n\n\n<li>\u30d6\u30e9\u30a6\u30b6\u3067Bootstrap\u306e\u30b9\u30bf\u30a4\u30eb\u304c\u6b63\u3057\u304f\u9069\u7528\u3055\u308c\u3066\u3044\u308b\u304b<\/li>\n\n\n\n<li>JavaScript\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\uff08\u30c9\u30ed\u30c3\u30d7\u30c0\u30a6\u30f3\u306a\u3069\uff09\u304c\u6b63\u5e38\u306b\u52d5\u4f5c\u3059\u308b\u304b<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u4e00\u822c\u7684\u306a\u30a8\u30e9\u30fc\u3068\u89e3\u6c7a\u7b56<\/strong><br>\u30a8\u30e9\u30fc\u5185\u5bb9 \u78ba\u8a8d\u30dd\u30a4\u30f3\u30c8 \u89e3\u6c7a\u65b9\u6cd5<br>\u30a2\u30bb\u30c3\u30c8\u304c\u898b\u3064\u304b\u3089\u306a\u3044 public\/\u306b\u30d5\u30a1\u30a4\u30eb\u304c\u5b58\u5728\u3059\u308b\u304b npm run dev\u306e\u518d\u5b9f\u884c<br>JS\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304c\u52d5\u4f5c\u3057\u306a\u3044 Popper\u306e\u8aad\u307f\u8fbc\u307f\u78ba\u8a8d package.json\u306e\u4f9d\u5b58\u95a2\u4fc2\u78ba\u8a8d<br>\u30b9\u30bf\u30a4\u30eb\u304c\u9069\u7528\u3055\u308c\u306a\u3044 app.scss\u306e\u8a2d\u5b9a\u78ba\u8a8d import\u306e\u9806\u5e8f\u3068\u30d1\u30b9\u306e\u78ba\u8a8d \u3053\u308c\u3067\u57fa\u672c\u7684\u306a\u74b0\u5883\u69cb\u7bc9\u306f\u5b8c\u4e86\u3067\u3059\u3002\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u306f\u3001\u3053\u306e\u74b0\u5883\u3092\u6d3b\u7528\u3057\u3066Bootstrap\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u52b9\u7387\u7684\u306b\u5b9f\u88c5\u3057\u3066\u3044\u304f\u65b9\u6cd5\u3092\u89e3\u8aac\u3057\u307e\u3059\u3002<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-9\">Bootstrap\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u52b9\u7387\u7684\u306a\u6d3b\u7528\u6cd5<\/h2>\n\n\n\n<p>Laravel\u306eBlade\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3068Bootstrap\u3092\u7d44\u307f\u5408\u308f\u305b\u308b\u3053\u3068\u3067\u3001\u4fdd\u5b88\u6027\u304c\u9ad8\u304f\u518d\u5229\u7528\u53ef\u80fd\u306aUI\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u69cb\u7bc9\u3067\u304d\u307e\u3059\u3002\u3053\u3053\u3067\u306f\u3001\u5b9f\u969b\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3067\u6d3b\u7528\u3067\u304d\u308b\u5177\u4f53\u7684\u306a\u5b9f\u88c5\u65b9\u6cd5\u3092\u89e3\u8aac\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-10\">Blade\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3067\u306e\u30b0\u30ea\u30c3\u30c9\u30b7\u30b9\u30c6\u30e0\u306e\u5b9f\u88c5<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u57fa\u672c\u7684\u306a\u30b0\u30ea\u30c3\u30c9\u30ec\u30a4\u30a2\u30a6\u30c8\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u5316<\/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=\"\">   &lt;!-- resources\/views\/components\/grid\/row.blade.php --&gt;\n   &lt;div {{ $attributes-&gt;merge(['class' =&gt; 'row']) }}&gt;\n       {{ $slot }}\n   &lt;\/div&gt;\n\n   &lt;!-- resources\/views\/components\/grid\/col.blade.php --&gt;\n   @props([\n       'xs' =&gt; '12',\n       'sm' =&gt; null,\n       'md' =&gt; null,\n       'lg' =&gt; null,\n       'xl' =&gt; null\n   ])\n\n   @php\n       $classes = ['col-' . $xs];\n       if ($sm) $classes[] = 'col-sm-' . $sm;\n       if ($md) $classes[] = 'col-md-' . $md;\n       if ($lg) $classes[] = 'col-lg-' . $lg;\n       if ($xl) $classes[] = 'col-xl-' . $xl;\n   @endphp\n\n   &lt;div {{ $attributes-&gt;merge(['class' =&gt; implode(' ', $classes)]) }}&gt;\n       {{ $slot }}\n   &lt;\/div&gt;<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>\u30ec\u30a4\u30a2\u30a6\u30c8\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u4f7f\u7528\u4f8b<\/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=\"\">   &lt;!-- resources\/views\/dashboard.blade.php --&gt;\n   &lt;x-layout&gt;\n       &lt;x-grid.row&gt;\n           &lt;x-grid.col md=\"6\" lg=\"4\"&gt;\n               &lt;x-card&gt;\n                   &lt;x-slot name=\"header\"&gt;\u58f2\u4e0a\u7d71\u8a08&lt;\/x-slot&gt;\n                   &lt;!-- \u30ab\u30fc\u30c9\u30b3\u30f3\u30c6\u30f3\u30c4 --&gt;\n               &lt;\/x-card&gt;\n           &lt;\/x-grid.col&gt;\n\n           &lt;x-grid.col md=\"6\" lg=\"8\"&gt;\n               &lt;x-card&gt;\n                   &lt;x-slot name=\"header\"&gt;\u6700\u8fd1\u306e\u6ce8\u6587&lt;\/x-slot&gt;\n                   &lt;!-- \u30ab\u30fc\u30c9\u30b3\u30f3\u30c6\u30f3\u30c4 --&gt;\n               &lt;\/x-card&gt;\n           &lt;\/x-grid.col&gt;\n       &lt;\/x-grid.row&gt;\n   &lt;\/x-layout&gt;<\/pre>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><strong>\u30b3\u30f3\u30c6\u30ca\u306e\u30ab\u30b9\u30bf\u30de\u30a4\u30ba<\/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=\"\">   &lt;!-- resources\/views\/components\/container.blade.php --&gt;\n   @props([\n       'fluid' =&gt; false,\n       'maxWidth' =&gt; null\n   ])\n\n   @php\n       $containerClass = $fluid ? 'container-fluid' : 'container';\n       $maxWidthClass = $maxWidth ? 'max-w-' . $maxWidth : '';\n   @endphp\n\n   &lt;div {{ $attributes-&gt;merge(['class' =&gt; \"$containerClass $maxWidthClass\"]) }}&gt;\n       {{ $slot }}\n   &lt;\/div&gt;<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-11\">\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u30c7\u30b6\u30a4\u30f3\u306e\u5b9f\u73fe\u65b9\u6cd5<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30d6\u30ec\u30a4\u30af\u30dd\u30a4\u30f3\u30c8\u306e\u7ba1\u7406<\/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=\"\">   \/\/ resources\/sass\/_variables.scss\n\n   \/\/ Bootstrap\u306e\u30d6\u30ec\u30a4\u30af\u30dd\u30a4\u30f3\u30c8\u3092\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\n   $grid-breakpoints: (\n       xs: 0,\n       sm: 576px,\n       md: 768px,\n       lg: 992px,\n       xl: 1200px,\n       xxl: 1400px\n   );\n\n   \/\/ \u30b3\u30f3\u30c6\u30ca\u30b5\u30a4\u30ba\u306e\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\n   $container-max-widths: (\n       sm: 540px,\n       md: 720px,\n       lg: 960px,\n       xl: 1140px,\n       xxl: 1320px\n   );<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u30e6\u30fc\u30c6\u30a3\u30ea\u30c6\u30a3\u306e\u4f5c\u6210<\/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=\"\">   &lt;!-- resources\/views\/components\/responsive-image.blade.php --&gt;\n   @props(['src', 'alt', 'sizes' =&gt; null])\n\n   &lt;img\n       src=\"{{ $src }}\"\n       alt=\"{{ $alt }}\"\n       {{ $attributes-&gt;merge([\n           'class' =&gt; 'img-fluid',\n           'sizes' =&gt; $sizes ?? '100vw'\n       ]) }}\n   &gt;<\/pre>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><strong>\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u306e\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u5bfe\u5fdc<\/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=\"\">   &lt;!-- resources\/views\/components\/navbar.blade.php --&gt;\n   &lt;nav class=\"navbar navbar-expand-lg navbar-light bg-light\"&gt;\n       &lt;x-container&gt;\n           &lt;a class=\"navbar-brand\" href=\"{{ route('home') }}\"&gt;\n               {{ config('app.name') }}\n           &lt;\/a&gt;\n\n           &lt;button class=\"navbar-toggler\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarNav\"&gt;\n               &lt;span class=\"navbar-toggler-icon\"&gt;&lt;\/span&gt;\n           &lt;\/button&gt;\n\n           &lt;div class=\"collapse navbar-collapse\" id=\"navbarNav\"&gt;\n               {{ $slot }}\n           &lt;\/div&gt;\n       &lt;\/x-container&gt;\n   &lt;\/nav&gt;<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-12\">\u30ab\u30b9\u30bf\u30e0SCSS\u306e\u7d71\u5408\u30c6\u30af\u30cb\u30c3\u30af<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u52b9\u7387\u7684\u306aSCSS\u69cb\u9020\u306e\u69cb\u7bc9<\/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=\"\">   \/\/ resources\/sass\/app.scss\n\n   \/\/ 1. \u8a2d\u5b9a\u3068\u30ab\u30b9\u30bf\u30e0\u5909\u6570\n   @import 'variables';\n\n   \/\/ 2. Bootstrap \u3068\u4f9d\u5b58\u95a2\u4fc2\n   @import '~bootstrap\/scss\/bootstrap';\n\n   \/\/ 3. \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u56fa\u6709\u306e\u30b9\u30bf\u30a4\u30eb\n   @import 'components\/buttons';\n   @import 'components\/cards';\n   @import 'components\/forms';\n\n   \/\/ 4. \u30ec\u30a4\u30a2\u30a6\u30c8\u3068\u30da\u30fc\u30b8\u56fa\u6709\u306e\u30b9\u30bf\u30a4\u30eb\n   @import 'layouts\/header';\n   @import 'layouts\/footer';\n   @import 'layouts\/sidebar';\n\n   \/\/ 5. \u30e6\u30fc\u30c6\u30a3\u30ea\u30c6\u30a3\u30af\u30e9\u30b9\n   @import 'utilities';<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>\u30ab\u30b9\u30bf\u30e0\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30df\u30c3\u30af\u30b9\u30a4\u30f3<\/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=\"\">   \/\/ resources\/sass\/mixins\/_card.scss\n   @mixin custom-card {\n       @extend .card;\n       border-radius: $border-radius-lg;\n       box-shadow: $box-shadow-sm;\n\n       .card-header {\n           background-color: transparent;\n           border-bottom: 1px solid $gray-200;\n       }\n\n       &amp;:hover {\n           box-shadow: $box-shadow;\n           transition: $transition-base;\n       }\n   }\n\n   \/\/ \u4f7f\u7528\u4f8b\n   .dashboard-card {\n       @include custom-card;\n       margin-bottom: $spacer;\n   }<\/pre>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><strong>\u30c6\u30fc\u30de\u30ab\u30e9\u30fc\u306e\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u3068\u7ba1\u7406<\/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=\"\">   \/\/ resources\/sass\/_variables.scss\n\n   \/\/ \u30ab\u30b9\u30bf\u30e0\u30ab\u30e9\u30fc\u306e\u5b9a\u7fa9\n   $custom-colors: (\n       \"primary\": #4a5568,\n       \"secondary\": #718096,\n       \"success\": #48bb78,\n       \"info\": #4299e1,\n       \"warning\": #ecc94b,\n       \"danger\": #f56565\n   );\n\n   \/\/ Bootstrap\u306e\u30ab\u30e9\u30fc\u30de\u30c3\u30d7\u3068\u30de\u30fc\u30b8\n   $theme-colors: map-merge($theme-colors, $custom-colors);\n\n   \/\/ \u30ab\u30e9\u30fc\u30e6\u30fc\u30c6\u30a3\u30ea\u30c6\u30a3\u306e\u751f\u6210\n   @each $color, $value in $theme-colors {\n       .bg-#{$color}-light {\n           background-color: mix($value, $white, 10%);\n       }\n\n       .text-#{$color}-dark {\n           color: darken($value, 10%);\n       }\n   }<\/pre>\n\n\n\n<p>\u3053\u308c\u3089\u306e\u30c6\u30af\u30cb\u30c3\u30af\u3092\u6d3b\u7528\u3059\u308b\u3053\u3068\u3067\u3001\u4fdd\u5b88\u6027\u304c\u9ad8\u304f\u3001\u4e00\u8cab\u6027\u306e\u3042\u308b\u30c7\u30b6\u30a4\u30f3\u30b7\u30b9\u30c6\u30e0\u3092\u69cb\u7bc9\u3067\u304d\u307e\u3059\u3002\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u306f\u3001\u3053\u308c\u3089\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u4f7f\u7528\u3057\u305f\u5177\u4f53\u7684\u306aUI\u5b9f\u88c5\u4f8b\u3092\u7d39\u4ecb\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-13\">\u5b9f\u8df5\u7684\u306aUI\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u5b9f\u88c5\u4f8b<\/h2>\n\n\n\n<p>\u5b9f\u969b\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3067\u983b\u7e41\u306b\u4f7f\u7528\u3055\u308c\u308bUI\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u5b9f\u88c5\u4f8b\u3092\u3001\u5177\u4f53\u7684\u306a\u30b3\u30fc\u30c9\u3068\u3068\u3082\u306b\u89e3\u8aac\u3057\u307e\u3059\u3002\u3053\u308c\u3089\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306f\u3001\u518d\u5229\u7528\u6027\u3068\u4fdd\u5b88\u6027\u3092\u8003\u616e\u3057\u3066\u8a2d\u8a08\u3055\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-14\">\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u30d0\u30fc\u306e\u6700\u9069\u306a\u5b9f\u88c5\u65b9\u6cd5<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u5bfe\u5fdc\u306e\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8<\/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=\"\">   &lt;!-- resources\/views\/components\/navigation\/main.blade.php --&gt;\n   &lt;nav class=\"navbar navbar-expand-lg navbar-light bg-light\"&gt;\n       &lt;x-container&gt;\n           &lt;!-- \u30d6\u30e9\u30f3\u30c9\u30ed\u30b4 --&gt;\n           &lt;a class=\"navbar-brand\" href=\"{{ route('home') }}\"&gt;\n               &lt;img src=\"{{ asset('images\/logo.svg') }}\" alt=\"{{ config('app.name') }}\" height=\"30\"&gt;\n           &lt;\/a&gt;\n\n           &lt;!-- \u30cf\u30f3\u30d0\u30fc\u30ac\u30fc\u30e1\u30cb\u30e5\u30fc --&gt;\n           &lt;button class=\"navbar-toggler\" type=\"button\" data-bs-toggle=\"collapse\" \n                   data-bs-target=\"#mainNavbar\" aria-controls=\"mainNavbar\"\n                   aria-expanded=\"false\" aria-label=\"Toggle navigation\"&gt;\n               &lt;span class=\"navbar-toggler-icon\"&gt;&lt;\/span&gt;\n           &lt;\/button&gt;\n\n           &lt;!-- \u30e1\u30a4\u30f3\u30e1\u30cb\u30e5\u30fc --&gt;\n           &lt;div class=\"collapse navbar-collapse\" id=\"mainNavbar\"&gt;\n               &lt;ul class=\"navbar-nav me-auto mb-2 mb-lg-0\"&gt;\n                   &lt;x-navigation.nav-item route=\"dashboard\" icon=\"speedometer2\"&gt;\n                       \u30c0\u30c3\u30b7\u30e5\u30dc\u30fc\u30c9\n                   &lt;\/x-navigation.nav-item&gt;\n\n                   &lt;x-navigation.nav-item route=\"projects\" icon=\"folder\"&gt;\n                       \u30d7\u30ed\u30b8\u30a7\u30af\u30c8\n                   &lt;\/x-navigation.nav-item&gt;\n\n                   &lt;!-- \u30c9\u30ed\u30c3\u30d7\u30c0\u30a6\u30f3\u30e1\u30cb\u30e5\u30fc --&gt;\n                   &lt;x-navigation.dropdown id=\"userMenu\" label=\"\u8a2d\u5b9a\"&gt;\n                       &lt;x-navigation.dropdown-item route=\"profile\"&gt;\n                           \u30d7\u30ed\u30d5\u30a3\u30fc\u30eb\u8a2d\u5b9a\n                       &lt;\/x-navigation.dropdown-item&gt;\n                       &lt;x-navigation.dropdown-item route=\"security\"&gt;\n                           \u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u8a2d\u5b9a\n                       &lt;\/x-navigation.dropdown-item&gt;\n                   &lt;\/x-navigation.dropdown&gt;\n               &lt;\/ul&gt;\n\n               &lt;!-- \u691c\u7d22\u30d5\u30a9\u30fc\u30e0 --&gt;\n               &lt;form class=\"d-flex\"&gt;\n                   &lt;x-form.search-input \/&gt;\n               &lt;\/form&gt;\n           &lt;\/div&gt;\n       &lt;\/x-container&gt;\n   &lt;\/nav&gt;\n\n   &lt;!-- resources\/views\/components\/navigation\/nav-item.blade.php --&gt;\n   @props(['route', 'icon' =&gt; null])\n\n   @php\n       $isActive = request()-&gt;routeIs($route);\n       $classes = 'nav-link ' . ($isActive ? 'active' : '');\n   @endphp\n\n   &lt;li class=\"nav-item\"&gt;\n       &lt;a href=\"{{ route($route) }}\" class=\"{{ $classes }}\"&gt;\n           @if($icon)\n               &lt;i class=\"bi bi-{{ $icon }} me-1\"&gt;&lt;\/i&gt;\n           @endif\n           {{ $slot }}\n       &lt;\/a&gt;\n   &lt;\/li&gt;<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>\u30c9\u30ed\u30c3\u30d7\u30c0\u30a6\u30f3\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u5b9f\u88c5<\/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=\"\">   &lt;!-- resources\/views\/components\/navigation\/dropdown.blade.php --&gt;\n   @props(['id', 'label'])\n\n   &lt;li class=\"nav-item dropdown\"&gt;\n       &lt;a class=\"nav-link dropdown-toggle\" href=\"#\" id=\"{{ $id }}\"\n          role=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\"&gt;\n           {{ $label }}\n       &lt;\/a&gt;\n       &lt;ul class=\"dropdown-menu\" aria-labelledby=\"{{ $id }}\"&gt;\n           {{ $slot }}\n       &lt;\/ul&gt;\n   &lt;\/li&gt;<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-15\">\u30d5\u30a9\u30fc\u30e0\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30ab\u30b9\u30bf\u30de\u30a4\u30ba<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u518d\u5229\u7528\u53ef\u80fd\u306a\u30d5\u30a9\u30fc\u30e0\u8981\u7d20<\/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=\"\">   &lt;!-- resources\/views\/components\/form\/input.blade.php --&gt;\n   @props([\n       'type' =&gt; 'text',\n       'name',\n       'label',\n       'value' =&gt; null,\n       'required' =&gt; false,\n       'helper' =&gt; null\n   ])\n\n   &lt;div class=\"mb-3\"&gt;\n       &lt;label for=\"{{ $name }}\" class=\"form-label\"&gt;\n           {{ $label }}\n           @if($required)\n               &lt;span class=\"text-danger\"&gt;*&lt;\/span&gt;\n           @endif\n       &lt;\/label&gt;\n\n       &lt;input type=\"{{ $type }}\"\n              name=\"{{ $name }}\"\n              id=\"{{ $name }}\"\n              value=\"{{ old($name, $value) }}\"\n              {{ $required ? 'required' : '' }}\n              {{ $attributes-&gt;merge(['class' =&gt; 'form-control ' . ($errors-&gt;has($name) ? 'is-invalid' : '')]) }}&gt;\n\n       @if($helper)\n           &lt;div class=\"form-text\"&gt;{{ $helper }}&lt;\/div&gt;\n       @endif\n\n       @error($name)\n           &lt;div class=\"invalid-feedback\"&gt;\n               {{ $message }}\n           &lt;\/div&gt;\n       @enderror\n   &lt;\/div&gt;\n\n   &lt;!-- \u4f7f\u7528\u4f8b --&gt;\n   &lt;x-form.input\n       name=\"email\"\n       label=\"\u30e1\u30fc\u30eb\u30a2\u30c9\u30ec\u30b9\"\n       type=\"email\"\n       required\n       helper=\"\u696d\u52d9\u7528\u30e1\u30fc\u30eb\u30a2\u30c9\u30ec\u30b9\u3092\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044\"\n   \/&gt;<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>\u30ab\u30b9\u30bf\u30e0\u30bb\u30ec\u30af\u30c8\u30dc\u30c3\u30af\u30b9<\/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=\"\">   &lt;!-- resources\/views\/components\/form\/select.blade.php --&gt;\n   @props([\n       'name',\n       'label',\n       'options' =&gt; [],\n       'selected' =&gt; null,\n       'placeholder' =&gt; '\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044'\n   ])\n\n   &lt;div class=\"mb-3\"&gt;\n       &lt;label for=\"{{ $name }}\" class=\"form-label\"&gt;{{ $label }}&lt;\/label&gt;\n\n       &lt;select name=\"{{ $name }}\" id=\"{{ $name }}\"\n               {{ $attributes-&gt;merge(['class' =&gt; 'form-select']) }}&gt;\n\n           @if($placeholder)\n               &lt;option value=\"\"&gt;{{ $placeholder }}&lt;\/option&gt;\n           @endif\n\n           @foreach($options as $value =&gt; $label)\n               &lt;option value=\"{{ $value }}\" {{ $value == old($name, $selected) ? 'selected' : '' }}&gt;\n                   {{ $label }}\n               &lt;\/option&gt;\n           @endforeach\n       &lt;\/select&gt;\n\n       @error($name)\n           &lt;div class=\"invalid-feedback\"&gt;\n               {{ $message }}\n           &lt;\/div&gt;\n       @enderror\n   &lt;\/div&gt;<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-16\">\u30e2\u30fc\u30c0\u30eb\u3068\u30a2\u30e9\u30fc\u30c8\u306e\u52d5\u7684\u306a\u5236\u5fa1<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u518d\u5229\u7528\u53ef\u80fd\u306a\u30e2\u30fc\u30c0\u30eb\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8<\/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=\"\">   &lt;!-- resources\/views\/components\/modal.blade.php --&gt;\n   @props([\n       'id',\n       'title',\n       'footer' =&gt; null,\n       'size' =&gt; null,  \/\/ sm, lg, xl\n       'static' =&gt; false\n   ])\n\n   &lt;div class=\"modal fade\" id=\"{{ $id }}\" tabindex=\"-1\"\n        aria-labelledby=\"{{ $id }}Label\" aria-hidden=\"true\"\n        @if($static) data-bs-backdrop=\"static\" data-bs-keyboard=\"false\" @endif&gt;\n       &lt;div class=\"modal-dialog {{ $size ? 'modal-'.$size : '' }}\"&gt;\n           &lt;div class=\"modal-content\"&gt;\n               &lt;div class=\"modal-header\"&gt;\n                   &lt;h5 class=\"modal-title\" id=\"{{ $id }}Label\"&gt;{{ $title }}&lt;\/h5&gt;\n                   &lt;button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"&gt;&lt;\/button&gt;\n               &lt;\/div&gt;\n               &lt;div class=\"modal-body\"&gt;\n                   {{ $slot }}\n               &lt;\/div&gt;\n               @if($footer)\n                   &lt;div class=\"modal-footer\"&gt;\n                       {{ $footer }}\n                   &lt;\/div&gt;\n               @endif\n           &lt;\/div&gt;\n       &lt;\/div&gt;\n   &lt;\/div&gt;\n\n   &lt;!-- \u4f7f\u7528\u4f8b --&gt;\n   &lt;x-modal id=\"confirmDelete\" title=\"\u524a\u9664\u306e\u78ba\u8a8d\" static&gt;\n       &lt;p&gt;\u672c\u5f53\u306b\u3053\u306e\u9805\u76ee\u3092\u524a\u9664\u3057\u307e\u3059\u304b\uff1f&lt;\/p&gt;\n\n       &lt;x-slot name=\"footer\"&gt;\n           &lt;button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\"&gt;\u30ad\u30e3\u30f3\u30bb\u30eb&lt;\/button&gt;\n           &lt;button type=\"button\" class=\"btn btn-danger\" onclick=\"deleteItem()\"&gt;\u524a\u9664\u3059\u308b&lt;\/button&gt;\n       &lt;\/x-slot&gt;\n   &lt;\/x-modal&gt;<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>\u30d5\u30e9\u30c3\u30b7\u30e5\u30e1\u30c3\u30bb\u30fc\u30b8\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8<\/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=\"\">   &lt;!-- resources\/views\/components\/alert.blade.php --&gt;\n   @props([\n       'type' =&gt; 'info',\n       'dismissible' =&gt; true,\n       'icon' =&gt; null\n   ])\n\n   @php\n       $alertClass = 'alert alert-' . $type;\n       if ($dismissible) $alertClass .= ' alert-dismissible fade show';\n   @endphp\n\n   &lt;div {{ $attributes-&gt;merge(['class' =&gt; $alertClass]) }} role=\"alert\"&gt;\n       @if($icon)\n           &lt;i class=\"bi bi-{{ $icon }} me-2\"&gt;&lt;\/i&gt;\n       @endif\n\n       {{ $slot }}\n\n       @if($dismissible)\n           &lt;button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\" aria-label=\"Close\"&gt;&lt;\/button&gt;\n       @endif\n   &lt;\/div&gt;<\/pre>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><strong>JavaScript\u306b\u3088\u308b\u30e2\u30fc\u30c0\u30eb\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=\"\">   \/\/ resources\/js\/components\/modal.js\n   export default class ModalManager {\n       constructor(modalId) {\n           this.modal = new bootstrap.Modal(document.getElementById(modalId));\n           this.setupEventListeners();\n       }\n\n       setupEventListeners() {\n           this.modal._element.addEventListener('shown.bs.modal', () =&gt; {\n               \/\/ \u30e2\u30fc\u30c0\u30eb\u304c\u8868\u793a\u3055\u308c\u305f\u5f8c\u306e\u51e6\u7406\n               const firstInput = this.modal._element.querySelector('input, textarea');\n               if (firstInput) firstInput.focus();\n           });\n\n           this.modal._element.addEventListener('hidden.bs.modal', () =&gt; {\n               \/\/ \u30e2\u30fc\u30c0\u30eb\u304c\u975e\u8868\u793a\u306b\u306a\u3063\u305f\u5f8c\u306e\u51e6\u7406\n               const form = this.modal._element.querySelector('form');\n               if (form) form.reset();\n           });\n       }\n\n       show(data = null) {\n           if (data) {\n               \/\/ \u30e2\u30fc\u30c0\u30eb\u5185\u306e\u30d5\u30a9\u30fc\u30e0\u306b\u30c7\u30fc\u30bf\u3092\u8a2d\u5b9a\n               Object.entries(data).forEach(([key, value]) =&gt; {\n                   const input = this.modal._element.querySelector(`[name=\"${key}\"]`);\n                   if (input) input.value = value;\n               });\n           }\n           this.modal.show();\n       }\n\n       hide() {\n           this.modal.hide();\n       }\n   }<\/pre>\n\n\n\n<p>\u3053\u308c\u3089\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306f\u3001\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u5168\u4f53\u3067\u4e00\u8cab\u6027\u306e\u3042\u308bUI\u3092\u5b9f\u73fe\u3057\u3001\u958b\u767a\u52b9\u7387\u3092\u5411\u4e0a\u3055\u305b\u307e\u3059\u3002\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u306f\u3001\u3053\u308c\u3089\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u52b9\u7387\u7684\u306b\u904b\u7528\u3059\u308b\u305f\u3081\u306e\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u6700\u9069\u5316\u3068\u30c7\u30d0\u30c3\u30b0\u624b\u6cd5\u306b\u3064\u3044\u3066\u89e3\u8aac\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-17\">\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u6700\u9069\u5316\u3068\u30c7\u30d0\u30c3\u30b0<\/h2>\n\n\n\n<p>Laravel\u3068Bootstrap\u3092\u7d44\u307f\u5408\u308f\u305b\u305f\u5b9f\u88c5\u306b\u304a\u3044\u3066\u3001\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u3068\u30e1\u30f3\u30c6\u30ca\u30f3\u30b9\u6027\u3092\u78ba\u4fdd\u3059\u308b\u305f\u3081\u306e\u5177\u4f53\u7684\u306a\u624b\u6cd5\u3092\u89e3\u8aac\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-18\">\u30a2\u30bb\u30c3\u30c8\u306e\u52b9\u7387\u7684\u306a\u8aad\u307f\u8fbc\u307f\u65b9\u6cd5<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30a2\u30bb\u30c3\u30c8\u306e\u6700\u9069\u5316\u8a2d\u5b9a<\/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=\"\">   \/\/ webpack.mix.js\n   const mix = require('laravel-mix');\n\n   mix.js('resources\/js\/app.js', 'public\/js')\n      .sass('resources\/sass\/app.scss', 'public\/css')\n      \/\/ \u30d0\u30fc\u30b8\u30e7\u30cb\u30f3\u30b0\u306e\u8ffd\u52a0\n      .version()\n      \/\/ \u672c\u756a\u74b0\u5883\u3067\u306e\u6700\u9069\u5316\n      .when(mix.inProduction(), function () {\n          mix.options({\n              \/\/ CSS\u5185\u306e\u672a\u4f7f\u7528\u30bb\u30ec\u30af\u30bf\u3092\u524a\u9664\n              postCss: [\n                  require('@fullhuman\/postcss-purgecss')({\n                      content: [\n                          '.\/resources\/views\/**\/*.blade.php',\n                          '.\/resources\/js\/**\/*.vue',\n                          '.\/resources\/js\/**\/*.js'\n                      ],\n                      defaultExtractor: content =&gt; content.match(\/[\\w-\/:]+(?&lt;!:)\/g) || []\n                  })\n              ],\n              \/\/ JS\u306e\u5727\u7e2e\u8a2d\u5b9a\n              terser: {\n                  terserOptions: {\n                      compress: {\n                          drop_console: true\n                      }\n                  }\n              }\n          });\n      });<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>\u9045\u5ef6\u8aad\u307f\u8fbc\u307f\u306e\u5b9f\u88c5<\/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=\"\">   &lt;!-- resources\/views\/layouts\/app.blade.php --&gt;\n   &lt;!DOCTYPE html&gt;\n   &lt;html lang=\"{{ str_replace('_', '-', app()-&gt;getLocale()) }}\"&gt;\n   &lt;head&gt;\n       &lt;!-- \u91cd\u8981\u306a\u30b9\u30bf\u30a4\u30eb\u306f\u5373\u6642\u8aad\u307f\u8fbc\u307f --&gt;\n       &lt;link href=\"{{ mix('css\/critical.css') }}\" rel=\"stylesheet\"&gt;\n\n       &lt;!-- \u305d\u306e\u4ed6\u306e\u30b9\u30bf\u30a4\u30eb\u306f\u9045\u5ef6\u8aad\u307f\u8fbc\u307f --&gt;\n       &lt;link href=\"{{ mix('css\/app.css') }}\" rel=\"stylesheet\" media=\"print\" onload=\"this.media='all'\"&gt;\n\n       &lt;!-- JavaScript \u306e\u9045\u5ef6\u8aad\u307f\u8fbc\u307f --&gt;\n       &lt;script src=\"{{ mix('js\/app.js') }}\" defer&gt;&lt;\/script&gt;\n   &lt;\/head&gt;\n   &lt;body&gt;\n       &lt;!-- \u30b3\u30f3\u30c6\u30f3\u30c4 --&gt;\n   &lt;\/body&gt;\n   &lt;\/html&gt;<\/pre>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><strong>\u6761\u4ef6\u4ed8\u304d\u30ed\u30fc\u30c7\u30a3\u30f3\u30b0<\/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=\"\">   &lt;!-- resources\/views\/components\/data-table.blade.php --&gt;\n   @props(['data'])\n\n   &lt;div class=\"table-responsive\"&gt;\n       &lt;table class=\"table\"&gt;\n           &lt;!-- \u30c6\u30fc\u30d6\u30eb\u306e\u57fa\u672c\u69cb\u9020 --&gt;\n       &lt;\/table&gt;\n\n       @if(count($data) &gt; 100)\n           &lt;!-- \u30c7\u30fc\u30bf\u304c\u591a\u3044\u5834\u5408\u306f\u4eee\u60f3\u30b9\u30af\u30ed\u30fc\u30eb\u3092\u6709\u52b9\u5316 --&gt;\n           @push('scripts')\n               &lt;script&gt;\n                   document.addEventListener('DOMContentLoaded', () =&gt; {\n                       import('virtual-scroll-grid').then(module =&gt; {\n                           \/\/ \u4eee\u60f3\u30b9\u30af\u30ed\u30fc\u30eb\u306e\u521d\u671f\u5316\n                       });\n                   });\n               &lt;\/script&gt;\n           @endpush\n       @endif\n   &lt;\/div&gt;<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-19\">\u4e00\u822c\u7684\u306a\u7d71\u5408\u30a8\u30e9\u30fc\u3068\u305d\u306e\u89e3\u6c7a\u6cd5<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u3088\u304f\u3042\u308b\u554f\u984c\u3068\u5bfe\u51e6\u65b9\u6cd5<\/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=\"\">   \/\/ \u554f\u984c: Bootstrap\u306e\u30b9\u30bf\u30a4\u30eb\u304c\u9069\u7528\u3055\u308c\u306a\u3044\n   \/\/ \u89e3\u6c7a: \u30a2\u30bb\u30c3\u30c8\u306e\u30b3\u30f3\u30d1\u30a4\u30eb\u78ba\u8a8d\n   php artisan view:clear\n   php artisan cache:clear\n   npm run dev\n\n   \/\/ \u554f\u984c: JavaScript\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304c\u52d5\u4f5c\u3057\u306a\u3044\n   \/\/ \u89e3\u6c7a: \u4f9d\u5b58\u95a2\u4fc2\u306e\u78ba\u8a8d\n   @push('scripts')\n   &lt;script&gt;\n       \/\/ Bootstrap\u306e\u4f9d\u5b58\u78ba\u8a8d\n       if (typeof bootstrap === 'undefined') {\n           console.error('Bootstrap \u304c\u8aad\u307f\u8fbc\u307e\u308c\u3066\u3044\u307e\u305b\u3093');\n       }\n\n       \/\/ Popper\u306e\u4f9d\u5b58\u78ba\u8a8d\n       if (typeof Popper === 'undefined') {\n           console.error('Popper.js \u304c\u8aad\u307f\u8fbc\u307e\u308c\u3066\u3044\u307e\u305b\u3093');\n       }\n   &lt;\/script&gt;\n   @endpush<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>\u30c7\u30d0\u30c3\u30b0\u7528\u30d8\u30eb\u30d1\u30fc\u95a2\u6570<\/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=\"\">   \/\/ app\/helpers.php\n   if (!function_exists('debug_assets')) {\n       function debug_assets() {\n           return [\n               'compiled_css' =&gt; file_exists(public_path('css\/app.css')),\n               'compiled_js' =&gt; file_exists(public_path('js\/app.js')),\n               'mix_manifest' =&gt; file_exists(public_path('mix-manifest.json')),\n               'node_modules' =&gt; file_exists(base_path('node_modules')),\n               'package_json' =&gt; file_exists(base_path('package.json')),\n           ];\n       }\n   }\n\n   \/\/ \u4f7f\u7528\u4f8b\n   @if(config('app.debug'))\n       &lt;div class=\"debug-info\"&gt;\n           &lt;pre&gt;{{ print_r(debug_assets(), true) }}&lt;\/pre&gt;\n       &lt;\/div&gt;\n   @endif<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-20\">\u672c\u756a\u74b0\u5883\u3067\u306e\u30c7\u30d7\u30ed\u30a4\u30e1\u30f3\u30c8\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30c7\u30d7\u30ed\u30a4\u30e1\u30f3\u30c8\u30c1\u30a7\u30c3\u30af\u30ea\u30b9\u30c8<\/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=\"\">   # 1. \u4f9d\u5b58\u95a2\u4fc2\u306e\u66f4\u65b0\n   composer install --no-dev --optimize-autoloader\n   npm ci\n\n   # 2. \u74b0\u5883\u8a2d\u5b9a\n   php artisan config:cache\n   php artisan route:cache\n   php artisan view:cache\n\n   # 3. \u30a2\u30bb\u30c3\u30c8\u306e\u30b3\u30f3\u30d1\u30a4\u30eb\n   npm run production\n\n   # 4. \u30ad\u30e3\u30c3\u30b7\u30e5\u306e\u30af\u30ea\u30a2\n   php artisan cache:clear<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u30e2\u30cb\u30bf\u30ea\u30f3\u30b0<\/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=\"\">   \/\/ app\/Providers\/AppServiceProvider.php\n   use Illuminate\\Support\\Facades\\Blade;\n   use Illuminate\\Support\\Facades\\DB;\n\n   public function boot()\n   {\n       if (config('app.debug')) {\n           \/\/ SQL\u30af\u30a8\u30ea\u306e\u30ed\u30b0\n           DB::listen(function($query) {\n               \\Log::info(\n                   $query-&gt;sql,\n                   [\n                       'bindings' =&gt; $query-&gt;bindings,\n                       'time' =&gt; $query-&gt;time\n                   ]\n               );\n           });\n\n           \/\/ Blade\u30b3\u30f3\u30d1\u30a4\u30eb\u6642\u9593\u306e\u8a08\u6e2c\n           Blade::directive('timestart', function () {\n               return \"&lt;?php \\$time_start = microtime(true); ?&gt;\";\n           });\n\n           Blade::directive('timeend', function () {\n               return \"&lt;?php \\$time_end = microtime(true);\n                   \\$execution_time = (\\$time_end - \\$time_start);\n                   echo '\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u6642\u9593: '.\\$execution_time.' \u79d2'; ?&gt;\";\n           });\n       }\n   }<\/pre>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><strong>\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u5bfe\u7b56<\/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=\"\">   \/\/ config\/app.php\n   return [\n       'debug' =&gt; env('APP_DEBUG', false),\n       'env' =&gt; env('APP_ENV', 'production'),\n\n       \/\/ CSRF\u30c8\u30fc\u30af\u30f3\u306e\u8a2d\u5b9a\n       'csrf_token_lifetime' =&gt; 120, \/\/ \u5206\n\n       \/\/ \u30bb\u30ad\u30e5\u30a2\u30d8\u30c3\u30c0\u30fc\u306e\u8a2d\u5b9a\n       'secure_headers' =&gt; [\n           'x-frame-options' =&gt; 'SAMEORIGIN',\n           'x-xss-protection' =&gt; '1; mode=block',\n           'x-content-type-options' =&gt; 'nosniff',\n           'referrer-policy' =&gt; 'strict-origin-when-cross-origin',\n           'content-security-policy' =&gt; \"default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline';\"\n       ],\n   ];\n\n   \/\/ app\/Http\/Middleware\/SecureHeaders.php\n   public function handle($request, Closure $next)\n   {\n       $response = $next($request);\n\n       foreach (config('app.secure_headers', []) as $header =&gt; $value) {\n           $response-&gt;headers-&gt;set($header, $value);\n       }\n\n       return $response;\n   }<\/pre>\n\n\n\n<p>\u3053\u308c\u3089\u306e\u6700\u9069\u5316\u3068\u30c7\u30d0\u30c3\u30b0\u624b\u6cd5\u3092\u9069\u5207\u306b\u5b9f\u88c5\u3059\u308b\u3053\u3068\u3067\u3001\u5b89\u5b9a\u3057\u305f\u904b\u7528\u3068\u4fdd\u5b88\u6027\u306e\u9ad8\u3044\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u5b9f\u73fe\u3067\u304d\u307e\u3059\u3002\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u3068\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u306e\u4e21\u9762\u306b\u914d\u616e\u3059\u308b\u3053\u3068\u3067\u3001\u30e6\u30fc\u30b6\u30fc\u4f53\u9a13\u306e\u5411\u4e0a\u306b\u3082\u3064\u306a\u304c\u308a\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":[12],"tags":[],"class_list":{"0":"post-2515","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-php","7":"nothumb"},"_links":{"self":[{"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=\/wp\/v2\/posts\/2515","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=2515"}],"version-history":[{"count":2,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=\/wp\/v2\/posts\/2515\/revisions"}],"predecessor-version":[{"id":2517,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=\/wp\/v2\/posts\/2515\/revisions\/2517"}],"wp:attachment":[{"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2515"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2515"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2515"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}