ビューを作成しよう

次にビューを追加します。アプリケーションのapp/viewsディレクトリには、1つのコントローラーごとに1つのディレクトリが作成され、そこにビューテンプレートファイルが置かれます。このビューテンプレートはそのコントローラーに関連づけられています。

今回はtopコントローラーなのでtopディレクトリにアクションごとに出力された結果をビューで表示させます。

ビューテンプレートファイルの作成

app/views/top/ディレクトリ内にindex.html.erbを追加します。以下のコマンドをプロジェクトのルートディレクトリで実行してください。

console
 
Copied!
touch app/views/top/index.html.erb

app/views/top/ディレクトリ内にindex.html.erbが作成されていれば成功です。

Copied!
app
└── views
    └── top
        └── index.html.erb

ビューファイルにコードを追加

ファイルを作成したら、index.html.erbに以下のコードを追加してください。

app/views/top/index.html.erb
1
 
Copied!
<p>このページはトップページです。</p>

では、実際にトップページを表示できるか確認します。もう一度今回のパートで追加したルーティングのパスを確認してみましょう。

パスがtop/indexとなっているので「http://localhost:3000/ 」にtop/indexを付け足して、http://localhost:3000/top/index にアクセスしてみましょう。下記の画像のように表示されていればうまく動作しています。

(サーバーを立ち上げていない場合はターミナル上で「rails s」を実行してサーバーを立ち上げてください)

以上で今回のパートは終了です。

今回はデータベースとのやり取りはおこなわなかったため、モデルは作成しませんでした。ただユーザーからのリクエストから画面表示までの流れはなんとなく理解できたのではないでしょうか。

お疲れ様でした。