ruby on rails paramsまとめ〜後半〜

<!-- wp:paragraph -->
<p><br>この投稿では、ruby on railsのparamsのあれこれについてまとめます。<br>少しでも参考になったら幸いです。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>paramsのまとめ前半を読まれていない方は、先に前半をご確認ください。</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>paramsの概念振り返り</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>早速、データ保存のparamsについて解説する前に、paramsの概念だけ再掲します。<br>復習の必要がない方は読み飛ばしてくださいね。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>paramsとは、<span class="marker">どの画面を表示するか指定したり、データを保存するために、</span><br><span class="marker">クライアントから送られるデータ郡</span>です。<br>ruby on railsは、MVCモデルでデータを送受信するので、paramsがどこからどこに渡されているかを<br>MVCの図で表してみます。</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":172,"width":512,"height":326,"sizeSlug":"large","linkDestination":"none","className":"is-style-default"} -->
<figure class="wp-block-image size-large is-resized is-style-default"><img src="https://pay-raikit.online/wp-content/uploads/2021/06/5437b4f154381963662debf7c50da513-1024x652.png" alt="" class="wp-image-172" width="512" height="326"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>次の章以降では、データを保存するためのparamsについて解説します。</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>params理解のための自作ミニアプリについて</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>解説を進める前に、解説に利用する自作ミニアプリの機能を事前に紹介します。<br>今回のサンプルアプリは、記事一覧表示、記事詳細表示、記事作成機能（タイトル・内容を入力）を簡易的に作成しています。</p>
<!-- /wp:paragraph -->

<!-- wp:media-text {"mediaId":324,"mediaLink":"https://pay-raikit.online/?attachment_id=324","mediaType":"video"} -->
<div class="wp-block-media-text alignwide is-stacked-on-mobile"><figure class="wp-block-media-text__media"><video controls src="https://pay-raikit.online/wp-content/uploads/2021/07/d43ca9fe0d42aedc5c05012d6cd8235c.mov"></video></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"コンテンツ…"} -->
<p>トップページからは、記事の新規作成ページに遷移できるようにしています。<br>新規作成ページでは、投稿を保存し、トップページに表示できるようにしています。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"placeholder":"コンテンツ…"} -->
<p>また、トップページの記事をクリックすると、記事の詳細を確認できるようにしています。</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:media-text -->

<!-- wp:heading -->
<h2>データ保存のためのparamsについて</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>この章ではデータ保存のためにparamsをどのように利用しているかを説明していきます。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>トップページから遷移した先の新規作成ページでは、記事の新規投稿ができましたよね。</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":325,"width":512,"height":279,"sizeSlug":"large","linkDestination":"none","className":"is-style-default"} -->
<figure class="wp-block-image size-large is-resized is-style-default"><img src="https://pay-raikit.online/wp-content/uploads/2021/07/06c8951255cd086a8b4fe75fde813e73-1024x558.png" alt="" class="wp-image-325" width="512" height="279"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p><br>この動作では、記事の保存にparamsを利用しているので、詳しく解説していきます。<br>また、最初にお見せしたMVCの図に立ち返っていくと、paramsは送る側と受け取る側がいますよね。<br>そのため、分けて順に解説してきます。</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4>paramsを送る</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>paramsは、<span class="marker">新規投稿画面（new）からCreate Sampleをクリックすることでparamsを送っています。</span><br>コードを見ないと分からないので、早速お見せしようと思います。</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":326,"width":407,"height":159,"sizeSlug":"large","linkDestination":"none","className":"is-style-default"} -->
<figure class="wp-block-image size-large is-resized is-style-default"><img src="https://pay-raikit.online/wp-content/uploads/2021/07/6ff4238f3d712ec077ec10996c25f6b1.png" alt="" class="wp-image-326" width="407" height="159"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>いろいろ書いてありますが、今回はform.text_fieldと書いてある行を参照してください。<br><span class="marker">:titileと:contentが特に大切になります。</span><br>ここで、どのような名前でデータを送るかを決めています。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>イメージしにくい方向けに、タイトルに「テスト」、本文に「てすとてすと」と入力した例を<br>図で表現してみます。</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":328,"width":512,"height":335,"sizeSlug":"large","linkDestination":"none","className":"is-style-default"} -->
<figure class="wp-block-image size-large is-resized is-style-default"><img src="https://pay-raikit.online/wp-content/uploads/2021/07/4c7f532849f403da0121318ff9c15142-1024x669.png" alt="" class="wp-image-328" width="512" height="335"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>paramsという黄色の箱の中に、sampleという緑色の箱が、さらにtitle、contentという青色の箱が中に入っています。<br>図からは、３重の箱に入ってparamsが送られているとイメージしてもらえれば大丈夫です。<br><br>ここで初登場のsampleに関しても軽く触れておくと、form_withの「model:」となっている右横の変数が影響するものくらいで思ってもらえれば大丈夫です。<br></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>ここまでまとめます。<br>「Create Sample」をクリックしたとき、「タイトル」、「本文」の横の入力欄に入力された値がparamsは、3重の箱になっておくられます。</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4>paramsを受け取る</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>コントローラーでどうやって受け取っているかを早速確認してみましょう。<br><span class="marker">rails sコマンドを実行したターミナルにparamsのログが表示されています。</span></p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":329,"sizeSlug":"large","linkDestination":"none","className":"is-style-default"} -->
<figure class="wp-block-image size-large is-style-default"><img src="https://pay-raikit.online/wp-content/uploads/2021/07/d35a460fbb9531779644cafd24edc28c-1024x78.png" alt="" class="wp-image-329"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>「paramsを送る」で紹介したのと同様の例のparamsです。<br><span class="marker">Paramaters: {"sample=&gt;{"title"=&gt;"テスト", "content"=&gt;"てすとてすと"}}となっており、paramsにsampleという箱が、さらにその中に「テスト」、「てすとてすと」が入っていることが確認できます。</span><br><br>paramsの送り方・受け取り方という面では、ここまでの説明で十分ですが、<br>paramsを使ってどうやって保存しているかも補足させていただきます。</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4>受け取ったparamsを使う</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>こちらもコントローラーからどうやって保存の指示をmodel、DBに送っているかを<br>コードで早速確認してみます。</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":330,"width":768,"height":86,"sizeSlug":"large","linkDestination":"none","className":"is-style-default"} -->
<figure class="wp-block-image size-large is-resized is-style-default"><img src="https://pay-raikit.online/wp-content/uploads/2021/07/e36b005a6ffb598a6fff686a31c5c160-1024x115.png" alt="" class="wp-image-330" width="768" height="86"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>上の画像内のSample.createという部分に、paramsという文字が見当たりますね。<br>ざっくりお伝えすると、params[:sample][:tilte]で「テスト」という文字列にアクセスして、DBに送ることで保存しています。<br>paramsの右側の「titile:」って何？って方に向けてもう少しだけ補足します。<br>「titile:」はDBのテーブルの絡む構成に関係してくるので、テーブルがどうなっているかもお見せします。</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":331,"sizeSlug":"large","linkDestination":"none","className":"is-style-default"} -->
<figure class="wp-block-image size-large is-style-default"><img src="https://pay-raikit.online/wp-content/uploads/2021/07/93886b1e43eb31e4b8d593bd884c5dda-1024x150.png" alt="" class="wp-image-331"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>idが3となっているデータが今回の例で保存したデータです。<br>図のように「title」が「テスト」、「content」が「てすとてすと」となっていますね。<br>このように保存して欲しいことをモデル、DBに伝えるためにSample.createではtitle: params[:sample][:title]と記述していたんです。<br>（「title」、「content」以外はデフォルトで用意されるカラムなので、今回は気にしなくて良いです。）</p>
<!-- /wp:paragraph -->