{"id":2638,"date":"2025-03-24T08:46:53","date_gmt":"2025-03-23T23:46:53","guid":{"rendered":"https:\/\/dexall.co.jp\/articles\/?p=2638"},"modified":"2025-03-24T08:47:21","modified_gmt":"2025-03-23T23:47:21","slug":"%e3%80%90%e4%bf%9d%e5%ad%98%e7%89%88%e3%80%91laravel-livewire%e3%81%a7%e4%bd%9c%e3%82%8b%e9%ab%98%e9%80%9f%e3%83%aa%e3%82%a2%e3%83%ab%e3%82%bf%e3%82%a4%e3%83%a0ui%ef%bc%81%e5%ae%9f%e8%a3%85%e6%89%8b","status":"publish","type":"post","link":"https:\/\/dexall.co.jp\/articles\/?p=2638","title":{"rendered":"\u3010\u4fdd\u5b58\u7248\u3011Laravel Livewire\u3067\u4f5c\u308b\u9ad8\u901f\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0UI\uff01\u5b9f\u88c5\u624b\u9806\u3068\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b92024"},"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 Livewire\u3068\u306f\uff1f\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u306e\u7279\u5fb4\u3092\u89e3\u8aac<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-1\">\u5f93\u6765\u306eJavaScript\u958b\u767a\u306b\u304a\u3051\u308b\u8ab2\u984c<\/a>      <\/li>      <li>        <a href=\"#i-2\">Livewire\u304c\u89e3\u6c7a\u3059\u308b\u958b\u767a\u306e\u60a9\u307f\u30dd\u30a4\u30f3\u30c8<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-3\">AlpineJS\u3068\u306e\u95a2\u4fc2\u6027\u3068\u4f7f\u3044\u5206\u3051<\/a>      <\/li>    <\/ul>  <\/li>  <li>    <a href=\"#i-4\">Livewire\u306e\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u3068\u57fa\u672c\u7684\u306a\u4f7f\u3044\u65b9<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-5\">composer\u7d4c\u7531\u3067\u306e\u5c0e\u5165\u624b\u9806<\/a>      <\/li>      <li>        <a href=\"#i-6\">\u6700\u521d\u306eLivewire\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u4f5c\u6210\u3057\u3088\u3046<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-7\">\u30c7\u30fc\u30bf\u30d0\u30a4\u30f3\u30c7\u30a3\u30f3\u30b0\u306e\u57fa\u672c\u3092\u7406\u89e3\u3059\u308b<\/a>      <\/li>    <\/ul>  <\/li>  <li>    <a href=\"#i-8\">\u5b9f\u8df5\u7684\u306aLivewire\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u958b\u767a\u624b\u9806<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-9\">\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u691c\u7d22\u6a5f\u80fd\u306e\u5b9f\u88c5\u4f8b<\/a>      <\/li>      <li>        <a href=\"#i-10\">\u30d5\u30a9\u30fc\u30e0\u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\u306e\u5b9f\u88c5\u65b9\u6cd5<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-11\">\u30d5\u30a1\u30a4\u30eb\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u6a5f\u80fd\u306e\u4f5c\u308a\u65b9<\/a>      <\/li>    <\/ul>  <\/li>  <li>    <a href=\"#i-12\">Livewire\u306e\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u6700\u9069\u5316\u30c6\u30af\u30cb\u30c3\u30af<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-13\">\u30dd\u30fc\u30ea\u30f3\u30b0\u3068\u30c7\u30fc\u30bf\u66f4\u65b0\u306e\u6700\u9069\u5316<\/a>      <\/li>      <li>        <a href=\"#i-14\">LazyLoading\u306b\u3088\u308b\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u5411\u4e0a<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-15\">\u30ad\u30e3\u30c3\u30b7\u30e5\u6226\u7565\u3068\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9<\/a>      <\/li>    <\/ul>  <\/li>  <li>    <a href=\"#i-16\">Livewire\u3067\u5b9f\u73fe\u3059\u308b\u5b9f\u8df5\u7684\u306aUI\u5b9f\u88c5\u4f8b<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-17\">\u7121\u9650\u30b9\u30af\u30ed\u30fc\u30eb\u306e\u5b9f\u88c5\u65b9\u6cd5<\/a>      <\/li>      <li>        <a href=\"#i-18\">\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u30c1\u30e3\u30c3\u30c8\u6a5f\u80fd\u306e\u4f5c\u308a\u65b9<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-19\">\u52d5\u7684\u30d5\u30a9\u30fc\u30e0\u306e\u5b9f\u88c5\u30c6\u30af\u30cb\u30c3\u30af<\/a>      <\/li>    <\/ul>  <\/li>  <li class=\"last\">    <a href=\"#i-20\">Livewire\u958b\u767a\u306b\u304a\u3051\u308b\u30c8\u30e9\u30d6\u30eb\u30b7\u30e5\u30fc\u30c6\u30a3\u30f3\u30b0<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-21\">\u3088\u304f\u3042\u308b\u30a8\u30e9\u30fc\u3068\u89e3\u6c7a\u65b9\u6cd5<\/a>      <\/li>      <li>        <a href=\"#i-22\">\u30c7\u30d0\u30c3\u30b0\u30c4\u30fc\u30eb\u306e\u52b9\u679c\u7684\u306a\u4f7f\u3044\u65b9<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-23\">\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u5bfe\u7b56\u306e\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 Livewire\u3068\u306f\uff1f\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u306e\u7279\u5fb4\u3092\u89e3\u8aac<\/h2>\n\n\n\n<p>Laravel Livewire\u306f\u3001PHP\u3060\u3051\u3067\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u306a\u30b7\u30f3\u30b0\u30eb\u30da\u30fc\u30b8\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\uff08SPA\uff09\u306e\u3088\u3046\u306a\u52d5\u7684\u306a\u30e6\u30fc\u30b6\u30fc\u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30fc\u30b9\u3092\u69cb\u7bc9\u3067\u304d\u308b\u30d5\u30eb\u30b9\u30bf\u30c3\u30af\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3067\u3059\u3002\u5f93\u6765\u306eJavaScript\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u306b\u983c\u308b\u3053\u3068\u306a\u304f\u3001PHP\u306e\u77e5\u8b58\u3060\u3051\u3067\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u306aWeb\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u958b\u767a\u3067\u304d\u308b\u9769\u65b0\u7684\u306a\u30c4\u30fc\u30eb\u3068\u3057\u3066\u6ce8\u76ee\u3092\u96c6\u3081\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-1\">\u5f93\u6765\u306eJavaScript\u958b\u767a\u306b\u304a\u3051\u308b\u8ab2\u984c<\/h3>\n\n\n\n<p>\u73fe\u4ee3\u306eWeb\u958b\u767a\u306b\u304a\u3044\u3066\u3001\u52d5\u7684\u306a\u30e6\u30fc\u30b6\u30fc\u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30fc\u30b9\u306e\u5b9f\u88c5\u306f\u4e0d\u53ef\u6b20\u3067\u3059\u3002\u3057\u304b\u3057\u3001\u5f93\u6765\u306e\u30a2\u30d7\u30ed\u30fc\u30c1\u306b\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u8ab2\u984c\u304c\u5b58\u5728\u3057\u3066\u3044\u307e\u3057\u305f\uff1a<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u958b\u767a\u306e\u8907\u96d1\u6027<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u3068\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u306e\u4e8c\u91cd\u7ba1\u7406<\/li>\n\n\n\n<li>\u72b6\u614b\u7ba1\u7406\u306e\u7169\u96d1\u3055<\/li>\n\n\n\n<li>API\u30a8\u30f3\u30c9\u30dd\u30a4\u30f3\u30c8\u306e\u8a2d\u8a08\u3068\u7ba1\u7406<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u5b66\u7fd2\u30b3\u30b9\u30c8\u306e\u5897\u5927<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Vue.js\u3084React\u306a\u3069\u306eJavaScript\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u306e\u7fd2\u5f97<\/li>\n\n\n\n<li>\u30e2\u30c0\u30f3\u306a\u30d3\u30eb\u30c9\u30c4\u30fc\u30eb\u30c1\u30a7\u30fc\u30f3\u306e\u7406\u89e3<\/li>\n\n\n\n<li>TypeScript\u306a\u3069\u306e\u8ffd\u52a0\u8a00\u8a9e\u306e\u5b66\u7fd2<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u4fdd\u5b88\u6027\u306e\u8ab2\u984c<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u3068\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u306e\u30b3\u30fc\u30c9\u540c\u671f<\/li>\n\n\n\n<li>\u30d0\u30fc\u30b8\u30e7\u30f3\u7ba1\u7406\u306e\u8907\u96d1\u3055<\/li>\n\n\n\n<li>\u30c6\u30b9\u30c8\u306e\u4e8c\u91cd\u5b9f\u88c5<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-2\">Livewire\u304c\u89e3\u6c7a\u3059\u308b\u958b\u767a\u306e\u60a9\u307f\u30dd\u30a4\u30f3\u30c8<\/h3>\n\n\n\n<p>Livewire\u306f\u3001\u3053\u308c\u3089\u306e\u8ab2\u984c\u306b\u5bfe\u3057\u3066\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u30bd\u30ea\u30e5\u30fc\u30b7\u30e7\u30f3\u3092\u63d0\u4f9b\u3057\u307e\u3059\uff1a<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30b7\u30f3\u30d7\u30eb\u306a\u958b\u767a\u30e2\u30c7\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=\"\">   class SearchUsers extends Component\n   {\n       public $search = '';\n\n       public function render()\n       {\n           return view('livewire.search-users', [\n               'users' =&gt; User::where('name', 'like', \"%{$this-&gt;search}%\")-&gt;get()\n           ]);\n       }\n   }<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u306a\u53cc\u65b9\u5411\u30d0\u30a4\u30f3\u30c7\u30a3\u30f3\u30b0<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>PHP\u306e\u5909\u6570\u3068\u30d3\u30e5\u30fc\u306e\u81ea\u52d5\u540c\u671f<\/li>\n\n\n\n<li>\u30a4\u30d9\u30f3\u30c8\u30cf\u30f3\u30c9\u30ea\u30f3\u30b0\u306e\u7c21\u7d20\u5316<\/li>\n\n\n\n<li>\u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\u306e\u7d71\u5408<\/li>\n<\/ul>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u306e\u6700\u9069\u5316<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u5fc5\u8981\u306a\u90e8\u5206\u306e\u307f\u306e\u66f4\u65b0<\/li>\n\n\n\n<li>\u52b9\u7387\u7684\u306aDOM\u30d1\u30c3\u30c1\u30f3\u30b0<\/li>\n\n\n\n<li>\u30b9\u30de\u30fc\u30c8\u306a\u30ad\u30e3\u30c3\u30b7\u30f3\u30b0\u6226\u7565<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-3\">AlpineJS\u3068\u306e\u95a2\u4fc2\u6027\u3068\u4f7f\u3044\u5206\u3051<\/h3>\n\n\n\n<p>Livewire\u3068AlpineJS\u306f\u3001\u30e2\u30c0\u30f3\u306aLaravel\u958b\u767a\u306b\u304a\u3044\u3066\u88dc\u5b8c\u7684\u306a\u95a2\u4fc2\u306b\u3042\u308a\u307e\u3059\uff1a<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>AlpineJS\u306e\u5f79\u5272<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u8efd\u91cf\u306a\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u30b5\u30a4\u30c9\u306e\u64cd\u4f5c<\/li>\n\n\n\n<li>\u30b7\u30f3\u30d7\u30eb\u306aDOM\u64cd\u4f5c<\/li>\n\n\n\n<li>\u30c8\u30e9\u30f3\u30b8\u30b7\u30e7\u30f3\u3084\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u4f7f\u3044\u5206\u3051\u306e\u6307\u91dd<\/strong> \u6a5f\u80fd Livewire AlpineJS \u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u64cd\u4f5c \u25cb \u00d7 \u30d5\u30a9\u30fc\u30e0\u51e6\u7406 \u25cb \u25b3 \u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3 \u25b3 \u25cb \u8efd\u91cf\u306a\u72b6\u614b\u7ba1\u7406 \u25cb \u25cb<\/li>\n\n\n\n<li><strong>\u7d71\u5408\u306e\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\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;div&gt;\n       &lt;!-- Livewire\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8 --&gt;\n       &lt;form wire:submit.prevent=\"save\"&gt;\n           &lt;!-- AlpineJS\u306b\u3088\u308b\u30c9\u30ed\u30c3\u30d7\u30c0\u30a6\u30f3 --&gt;\n           &lt;div x-data=\"{ open: false }\"&gt;\n               &lt;button @click=\"open = !open\"&gt;\u9078\u629e&lt;\/button&gt;\n               &lt;div x-show=\"open\"&gt;\n                   &lt;!-- \u9078\u629e\u80a2 --&gt;\n               &lt;\/div&gt;\n           &lt;\/div&gt;\n       &lt;\/form&gt;\n   &lt;\/div&gt;<\/pre>\n\n\n\n<p>\u3053\u306e\u3088\u3046\u306b\u3001Livewire\u3068AlpineJS\u3092\u9069\u5207\u306b\u7d44\u307f\u5408\u308f\u305b\u308b\u3053\u3068\u3067\u3001\u3088\u308a\u67d4\u8edf\u3067\u52b9\u7387\u7684\u306a\u958b\u767a\u304c\u53ef\u80fd\u306b\u306a\u308a\u307e\u3059\u3002\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u306f\u3001\u5b9f\u969b\u306eLivewire\u306e\u5c0e\u5165\u624b\u9806\u3068\u57fa\u672c\u7684\u306a\u4f7f\u3044\u65b9\u306b\u3064\u3044\u3066\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\">Livewire\u306e\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u3068\u57fa\u672c\u7684\u306a\u4f7f\u3044\u65b9<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-5\">composer\u7d4c\u7531\u3067\u306e\u5c0e\u5165\u624b\u9806<\/h3>\n\n\n\n<p>Livewire\u306e\u5c0e\u5165\u306f\u3001Composer\u3092\u4f7f\u7528\u3057\u3066\u7c21\u5358\u306b\u884c\u3046\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u4ee5\u4e0b\u306e\u624b\u9806\u3067\u3001\u65e2\u5b58\u306eLaravel\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306bLivewire\u3092\u5c0e\u5165\u3057\u3066\u3044\u304d\u307e\u3057\u3087\u3046\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Composer\u3067\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=\"\">composer require livewire\/livewire<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>\u30ec\u30a4\u30a2\u30a6\u30c8\u30d5\u30a1\u30a4\u30eb\u3078\u306e\u30a2\u30bb\u30c3\u30c8\u8ffd\u52a0<\/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;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n    &lt;!-- ... --&gt;\n    @livewireStyles  &lt;!-- \u30b9\u30bf\u30a4\u30eb\u306e\u8ffd\u52a0 --&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;!-- \u30b3\u30f3\u30c6\u30f3\u30c4 --&gt;\n\n    @livewireScripts  &lt;!-- \u30b9\u30af\u30ea\u30d7\u30c8\u306e\u8ffd\u52a0\uff08body\u7d42\u4e86\u30bf\u30b0\u306e\u76f4\u524d\uff09 --&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><strong>\u8a2d\u5b9a\u30d5\u30a1\u30a4\u30eb\u306e\u516c\u958b\uff08\u30aa\u30d7\u30b7\u30e7\u30f3\uff09<\/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=\"\">php artisan livewire:publish --config<\/pre>\n\n\n\n<p>\u3053\u308c\u306b\u3088\u308a<code>config\/livewire.php<\/code>\u304c\u4f5c\u6210\u3055\u308c\u3001\u8a73\u7d30\u306a\u8a2d\u5b9a\u304c\u53ef\u80fd\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-6\">\u6700\u521d\u306eLivewire\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u4f5c\u6210\u3057\u3088\u3046<\/h3>\n\n\n\n<p>Livewire\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u4f5c\u6210\u304b\u3089\u5b9f\u88c5\u307e\u3067\u3001\u6bb5\u968e\u7684\u306b\u898b\u3066\u3044\u304d\u307e\u3057\u3087\u3046\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u751f\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=\"\">php artisan make:livewire Counter<\/pre>\n\n\n\n<p>\u3053\u308c\u306b\u3088\u308a\u4ee5\u4e0b\u306e2\u3064\u306e\u30d5\u30a1\u30a4\u30eb\u304c\u751f\u6210\u3055\u308c\u307e\u3059\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>app\/Http\/Livewire\/Counter.php<\/code>\uff08\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u30af\u30e9\u30b9\uff09<\/li>\n\n\n\n<li><code>resources\/views\/livewire\/counter.blade.php<\/code>\uff08\u30d3\u30e5\u30fc\u30d5\u30a1\u30a4\u30eb\uff09<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u30af\u30e9\u30b9\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=\"\">namespace App\\Http\\Livewire;\n\nuse Livewire\\Component;\n\nclass Counter extends Component\n{\n    public $count = 0;  \/\/ \u30d1\u30d6\u30ea\u30c3\u30af\u30d7\u30ed\u30d1\u30c6\u30a3\n\n    public function increment()\n    {\n        $this-&gt;count++;\n    }\n\n    public function decrement()\n    {\n        $this-&gt;count--;\n    }\n\n    public function render()\n    {\n        return view('livewire.counter');\n    }\n}<\/pre>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><strong>\u30d3\u30e5\u30fc\u30c6\u30f3\u30d7\u30ec\u30fc\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=\"\">&lt;div&gt;\n    &lt;h2&gt;\u30ab\u30a6\u30f3\u30bf\u30fc: {{ $count }}&lt;\/h2&gt;\n\n    &lt;button wire:click=\"increment\"&gt;\u5897\u3084\u3059&lt;\/button&gt;\n    &lt;button wire:click=\"decrement\"&gt;\u6e1b\u3089\u3059&lt;\/button&gt;\n&lt;\/div&gt;<\/pre>\n\n\n\n<ol start=\"4\" class=\"wp-block-list\">\n<li><strong>\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u4f7f\u7528<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!-- Blade\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u5185\u3067 --&gt;\n&lt;livewire:counter \/&gt;\n\n&lt;!-- \u307e\u305f\u306f --&gt;\n@livewire('counter')<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-7\">\u30c7\u30fc\u30bf\u30d0\u30a4\u30f3\u30c7\u30a3\u30f3\u30b0\u306e\u57fa\u672c\u3092\u7406\u89e3\u3059\u308b<\/h3>\n\n\n\n<p>Livewire\u306e\u30c7\u30fc\u30bf\u30d0\u30a4\u30f3\u30c7\u30a3\u30f3\u30b0\u306f\u3001\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u3068\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u3092 seamless \u306b\u63a5\u7d9a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u30d0\u30a4\u30f3\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=\"\">class SearchComponent extends Component\n{\n    public $query = '';  \/\/ \u691c\u7d22\u30af\u30a8\u30ea\n\n    public function render()\n    {\n        return view('livewire.search', [\n            'results' =&gt; $this-&gt;query \n                ? User::where('name', 'like', \"%{$this-&gt;query}%\")-&gt;get() \n                : []\n        ]);\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;div&gt;\n    &lt;!-- wire:model \u3067\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u30d0\u30a4\u30f3\u30c7\u30a3\u30f3\u30b0 --&gt;\n    &lt;input type=\"text\" wire:model=\"query\" placeholder=\"\u691c\u7d22...\"&gt;\n\n    &lt;ul&gt;\n        @foreach($results as $result)\n            &lt;li&gt;{{ $result-&gt;name }}&lt;\/li&gt;\n        @endforeach\n    &lt;\/ul&gt;\n&lt;\/div&gt;<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>\u30d0\u30a4\u30f3\u30c7\u30a3\u30f3\u30b0\u306e\u7a2e\u985e<\/strong><\/li>\n<\/ol>\n\n\n<div id=\"id-88576fa8-3dbb-4921-be9f-cf249a17200a\">\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\u30c7\u30a3\u30ec\u30af\u30c6\u30a3\u30d6<\/th><th>\u7528\u9014<\/th><th>\u66f4\u65b0\u30bf\u30a4\u30df\u30f3\u30b0<\/th><\/tr><\/thead><tbody><tr><td>wire:model<\/td><td>\u6a19\u6e96\u7684\u306a\u30d0\u30a4\u30f3\u30c7\u30a3\u30f3\u30b0<\/td><td>\u5165\u529b\u306e\u5ea6\u306b\u66f4\u65b0<\/td><\/tr><tr><td>wire:model.lazy<\/td><td>\u9045\u5ef6\u30d0\u30a4\u30f3\u30c7\u30a3\u30f3\u30b0<\/td><td>\u30d5\u30a9\u30fc\u30ab\u30b9\u304c\u5916\u308c\u305f\u6642\u306b\u66f4\u65b0<\/td><\/tr><tr><td>wire:model.defer<\/td><td>\u9045\u5ef6\u4fdd\u5b58<\/td><td>\u30d5\u30a9\u30fc\u30e0\u9001\u4fe1\u6642\u306e\u307f\u66f4\u65b0<\/td><\/tr><tr><td>wire:model.debounce.500ms<\/td><td>\u30c7\u30d0\u30a6\u30f3\u30b9\u4ed8\u304d<\/td><td>\u5165\u529b\u304c500ms\u6b62\u307e\u3063\u3066\u304b\u3089\u66f4\u65b0<\/td><\/tr><\/tbody><\/table><\/figure>\n<\/div>\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><strong>\u30a2\u30af\u30b7\u30e7\u30f3\u306e\u6271\u3044\u65b9<\/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=\"\">class TodoList extends Component\n{\n    public $todos = [];\n    public $newTodo = '';\n\n    public function addTodo()\n    {\n        \/\/ \u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\n        $this-&gt;validate([\n            'newTodo' =&gt; 'required|min:3'\n        ]);\n\n        \/\/ \u914d\u5217\u306b\u8ffd\u52a0\n        $this-&gt;todos[] = $this-&gt;newTodo;\n\n        \/\/ \u5165\u529b\u6b04\u3092\u30af\u30ea\u30a2\n        $this-&gt;newTodo = '';\n    }\n\n    public function render()\n    {\n        return view('livewire.todo-list');\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;div&gt;\n    &lt;form wire:submit.prevent=\"addTodo\"&gt;\n        &lt;input type=\"text\" \n               wire:model=\"newTodo\" \n               placeholder=\"\u65b0\u3057\u3044\u30bf\u30b9\u30af\"&gt;\n\n        &lt;button type=\"submit\"&gt;\u8ffd\u52a0&lt;\/button&gt;\n    &lt;\/form&gt;\n\n    &lt;ul&gt;\n        @foreach($todos as $index =&gt; $todo)\n            &lt;li wire:key=\"todo-{{ $index }}\"&gt;\n                {{ $todo }}\n            &lt;\/li&gt;\n        @endforeach\n    &lt;\/ul&gt;\n&lt;\/div&gt;<\/pre>\n\n\n\n<p>\u3053\u306e\u3088\u3046\u306b\u3001Livewire\u3067\u306fPHP\u306e\u77e5\u8b58\u3060\u3051\u3067\u3001JavaScript\u3092\u66f8\u304f\u3053\u3068\u306a\u304f\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u306aUI\u3092\u5b9f\u88c5\u3067\u304d\u307e\u3059\u3002\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u306f\u3001\u3088\u308a\u5b9f\u8df5\u7684\u306a\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u958b\u767a\u306e\u624b\u9806\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-8\">\u5b9f\u8df5\u7684\u306aLivewire\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u958b\u767a\u624b\u9806<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-9\">\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u691c\u7d22\u6a5f\u80fd\u306e\u5b9f\u88c5\u4f8b<\/h3>\n\n\n\n<p>\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u691c\u7d22\u306f\u3001\u30e2\u30c0\u30f3\u306aWeb\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306b\u306f\u6b20\u304b\u305b\u306a\u3044\u6a5f\u80fd\u3067\u3059\u3002Livewire\u3092\u4f7f\u7528\u3059\u308b\u3053\u3068\u3067\u3001\u52b9\u7387\u7684\u306b\u5b9f\u88c5\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\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=\"\">php artisan make:livewire UserSearch<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u30af\u30e9\u30b9\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=\"\">namespace App\\Http\\Livewire;\n\nuse App\\Models\\User;\nuse Livewire\\Component;\nuse Livewire\\WithPagination;\n\nclass UserSearch extends Component\n{\n    use WithPagination;\n\n    public $search = '';\n    public $perPage = 10;\n    protected $queryString = ['search']; \/\/ URL\u30af\u30a8\u30ea\u30d1\u30e9\u30e1\u30fc\u30bf\u3068\u306e\u9023\u643a\n\n    \/\/ \u691c\u7d22\u6587\u5b57\u5217\u304c\u5909\u66f4\u3055\u308c\u305f\u3089\u30da\u30fc\u30b8\u3092\u30ea\u30bb\u30c3\u30c8\n    public function updatingSearch()\n    {\n        $this-&gt;resetPage();\n    }\n\n    public function render()\n    {\n        return view('livewire.user-search', [\n            'users' =&gt; User::where('name', 'like', \"%{$this-&gt;search}%\")\n                          -&gt;orWhere('email', 'like', \"%{$this-&gt;search}%\")\n                          -&gt;paginate($this-&gt;perPage)\n        ]);\n    }\n}<\/pre>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><strong>\u30d3\u30e5\u30fc\u30c6\u30f3\u30d7\u30ec\u30fc\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;div&gt;\n    &lt;div class=\"mb-4\"&gt;\n        &lt;input type=\"text\" \n               wire:model.debounce.300ms=\"search\" \n               placeholder=\"\u30e6\u30fc\u30b6\u30fc\u3092\u691c\u7d22...\"\n               class=\"w-full px-4 py-2 border rounded\"&gt;\n    &lt;\/div&gt;\n\n    &lt;div class=\"space-y-4\"&gt;\n        @if($users-&gt;isEmpty())\n            &lt;p&gt;\u8a72\u5f53\u3059\u308b\u30e6\u30fc\u30b6\u30fc\u304c\u898b\u3064\u304b\u308a\u307e\u305b\u3093\u3002&lt;\/p&gt;\n        @else\n            @foreach($users as $user)\n                &lt;div wire:key=\"user-{{ $user-&gt;id }}\" class=\"p-4 border rounded\"&gt;\n                    &lt;h3&gt;{{ $user-&gt;name }}&lt;\/h3&gt;\n                    &lt;p&gt;{{ $user-&gt;email }}&lt;\/p&gt;\n                &lt;\/div&gt;\n            @endforeach\n\n            {{ $users-&gt;links() }} &lt;!-- \u30da\u30fc\u30b8\u30cd\u30fc\u30b7\u30e7\u30f3\u30ea\u30f3\u30af --&gt;\n        @endif\n    &lt;\/div&gt;\n&lt;\/div&gt;<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-10\">\u30d5\u30a9\u30fc\u30e0\u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\u306e\u5b9f\u88c5\u65b9\u6cd5<\/h3>\n\n\n\n<p>Livewire\u3067\u306f\u3001Laravel\u306e\u5f37\u529b\u306a\u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\u6a5f\u80fd\u3092\u30b7\u30fc\u30e0\u30ec\u30b9\u306b\u5229\u7528\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\u4ed8\u304d\u30d5\u30a9\u30fc\u30e0\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=\"\">namespace App\\Http\\Livewire;\n\nuse Livewire\\Component;\n\nclass ContactForm extends Component\n{\n    public $name = '';\n    public $email = '';\n    public $message = '';\n\n    \/\/ \u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\u30eb\u30fc\u30eb\n    protected $rules = [\n        'name' =&gt; 'required|min:3',\n        'email' =&gt; 'required|email',\n        'message' =&gt; 'required|min:10',\n    ];\n\n    \/\/ \u30a8\u30e9\u30fc\u30e1\u30c3\u30bb\u30fc\u30b8\u306e\u65e5\u672c\u8a9e\u5316\n    protected $messages = [\n        'name.required' =&gt; '\u540d\u524d\u306f\u5fc5\u9808\u3067\u3059',\n        'name.min' =&gt; '\u540d\u524d\u306f3\u6587\u5b57\u4ee5\u4e0a\u3067\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044',\n        'email.required' =&gt; '\u30e1\u30fc\u30eb\u30a2\u30c9\u30ec\u30b9\u306f\u5fc5\u9808\u3067\u3059',\n        'email.email' =&gt; '\u6709\u52b9\u306a\u30e1\u30fc\u30eb\u30a2\u30c9\u30ec\u30b9\u3092\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044',\n        'message.required' =&gt; '\u30e1\u30c3\u30bb\u30fc\u30b8\u306f\u5fc5\u9808\u3067\u3059',\n        'message.min' =&gt; '\u30e1\u30c3\u30bb\u30fc\u30b8\u306f10\u6587\u5b57\u4ee5\u4e0a\u3067\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044',\n    ];\n\n    \/\/ \u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\n    public function updated($propertyName)\n    {\n        $this-&gt;validateOnly($propertyName);\n    }\n\n    public function submitForm()\n    {\n        $validatedData = $this-&gt;validate();\n\n        \/\/ \u30d5\u30a9\u30fc\u30e0\u9001\u4fe1\u51e6\u7406\n        \/\/ \u30e1\u30fc\u30eb\u9001\u4fe1\u3084\u4fdd\u5b58\u51e6\u7406\u306a\u3069\n\n        session()-&gt;flash('message', '\u9001\u4fe1\u304c\u5b8c\u4e86\u3057\u307e\u3057\u305f\uff01');\n\n        $this-&gt;reset(); \/\/ \u30d5\u30a9\u30fc\u30e0\u3092\u30af\u30ea\u30a2\n    }\n\n    public function render()\n    {\n        return view('livewire.contact-form');\n    }\n}<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>\u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\u4ed8\u304d\u30d5\u30a9\u30fc\u30e0\u306e\u30d3\u30e5\u30fc<\/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;div&gt;\n    @if (session()-&gt;has('message'))\n        &lt;div class=\"alert alert-success\"&gt;\n            {{ session('message') }}\n        &lt;\/div&gt;\n    @endif\n\n    &lt;form wire:submit.prevent=\"submitForm\"&gt;\n        &lt;div class=\"mb-4\"&gt;\n            &lt;label&gt;\u540d\u524d&lt;\/label&gt;\n            &lt;input type=\"text\" wire:model=\"name\"&gt;\n            @error('name') \n                &lt;span class=\"text-red-500\"&gt;{{ $message }}&lt;\/span&gt;\n            @enderror\n        &lt;\/div&gt;\n\n        &lt;div class=\"mb-4\"&gt;\n            &lt;label&gt;\u30e1\u30fc\u30eb\u30a2\u30c9\u30ec\u30b9&lt;\/label&gt;\n            &lt;input type=\"email\" wire:model=\"email\"&gt;\n            @error('email')\n                &lt;span class=\"text-red-500\"&gt;{{ $message }}&lt;\/span&gt;\n            @enderror\n        &lt;\/div&gt;\n\n        &lt;div class=\"mb-4\"&gt;\n            &lt;label&gt;\u30e1\u30c3\u30bb\u30fc\u30b8&lt;\/label&gt;\n            &lt;textarea wire:model=\"message\"&gt;&lt;\/textarea&gt;\n            @error('message')\n                &lt;span class=\"text-red-500\"&gt;{{ $message }}&lt;\/span&gt;\n            @enderror\n        &lt;\/div&gt;\n\n        &lt;button type=\"submit\"&gt;\u9001\u4fe1&lt;\/button&gt;\n    &lt;\/form&gt;\n&lt;\/div&gt;<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-11\">\u30d5\u30a1\u30a4\u30eb\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u6a5f\u80fd\u306e\u4f5c\u308a\u65b9<\/h3>\n\n\n\n<p>Livewire\u3067\u306e\u30d5\u30a1\u30a4\u30eb\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u306f\u3001\u4e00\u6642\u4fdd\u5b58\u3068\u9032\u6357\u72b6\u6cc1\u306e\u8868\u793a\u3082\u542b\u3081\u3066\u5b9f\u88c5\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30d5\u30a1\u30a4\u30eb\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\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=\"\">namespace App\\Http\\Livewire;\n\nuse Livewire\\Component;\nuse Livewire\\WithFileUploads;\nuse Illuminate\\Support\\Facades\\Storage;\n\nclass FileUploader extends Component\n{\n    use WithFileUploads;\n\n    public $file;\n    public $successMessage = '';\n\n    protected $rules = [\n        'file' =&gt; 'required|file|max:10240|mimes:pdf,doc,docx'\n    ];\n\n    protected $messages = [\n        'file.required' =&gt; '\u30d5\u30a1\u30a4\u30eb\u3092\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044',\n        'file.max' =&gt; '\u30d5\u30a1\u30a4\u30eb\u30b5\u30a4\u30ba\u306f10MB\u4ee5\u4e0b\u306b\u3057\u3066\u304f\u3060\u3055\u3044',\n        'file.mimes' =&gt; '\u8a31\u53ef\u3055\u308c\u3066\u3044\u308b\u30d5\u30a1\u30a4\u30eb\u5f62\u5f0f: PDF, DOC, DOCX',\n    ];\n\n    public function upload()\n    {\n        $this-&gt;validate();\n\n        \/\/ \u30d5\u30a1\u30a4\u30eb\u306e\u4fdd\u5b58\n        $path = $this-&gt;file-&gt;store('uploads', 'public');\n\n        \/\/ DB\u3078\u306e\u4fdd\u5b58\u306a\u3069\u3001\u5fc5\u8981\u306a\u51e6\u7406\u3092\u8ffd\u52a0\n\n        $this-&gt;successMessage = '\u30d5\u30a1\u30a4\u30eb\u306e\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u304c\u5b8c\u4e86\u3057\u307e\u3057\u305f\uff01';\n        $this-&gt;reset('file');\n    }\n\n    public function render()\n    {\n        return view('livewire.file-uploader');\n    }\n}<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>\u30d5\u30a1\u30a4\u30eb\u30a2\u30c3\u30d7\u30ed\u30fc\u30c0\u30fc\u306e\u30d3\u30e5\u30fc<\/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;div&gt;\n    @if ($successMessage)\n        &lt;div class=\"alert alert-success\"&gt;\n            {{ $successMessage }}\n        &lt;\/div&gt;\n    @endif\n\n    &lt;form wire:submit.prevent=\"upload\"&gt;\n        &lt;div class=\"mb-4\"&gt;\n            &lt;label&gt;\u30d5\u30a1\u30a4\u30eb\u3092\u9078\u629e&lt;\/label&gt;\n            &lt;input type=\"file\" wire:model=\"file\"&gt;\n\n            &lt;!-- \u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u4e2d\u306e\u30d7\u30ed\u30b0\u30ec\u30b9\u30d0\u30fc --&gt;\n            &lt;div wire:loading wire:target=\"file\"&gt;\n                \u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u4e2d...\n                &lt;div class=\"progress\"&gt;\n                    &lt;div class=\"progress-bar\"&gt;&lt;\/div&gt;\n                &lt;\/div&gt;\n            &lt;\/div&gt;\n\n            @error('file')\n                &lt;span class=\"text-red-500\"&gt;{{ $message }}&lt;\/span&gt;\n            @enderror\n        &lt;\/div&gt;\n\n        &lt;button type=\"submit\" \n                class=\"px-4 py-2 bg-blue-500 text-white rounded\"\n                wire:loading.attr=\"disabled\"&gt;\n            \u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\n        &lt;\/button&gt;\n    &lt;\/form&gt;\n\n    @if ($file)\n        &lt;div class=\"mt-4\"&gt;\n            &lt;h4&gt;\u30d7\u30ec\u30d3\u30e5\u30fc&lt;\/h4&gt;\n            @if(in_array($file-&gt;getClientOriginalExtension(), ['pdf']))\n                &lt;embed src=\"{{ $file-&gt;temporaryUrl() }}\" \n                       type=\"application\/pdf\" \n                       width=\"100%\" \n                       height=\"600px\"&gt;\n            @endif\n        &lt;\/div&gt;\n    @endif\n&lt;\/div&gt;<\/pre>\n\n\n\n<p>\u3053\u308c\u3089\u306e\u5b9f\u88c5\u4f8b\u306f\u3001\u5b9f\u969b\u306e\u958b\u767a\u73fe\u5834\u3067\u3059\u3050\u306b\u6d3b\u7528\u3067\u304d\u308b\u5f62\u3067\u63d0\u4f9b\u3057\u3066\u3044\u307e\u3059\u3002\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u306f\u3001\u3053\u308c\u3089\u306e\u6a5f\u80fd\u3092\u66f4\u306b\u6700\u9069\u5316\u3059\u308b\u305f\u3081\u306e\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u30c1\u30e5\u30fc\u30cb\u30f3\u30b0\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-12\">Livewire\u306e\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u6700\u9069\u5316\u30c6\u30af\u30cb\u30c3\u30af<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-13\">\u30dd\u30fc\u30ea\u30f3\u30b0\u3068\u30c7\u30fc\u30bf\u66f4\u65b0\u306e\u6700\u9069\u5316<\/h3>\n\n\n\n<p>Livewire\u3067\u306e\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u30c7\u30fc\u30bf\u66f4\u65b0\u306f\u3001\u9069\u5207\u306a\u5b9f\u88c5\u306b\u3088\u308a\u5927\u5e45\u306a\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u5411\u4e0a\u304c\u53ef\u80fd\u3067\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u52b9\u7387\u7684\u306a\u30dd\u30fc\u30ea\u30f3\u30b0\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=\"\">namespace App\\Http\\Livewire;\n\nuse Livewire\\Component;\nuse App\\Models\\Notification;\n\nclass NotificationFeed extends Component\n{\n    public $notifications = [];\n    public $poolingInterval = 5000; \/\/ 5\u79d2\n\n    \/\/ \u30dd\u30fc\u30ea\u30f3\u30b0\u9593\u9694\u306e\u52d5\u7684\u8abf\u6574\n    public function adjustPollingInterval()\n    {\n        $userActive = session('user_active', true);\n        $this-&gt;poolingInterval = $userActive ? 5000 : 30000;\n    }\n\n    public function getListeners()\n    {\n        return [\n            \/\/ \u30e6\u30fc\u30b6\u30fc\u306e\u30a2\u30af\u30c6\u30a3\u30d3\u30c6\u30a3\u306b\u5fdc\u3058\u3066\u30dd\u30fc\u30ea\u30f3\u30b0\u9593\u9694\u3092\u8abf\u6574\n            'echo:notifications,NotificationCreated' =&gt; 'handleNewNotification',\n            'userActive' =&gt; 'handleUserActive',\n        ];\n    }\n\n    public function handleUserActive($active)\n    {\n        session(['user_active' =&gt; $active]);\n        $this-&gt;adjustPollingInterval();\n    }\n\n    public function render()\n    {\n        return view('livewire.notification-feed', [\n            'notifications' =&gt; Notification::latest()\n                -&gt;take(10)\n                -&gt;get()\n        ]);\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;div&gt;\n    &lt;div wire:poll.{{ $poolingInterval }}ms=\"$refresh\"&gt;\n        @foreach($notifications as $notification)\n            &lt;div wire:key=\"notification-{{ $notification-&gt;id }}\"&gt;\n                {{ $notification-&gt;message }}\n            &lt;\/div&gt;\n        @endforeach\n    &lt;\/div&gt;\n&lt;\/div&gt;<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>\u30d0\u30c3\u30c1\u51e6\u7406\u306b\u3088\u308b\u6700\u9069\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=\"\">class DataUpdater extends Component\n{\n    public $updates = [];\n\n    public function batchUpdate()\n    {\n        \/\/ \u30c8\u30e9\u30f3\u30b6\u30af\u30b7\u30e7\u30f3\u3067\u30d0\u30c3\u30c1\u51e6\u7406\n        DB::transaction(function () {\n            collect($this-&gt;updates)-&gt;chunk(100)-&gt;each(function ($batch) {\n                \/\/ 100\u4ef6\u305a\u3064\u51e6\u7406\n                DB::table('items')-&gt;upsert(\n                    $batch-&gt;toArray(),\n                    ['id'],\n                    ['value', 'updated_at']\n                );\n            });\n        });\n    }\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-14\">LazyLoading\u306b\u3088\u308b\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u5411\u4e0a<\/h3>\n\n\n\n<ol 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=\"\">namespace App\\Http\\Livewire;\n\nuse Livewire\\Component;\nuse App\\Models\\Post;\n\nclass BlogPosts extends Component\n{\n    public $loadedPosts = 10;\n    public $perPage = 10;\n\n    protected $listeners = ['load-more' =&gt; 'loadMore'];\n\n    public function loadMore()\n    {\n        $this-&gt;loadedPosts += $this-&gt;perPage;\n    }\n\n    public function render()\n    {\n        $posts = Post::with(['author', 'comments']) \/\/ Eager\u30ed\u30fc\u30c7\u30a3\u30f3\u30b0\n            -&gt;latest()\n            -&gt;take($this-&gt;loadedPosts)\n            -&gt;get();\n\n        return view('livewire.blog-posts', [\n            'posts' =&gt; $posts,\n            'hasMore' =&gt; Post::count() &gt; $this-&gt;loadedPosts\n        ]);\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;div&gt;\n    &lt;div class=\"space-y-4\"&gt;\n        @foreach($posts as $post)\n            &lt;div wire:key=\"post-{{ $post-&gt;id }}\"&gt;\n                &lt;h3&gt;{{ $post-&gt;title }}&lt;\/h3&gt;\n                &lt;p&gt;{{ $post-&gt;excerpt }}&lt;\/p&gt;\n            &lt;\/div&gt;\n        @endforeach\n    &lt;\/div&gt;\n\n    @if($hasMore)\n        &lt;div class=\"mt-4\"&gt;\n            &lt;button wire:click=\"loadMore\" \n                    wire:loading.attr=\"disabled\"\n                    class=\"px-4 py-2 bg-blue-500 text-white rounded\"&gt;\n                \u3082\u3063\u3068\u8aad\u307f\u8fbc\u3080\n                &lt;span wire:loading wire:target=\"loadMore\"&gt;...&lt;\/span&gt;\n            &lt;\/button&gt;\n        &lt;\/div&gt;\n    @endif\n&lt;\/div&gt;<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u9045\u5ef6\u8aad\u307f\u8fbc\u307f<\/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;div&gt;\n    &lt;!-- \u91cd\u3044\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u9045\u5ef6\u8aad\u307f\u8fbc\u307f --&gt;\n    &lt;div wire:init=\"loadHeavyComponent\"&gt;\n        @if($isLoaded)\n            @livewire('heavy-component')\n        @else\n            &lt;div class=\"loading-placeholder\"&gt;\n                \u8aad\u307f\u8fbc\u307f\u4e2d...\n            &lt;\/div&gt;\n        @endif\n    &lt;\/div&gt;\n&lt;\/div&gt;<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-15\">\u30ad\u30e3\u30c3\u30b7\u30e5\u6226\u7565\u3068\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u52b9\u7387\u7684\u306a\u30ad\u30e3\u30c3\u30b7\u30e5\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=\"\">namespace App\\Http\\Livewire;\n\nuse Livewire\\Component;\nuse Illuminate\\Support\\Facades\\Cache;\n\nclass DashboardStats extends Component\n{\n    public $stats = [];\n\n    public function mount()\n    {\n        $this-&gt;loadStats();\n    }\n\n    protected function loadStats()\n    {\n        $this-&gt;stats = Cache::remember('dashboard.stats', now()-&gt;addMinutes(5), function () {\n            return [\n                'total_users' =&gt; $this-&gt;calculateTotalUsers(),\n                'active_users' =&gt; $this-&gt;calculateActiveUsers(),\n                'revenue' =&gt; $this-&gt;calculateRevenue(),\n            ];\n        });\n    }\n\n    \/\/ \u30ad\u30e3\u30c3\u30b7\u30e5\u306e\u624b\u52d5\u66f4\u65b0\n    public function refreshStats()\n    {\n        Cache::forget('dashboard.stats');\n        $this-&gt;loadStats();\n\n        $this-&gt;dispatch('stats-updated');\n    }\n\n    protected function calculateTotalUsers()\n    {\n        \/\/ \u91cd\u3044\u96c6\u8a08\u51e6\u7406\n        return User::count();\n    }\n\n    protected function calculateActiveUsers()\n    {\n        return User::where('last_active_at', '&gt;=', now()-&gt;subDay())-&gt;count();\n    }\n\n    protected function calculateRevenue()\n    {\n        return Order::whereDate('created_at', today())-&gt;sum('amount');\n    }\n}<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>\u30e2\u30c7\u30eb\u30ad\u30e3\u30c3\u30b7\u30e5\u306e\u6d3b\u7528<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">namespace App\\Models;\n\nuse Illuminate\\Database\\Eloquent\\Model;\nuse Illuminate\\Support\\Facades\\Cache;\n\nclass Product extends Model\n{\n    public function getCachedAttributes($key)\n    {\n        return Cache::remember(\n            \"product.{$this-&gt;id}.{$key}\", \n            now()-&gt;addHour(), \n            fn() =&gt; $this-&gt;attributes[$key]\n        );\n    }\n\n    public function clearCache()\n    {\n        $keys = ['name', 'price', 'stock'];\n        foreach ($keys as $key) {\n            Cache::forget(\"product.{$this-&gt;id}.{$key}\");\n        }\n    }\n\n    protected static function boot()\n    {\n        parent::boot();\n\n        static::updated(function ($product) {\n            $product-&gt;clearCache();\n        });\n    }\n}<\/pre>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><strong>\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u6700\u9069\u5316\u306e\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9<\/strong><\/li>\n<\/ol>\n\n\n<div id=\"id-987d8fe2-242b-412d-bb77-cdd5d1e68370\">\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\u6700\u9069\u5316\u30dd\u30a4\u30f3\u30c8<\/th><th>\u5b9f\u88c5\u65b9\u6cd5<\/th><th>\u52b9\u679c<\/th><\/tr><\/thead><tbody><tr><td>\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u30af\u30a8\u30ea<\/td><td>Eager\u30ed\u30fc\u30c7\u30a3\u30f3\u30b0\u306e\u6d3b\u7528<\/td><td>N+1\u554f\u984c\u306e\u89e3\u6d88<\/td><\/tr><tr><td>\u30e1\u30e2\u30ea\u4f7f\u7528\u91cf<\/td><td>\u30c1\u30e3\u30f3\u30af\u51e6\u7406\u306e\u5c0e\u5165<\/td><td>\u30e1\u30e2\u30ea\u6d88\u8cbb\u306e\u6291\u5236<\/td><\/tr><tr><td>\u30cd\u30c3\u30c8\u30ef\u30fc\u30af\u8ca0\u8377<\/td><td>\u30c7\u30d0\u30a6\u30f3\u30b9\/\u30b9\u30ed\u30c3\u30c8\u30ea\u30f3\u30b0\u306e\u9069\u7528<\/td><td>\u30ea\u30af\u30a8\u30b9\u30c8\u6570\u306e\u524a\u6e1b<\/td><\/tr><tr><td>\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0<\/td><td>\u30ad\u30fc\u5c5e\u6027\u306e\u9069\u5207\u306a\u8a2d\u5b9a<\/td><td>\u518d\u63cf\u753b\u306e\u6700\u9069\u5316<\/td><\/tr><\/tbody><\/table><\/figure>\n<\/div>\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=\"\">\/\/ \u6700\u9069\u5316\u3055\u308c\u305f\u30af\u30a8\u30ea\u30d3\u30eb\u30c0\u30fc\u306e\u4f8b\nclass OptimizedQuery extends Component\n{\n    public function getProducts()\n    {\n        return Product::query()\n            -&gt;with(['category', 'tags']) \/\/ Eager\u30ed\u30fc\u30c7\u30a3\u30f3\u30b0\n            -&gt;whereHas('stock')          \/\/ \u5728\u5eab\u304c\u3042\u308b\u5546\u54c1\u306e\u307f\n            -&gt;select(['id', 'name', 'price']) \/\/ \u5fc5\u8981\u306a\u30ab\u30e9\u30e0\u306e\u307f\u53d6\u5f97\n            -&gt;orderBy('created_at', 'desc')\n            -&gt;remember(60) \/\/ \u30ad\u30e3\u30c3\u30b7\u30e5\u306e\u9069\u7528\n            -&gt;paginate(20);\n    }\n}<\/pre>\n\n\n\n<p>\u3053\u308c\u3089\u306e\u6700\u9069\u5316\u30c6\u30af\u30cb\u30c3\u30af\u3092\u9069\u5207\u306b\u7d44\u307f\u5408\u308f\u305b\u308b\u3053\u3068\u3067\u3001Livewire\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u5fdc\u7b54\u6027\u3068\u4f7f\u7528\u611f\u3092\u5927\u5e45\u306b\u5411\u4e0a\u3055\u305b\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u306f\u3001\u3053\u308c\u3089\u306e\u6700\u9069\u5316\u30c6\u30af\u30cb\u30c3\u30af\u3092\u6d3b\u7528\u3057\u305f\u5b9f\u8df5\u7684\u306aUI\u5b9f\u88c5\u4f8b\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-16\">Livewire\u3067\u5b9f\u73fe\u3059\u308b\u5b9f\u8df5\u7684\u306aUI\u5b9f\u88c5\u4f8b<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-17\">\u7121\u9650\u30b9\u30af\u30ed\u30fc\u30eb\u306e\u5b9f\u88c5\u65b9\u6cd5<\/h3>\n\n\n\n<p>\u7121\u9650\u30b9\u30af\u30ed\u30fc\u30eb\u306f\u3001\u30e2\u30c0\u30f3\u306aWeb\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3067\u5e83\u304f\u4f7f\u308f\u308c\u3066\u3044\u308bUI\u30d1\u30bf\u30fc\u30f3\u3067\u3059\u3002Livewire\u3092\u4f7f\u7528\u3059\u308b\u3053\u3068\u3067\u3001\u52b9\u7387\u7684\u306b\u5b9f\u88c5\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u7121\u9650\u30b9\u30af\u30ed\u30fc\u30eb\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=\"\">namespace App\\Http\\Livewire;\n\nuse Livewire\\Component;\nuse App\\Models\\Article;\nuse Livewire\\WithPagination;\n\nclass InfiniteArticles extends Component\n{\n    use WithPagination;\n\n    public $perPage = 10;\n    public $loadMore = true;\n\n    protected $listeners = ['load-more' =&gt; 'loadMore'];\n\n    public function loadMore()\n    {\n        $this-&gt;perPage += 10;\n    }\n\n    public function render()\n    {\n        $articles = Article::with('author')\n            -&gt;latest()\n            -&gt;paginate($this-&gt;perPage);\n\n        $this-&gt;loadMore = $articles-&gt;hasMorePages();\n\n        return view('livewire.infinite-articles', [\n            'articles' =&gt; $articles\n        ]);\n    }\n}<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>Intersection\u30aa\u30d6\u30b6\u30fc\u30d0\u30fc\u3092\u4f7f\u7528\u3057\u305f\u30d3\u30e5\u30fc\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;div&gt;\n    &lt;div class=\"space-y-4\"&gt;\n        @foreach($articles as $article)\n            &lt;div wire:key=\"article-{{ $article-&gt;id }}\" \n                 class=\"p-4 border rounded shadow\"&gt;\n                &lt;h3 class=\"text-xl font-bold\"&gt;{{ $article-&gt;title }}&lt;\/h3&gt;\n                &lt;p class=\"text-gray-600\"&gt;{{ $article-&gt;excerpt }}&lt;\/p&gt;\n                &lt;div class=\"mt-2 text-sm text-gray-500\"&gt;\n                    \u8457\u8005: {{ $article-&gt;author-&gt;name }}\n                &lt;\/div&gt;\n            &lt;\/div&gt;\n        @endforeach\n    &lt;\/div&gt;\n\n    @if($loadMore)\n        &lt;div x-data=\"{}\" \n             x-intersect=\"$wire.loadMore()\"\n             class=\"h-10 flex items-center justify-center\"&gt;\n            &lt;div wire:loading&gt;\n                \u8aad\u307f\u8fbc\u307f\u4e2d...\n            &lt;\/div&gt;\n        &lt;\/div&gt;\n    @endif\n&lt;\/div&gt;<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-18\">\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u30c1\u30e3\u30c3\u30c8\u6a5f\u80fd\u306e\u4f5c\u308a\u65b9<\/h3>\n\n\n\n<p>\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u30c1\u30e3\u30c3\u30c8\u306f\u3001WebSockets\u3068Livewire\u3092\u7d44\u307f\u5408\u308f\u305b\u308b\u3053\u3068\u3067\u3001\u30b9\u30e0\u30fc\u30ba\u306a\u5b9f\u88c5\u304c\u53ef\u80fd\u3067\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30c1\u30e3\u30c3\u30c8\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=\"\">namespace App\\Http\\Livewire;\n\nuse Livewire\\Component;\nuse App\\Models\\Message;\nuse App\\Events\\MessageSent;\n\nclass ChatRoom extends Component\n{\n    public $message = '';\n    public $roomId;\n    public $messages = [];\n\n    protected $rules = [\n        'message' =&gt; 'required|min:1|max:500'\n    ];\n\n    public function mount($roomId)\n    {\n        $this-&gt;roomId = $roomId;\n        $this-&gt;loadMessages();\n    }\n\n    public function loadMessages()\n    {\n        $this-&gt;messages = Message::where('room_id', $this-&gt;roomId)\n            -&gt;with('user')\n            -&gt;latest()\n            -&gt;take(50)\n            -&gt;get()\n            -&gt;reverse();\n    }\n\n    public function sendMessage()\n    {\n        $this-&gt;validate();\n\n        $message = Message::create([\n            'room_id' =&gt; $this-&gt;roomId,\n            'user_id' =&gt; auth()-&gt;id(),\n            'content' =&gt; $this-&gt;message\n        ]);\n\n        $this-&gt;message = '';\n\n        \/\/ \u30d6\u30ed\u30fc\u30c9\u30ad\u30e3\u30b9\u30c8\u30a4\u30d9\u30f3\u30c8\u306e\u767a\u706b\n        broadcast(new MessageSent($message))-&gt;toOthers();\n\n        \/\/ \u81ea\u5206\u306e\u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u5373\u6642\u8868\u793a\n        $this-&gt;messages-&gt;push($message);\n    }\n\n    public function getListeners()\n    {\n        return [\n            \"echo:chat.{$this-&gt;roomId},MessageSent\" =&gt; 'messageReceived'\n        ];\n    }\n\n    public function messageReceived($event)\n    {\n        $this-&gt;messages-&gt;push(Message::find($event['message']['id']));\n    }\n\n    public function render()\n    {\n        return view('livewire.chat-room');\n    }\n}<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>\u30c1\u30e3\u30c3\u30c8\u30eb\u30fc\u30e0\u306e\u30d3\u30e5\u30fc\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;div class=\"h-screen flex flex-col\"&gt;\n    &lt;!-- \u30c1\u30e3\u30c3\u30c8\u30e1\u30c3\u30bb\u30fc\u30b8\u8868\u793a\u30a8\u30ea\u30a2 --&gt;\n    &lt;div class=\"flex-1 overflow-y-auto p-4 space-y-4\"&gt;\n        @foreach($messages as $message)\n            &lt;div wire:key=\"message-{{ $message-&gt;id }}\"\n                 class=\"flex {{ $message-&gt;user_id === auth()-&gt;id() ? 'justify-end' : 'justify-start' }}\"&gt;\n                &lt;div class=\"{{ $message-&gt;user_id === auth()-&gt;id() \n                    ? 'bg-blue-500 text-white' \n                    : 'bg-gray-200' }} \n                    rounded-lg px-4 py-2 max-w-md\"&gt;\n                    &lt;div class=\"text-sm font-bold\"&gt;\n                        {{ $message-&gt;user-&gt;name }}\n                    &lt;\/div&gt;\n                    &lt;p&gt;{{ $message-&gt;content }}&lt;\/p&gt;\n                    &lt;div class=\"text-xs text-right\"&gt;\n                        {{ $message-&gt;created_at-&gt;format('H:i') }}\n                    &lt;\/div&gt;\n                &lt;\/div&gt;\n            &lt;\/div&gt;\n        @endforeach\n    &lt;\/div&gt;\n\n    &lt;!-- \u30e1\u30c3\u30bb\u30fc\u30b8\u5165\u529b\u30d5\u30a9\u30fc\u30e0 --&gt;\n    &lt;div class=\"border-t p-4\"&gt;\n        &lt;form wire:submit.prevent=\"sendMessage\" class=\"flex gap-2\"&gt;\n            &lt;input type=\"text\" \n                   wire:model.defer=\"message\"\n                   class=\"flex-1 border rounded px-3 py-2\"\n                   placeholder=\"\u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u5165\u529b...\"&gt;\n            &lt;button type=\"submit\" \n                    class=\"bg-blue-500 text-white px-4 py-2 rounded\"\n                    wire:loading.attr=\"disabled\"&gt;\n                \u9001\u4fe1\n            &lt;\/button&gt;\n        &lt;\/form&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-19\">\u52d5\u7684\u30d5\u30a9\u30fc\u30e0\u306e\u5b9f\u88c5\u30c6\u30af\u30cb\u30c3\u30af<\/h3>\n\n\n\n<p>\u52d5\u7684\u306b\u30d5\u30a3\u30fc\u30eb\u30c9\u3092\u8ffd\u52a0\u30fb\u524a\u9664\u3067\u304d\u308b\u30d5\u30a9\u30fc\u30e0\u306f\u3001\u8907\u96d1\u306a\u30c7\u30fc\u30bf\u5165\u529b\u306b\u9069\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u52d5\u7684\u30d5\u30a9\u30fc\u30e0\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=\"\">namespace App\\Http\\Livewire;\n\nuse Livewire\\Component;\n\nclass DynamicForm extends Component\n{\n    public $items = [];\n\n    public function mount()\n    {\n        $this-&gt;addItem();\n    }\n\n    public function addItem()\n    {\n        $this-&gt;items[] = [\n            'name' =&gt; '',\n            'quantity' =&gt; 1,\n            'price' =&gt; 0\n        ];\n    }\n\n    public function removeItem($index)\n    {\n        unset($this-&gt;items[$index]);\n        $this-&gt;items = array_values($this-&gt;items);\n    }\n\n    public function calculateTotal()\n    {\n        return collect($this-&gt;items)-&gt;sum(function ($item) {\n            return $item['quantity'] * $item['price'];\n        });\n    }\n\n    public function saveOrder()\n    {\n        $this-&gt;validate([\n            'items.*.name' =&gt; 'required',\n            'items.*.quantity' =&gt; 'required|numeric|min:1',\n            'items.*.price' =&gt; 'required|numeric|min:0'\n        ]);\n\n        \/\/ \u6ce8\u6587\u30c7\u30fc\u30bf\u306e\u4fdd\u5b58\u51e6\u7406\n        Order::create([\n            'items' =&gt; $this-&gt;items,\n            'total' =&gt; $this-&gt;calculateTotal()\n        ]);\n\n        session()-&gt;flash('message', '\u6ce8\u6587\u304c\u4fdd\u5b58\u3055\u308c\u307e\u3057\u305f\uff01');\n        $this-&gt;reset('items');\n        $this-&gt;addItem();\n    }\n\n    public function render()\n    {\n        return view('livewire.dynamic-form', [\n            'total' =&gt; $this-&gt;calculateTotal()\n        ]);\n    }\n}<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>\u52d5\u7684\u30d5\u30a9\u30fc\u30e0\u306e\u30d3\u30e5\u30fc\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;div&gt;\n    &lt;form wire:submit.prevent=\"saveOrder\"&gt;\n        @if (session()-&gt;has('message'))\n            &lt;div class=\"alert alert-success\"&gt;\n                {{ session('message') }}\n            &lt;\/div&gt;\n        @endif\n\n        &lt;div class=\"space-y-4\"&gt;\n            @foreach($items as $index =&gt; $item)\n                &lt;div wire:key=\"item-{{ $index }}\" \n                     class=\"flex gap-4 items-start p-4 border rounded\"&gt;\n                    &lt;div class=\"flex-1\"&gt;\n                        &lt;label&gt;\u5546\u54c1\u540d&lt;\/label&gt;\n                        &lt;input type=\"text\" \n                               wire:model=\"items.{{ $index }}.name\"\n                               class=\"w-full border rounded px-3 py-2\"&gt;\n                        @error(\"items.{$index}.name\")\n                            &lt;span class=\"text-red-500\"&gt;{{ $message }}&lt;\/span&gt;\n                        @enderror\n                    &lt;\/div&gt;\n\n                    &lt;div class=\"w-32\"&gt;\n                        &lt;label&gt;\u6570\u91cf&lt;\/label&gt;\n                        &lt;input type=\"number\"\n                               wire:model=\"items.{{ $index }}.quantity\"\n                               class=\"w-full border rounded px-3 py-2\"&gt;\n                        @error(\"items.{$index}.quantity\")\n                            &lt;span class=\"text-red-500\"&gt;{{ $message }}&lt;\/span&gt;\n                        @enderror\n                    &lt;\/div&gt;\n\n                    &lt;div class=\"w-32\"&gt;\n                        &lt;label&gt;\u5358\u4fa1&lt;\/label&gt;\n                        &lt;input type=\"number\"\n                               wire:model=\"items.{{ $index }}.price\"\n                               class=\"w-full border rounded px-3 py-2\"&gt;\n                        @error(\"items.{$index}.price\")\n                            &lt;span class=\"text-red-500\"&gt;{{ $message }}&lt;\/span&gt;\n                        @enderror\n                    &lt;\/div&gt;\n\n                    &lt;button type=\"button\" \n                            wire:click=\"removeItem({{ $index }})\"\n                            class=\"text-red-500\"&gt;\n                        \u524a\u9664\n                    &lt;\/button&gt;\n                &lt;\/div&gt;\n            @endforeach\n        &lt;\/div&gt;\n\n        &lt;div class=\"mt-4 flex justify-between items-center\"&gt;\n            &lt;button type=\"button\"\n                    wire:click=\"addItem\"\n                    class=\"bg-green-500 text-white px-4 py-2 rounded\"&gt;\n                \u5546\u54c1\u3092\u8ffd\u52a0\n            &lt;\/button&gt;\n\n            &lt;div class=\"text-xl font-bold\"&gt;\n                \u5408\u8a08: \u00a5{{ number_format($total) }}\n            &lt;\/div&gt;\n        &lt;\/div&gt;\n\n        &lt;div class=\"mt-4\"&gt;\n            &lt;button type=\"submit\"\n                    class=\"w-full bg-blue-500 text-white py-2 rounded\"&gt;\n                \u6ce8\u6587\u3092\u78ba\u5b9a\n            &lt;\/button&gt;\n        &lt;\/div&gt;\n    &lt;\/form&gt;\n&lt;\/div&gt;<\/pre>\n\n\n\n<p>\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\u3057\u3066\u3044\u307e\u3059\u3002\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u306f\u3001\u3053\u308c\u3089\u306e\u6a5f\u80fd\u3092\u5b9f\u88c5\u3059\u308b\u969b\u306b\u767a\u751f\u3059\u308b\u53ef\u80fd\u6027\u306e\u3042\u308b\u30c8\u30e9\u30d6\u30eb\u3068\u305d\u306e\u89e3\u6c7a\u65b9\u6cd5\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-20\">Livewire\u958b\u767a\u306b\u304a\u3051\u308b\u30c8\u30e9\u30d6\u30eb\u30b7\u30e5\u30fc\u30c6\u30a3\u30f3\u30b0<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-21\">\u3088\u304f\u3042\u308b\u30a8\u30e9\u30fc\u3068\u89e3\u6c7a\u65b9\u6cd5<\/h3>\n\n\n\n<p>Livewire\u958b\u767a\u3067\u983b\u7e41\u306b\u906d\u9047\u3059\u308b\u30a8\u30e9\u30fc\u3068\u305d\u306e\u89e3\u6c7a\u65b9\u6cd5\u3092\u89e3\u8aac\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30d7\u30ed\u30d1\u30c6\u30a3\u66f4\u65b0\u306b\u95a2\u3059\u308b\u554f\u984c<\/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=\"\">\/\/ \u30a8\u30e9\u30fc\u4f8b\uff1a\u30d7\u30ed\u30d1\u30c6\u30a3\u304c\u66f4\u65b0\u3055\u308c\u306a\u3044\nclass SearchComponent extends Component\n{\n    public $results = [];\n    private $searchTerm; \/\/ private\u30d7\u30ed\u30d1\u30c6\u30a3\u306f\u66f4\u65b0\u3055\u308c\u306a\u3044\uff01\n\n    public function search()\n    {\n        $this-&gt;results = User::where('name', 'like', \"%{$this-&gt;searchTerm}%\")-&gt;get();\n    }\n}\n\n\/\/ \u6b63\u3057\u3044\u5b9f\u88c5\nclass SearchComponent extends Component\n{\n    public $results = [];\n    public $searchTerm; \/\/ public\u30d7\u30ed\u30d1\u30c6\u30a3\u306b\u5909\u66f4\n\n    public function search()\n    {\n        $this-&gt;results = User::where('name', 'like', \"%{$this-&gt;searchTerm}%\")-&gt;get();\n    }\n}<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>\u30e2\u30c7\u30eb\u30d0\u30a4\u30f3\u30c7\u30a3\u30f3\u30b0\u306e\u554f\u984c\u89e3\u6c7a<\/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=\"\">\/\/ \u3088\u304f\u3042\u308b\u554f\u984c\u30d1\u30bf\u30fc\u30f3\nclass UserForm extends Component\n{\n    public User $user;\n\n    \/\/ \u3053\u308c\u306f\u52d5\u4f5c\u3057\u306a\u3044\n    public function mount()\n    {\n        $this-&gt;user = User::find(1);\n    }\n}\n\n\/\/ \u6b63\u3057\u3044\u5b9f\u88c5\u65b9\u6cd5\nclass UserForm extends Component\n{\n    public $user;\n\n    public function mount(User $user)\n    {\n        $this-&gt;user = $user;\n    }\n\n    \/\/ \u307e\u305f\u306f\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u500b\u5225\u306b\u5b9a\u7fa9\n    public $userName;\n    public $userEmail;\n\n    public function mount(User $user)\n    {\n        $this-&gt;userName = $user-&gt;name;\n        $this-&gt;userEmail = $user-&gt;email;\n    }\n}<\/pre>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><strong>\u914d\u5217\u30c7\u30fc\u30bf\u306e\u53d6\u308a\u6271\u3044\u30a8\u30e9\u30fc<\/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\u306e\u3042\u308b\u30b3\u30fc\u30c9\nclass TodoList extends Component\n{\n    public $todos = [];\n\n    public function addTodo($todo)\n    {\n        $this-&gt;todos[] = $todo; \/\/ \u3053\u308c\u306f\u52d5\u4f5c\u3059\u308b\u304c...\n        $this-&gt;todos[count($this-&gt;todos)] = $todo; \/\/ \u3053\u308c\u306f\u52d5\u4f5c\u3057\u306a\u3044\n    }\n}\n\n\/\/ \u63a8\u5968\u3055\u308c\u308b\u5b9f\u88c5\nclass TodoList extends Component\n{\n    public $todos = [];\n\n    public function addTodo($todo)\n    {\n        $this-&gt;todos = array_merge($this-&gt;todos, [$todo]);\n        \/\/ \u307e\u305f\u306f\n        $todos = $this-&gt;todos;\n        $todos[] = $todo;\n        $this-&gt;todos = $todos;\n    }\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-22\">\u30c7\u30d0\u30c3\u30b0\u30c4\u30fc\u30eb\u306e\u52b9\u679c\u7684\u306a\u4f7f\u3044\u65b9<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Livewire\u30c7\u30d0\u30c3\u30b0\u30e2\u30fc\u30c9\u306e\u6d3b\u7528<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ config\/livewire.php\nreturn [\n    'asset_url' =&gt; null,\n    'app_url' =&gt; null,\n    'middleware_group' =&gt; 'web',\n    'temporary_file_upload' =&gt; [\n        'disk' =&gt; null,\n        'rules' =&gt; null,\n        'directory' =&gt; null,\n        'middleware' =&gt; null,\n        'preview_mimes' =&gt; [\n            'png', 'gif', 'bmp', 'svg', 'wav', 'mp4',\n            'mov', 'avi', 'wmv', 'mp3', 'm4a',\n            'jpg', 'jpeg', 'mpga', 'webp', 'wma',\n        ],\n        'max_upload_time' =&gt; 5,\n    ],\n    'manifest_path' =&gt; null,\n    'back_button_cache' =&gt; false,\n    'render_on_redirect' =&gt; false,\n\n    \/\/ \u30c7\u30d0\u30c3\u30b0\u30e2\u30fc\u30c9\u306e\u8a2d\u5b9a\n    'debug' =&gt; true,\n];<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>\u52b9\u679c\u7684\u306a\u30c7\u30d0\u30c3\u30b0\u624b\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=\"\">class ComplexComponent extends Component\n{\n    public function debugState()\n    {\n        logger()-&gt;debug('Current Component State:', [\n            'properties' =&gt; get_object_vars($this),\n            'session' =&gt; session()-&gt;all(),\n            'auth' =&gt; auth()-&gt;check() ? auth()-&gt;user()-&gt;toArray() : null,\n        ]);\n    }\n\n    public function updatedSearchTerm($value)\n    {\n        \/\/ \u30d7\u30ed\u30d1\u30c6\u30a3\u66f4\u65b0\u6642\u306e\u30c7\u30d0\u30c3\u30b0\n        logger()-&gt;debug('Search Term Updated:', [\n            'old' =&gt; $this-&gt;searchTerm,\n            'new' =&gt; $value,\n            'timestamp' =&gt; now(),\n        ]);\n    }\n\n    public function render()\n    {\n        \/\/ \u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u30c7\u30d0\u30c3\u30b0\n        $startTime = microtime(true);\n\n        $result = view('livewire.complex-component', [\n            'data' =&gt; $this-&gt;getData()\n        ]);\n\n        logger()-&gt;debug('Render Performance:', [\n            'execution_time' =&gt; microtime(true) - $startTime,\n            'memory_usage' =&gt; memory_get_usage(true)\n        ]);\n\n        return $result;\n    }\n}<\/pre>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><strong>\u30d6\u30e9\u30a6\u30b6\u958b\u767a\u8005\u30c4\u30fc\u30eb\u306e\u6d3b\u7528<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ \u30d6\u30e9\u30a6\u30b6\u30b3\u30f3\u30bd\u30fc\u30eb\u3067\u306e\u30c7\u30d0\u30c3\u30b0\n\/\/ Livewire\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u72b6\u614b\u3092\u78ba\u8a8d\n$wire\n\n\/\/ \u30a4\u30d9\u30f3\u30c8\u30ea\u30b9\u30ca\u30fc\u306e\u78ba\u8a8d\nLivewire.listeners\n\n\/\/ \u7279\u5b9a\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3078\u306e\u76f4\u63a5\u30a2\u30af\u30bb\u30b9\nLivewire.find('component-id')<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-23\">\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u5bfe\u7b56\u306e\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u5165\u529b\u30c7\u30fc\u30bf\u306e\u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\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=\"\">class UserRegistration extends Component\n{\n    public $email;\n    public $password;\n\n    protected function rules()\n    {\n        return [\n            'email' =&gt; [\n                'required',\n                'email',\n                'unique:users,email',\n                \/\/ \u30e1\u30fc\u30eb\u30d7\u30ed\u30d0\u30a4\u30c0\u306e\u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\n                function ($attribute, $value, $fail) {\n                    $domain = explode('@', $value)[1] ?? '';\n                    if (in_array($domain, ['example.com', 'test.com'])) {\n                        $fail('\u3053\u306e\u30e1\u30fc\u30eb\u30c9\u30e1\u30a4\u30f3\u306f\u4f7f\u7528\u3067\u304d\u307e\u305b\u3093\u3002');\n                    }\n                },\n            ],\n            'password' =&gt; [\n                'required',\n                'min:8',\n                'regex:\/^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d).+$\/',\n            ]\n        ];\n    }\n\n    public function updated($propertyName)\n    {\n        $this-&gt;validateOnly($propertyName);\n    }\n}<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>XSS\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=\"\">class MessageComponent extends Component\n{\n    public $message;\n\n    \/\/ HTML\u30d1\u30fc\u30b8\u30f3\u30b0\u306e\u5b9f\u88c5\n    public function sanitizeMessage()\n    {\n        $config = HTMLPurifier_Config::createDefault();\n        $config-&gt;set('HTML.Allowed', 'p,b,i,u,a[href],ul,ol,li');\n        $purifier = new HTMLPurifier($config);\n\n        return $purifier-&gt;purify($this-&gt;message);\n    }\n\n    public function render()\n    {\n        return view('livewire.message', [\n            'safeMessage' =&gt; $this-&gt;sanitizeMessage()\n        ]);\n    }\n}<\/pre>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><strong>CSRF\u4fdd\u8b77\u3068\u30bb\u30c3\u30b7\u30e7\u30f3\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3<\/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=\"\">\/\/ \u30df\u30c9\u30eb\u30a6\u30a7\u30a2\u306e\u8a2d\u5b9a\nclass SecureComponent extends Component\n{\n    public function mount()\n    {\n        \/\/ \u30bb\u30c3\u30b7\u30e7\u30f3\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u306e\u78ba\u8a8d\n        if (!session()-&gt;has('user_verified')) {\n            return redirect()-&gt;route('verification');\n        }\n    }\n\n    protected function getListeners()\n    {\n        \/\/ CSRF\u30c8\u30fc\u30af\u30f3\u306e\u518d\u751f\u6210\u304c\u5fc5\u8981\u306a\u64cd\u4f5c\u5f8c\u306b\u30ea\u30b9\u30ca\u30fc\u3092\u8a2d\u5b9a\n        return [\n            'sensitiveOperation' =&gt; 'handleSensitiveOperation',\n            'refreshCsrfToken' =&gt; '$refresh'\n        ];\n    }\n\n    public function handleSensitiveOperation()\n    {\n        \/\/ \u30bb\u30f3\u30b7\u30c6\u30a3\u30d6\u306a\u64cd\u4f5c\u306e\u5b9f\u884c\n        \/\/ ...\n\n        \/\/ CSRF\u30c8\u30fc\u30af\u30f3\u306e\u518d\u751f\u6210\n        session()-&gt;regenerateToken();\n        $this-&gt;dispatch('refreshCsrfToken');\n    }\n}<\/pre>\n\n\n\n<ol start=\"4\" class=\"wp-block-list\">\n<li><strong>\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u30c1\u30a7\u30c3\u30af\u30ea\u30b9\u30c8<\/strong><\/li>\n<\/ol>\n\n\n<div id=\"id-3c6fb787-6707-4bad-8186-6ae958205747\">\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u5bfe\u7b56<\/th><th>\u5b9f\u88c5\u65b9\u6cd5<\/th><th>\u91cd\u8981\u5ea6<\/th><\/tr><\/thead><tbody><tr><td>\u5165\u529b\u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3<\/td><td>Laravel\u306e\u30d0\u30ea\u30c7\u30fc\u30bf\u3092\u4f7f\u7528<\/td><td>\u9ad8<\/td><\/tr><tr><td>XSS\u5bfe\u7b56<\/td><td>HTMLPurifier\u306e\u4f7f\u7528<\/td><td>\u9ad8<\/td><\/tr><tr><td>CSRF\u4fdd\u8b77<\/td><td>@csrf\u30c7\u30a3\u30ec\u30af\u30c6\u30a3\u30d6\u306e\u4f7f\u7528<\/td><td>\u9ad8<\/td><\/tr><tr><td>\u30bb\u30c3\u30b7\u30e7\u30f3\u7ba1\u7406<\/td><td>\u30bb\u30c3\u30b7\u30e7\u30f3\u306e\u5b9a\u671f\u7684\u306a\u518d\u751f\u6210<\/td><td>\u4e2d<\/td><\/tr><tr><td>\u30d5\u30a1\u30a4\u30eb\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9<\/td><td>mime type\u306e\u691c\u8a3c<\/td><td>\u9ad8<\/td><\/tr><tr><td>SQL\u30a4\u30f3\u30b8\u30a7\u30af\u30b7\u30e7\u30f3<\/td><td>\u30af\u30a8\u30ea\u30d3\u30eb\u30c0\u306e\u4f7f\u7528<\/td><td>\u9ad8<\/td><\/tr><\/tbody><\/table><\/figure>\n<\/div>\n\n\n<p>\u3053\u308c\u3089\u306e\u30c8\u30e9\u30d6\u30eb\u30b7\u30e5\u30fc\u30c6\u30a3\u30f3\u30b0\u624b\u6cd5\u3068\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u5bfe\u7b56\u3092\u9069\u5207\u306b\u5b9f\u88c5\u3059\u308b\u3053\u3068\u3067\u3001\u3088\u308a\u5b89\u5168\u3067\u5805\u7262\u306aLivewire\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u958b\u767a\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u958b\u767a\u6642\u306f\u5e38\u306b\u3053\u308c\u3089\u306e\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9\u3092\u610f\u8b58\u3057\u3001\u5b9a\u671f\u7684\u306a\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u30ec\u30d3\u30e5\u30fc\u3092\u884c\u3046\u3053\u3068\u3092\u304a\u52e7\u3081\u3057\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-2638","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\/2638","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=2638"}],"version-history":[{"count":2,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=\/wp\/v2\/posts\/2638\/revisions"}],"predecessor-version":[{"id":2640,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=\/wp\/v2\/posts\/2638\/revisions\/2640"}],"wp:attachment":[{"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2638"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2638"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2638"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}