Railsアプリ作成

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

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

 

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

 

 

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

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

 

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

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

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

 

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

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

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

 

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

 

 

〇前回までの進捗

 

前回は、Model、Controller、Router、Viewを結び付けて、Userのindex.html.erbページを作りました!

 

 

このModel→Controller→Router→Viewの流れで今後多くのページを作っていくので、記事を進めつつ反復していってもらえればと思います!

 

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

 

今回は、indexに引き続きUserのshowページを作っていきます。

何度も繰り返しになりますが、showは「特定のユーザページ」を表すページとなります。

Modelはすでに作ってあるため、Controller、Router、Viewの順にみていきましょう。

 

・Controller

indexの場合と同様に、users_controller.rbを開きましょう。

showの部分に注目しています(現在はカラです)。

showは、以下のように追記します。

追記した部分について説明します。

「@user = 」で、変数@userに代入を行います。

何を代入するかということで右に出てくるのが、User.find。「find」は検索です。()内の内容と合致するユーザを検索します。

「params[:id]」は、簡単に言うとユーザの操作によって送られてきたidのことです。

例えばアプリのユーザがUserのindexページで見たいユーザを選んだ(クリックした)とき、

そのユーザのidがparams[:id]に代入されるという仕組みです。

 

ということでまとめると、

「ユーザの操作によって送られてきたidと合致するユーザをUserモデルから探して、@userに代入する」ということでになります。

 

・Router

Routerについては、前回の記事でroutes.rbに以下の記述(resoucesの部分)をすることで

7つのメソッドのルーティングが完了しています。

 

・View

 

さて、Viewを作っていきますが、実は今回の記事ではViewはほとんど作りません(笑)。

どういうことか説明します。

 

 

以前僕が作ったオリジナルアプリのUserのshowを見ると、以下のようになっています。

 

 

これを見るとわかるのですが、現時点でできているのは、

UserのModel(name、email、password)のみです。

一方で上のshowページ例を見ると、

アイコン機能、フォロー機能、投稿機能についての表示となっています。

このあたりは現時点では実装していないので、そのへんをそぎ落とすと、

現時点で表示できるのはユーザ名のみとなってしまうのです(笑)。

 

もちろん、後々各機能を実装していくので、それに伴ってshowページも改良していくのご心配なく。

 

アプリ作成は、

最初に最低限のページの骨組みを作って、そこから機能を追加しつつ改良を重ねていく

とういう流れで作っていくものなんです!

 

それでは、ユーザ名のみ表示されるshowページをサクッと作ってしまいましょう!

 

まず、デフォルトで書いてある以下のコードは全消しします。

 

 

以下のコードを記述しましょう。

 

 

何やら知らないコードが出てきたかと思います。

「row」?

「offset-sm-4」?

「col-sm-4」?

これまでは基本英語にすればわかりましたが、今回ばかりは呪文ですね(笑)。

 

これは、Bootstrapの「グリッドシステム」という機能です。

僕的には以下の記事が非常にわかりやすかったです!

 

このグリッドシステムを使うことにより、

ページを分割してレイアウトすることができます。

 

例えばこのご覧いただいているページも、仮にRailsで書くとしたらグリッドシステムを使て書くことになります。

左に記事の内容、右には他の記事や著者の情報などが書かれており、ページが左右に分割されていますよね。

これが、グリッドシステムの機能のイメージです。

(本記事はRailsで書かれていないので正確には違いますが、イメージの話です!(笑))

 

 

「offset-sm-4 col-sm-4 offset-sm-4」とすることで、

「左右に4カラム余白を設け、真ん中4カラムに以下を配置する」という設定にしています。(ページは全12カラムとなります)

 

ちなみに、「そもそもclassって何よ?」となっている方は、

「html css class」などでググっていただけるとわかりやすい情報が多くあります。

 

さて、あとは以下の文ですね。

classで「text-center」としていますが、これはhtmlで設定できるclassで、インライン要素を中央ぞろえにするものです。

 

 

<p></p>で囲われた場所を見ると、<%= %>がありますね。

Rubyの挿入文です。

 

@user.nameということで、「@userに代入されているUserのname項目」を指します。

 

@userはどこで定義されているかというと、users_controller.rbのshow部分です。

Controllerのshowでは、

「ユーザの操作によって送られてきたidと合致するユーザをUserモデルから探して、@userに代入する」

を定義しました。

 

つまり、かみ砕いてまとめると、

・ユーザが選択したユーザのModelから引っ張って@userに代入(Controller)

・そのユーザのnameをページに表示する(View)

ということになります。

 

 

〇作成したページの確認

以上のようにコードを書いたら、showページの確認を行います。

 

以前の記事で、2名のユーザを作成しました。

 

今回はそのうち1番目に作ったユーザ(test1)のshowを表示してみましょう。

やり方を以下に載せておきます。

記事のやり方に沿って行うと、showに関するroutesとして以下の記載が見つかるかと思います。

URLは 「/users/:id」の部分です。

idは、ユーザの作られた順に1から番号が自動的にふられます。

つまり、1番目に作ったユーザはid=1となります。

 

なので、URLは「○○.amazonaws.com/users/1」を打ち込みましょう。

 

このようなページが出てくればオッケーです!(枠はわかりやすくするためにつけています)

 

 

なんか殺風景ですが、大丈夫です!(笑)

 

これで、Userのshow.html.erbができました!

 

〇次回 ~ユーザ登録ページの作成~

 

前回と今回で、Userに関する2つのページができました!

次回は、実際にユーザを新規登録し、ログインするためのページを作っていきます!

 

それができたら、

トップページ→新規登録→ログインといった流れに移行できるようリンクを作成して各ページをつなげていきます!

 

今回も、ご覧いただきありがとうございました!