
マイケル
みなさんこんにちは!
マイケルです!
マイケルです!

エレキベア
こんにちクマ〜〜〜

マイケル
今日は前回から引き続き、Railsを触っていきます!

エレキベア
前回は確かScaffoldで簡単なアプリを作って触ったクマね

マイケル
Railsの概要やイメージについては、前回の記事をご参照ください!
今回はScaffoldは使用せずに、下記のような手順で 一からtodoアプリを開発 していこうかと思います。
今回はScaffoldは使用せずに、下記のような手順で 一からtodoアプリを開発 していこうかと思います。
- TaskデータのCRUD機能作成
- UserデータとTaskデータの関連付け
- バリデーションの追加

エレキベア
基本的なアプリの作り方が分かりそうクマね
楽しみクマ〜〜〜〜
楽しみクマ〜〜〜〜

マイケル
それでは早速触っていこう!!
事前準備
アプリの雛形を作成

マイケル
まずは前回と同様の手順で、アプリを新規作成しましょう!
コマンドは下記のようになります。
コマンドは下記のようになります。

マイケル
無事Rails画面が表示されれば完了です!

エレキベア
手慣れたもんクマ〜〜〜
よく使用するrailsコマンド

マイケル
これからアプリを作っていくにあたり様々なrailsコマンドが出てきますが、
よく使用するコマンド一覧は下記のようになります!
途中でこれなんだっけ?と思ったら、こちらやRailsドキュメントを見てみましょう。
よく使用するコマンド一覧は下記のようになります!
途中でこれなんだっけ?と思ったら、こちらやRailsドキュメントを見てみましょう。

エレキベア
最初は分からなくなりがちクマが、
慣れれば簡単クマ〜〜〜
慣れれば簡単クマ〜〜〜
TaskデータのCRUD機能を作る

マイケル
それでは早速アプリを作っていきましょう!
まずは下記のようなTaskデータのCRUD機能を作成していきます。
まずは下記のようなTaskデータのCRUD機能を作成していきます。
↑Taskデータ

エレキベア
これは楽勝クマ〜〜〜
model、controllerの作成

マイケル
まずはmodelとcontrollerを作成していくのですが、大きく
・resourceとして作成する方法
・model、controllerそれぞれ作成する方法
の2つの方法があります。
どちらも試してみましょう!
・resourceとして作成する方法
・model、controllerそれぞれ作成する方法
の2つの方法があります。
どちらも試してみましょう!

マイケル
まずはresourceで作成する方法から!
下記コマンドで作成することができます。
下記コマンドで作成することができます。

マイケル
すると、modelやcontroller等のファイルがまとめて作成されるのが確認できます。
config/routes.rb にもresourcesとしてルーティングが設定されており、一通りのパスが使用できる状態になっています。
config/routes.rb にもresourcesとしてルーティングが設定されており、一通りのパスが使用できる状態になっています。
↑resourcesとしてルーティングが設定されている
↑rails routesで確認すると、一通りのパスが設定されていることを確認できる

マイケル
resourceでの作成が確認できたところで、一旦元の状態に戻しましょう!
generateコマンドで作成したものは、同様にdestroyコマンドを使用することで作成されたファイルを削除することができます。
generateコマンドで作成したものは、同様にdestroyコマンドを使用することで作成されたファイルを削除することができます。

エレキベア
これなら間違ってコマンド実行した時も安心クマね

マイケル
初期状態に戻ったところで、次はmodel、controllerをそれぞれ作成してみましょう!
コマンドは下記を使用しますが、controller作成時にはmodel名を複数形で指定する必要がある点には注意しましょう!
コマンドは下記を使用しますが、controller作成時にはmodel名を複数形で指定する必要がある点には注意しましょう!

エレキベア
Railsはその辺の規約が厳しかったクマね

マイケル
これで基本的にはresourceでの作成とほぼ同じ状態になったのですが、
routes.rbには何も記述されていない状態になっています。
こちらは下記のように修正してresourcesとしてルーティングを指定しておきましょう!
routes.rbには何も記述されていない状態になっています。
こちらは下記のように修正してresourcesとしてルーティングを指定しておきましょう!

エレキベア
これでさっきと同じ状態になったクマね

マイケル
最後に、model作成時にdb/migrate/配下にテーブル定義が記述されたマイグレーションファイルも作成されたかと思います。
こちらはdb:migrateを実行してテーブルを作成しておきましょう!
こちらはdb:migrateを実行してテーブルを作成しておきましょう!

エレキベア
これで準備完了クマ〜〜〜
Taskデータの一覧表示

マイケル
準備が出来たところで、一番簡単なTaskの一覧表示機能を作成してみましょう!
一覧表示のアクションはtasks#indexで指定されていたので、下記のようにcontrollerクラスにindex関数を追加しましょう!
一覧表示のアクションはtasks#indexで指定されていたので、下記のようにcontrollerクラスにindex関数を追加しましょう!
↑index関数の追加

マイケル
controllerクラスで設定したインスタンス変数は、ビュークラスからも参照することができます。
views/tasks/index.html.erb ファイルを作成して、下記のように表示処理を記述してみましょう!
views/tasks/index.html.erb ファイルを作成して、下記のように表示処理を記述してみましょう!
↑tasksをループで回して表示する

マイケル
この状態で http://127.0.0.1:3000/tasks にアクセスすると、下記のようにページが表示されると思います。
まだデータが無いため、現段階ではタイトルが表示されていればOKです!
まだデータが無いため、現段階ではタイトルが表示されていればOKです!

エレキベア
一覧表示はこれで完了クマ〜〜〜
Taskデータの作成

マイケル
次はデータが作成できるようにしていきます!
new、create関数を追加して、下記のように処理を記述しましょう!
new、create関数を追加して、下記のように処理を記述しましょう!
↑new、create関数の追加

マイケル
task_paramsの部分はストロング・パラメータと呼ばれる仕組みで、
permitにより渡す値を許可して制限することができます。
permitにより渡す値を許可して制限することができます。

エレキベア
想定外の項目が渡されないようにできるクマね

マイケル
登録ページとしてviews/tasks/new.html.erb を作成し、下記のように記述しましょう!
form_with を使用することでmodelとformを紐づけています。
form.submit でsubmitしたものはHTMLと同様POSTメソッドで送信されるため、入力データはcreateアクションに渡される流れになります。
form_with を使用することでmodelとformを紐づけています。
form.submit でsubmitしたものはHTMLと同様POSTメソッドで送信されるため、入力データはcreateアクションに渡される流れになります。
↑登録ページの作成

マイケル
views/tasks/index.html.erb にも登録ページのリンクを追加しておきましょう!
これでデータ作成機能の完成です!
これでデータ作成機能の完成です!
↑登録ページへのリンクを追加

マイケル
この状態でリンクを踏むか http://127.0.0.1:3000/tasks/new にアクセスすると
登録ページが表示され、データ作成も正常に行えることが確認できます。
登録ページが表示され、データ作成も正常に行えることが確認できます。

エレキベア
これでだいぶアプリっぽくなったクマ〜〜
Taskデータの更新・削除

マイケル
最後に、データの更新・削除も行えるようにしてみましょう!
下記のようにedit、update、destroy関数を追加します。
下記のようにedit、update、destroy関数を追加します。
↑edit、update、destroy関数の追加

マイケル
そして編集ページを views/tasks/edit.html.erb として作成し、
下記のように記述します!
下記のように記述します!
↑編集ページの作成

マイケル
編集ページへのリンクと削除処理はデータ一覧ページにボタンとして追加します!
整理して、views/tasks/index.html.erb は下記のようになります。
整理して、views/tasks/index.html.erb は下記のようになります。
↑リンクと削除ボタンの追加

マイケル
なお、Rails7ではlink_toでdeleteメソッドが簡単に送れないようになっているようなので、
ボタンで対処する形としています。
ボタンで対処する形としています。

エレキベア
そんな罠が・・・

マイケル
以上でCRUD機能は一通り完成です!
ボタンを追加した一覧ページと編集ページは下記のようになります。
ボタンを追加した一覧ページと編集ページは下記のようになります。

エレキベア
これだけでCRUD機能が作れるなんてめっちゃ楽クマ〜〜

マイケル
実際に触ってみると下記のような感じになります!

エレキベア
感慨深いクマ〜〜〜
リファクタリング

マイケル
ここからUserデータを作成していく・・・前に、
軽くリファクタリングしておきましょう!
軽くリファクタリングしておきましょう!
パーシャル機能で共通部分を抜き出す

マイケル
まずはパーシャル機能を用いて、viewの重複部分を共通化してみます。
ファイル名の頭に「_」を付けることで、「render “XXX”」の形で使用できるようになります!
ファイル名の頭に「_」を付けることで、「render “XXX”」の形で使用できるようになります!
↑formをパーシャルとして切り出す
↑登録ページのform部分を差し替える
↑編集ページのform部分を差し替える

エレキベア
共通部品として抜き出せるのは便利クマ〜〜
before_actionで事前処理を抜き出す

マイケル
controllerクラスの処理もよく見ると、同じようなデータ設定処理が重複していることが分かります。
before_action として切り出すことで、指定した関数の頭で呼び出すよう共通化してみましょう!
before_action として切り出すことで、指定した関数の頭で呼び出すよう共通化してみましょう!
↑事前処理をbefore_actionとして共通化

エレキベア
これもよく使いそうな機能クマね〜〜
Userデータを作成して紐づける

マイケル
次はUserデータを作成して、最終的には下記のようにTaskデータと紐づけてみようと思います。
↑UserとTaskを1:Nで紐づける

エレキベア
関連性を定義するクマね
Userデータと関連ページの作成

マイケル
まずはUserデータと関連ページをTaskデータと同様に作成します。
今回はresources指定ではなく、
・ユーザー一覧ページ
・ユーザーページ
・ユーザー作成ページ
の3つを作るために最低限必要な関数を指定して作成してみます。
今回はresources指定ではなく、
・ユーザー一覧ページ
・ユーザーページ
・ユーザー作成ページ
の3つを作るために最低限必要な関数を指定して作成してみます。

マイケル
controller作成時に関数名を指定した場合は、
下記のように関数名に対応したviewも一緒に作成されることが確認できます。
下記のように関数名に対応したviewも一緒に作成されることが確認できます。

エレキベア
一緒に作ってくれるのは便利クマね

マイケル
この内、createページは今回不要なため削除します。

マイケル
そして各関数の処理とroutesの指定を下記のように記述します。
↑各関数の処理
↑routesの指定

エレキベア
今回はresourcesじゃなく一つ一つ指定しているクマね

マイケル
あとは各関数に対応するページをそれぞれ作成すれば完了です!
↑ユーザー一覧ページ
↑ユーザーページ
↑ユーザ作成ページ

エレキベア
ここまではTaskのCRUD作成とほぼ同じクマね
Taskデータと紐づける

マイケル
Userデータが作成できたところで、Taskデータと紐づけていきます。

マイケル
まずはTaskデータにuser_idを追加しましょう!
下記のコマンドで追加のマイグレーションファイルを作成し、データを再作成します。
下記のコマンドで追加のマイグレーションファイルを作成し、データを再作成します。

エレキベア
途中で項目追加もできるクマね

マイケル
そしてuserモデルとtaskモデルを紐付けます。
下記のようにそれぞれhas_many、belongs_toを指定することで、1:Nの関係にすることができます。
下記のようにそれぞれhas_many、belongs_toを指定することで、1:Nの関係にすることができます。

マイケル
関連付けは他にも種類があります。
詳細は下記をご参照ください。
詳細は下記をご参照ください。

エレキベア
いろんなのが用意されてるクマね〜〜

マイケル
次は関連付けの挙動を確認するために、デフォルトのデータを設定しておきます。
下記のようにしてuserとそれに紐づくtaskのデータをseedsに定義、実行します。
下記のようにしてuserとそれに紐づくtaskのデータをseedsに定義、実行します。

マイケル
rails console で作成されたデータを見てみましょう。
Userにtaskが紐づいている状態のため、user.tasksといった形でアクセスすることができます。
Userにtaskが紐づいている状態のため、user.tasksといった形でアクセスすることができます。

エレキベア
これが関連付けの威力クマか・・・

マイケル
準備が出来たところで実際に表示してみましょう!
ユーザページで user.tasks をループで表示してみます。
ユーザページで user.tasks をループで表示してみます。

エレキベア
これだけで紐づくデータを表示できるのは便利クマね

マイケル
ついでにeditボタンも追加してページを行き来できるようにしてみます。
合わせてタスク更新後もページに留まり続けるようにしました。
合わせてタスク更新後もページに留まり続けるようにしました。

マイケル
最後にタスク作成画面にuser_idを追加すれば完了です!

エレキベア
これでTaskとUserの関連付けは完了クマ〜〜〜
バリデーションを追加する

マイケル
Todoアプリ作成は以上になりますが、最後にデータ作成時のバリデーションを追加してみます。
Userのバリデーション

マイケル
バリデーションはActiveRecordの機能を使うと楽に実装できます。
下記はユーザー名に
・入力必須
・最大10文字
・アルファベット入力のみ
の3つのチェックを追加した記述となります。
下記はユーザー名に
・入力必須
・最大10文字
・アルファベット入力のみ
の3つのチェックを追加した記述となります。
↑ユーザー名にバリデーションを追加

エレキベア
これだけでチェックが行えるのクマね

マイケル
他のバリデーションの種類については、下記をご参照ください!
Active Record バリデーション – Railsガイド

エレキベア
こんなに用意されてるクマか〜〜〜

マイケル
エラーメッセージはerrors.full_messagesで取得することができます。
Railsのflash機能を用いて、作成失敗時には下記のように設定してみます。
Railsのflash機能を用いて、作成失敗時には下記のように設定してみます。
↑エラーメッセージをflashに詰め込む

マイケル
flashはページ遷移時に一度切りで表示するために設定する機能になります。
下記のようにメッセージを表示するパーシャル部品を作成しましょう。
下記のようにメッセージを表示するパーシャル部品を作成しましょう。
↑flashメッセージが設定された際に表示する

マイケル
あとはユーザー作成ページにrenderを追加するだけです!

マイケル
空文字や不正な文字を入力して作成しようとした際に
このようにエラーメッセージが表示されれば完了です!
このようにエラーメッセージが表示されれば完了です!

エレキベア
なんて簡単な入力チェッククマ〜〜〜〜
Taskのバリデーション

マイケル
Taskの方もバリデーションを追加してみます。
Userと同じように
・入力必須
・最大20文字
というように設定してみました。
Userと同じように
・入力必須
・最大20文字
というように設定してみました。

マイケル
タスク作成ページ、タスク更新ページも同じようにshared/flash_error_messagesを追加しましょう。
↑タスク作成ページ
↑タスク更新ページ

マイケル
そしてcontrollerのcreate、updateも同様に
flashにエラーメッセージを詰め込めば完了です!!
flashにエラーメッセージを詰め込めば完了です!!
↑flashにエラーメッセージを詰め込む

マイケル
タスク作成、タスク更新時に下記のようにエラーメッセージが表示されれば成功です!!

マイケル
ちなみに belongs_to を指定していた場合は、デフォルトで存在チェックが行われる設定となっているため、
指定したユーザーIDが存在しない場合、「User must exist」と表示されるようになっています。
指定したユーザーIDが存在しない場合、「User must exist」と表示されるようになっています。

エレキベア
存在チェックまでやってくれるクマか〜〜〜
おわりに

マイケル
というわけで今回はRailsでTodoアプリを作ってみました!
どうだったかな??
どうだったかな??

エレキベア
いろんな機能が用意されていて便利だと思ったクマ〜〜〜

マイケル
Railsという名の遠り、実装でなるべく迷わないように作られていて、
人気な理由が分かったね!
楽しいからこれからたまに触りながら慣れていこう!!
人気な理由が分かったね!
楽しいからこれからたまに触りながら慣れていこう!!

マイケル
それでは今日はこの辺で!
アデューーー!!
アデューーー!!

エレキベア
クマ〜〜〜〜
【Rails7】Ruby on Rails7で主要な機能をtodoアプリで学ぶ 〜間〜