Railsアプリ作成

【Rails】初心者がWebアプリを作ってみた!【第6回:User機能 controller、router、view編①】

こんにちは!まろんぼーいです。

 

今回は、「初心者がWebアプリを作ってみた」シリーズの第6回です。

 

 

このシリーズでは、過去に完全初心者の僕が作ったWebアプリを参考に、

初心者なりに試行錯誤しながらその改良版を一から作っていく過程をお見せしています。

 

このシリーズのモットーは、「同様の初心者が、アプリ作成の流れをつかみながら同様のアプリを作れるようになること」です。

ということで、基本的にアプリを作成していく過程を順を追って解説していますが、

「正確な内容」よりも、「わかりやすいなんとなくのイメージ」を重視して記事を書いています。

 

経験者の方からすると、「正確にはちがう!」と突っ込みたくなるような内容もあるかと思いますが、

難しい知識よりも、なんとなくでいいので流れをつかむ!

そんな内容となっていますので、同じ初心者の方の参考になればうれしいです!

 

それでは今回もはじめていきましょう!

 

 

 

〇前回までの進捗

 

前回は、トップページが作り終わったので、User機能の実装に入りました。

 

UserのModelのマイグレーションファイルを作成し、マイグレーションを行ってModelを適用させました。

 

またname、email、password_digestそれぞれにルールを設けたところで終わっています。

 

 

〇Controller、Router、Viewの作成【index】

 

 

MCRVのMができたので、C、R、Vの作成に移っていきますが、

ちょっと長くなってしまうので、分割して、今回はindexの設定をしていきます。

 

・Controller

 

Controllerの作成です。

下記をターミナルで実行しましょう。

 

 

これにより、7つのメソッド(index、show、new、create、update、destroy)を持ったコントローラファイル(users_controller.rb)を作成します。(付随してそれぞれのViewも作成されます。)

 

ではusers_controller.rbを開きます。

 

 

ToppageではControllerの編集はしませんでしたが、UserではControllerを少々いじります。

今回はとりあえずindexを作っていきます!

 

以前の記事でもindex、show、new、create、update、destroyそれぞれの考え方について書きました。

Userに関して、indexは「ユーザ一覧ページ」を表していましたね。

 

それを踏まえ、作っていきましょう。

 

はい、まずは例によって、僕が作ったものをコピーしてしまいましょう(笑)。

 

初心者のころなんて、とにかく楽に作っていけばいいと思うんです(笑)。

 

流れがわかってきたら自分なりに学習を進めていけばいいんです。

僕の記事では、まず僕のコードを公開して、その説明をしていくというやり方なので、超楽だと思います。

 

話を戻します。Controllerのコードでしたね。

説明していきます。

 

なにやら難しそうなコードが出てきましたが、1から説明していきます。

(ProgateでRubyをやっていればすんなりわかる内容だと思います。)

 

これは@usersにUser.order~を代入している分です。

@usersは、複数のユーザ情報を入れる変数です(正確にはインスタンス変数)。

 

で、代入するものをどうやって定義しているかが=の右に書いてあるのですが、

 

「User」はモデル内の任意のユーザ。「.」は良く出てきますが、「~の」くらいの意味だと思っておけばいいと思います。

 

「~.order(id: :desc)」は、「~をidの降順で並び変える」という意味です。

idはユーザが新規登録されると自動的にふられていきます。よって、

「~をidの降順で並び変える」=「新しく登録された順に並び替える」となります。

 

「page(params[:page]).per(20)」は、「20個区切りでページネーションする」です。

 

ページネーションは、サイト内に複数のページを作ることができる便利機能です。

よくサイトで下の方に読み進めていくと、「次のページ」や「1…4…10」のようにページ移動ができるものがありますが、あれはページネーションを使っています。

 

さて、便利機能と聞いてピンときた方はいるかもしれませんが、

そうです、便利機能といえばgemが必要です。

ページネーションはkaminariというgemを使っているので、

Gemfileで以下のコードを最終行に追記します。

 

bundle installも忘れずに。

 

上で説明したものをまとまると、

 

「Userを新しい順に変数@userに代入する。表示は20ユーザずつページネーションする」

ということになります。

 

・Router

 

次に、Routerを設定します。

ファイルはconfigフォルダのroutes.rbです。

 

controllerを作成すると、routes.rbは下のようになっているかと思います。

これを、こうします。

resoucesを使うことによって、7つのメソッドすべてのルーティングができます。

 

これで 、UserのControllerの7つのメソッドにパスが通りました。つまり、アクセスできるようになりました。

 

・View

 

それでは、Viewを作っていきましょう!

 

indexはユーザ一覧ページでした。

なので、イメージとしてはそのページにすべてのユーザがずらっと並んで表示されている感じです。

 

ちなみに、僕が以前作ったサイトでは、こんな感じにしています。

 

 

まずは一番簡単なものとして、ユーザの名前のみ一覧で表示するようにコードを書いていきます。

 

index.html.erbを以下のようにします(デフォルトで書いてあるものはすべてdeleteしましょう)。

 

 

上の3行はHTMLの基礎なので、自分で調べてみましょう。

 

さて、1番下に書いてあるこちらのコード

 

「render ’○○’」は、「_○○.html.erb」というパーシャルファイルを適用する」という意味です。

 

 

 

ということで、ここではユーザ一覧を示す「_users.html.erb」を作ります。

 

ちなみにですが、ファイルの名前は決まっていないので、自分の好きな名前で設定して大丈夫です。

 

ただ、わかりにくいファイル名をつけると後で混乱するので注意。

 

ちなみに僕はネットの記事で多く使われている名前をパクっています(笑)。

その方がネットで調べた時に比べやすいので。

 

_users.html.erbは「views→users」のフォルダ内に作ります(AWSならusersフォルダ上で右クリックでnew fileです)。

 

 

_users.html.erbは以下のように作りました。

 

 

こちらは、bootstrapのtable機能を使用しています。

<thead>、<tbody>、<tr>、<th>、<td>はすべてtable機能(表を作る機能)の仕様なので、bootstrapのtable機能を調べた際にご確認ください。

 

さて、上のtable機能の文は余計な文を含んでいます。

例えば、<thead>と</thead>で囲っている部分には何も記述していないので、今は未使用です(後々使うので消さない)。

 

現在使っていない部分を無視すると、以下のようになります。

 

コードの横に簡単な説明をコメントアウトで書いています。

 

この_users.thml.erbのパーシャルファイルは、「users」という変数にUserのModelで作られた複数(または単数)のユーザ情報が格納されている場合を考えています。

(上のコードの「if user」の場合です。)

 

難しいと思いますが、あとで「あーそういうことか!」となると思うので大丈夫です。

 

上の処理を簡単にまとまめると、

「usersに格納されているそれぞれのユーザについて、ユーザ名(user.name)を順番に表示していく表」

です。

 

これにより、_users.thml.erbを適用させたViewファイル(ページ)上で、

「usersという変数に格納されているユーザのユーザ名を順番に表示する表」が作成されます。

 

 

ここで疑問なのが、「usersの変数ってどこからきてんの?」ですよね。

 

ここで、index.html.erbに戻ります。

 

 

この一番下の文は、「_users.html.erbという名前のパーシャルファイルを適用(render)する」という文でした(先頭の「_」と「.html.erb」は省略して「’users’」と書きます。)。

 

この隣の「users: @users」に注目。

これは、「変数usersにはインスタンス変数@usersを使います」という文です。

 

さて、@usersはどこで定義しているか。

ここで、Userのコントローラファイル(users_controller.rb)の、index部分を見ます。

 

 

@userは、

「Userを新しい順に変数@userに代入する。表示は20ユーザずつページネーションする」

としていました!

 

これがViewで使われるんです。

ついにControllerとViewがつながりました!

 

「あーそういうことか!」(わざとらしい)

 

 

これで、indexのViewファイルの記述が完了しました。

 

indexがどのように表示されるか見てみましょう!

 

まだUserのModelの中が空なので、Rails coonsoleでUserを作成します。

 

Userは何でもいいですが、今回の記事では以下の2人のユーザをModelに登録しました。

 

1人目

name:test1

email:test1@gmail.com

password:test11111

 

2人目

name:test2

email:test2@gmail.com

password:test22222

 

Rails consoleについてわからない場合は以下の記事をご参考ください。

 

さて、userを登録したら、

実際にindex.html.erbを見てみます。

 

 

上記の記事を参考にrootのURLに「/users」を打ち込むと、indexページが確認できます!

 

 

こんな感じでindexのページが表示されればオッケーです!

 

〇次回 ~Userのshowページの作成~

 

というわけで、今回はUserの1Controller、Router、Viewファイルを作成し、

indexファイルを表示させることができました!

 

ほんのちょっとでもModel、Controller、Router、Viewがどのように関わっているのか実感できたのではないでしょうか。

 

次の記事では、同様にShowのページを作成したいと思います!

indexとshowができたら、実際にユーザを新規登録、ログインするためのページを作っていきます。

新規登録、ログインページができたら、最低限のユーザに関わるページは完成となります!

あと一息!

 

今回もありがとうございました!