Ruby on Rails プログラミング

トップページを変更する

現状ではhttp://localhost:3000/postsにアクセスした時にrailsのデフォルトページが表示されるようにしましたが、
今回はhttp://localhost:3000にアクセスした際に、指定したページが表示される様に設定していきます。

大まかな流れとしては、

・ルーティングの設定
・コントローラー、アクションの記述
・ビューの設定(この画面がトップに表示される)

では、始めましょう!

ルーティングの設定

ルーティングは下記の様に記述します。

root to: 'コントローラー名#アクション名'

config/routes.rbのファイルに以下の様に記載しましょう。
postsコントローラーのindexアクションにルーティングを設定しました。





コントローラーの設置

ターミナルにて、現在作成中のアプリのディレクトリにいる事を確認。

以下のコマンドを入力して、エンターキー。
postsという名前のコントローラーを作成します。

*postsと複数形にしましょう!

$ rails g controller posts
*コマンドは$マークは省いて入力してください。

*コントローラーを削除したいときは、下記コマンドを実行
$ rails d controller コントローラー名

d=destroyの略で、コントローラーを作成した際に自動的に作られた
関連ファイルも同時に削除されます。

VSコードで見てみると、下記の様にposts controllerが表示されていますね!

 

アクションを記述

次に上記で作成した、controllerにアクションを記述します。

 

 

モデルを作成しよう

モデルを作成して、テーブルを作成しましょう。

ターミナルで下記コマンドを実行して、モデルを作成しましょう。
$ rails g model post



VSコードで見てみると、下記の通りPostモデルが出来ていますね!





同時に下記の様にdbというフォルダー内のmigrateにマイグレーションファイルも自動で生成されます。
ファイル内には、自動的に右側にあるような記述が作られます。





テーブルを作成しよう

次に対応するテーブルを作成していきます。
テーブルを作成するためには、まずはマイグレーションファイルを修正していきましょう。

今回はポートフォリオサイトを作成する事が目的で
どういった内容の投稿にしたいか考えます。

今回は、下記の4つの情報を投稿するサイトにしたいと
思います。これらをテーブルに追加します。

・イメージ画像=image
・タイトル=title
・説明文=content

ターミナルで下記コマンドを実行してテーブルに反映させましょう。

$rails db:migrate

 

 

Sequel Proでテーブルを確認しましょう

Sequel Proを開き、作成したportfolioがあるのが確認でき、
postsテーブルに上記で作成したimage, title, contentカラムができていますね!

もしSequel Proに作成したテーブルがない場合は、下部にある読み込みボタンを押しましょう。

 

テーブルに仮データを入力

下記の赤四角の箇所に適当なデータを入力しましょう!
僕のポートフォリオではcreated_at, updated_atは使わないので初期値のままにしておきます。
imageの箇所には表示させたい画像のURLを入れましょう。

 

 

コントローラーでテーブルのデータを取得

ここからがRailsの醍醐味です。
先ほどテーブルに登録したデータを取得する記述をします。

controllerにposts_controller.rbがありますね。
この中のdef indexとendの中に@posts = Post.allと記述してください。

この意味を理解するのに、苦労しました!

まず、Post.allの箇所ですが、Postはテーブルの事。
.allとする事で、Postテーブルから全てのデータを取得する事がでします。
PostのPは大文字にしないとダメですよ 😎

@postsは変数名。Post.allで取得したデータを@postsに代入する事で
@postsにPostテーブルのデータがすべて格納されます。
@をつける事で、次に実装するビューのファイルで@postsと記入すると全ての情報が利用できるようになります。
@postsを複数形にしている理由はPostテーブルの全てのデータを取得しているからです。

@以下の名前は実際にはどんな名前でも動くんですが、誰が見てもわかる様に意味を持たせましょう。

 

ビューファイルを作成

Viewsという箇所にpostsという項目があると思いますが、
postsの上で右クリックして、New File(ファイル作成)を押して、index.html.erbというファイルを作成します。

index.html.erbのファイルに記載した内容がlocalhost:3000に表示される内容となります。

仮にtestと入力してみると、下記の様にlocalhost:3000にtestと入力された文字が表示されます。

localhost:3000でtestと表示されます!

テーブルから情報を取得し、ビューに表示

先ほど、testとビューに表示できましたが
今回はテーブルに入力した情報を表示させてみましょう。

下記の様に記述する事で、テーブルに入っている情報を全て表示する事ができます。

@postsはコントローラーで記述した記述で、ここにテーブルの情報全てが入っています。
.each doとすることで、一つ一つの情報を取り出し、取り出したいカラムの情報を.image .title .contentとドットをつけることで
各カラム情報を取得する事ができます。

 

実際にlocalhost:3000でビューを見てみると、必要な情報が表示されています。
ビューは崩れていますが、CSSを記述していないからですね。

CSSでそれぞれの配置、大きさ等の見た目を整えましょう。

まとめ

この一連の流れが、いわゆるMVCの流れの基本となります。
この基本を押さえる事で、どのようにデータをテーブルから取得して、ビューに表示させるかという
仕組みを理解することができます。

 

-Ruby on Rails, プログラミング

© 2021 yuyalife Powered by STINGER