ruby on rails paramsまとめ〜前半〜

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

<!-- wp:heading -->
<h2>paramsとは</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>paramsとは、<span class="marker">どの画面を表示するか指定したり、データを保存するために、</span><br><span class="marker">クライアントから送られるデー</span><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がどう使っているか」という例で、説明します。<br>まず、みなさんがこのブログを見るために使っているPCやスマホなどがクライアントです。<br>クライアントで、この記事を表示するためにこのブログの記事一覧からクリックいただいたと思います。<br>クリックすると、paramsで「paramsについての記事が見たい！」というデータをサーバーに送り、<br>サーバーがこの記事の文字や画像を返しているんですね。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>paramsで送っているデータがどんなものかをもう少し詳しく補足します。<br>例えば、このブログの全ての記事には、被らない番号がそれぞれ振られているとします。<br>この記事が10番だとしたらクライアントからは、「10番」ってデータをparamsに入れて、<br>サーバーに送っているということですね。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>ここまででなんとなく、paramsの役割、どんなものかがご理解いただけましたかね？<br>わからないという方は、ページ下部のコメントでお問い合わせください。<br><br>この記事では、どの画面を表示するかを選択するためのparamsについて、深ぼって解説していきます。<br>別記事、paramsまとめ〜後半〜で、データを保存するためのparamsについて解説します。</p>
<!-- /wp:paragraph -->

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

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

<!-- wp:media-text {"mediaId":183,"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/06/df9cb4ad047522d9dcf4cee88f2e8637.mov"></video></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"コンテンツ…"} -->
<p>トップページでは、記事一覧の表示、記事の作成ができるようにしています。</p>
<p>また、トップページの記事をクリックすると、記事の詳細を確認できるようにしています。<br></p>

<!-- wp:heading -->
<h2>画面表示選択のparamsについて</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>この章では画面表示判断をするためにparamsをどのように利用しているかを説明していきます。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>トップページから記事をクリックすると、記事の詳細が表示されていましたよね。</p>
<!-- /wp:paragraph -->

<!-- wp:media-text {"mediaId":185,"mediaType":"image"} -->
<div class="wp-block-media-text alignwide is-stacked-on-mobile"><figure class="wp-block-media-text__media"><img src="https://pay-raikit.online/wp-content/uploads/2021/06/4ae75bf44c9072a28a8697bf2af70951.png" alt="" class="wp-image-185 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"コンテンツ…"} -->
<p></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:media-text -->

<!-- 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">記事の一覧画面から記事のリンクをクリックすることで、送っている</span>んですね。<br>コードを見ないと分からないので、早速お見せしようと思います。</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":187,"className":"is-style-default"} -->
<figure class="wp-block-image is-style-default"><img src="https://pay-raikit.online/wp-content/uploads/2021/06/27da5168698158eb77e6a641ca474caf-1024x197.png" alt="" class="wp-image-187"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>いろいろ書いてありますが、今回は赤枠の行に注目してください。<br>赤枠の行で、クリックしたらどんなページを表示するかを制御しています。<br>赤枠内で、サーバーに送るリクエスト内容を指定しており、<span class="marker">「sample.id」が肝です。</span><br><span class="marker">「sample.id」が記事に割り振られた被らない数字をparamsとして送っています。</span><br>辿っていくと「sample」は「@samples」から、「@samples」はコントローラーから送られているものですね。<br>なので、コントローラーの記述もお見せします。</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":189,"width":413,"height":94,"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/e551419b5300fa509fcab16578bb14e2.png" alt="" class="wp-image-189" width="413" height="94"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>コントローラーで、「@samples」はテーブルに保存されている全てのSampleを取得しています。<br>「Sample」は記事データを管理するテーブルととしているので、@sampleは全ての記事を取得しているわけですね。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>ここまでまとめます。<br>記事をクリックした時、どの記事を見たいかをサーバーに伝えるため、<br>「sample.id」という記事に割り振られたかぶらない数字をparamsとしてサーバーに送っているということです。</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":175,"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/06/db4c790bc34b5629af617500eaa67ed6-1024x166.png" alt="" class="wp-image-175"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>記事1をクリックしたときの例です。<br><span class="marker">Paramaters: {"id=&gt;"1"}となっており、paramsに「1」が入っていることが確認できます。</span><br>画面表示選択のためのparamsでは、Parameters、idは決まり事なので、<br>詳しい説明は省きますが、イメージ図を載せておきます。</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":177,"width":196,"height":229,"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/f853cc4471ccb01a7b3b6fc818960a2b.png" alt="" class="wp-image-177" width="196" height="229"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>「params（Parameter）」って箱のなかに、「id」という箱が入っている。<br>「id」って箱の中には、「1」が入っている。というイメージを持っていただければ大丈夫です。<br><br>このようにparamsで記事に割り振られたかぶらない数字をparamsで送り、コントローラーで受け取ることで、記事が複数ある中からどの記事を選択したかを判別しているですね。</p>
<!-- /wp:paragraph -->