前回のレクチャーに戻る 完了して次のレクチャーへ  

  3-1 リスト作成機能の実装

リスト作成機能の実装


この章ではリストを作成・編集・削除する機能を実装していきます。作成・編集・削除する機能はwebアプリケーション開発をする上で基本的なことです。この章でwebアプリケーション開発の基本的なことを学んでいきましょう。

この章で学ぶこと


- モデルの作成
- アソシエーションの設定
- resourcesを使ったルーティングの設定
- 重複したコードのリファクタリング
- RESTfulなルーティングを使ったwebアプリケーション開発

学習キーワード

- モデル
- テーブル
- referneces型
- NOT NULL制約
- limit制約
- マイグレーションファイル
- アソシエーション

Listモデルの作成


まずListモデルから作成します。リスト作成機能でまず初めにやることは、それらの情報を保存するためのデータ構造を作成することです。Listsテーブル構成は以下のようになります。

references型で保存することで、user_idを外部キーとして明示的に指定できます。

参考) Active Record の関連付け (アソシエーション)

それでは以下のコマンドでモデルと一緒に上記テーブルのマイグレーションファイルを作成しましょう。

$ rails g model List title:string user:references

またtitleカラムにNOT NULL制約とlimit制約を追加します。

NOT NULL制約とは、カラムに格納する値としてNULLを禁止します。リストを作成するときに、タイトルに何も入ってない状態でリストが作成されると困るのでNOT NULL制約を追加します。

limit制約はデータ型の最大幅を指定するために使います。

では作成されたマイグレーションファイルを以下のように編集してください。(マイグレーションファイルはdb/migrateフォルダの中にあります。)

db
└── migrate

編集したら、マイグレーションファイルを実行しましょう。 以下のコマンドを実行してください。

$ rails db:migrate

これでlistsテーブルが作成されました。

UserモデルとListモデルのアソシエーションの設定


次にUserモデルとListモデルのアソシエーションの設定を行います。

今回の場合は「一人のユーザーは複数のリストを持つことができる」という関係性なので、UserモデルとListモデルが1対多の関係性になるようにします。

まずUserモデルにhas_many :listsを追加します。usersテーブルのレコードを削除したら同時に関連しているlistsテーブルのレコードも削除されるようにdependent: :destroyの設定も追記します。 app/models/user.rbに以下のコードを追加してください。

app
└── models
    └── user.rb

次にListモデルにbelongs_to: userを追加します。 app/models/list.rbに以下のコードを追加してください。

app
└── models
    └── list.rb

バリデーションの追加


次にバリデーションを追加していきます。バリデーションとはオブジェクトがデータベースに保存する前に、そのデータが正しいかどうかを検証する仕組みのことです。今回はタイトルの文字数が1から255文字かどうかを検証するバリデーションを追加します。app/models/list.rbに以下のコードを追加してください。

app
└── models
    └── list.rb

listコントローラーの作成とnew createアクションの定義


上記の追加が完了したら次にlistコントローラーを作成します。以下のコマンドを実行してください。

$ rails g controller list new create

上記のコマンドを実行すると、以下のようにlistコントローラーと各アクションへのルーティングとそれに紐づくViewまでが作成されます。(ルーティングはrails routesというコマンドを実行すると確認できます)

list_new    GET /list/new(.:format)    list#new
list_create GET /list/create(.:format) list#create

ルーティングの設定


次にroutes.rbファイル内の自動生成されたルーティング(get 'list/new'get 'list/create')をresourcesメソッドを使って置き換えます。

resourcesメソッドに関しては以下のリンクを参照してください。

参考) Rails のルーティング

config/routes.rbを以下のように編集してください。

config
└── routes.rb

各アクションの詳細のロジック作成


ルーティングの設定まで行ったら次に各アクションの詳細なロジックの定義を行っていきます。

まずnewアクションから書いていきます。 app/controllers/list_controller.rbに以下のコードを追加してください。

app
└── controllers
    └── list_controller.rb

上記の

@list = List.new

というコードはリストオブジェクトを作成して、@listに代入します。

次にcrateアクションを書いていきます。 app/controllers/list_controller.rbに以下のように編集してください。

app
└── controllers
    └── list_controller.rb

privateメソッド以降にストロングパラメーターの設定を行います。上記のコードのように書くことでtitleが保存可能になります。また同時にmergeメソッドでcurrent_user.idを追加します。 ストロングパラメーターに関しては下記のリンクを参考にしてください。

参考)RailsのStrong Parametersを調べる

リスト作成画面の開発


次にリスト作成画面を開発していきます。 app/views/list/new.html.erbに以下のコードを追加してください。

app/views/list
└── new.html.erb

次にapp/assets/stylesheets/application.scssに以下のコードを追加してください。

app
└── assets
    └── stylesheets
        └── application.scss

次にapp/views/stylesheetsフォルダの中にlistフォルダを作成して、listフォルダの中にnew.scssファイルを追加します。追加したら、new.scssに以下のコードを追加してください。

app/assets/stylesheets/list
└── new.scss

上記のコードを追加したら、http://localhost:3000/list/new にアクセスしてみてください。下記の画像のように表示されていればうまく動作しています。

ヘッダーに「リストを作成」リンクを編集


ヘッダーの「リストを作成する」リンクは"#"のままなので、http://localhost:3000/list/new にアクセスできるようにリンクを編集します。_header.html.erbを以下のように編集してください。

app
└── views
    └── layouts
        └── _header.html.erb

ヘッダーのリンクを修正したら、実際にヘッダーの「リストを作成」というボタンを押した時に、http://localhost:3000/list/new にアクセスできるか確かめてみてください。

トップページに作成したリストを表示する


リストを作成する機能は実装しましたが、作成したリストを表示することはまだできません。なのでトップページに作成したリストを表示できるように実装していきたいと思います。

まずtopコントローラーのindexアクションのロジックの定義を行っていきます。 app/controllers/top_controller.rbに以下のコードを追加してください。

app
└── controllers
    └── top_controller.rb

次にリストを表示する見た目を整えていきます。 app/views/top/index.html.erbに以下のように編集してください。

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

次にapp/assets/stylesheets/application.scssに以下のコードを追加してください。

app
└── assets
    └── stylesheets
        └── application.scss

次にapp/assets/stylesheets/top.scssを以下のように編集してください。

app
└── assets
    └── stylesheets
        └── top.scss

上記のコードがついかできたら、http://localhost:3000/list/new でリストを作成してみてください。リストを作成すると以下の画像のようにリストが表示できていればうまく動作しています。

以上で今回のパートは終了です。お疲れ様でした。

議論
4 質問