2h30m Progate Ruby on Rails 5 Ⅰ(後編)はコチラから
SNSでメインとなってくる「投稿一覧ページ」を作成していきます。
HTMLのみで構成されていたページとは異なり、ここではデータベースを扱うことになります。
投稿一覧ページを作成しよう
![](https://goohayami.com/wp-content/uploads/2022/02/ra2_2.png)
新しく【データベース】が追加され、最初にそこを確認します。
![](https://goohayami.com/wp-content/uploads/2022/02/ra2_3.png)
よくワカリマセンが、これを作っていくのでしょうか。
postsコントローラの作成
![](https://goohayami.com/wp-content/uploads/2022/02/ra2_4-1024x530.png)
rails generate controller
ターミナルでコマンドを実行します。
pythonで言うところのinportなのかな?それともpipなのかな?
実行するとだだだだーっとコマンドが流れます((;゚ロ゚)
![](https://goohayami.com/wp-content/uploads/2022/02/ra2_5.png)
続いてエディタのファイルを次々と開けていって
言われるがまま指定のHTMLを貼り付けていく。
正直もう、何がなんだか分からない・・・。
取り敢えず言われた通りにやってみるしかない。
![](https://goohayami.com/wp-content/uploads/2022/02/ra2_6.png)
ここから本題に入ります!
![](https://goohayami.com/wp-content/uploads/2022/02/ra2_7.png)
index.html.erbのようなerbという形式のファイルでは、以下の図のように<% %>で囲むことで、HTMLファイルの中にRubyのコードを記述することができます。「erb」とは「Embedded Ruby(埋め込みRuby)」の略です。
ウメコミルビーの語呂が耳に心地よい・・・。
![](https://goohayami.com/wp-content/uploads/2022/02/ra2_8.png)
%と%で囲むだけなんて余裕だわ~と思っていたら
安定のSyntaxError!
![](https://goohayami.com/wp-content/uploads/2022/02/ra2_9.png)
post1とpost2に分けるのを忘れて、post1が2つでした。
each文で表示しよう。これは確か .each do と言うやつかな。
![](https://goohayami.com/wp-content/uploads/2022/02/image-11-1024x525.png)
配列postsの定義。なんとなくcssの形に似ている。
![](https://goohayami.com/wp-content/uploads/2022/02/ra2_11-1.png)
アクションで変数を定義
![](https://goohayami.com/wp-content/uploads/2022/02/ra2_12-1024x516.png)
![](https://goohayami.com/wp-content/uploads/2022/02/ra2_13.png)
さっき書いたコードを削除させる暴挙にイラッ!
![](https://goohayami.com/wp-content/uploads/2022/02/ra2_14.png)
localhost:3000/posts/indexをプレビューすると
無事投稿一覧が出来ました。
![](https://goohayami.com/wp-content/uploads/2022/02/ra2_15-1024x375.png)
次は『データベースを作ってみよう』です。