<h1 id="%E6%A6%82%E8%A6%81" data-line="0" class="code-line">
<a class="header-anchor-link" href="#%E6%A6%82%E8%A6%81" aria-hidden="true"></a> 概要</h1>
<p data-line="2" class="code-line"><strong>hotwire</strong>の理解を深めるための練習用アプリです。<br>
<code>rails new</code>した段階から<code>gem</code>等何も追加せずに簡単に進められる、をコンセプトに解説していきます。</p>
<p data-line="5" class="code-line">ページ下部に、参考文献を載せてあるので、そちらで一通り勉強してから<br>
こちらのアプリを作成すると理解が深まると思います。</p>
<p data-line="8" class="code-line">私の場合、手を動かなさないと、全く頭に入ってこず、、<br>
とにかく簡単なアプリで何回も練習することでようやく入り口に立てました！</p>
<p data-line="11" class="code-line">以下の勉強法がおすすめ</p>
<p data-line="13" class="code-line">(1). こちらをさらっと勉強（結構ボリューミーなので概要だけ学ぶ）<br>
<a href="https://zenn.dev/shita1112/books/cat-hotwire-turbo" target="_blank">猫でもわかるHotwire入門 Turbo編</a></p>
<p data-line="16" class="code-line">(2). こちらの動画をさらっと写経(英語ですが13分くらいなので簡単にできます)<br>
<a href="https://www.youtube.com/watch?v=1c_tHifJVRI" target="_blank" rel="nofollow noopener noreferrer">Turbo Frame Modals (Popups) | Ruby On Rails 7 Tutorial</a></p>
<p data-line="19" class="code-line">(3). <strong>この記事のモックを理解出来るまで写経する</strong></p>
<p data-line="21" class="code-line">(4). (1)をがっつりやるもよし、何か本格的に作ってみるも良し</p>
<h1 id="%E4%BB%95%E6%A7%98" data-line="23" class="code-line">
<a class="header-anchor-link" href="#%E4%BB%95%E6%A7%98" aria-hidden="true"></a> 仕様</h1>
<ul data-line="25" class="code-line">
<li data-line="25" class="code-line">scaffoldのCRUDをSPAにする</li>
<li data-line="26" class="code-line">hotwireを使う</li>
<li data-line="27" class="code-line">詳細ページへの遷移は無くす</li>
<li data-line="28" class="code-line">一覧ページとモーダルのみのアプリ</li>
</ul>
<h1 id="%E5%AE%8C%E6%88%90%E7%94%BB%E9%9D%A2" data-line="30" class="code-line">
<a class="header-anchor-link" href="#%E5%AE%8C%E6%88%90%E7%94%BB%E9%9D%A2" aria-hidden="true"></a> 完成画面</h1>
<p data-line="32" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/0c5c353fb627-20240823.gif" loading="lazy" class="md-img"></p>
<h1 id="%E5%AE%8C%E6%88%90%E5%93%81(pr)" data-line="34" class="code-line">
<a class="header-anchor-link" href="#%E5%AE%8C%E6%88%90%E5%93%81(pr)" aria-hidden="true"></a> 完成品(PR)</h1>
<p data-line="36" class="code-line">こちらのPRのコードに実装コメントを詳しく載せていますので、見ながら理解を深めていただけると！<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__b50f2468bff93" src="https://embed.zenn.studio/card#zenn-embedded__b50f2468bff93" data-content="https%3A%2F%2Fgithub.com%2Funderground0930%2Fhotwire-modal-sample%2Fpull%2F1%2Ffiles" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/underground0930/hotwire-modal-sample/pull/1/files" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/underground0930/hotwire-modal-sample/pull/1/files</a></p>
<h1 id="%E8%A7%A3%E8%AA%AC" data-line="40" class="code-line">
<a class="header-anchor-link" href="#%E8%A7%A3%E8%AA%AC" aria-hidden="true"></a> 解説</h1>
<h3 id="1)-rails-new" data-line="42" class="code-line">
<a class="header-anchor-link" href="#1)-rails-new" aria-hidden="true"></a> 1) rails new</h3>
<p data-line="43" class="code-line">とりあえず、新規アプリケーションを作成</p>
<div class="code-block-container"><pre class="language-rb"><code class="language-rb code-line" data-line="45">rails <span class="token keyword">new</span> <span class="token punctuation">.</span> <span class="token operator">-</span><span class="token operator">-</span>skip<span class="token operator">-</span>jbuilder <span class="token operator">-</span><span class="token operator">-</span>skip<span class="token operator">-</span>action<span class="token operator">-</span>mailbox <span class="token operator">-</span><span class="token operator">-</span>skip<span class="token operator">-</span>action<span class="token operator">-</span>mailer <span class="token operator">-</span><span class="token operator">-</span>skip<span class="token operator">-</span>test <span class="token operator">-</span><span class="token operator">-</span>skip<span class="token operator">-</span>active<span class="token operator">-</span>storage <span class="token operator">-</span><span class="token operator">-</span>skip<span class="token operator">-</span>action<span class="token operator">-</span>text
</code></pre></div><h3 id="2)-scaffold%E3%81%AE%E4%BD%9C%E6%88%90" data-line="49" class="code-line">
<a class="header-anchor-link" href="#2)-scaffold%E3%81%AE%E4%BD%9C%E6%88%90" aria-hidden="true"></a> 2) scaffoldの作成</h3>
<p data-line="50" class="code-line">タイトルと本文をもつPostモデルの作成</p>
<div class="code-block-container"><pre class="language-rb"><code class="language-rb code-line" data-line="52">rails g scaffold post title
rails db<span class="token symbol">:migrate</span>
</code></pre></div><h3 id="3)-stimulus%E3%81%A7%E3%83%A2%E3%83%BC%E3%83%80%E3%83%AB%E7%94%A8%E3%81%AE%E3%82%B3%E3%83%B3%E3%83%88%E3%83%AD%E3%83%BC%E3%83%A9%E3%82%92%E4%BD%9C%E6%88%90" data-line="57" class="code-line">
<a class="header-anchor-link" href="#3)-stimulus%E3%81%A7%E3%83%A2%E3%83%BC%E3%83%80%E3%83%AB%E7%94%A8%E3%81%AE%E3%82%B3%E3%83%B3%E3%83%88%E3%83%AD%E3%83%BC%E3%83%A9%E3%82%92%E4%BD%9C%E6%88%90" aria-hidden="true"></a> 3) stimulusでモーダル用のコントローラを作成</h3>
<p data-line="58" class="code-line">モーダル用のjsのControllerを作成</p>
<div class="code-block-container"><pre class="language-rb"><code class="language-rb code-line" data-line="60">rails g stimulus modals
</code></pre></div><h3 id="4)-%E9%96%8B%E7%99%BA%E3%82%B9%E3%82%BF%E3%83%BC%E3%83%88" data-line="64" class="code-line">
<a class="header-anchor-link" href="#4)-%E9%96%8B%E7%99%BA%E3%82%B9%E3%82%BF%E3%83%BC%E3%83%88" aria-hidden="true"></a> 4) 開発スタート</h3>
<p data-line="66" class="code-line">localhost:3000 で開発スタート</p>
<div class="code-block-container"><pre class="language-rb"><code class="language-rb code-line" data-line="68">rails s
</code></pre></div><h3 id="5)-%E3%81%93%E3%81%A1%E3%82%89%E3%81%8C%E5%AE%8C%E6%88%90%E5%93%81" data-line="72" class="code-line">
<a class="header-anchor-link" href="#5)-%E3%81%93%E3%81%A1%E3%82%89%E3%81%8C%E5%AE%8C%E6%88%90%E5%93%81" aria-hidden="true"></a> 5) こちらが完成品</h3>
<p data-line="74" class="code-line">こちらのコードを写経して勉強してみてください。</p>
<p data-line="76" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__e82b7d23eed04" src="https://embed.zenn.studio/card#zenn-embedded__e82b7d23eed04" data-content="https%3A%2F%2Fgithub.com%2Funderground0930%2Fhotwire-modal-sample%2Ftree%2Fdevelop" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/underground0930/hotwire-modal-sample/tree/develop" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/underground0930/hotwire-modal-sample/tree/develop</a></p>
<p data-line="78" class="code-line">このPRにコード解説が詳しく書いてあります。<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__4f61f4248b078" src="https://embed.zenn.studio/card#zenn-embedded__4f61f4248b078" data-content="https%3A%2F%2Fgithub.com%2Funderground0930%2Fhotwire-modal-sample%2Fpull%2F1%2Ffiles" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/underground0930/hotwire-modal-sample/pull/1/files" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/underground0930/hotwire-modal-sample/pull/1/files</a></p>
<h3 id="6)-main%E3%83%96%E3%83%A9%E3%83%B3%E3%83%81%E3%82%92clone%E3%81%97%E3%81%A6%E5%A7%8B%E3%82%81%E3%82%8B%E5%A0%B4%E5%90%88" data-line="81" class="code-line">
<a class="header-anchor-link" href="#6)-main%E3%83%96%E3%83%A9%E3%83%B3%E3%83%81%E3%82%92clone%E3%81%97%E3%81%A6%E5%A7%8B%E3%82%81%E3%82%8B%E5%A0%B4%E5%90%88" aria-hidden="true"></a> 6) mainブランチをcloneして始める場合</h3>
<p data-line="83" class="code-line">mainブランチは、 <strong>4)</strong> までやってあるので、以下で開発を開始。</p>
<div class="code-block-container"><pre class="language-rb"><code class="language-rb code-line" data-line="85">bin<span class="token operator">/</span>setup
rails s
</code></pre></div><p data-line="89" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__762963a2c7722" src="https://embed.zenn.studio/card#zenn-embedded__762963a2c7722" data-content="https%3A%2F%2Fgithub.com%2Funderground0930%2Fhotwire-modal-sample%2Ftree%2Fmain" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/underground0930/hotwire-modal-sample/tree/main" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/underground0930/hotwire-modal-sample/tree/main</a></p>
<h1 id="%E5%8F%82%E8%80%83%E8%A8%98%E4%BA%8B%E3%83%BB%E5%8B%95%E7%94%BB" data-line="92" class="code-line">
<a class="header-anchor-link" href="#%E5%8F%82%E8%80%83%E8%A8%98%E4%BA%8B%E3%83%BB%E5%8B%95%E7%94%BB" aria-hidden="true"></a> 参考記事・動画</h1>
<h2 id="%E5%8F%82%E8%80%83%E3%81%AB%E3%81%95%E3%81%9B%E3%81%A6%E3%81%84%E3%81%9F%E3%81%A0%E3%81%84%E3%81%9F%E8%A8%98%E4%BA%8B" data-line="94" class="code-line">
<a class="header-anchor-link" href="#%E5%8F%82%E8%80%83%E3%81%AB%E3%81%95%E3%81%9B%E3%81%A6%E3%81%84%E3%81%9F%E3%81%A0%E3%81%84%E3%81%9F%E8%A8%98%E4%BA%8B" aria-hidden="true"></a> 参考にさせていただいた記事</h2>
<p data-line="95" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__06ad127fcb328" src="https://embed.zenn.studio/card#zenn-embedded__06ad127fcb328" data-content="https%3A%2F%2Fzenn.dev%2Fshita1112%2Fbooks%2Fcat-hotwire-turbo" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://zenn.dev/shita1112/books/cat-hotwire-turbo" style="display:none" target="_blank">https://zenn.dev/shita1112/books/cat-hotwire-turbo</a><br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__61efec22d74b7" src="https://embed.zenn.studio/card#zenn-embedded__61efec22d74b7" data-content="https%3A%2F%2Fzenn.dev%2Fredheadchloe%2Farticles%2F88dc917eb848cd" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://zenn.dev/redheadchloe/articles/88dc917eb848cd" style="display:none" target="_blank">https://zenn.dev/redheadchloe/articles/88dc917eb848cd</a></p>
<h2 id="%E5%8F%82%E8%80%83%E3%81%AB%E3%81%95%E3%81%9B%E3%81%A6%E3%81%84%E3%81%9F%E3%81%A0%E3%81%84%E3%81%9F%E5%8B%95%E7%94%BB" data-line="98" class="code-line">
<a class="header-anchor-link" href="#%E5%8F%82%E8%80%83%E3%81%AB%E3%81%95%E3%81%9B%E3%81%A6%E3%81%84%E3%81%9F%E3%81%A0%E3%81%84%E3%81%9F%E5%8B%95%E7%94%BB" aria-hidden="true"></a> 参考にさせていただいた動画</h2>
<p data-line="99" class="code-line"><span class="embed-block embed-youtube"><iframe src="https://www.youtube-nocookie.com/embed/1c_tHifJVRI" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen loading="lazy"></iframe></span><a href="https://www.youtube.com/watch?v=1c_tHifJVRI" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.youtube.com/watch?v=1c_tHifJVRI</a><br style="display:none">
<span class="embed-block embed-youtube"><iframe src="https://www.youtube-nocookie.com/embed/Pu4-xMTb_TQ" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen loading="lazy"></iframe></span><a href="https://www.youtube.com/watch?v=Pu4-xMTb_TQ" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.youtube.com/watch?v=Pu4-xMTb_TQ</a><br style="display:none">
<span class="embed-block embed-youtube"><iframe src="https://www.youtube-nocookie.com/embed/HXoH93yMwPM" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen loading="lazy"></iframe></span><a href="https://www.youtube.com/watch?v=HXoH93yMwPM" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.youtube.com/watch?v=HXoH93yMwPM</a><br style="display:none">
<span class="embed-block embed-youtube"><iframe src="https://www.youtube-nocookie.com/embed/i_x6poZ_NoU" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen loading="lazy"></iframe></span><a href="https://www.youtube.com/watch?v=i_x6poZ_NoU" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.youtube.com/watch?v=i_x6poZ_NoU</a></p>
<h2 id="%E5%8F%82%E8%80%83%E3%81%AB%E3%81%95%E3%81%9B%E3%81%A6%E3%81%84%E3%81%9F%E3%81%A0%E3%81%84%E3%81%9F%E3%82%B3%E3%83%BC%E3%83%89" data-line="104" class="code-line">
<a class="header-anchor-link" href="#%E5%8F%82%E8%80%83%E3%81%AB%E3%81%95%E3%81%9B%E3%81%A6%E3%81%84%E3%81%9F%E3%81%A0%E3%81%84%E3%81%9F%E3%82%B3%E3%83%BC%E3%83%89" aria-hidden="true"></a> 参考にさせていただいたコード</h2>
<p data-line="105" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__a94f359c1bf0f" src="https://embed.zenn.studio/card#zenn-embedded__a94f359c1bf0f" data-content="https%3A%2F%2Fgithub.com%2FDeanout%2Fturbo_frame_modals" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/Deanout/turbo_frame_modals" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/Deanout/turbo_frame_modals</a><br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__0914778369948" src="https://embed.zenn.studio/card#zenn-embedded__0914778369948" data-content="https%3A%2F%2Fgithub.com%2Fyamataka22%2Fkaigionrails2023-admin-modal" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/yamataka22/kaigionrails2023-admin-modal" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/yamataka22/kaigionrails2023-admin-modal</a><br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__c827e2d0f9e1c" src="https://embed.zenn.studio/card#zenn-embedded__c827e2d0f9e1c" data-content="https%3A%2F%2Fgithub.com%2FJunichiIto%2Fosrb03-hotwire-sandbox" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/JunichiIto/osrb03-hotwire-sandbox" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/JunichiIto/osrb03-hotwire-sandbox</a></p>


Rails + hotwireで簡単なモーダルCRUDアプリを作る

3) stimulusでモーダル用のコントローラを作成

6) mainブランチをcloneして始める場合

参考にさせていただいたコード

Discussion