Railsアプリ作成

【Rails】初心者がWebアプリを作ってみた!【第3回:ToppageのModel、Controller、Router】

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

 

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

 

 

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

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

 

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

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

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

 

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

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

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

 

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

 

 

 

 

〇前回の進捗

 

前回は、自分のWebアプリの基盤を作り、

Railsで必須のMVCとルーティングについて書きました。

 

 

前回は、自分のWebアプリの基盤を作り、

Railsで必須のMVCとルーティングについて書きました。

 

なんとなくでもMVCとルーティングのイメージはつけたでしょうか。

まあ正直なところ、実際にアプリを作っていかないとわからないかと思います。

 

ただ、それでも事前知識は重要です!

僕はここをスクールで丁寧に学ぶことができましたが、この話題はスクールでなくてもググればいくらでも学べると思うので、じゃんじゃん学んじゃいましょう!

 

さて今回は、MVCとルーティングを実際にいじっていきたいと思います!

 

〇Railsアプリ作成≒MVCRの作成

 

Webアプリを作っていく際は、基本的に先ほども書いた

「Model」「View」「Controller」「Router」を作成していくのが主な流れです。

 

「とはいっても、その4つをどんな順番で作っていけばいいの?」

と僕は感じながらやっていました。

 

〇MVCRの順番は?

 

正直この点に関しては、「自分に合った順番でやればいい」が答えだと思います。

 

ただ最初に始める参考としては、一般的に以下の2つの順番が王道の順番かと思います。

 

①Model→Router→Controller→View

②Model→Controller→Router→View

 

Modelは実際のデータなので、まずこれを決めないことには始まりません。

またViewは、アプリに表示する情報が決まった後にそのレイアウトを決める部分なので、最後でいいと思います。

 

ControllerとRouterの順番については、いろいろな記事で解説しているので参考にしていただければと思いますが、正直やって自分で決めればいいと思います!(笑)

 

僕は個人的に②の順番がやりやすかったので、②の順番で作っていきます!

 

 

よしゃ、頑張ろう。

 

 

〇トップページの作成

 

まず作るのは、トップページです。

トップページは「そのサイトにアクセスした際に最初に飛ぶページ」です、Webアプリの顔ですね。

 

言い忘れてましたが、アプリを作る際は最初に設計をするのが普通です。

「ここにこれを配置する」といった表示するデータとそのレイアウトはざっくりと作っておいて、それにあったMCRVを作っていく、といったイメージですね。

 

 

表示するデータとレイアウトはいつでも変えられるので、とりあえずは、以下のように作ってみます!

 

 

 

 

さて、さっそくMCRVの順番に作成していきます。

 

Model

 

まずModel。

最初のトップページはWebアプリの説明、キャッチコピーのようなレイアウトにしようと思うので、「ユーザ」や「投稿」を使いません。

よって、Modelはなしです

 

Controller

 

次に、Controller。

Controllerは必要です。

さて、Controllerを作っているのですが、まずはControllerのファイルを作る必要があります。

 

下記をターミナルに入力し、toppageのControllerを作ります。

 

あっ、上記の操作の前にenvironmentではなく自分のアプリのフォルダに移動しておきましょうね。

 

 

 

「railsでindexのメソッドを含んだtoppageという名前のControllerを作る」

generateは英語で「作る」です。

 

さて、ここで「indexのメソッド」という新しい言葉が出てきました。

 

Controllerで定義するメソッドは、7種類あります。

 

index、new、create、edit、show、update、destroyの7つです。

 

コチラの意味も、ググって調べちゃいましょう!

 

僕は、主に以下の記事を参考にさせていただきました!

 

 

 

僕の場合は、userのControllerを作る場合(今後実装していきます)で覚えました。

以下のようなイメージです。

 

index ユーザ一覧を示すページで使うメソッド
new ユーザ登録ページで使うメソッド
create ユーザ登録ボタンを押したときのメソッド
edit ユーザ情報編集ページで使うメソッド
show 特定のユーザ情報ページで使うメソッド
update ユーザ情報編集完了ボタンを押したときのメソッド
destroy ユーザ削除ボタンを押したときのメソッド

 

この7つのメソッドですが、すべてのControllerで7つ全部使うわけではありません。

 

それではtoppageのControllerに戻ります。

 

Controllerでは上記した通り、indexのみControllerを作りました。

 

toppageはそもそもmodelを扱いません。

なので、何かを新しく作ったり、編集したり削除したりしません(笑)。

 

この時点で、indexとshow以外は必要ないですね。

で、indexとshowもどちらかあればいいので、indexだけにしています。

 

さて、Controllerを作成すると、以下のフォルダにtoppage_controllerが作られます。

開いてみると、こんなコードになっています。

 

ちなみに、railsは非常に効率的で、上のようにControllerで定義したメソッド用のViewのファイルも自動で作成してくれます。

 

 

Controllerではいろいろな変数を定義したりしますが、

トップページは特にデータ(Model)を扱わないので、特に定義は必要ないです。

 

よって、Controller終了

 

Router

 

続いてRouter。

Routerはroutes.rbで一括管理します。

configのフォルダにあります。

 

開くとこんな感じになっています。

 

これを、こうしちゃいます。

 

初期状態の「get ‘toppage/index’」は、

『「アプリのデフォルトURL」+「toppage/index」のURLにアクセス(get)したとき、

「toppage/index」のControllerの操作に飛ばす」』みたいなイメージです。

 

これを下で「root to: ‘toppage/index’」としています。

「root to:」は、アプリのデフォルトのURL、つまり、

このアプリに外からアクセスした際に最初に入るページを使うことを示しています。

 

外からこのアプリにアクセスしたとき、

「toppage/index」のControllerの操作に飛ばす」』となります。

 

トップページだったのでそうしました。

 

これにてRouterも終了。

 

次はViewから説明します

 

Model、Controller、Routerと終わったので、

あとはViewを作ってトップページは完成なのですが、

 

このViewが最初ちょっと初期設定が必要で、

この説明を書くと結構長くなってしまいそうなので、

ここでいったん区切りたいと思います。

 

次回はトップページを完成させて、ユーザ登録に入っていきます!

 

 

ここまでご覧いただきありがとうございました!

また次回もご覧いただけると嬉しいです!

 

ではでは。