ProgateでRuby on Railsコースを復習(その1)

Ruby

Progateの Ruby on Railsコースをひと通り完了しました。
復習のため、再び道場コース(学習コースと違ってコードをゼロから書いていく演習コース)を繰り返しながら概要をザクッとメモ書きしておきます。(自分用メモなのでザックリと・・・)

アプリの雛形を作成

railsコマンドを実行!
rails new tweet_app

これで必要なファイルがモリモリ出来上がります。
その後、「rails server」コマンドを実行することでサーバが起動し、Webブラウザから「localhost:3000」でアクセス可能になります。簡単!

トップページの作成

上記コマンドでコントローラとビューに必要なファイルがマルッと出来上がります。

続けてapp/view/home/top.html.erbファイルを表示する内容に編集していきます。ちなみに、ここで記述するのはbodyタグの内容です。
また、cssファイルは app/assets/stylesheets/コントローラ名.scssを編集します。

ルーティングの変更

現状、TOPページのURLが「/home/top」になっているので、「/」でアクセスできるようにルーティング変更します。
config/routes.rbを編集して、

に変更すればOK。

aboutページの作成

homeコントローラは作成済みなので、railsコマンドは使わず、viewファイル(view.html.erb)を手作業で作成します。
続けてルーティングに 「get “/about” => “home#about”」を追記、コントローラファイルにaboutアクション(=関数)を追記します。

アプリケーション共通レイアウトの変更

views/layouts/application.html.erbを編集します。このファイル中の 「<%= yeald %>」が各ビューの内容に置き換わるという点がキモっぽい。
ここにはアプリケーション共通でページヘッダーに表示するリンクなどを記述します。

データベーステーブルの作成

上記コマンドで、Postテーブルにtext型のcontentカラムを作成します。実際には、この後に「rails db:migrate」コマンドを実行することでデータベースに反映されます。
データベースができたので、コンソール(rails console)からデータを投入してみます。

ここでpost.saveをしないと反映されないので注意。

なお、作成したテーブルには「id」「created_at」「updated_at」のカラムが自動的に作成されます。(※「id」が主キーになる)

投稿一覧ページの作成

上記コマンドでコントローラとビューをマルッと作成し、コントローラにて @post にデータベースから取得した内容をセットします。(先頭に@を付けることでビューでもアクセス可能に)

order()はレコードの並び順を指定するメソッドです。(:descが降順、:ascが降順)

つづけて、app/view/posts/index.html.erbを編集して@postsの内容を一覧表示します。(以下のようにeach文を使う)

 

投稿詳細ページの作成

投稿一覧から投稿内容に貼られているリンクをクリックすると、投稿詳細ページ(show.html.erb)を表示するようにします。

まずはルーティングに「 get “posts/:id” => “posts#show” 」を追加します。
これでコントローラ側で「 params[:id] 」として投稿を絞り込むためのID(Postテーブルのidカラム)を取得できるようになります。

つづけてコントローラ側でデータベースから取得する内容を@postに格納します。(find_byを使うことでレコードを検索)

投稿詳細ページには @post.content と @post.created_at を表示します。
(今は項目が少ないけど、後々ここに色々と表示するようになっていきます)

一覧表示では @postsと複数形、詳細表示では@postと単数形、と使い分けが今後も出てきます。

ここまでで道場コース(その1)が完了です。つづく。

 

コメント