DOアプリを作成してみましょう。基本のCRUD処理のおさらいにもなります。DOアプリを作ってみましょう。DO項目作成&表示ができるページを作ります。DOアプリを開発する為に専用のWorkspaceを作成し、自分なりにアプリを作ってみましょう。1.TODOアプリ解説1突然アプリを作りなさいと言われても何から始めて良いのかわからない方も多いと思います。どのような項目が必要なのか設計図を作成します。これをデータ設計と呼びます。DOリスト一覧が表示されるページのデータ設計を行います。DOリスト一覧に表示されているのは大まかにリストのタイトル(1.今日の買い物など)と、概要(今日の買い物リストですなど)です。そこで、リスト一覧ページにはnameとdescriptionというデータが必要であることがわかります。同様に項目作成&表示ページもデータ設計を考えてみましょう。こちらは各リストの詳細が表示されるページです。body(本文)のデータが必要であることがわかります。この時点では各ページの作成に必要なデータの種類がわかれば良いので、editやdelete、他のページへのリンクなどはデータ設計の際は無視しても大丈夫です。3.todoアプリ作成Workspaceでtodoアプリを作成しましょう。to_doでアプリが作成されます。次に先ほどのデータ設計を基に必要なモデルを作成します。description:textモデルを作成したら、必ずマイグレーションを実行します。db:migrateこれで必要なデータテーブルが作成されました。次にroutesファイルを開いてください。ここでroutesに何のデータをもとにするかを宣言し、必要なHTTPメソッドを作ってもらいます。listsと追記して保存します。routesで確認すると、各アクションへのパスが作成されていることがわかります。◎viewファイルの作成では次にモデル(データ)と連携する為のコントローラを作成します。listsここで注意しなければいけないのはRailsの命名ルールです。モデル→単数系コントローラ→複数形でしたね。コントローラができたので、各アクションに対応したviewファイルも作成しておきましょう。今回のアプリ開発で必要なviewファイルはどのようなものがあるでしょうか。リストを新しく投稿するページ(new.html.erb)とリスト詳細の表示(show.html.erb)、リスト一覧表示(index.html.erb)は必要ですね。各ファイルを作成しておきましょう。新しくリストを作成するnewアクションを追加しましょう。listsコントローラのファイルを開いてください。以下のようにnewアクションを追加して保存します。List.newendこれで、@listというインスタンス変数を定義できているためviewファイルで@listが使用できます。new.html.erbのviewファイルに新規リスト投稿用のフォームを作成していきましょう。2.フォームの作成new.html.erbファイルに以下のフォームのコードを追加して保存してください。routesで確認すると、new.html.erbのパスはnew_lists_pathだとわかります。ブラウザを更新してみましょう。3.ラベルの追加とマークアップ投稿用のフォーム部分はできていますが、これではあまりにも不親切です。どちらのフォームがname、descriptionなのかラベルを追加します。フォームが横並びになっているのもページの表示としては見づらい為マークアップで整えましょう。以下のラベルと、タグを追加して保存してください。%>ブラウザを更新してみましょう。投稿ページが見やすくなりました!4.newアクションからcreateアクションへblogアプリ作成の際に、newアクションで作成したデータは送信ボタンを押すとcreateアクションに飛ばされているということを確認しました。今回も流れは同じです。newアクションから飛んできたデータをcreateアクションで保存しなければいけません。newアクションからどのようなデータが飛んできているかを確認しましょう。params.inspectendここでlist=>{name=>テスト,description=>データの飛び方}とありますね。Listボタンを押したときに送られているパラメータの中身です。listsコントローラのcreateアクションに以下のコードを追加してください。list_path(@liset)endcreateアクションに飛んだデータは@list.saveで保存されます。次のredirect_toで保存した後はshow.html.erbへ飛ぶように指示をしています。コードを保存したら、新規投稿ページにブラウザの戻るボタンをつかって戻り、再度送信ボタンを押します。エラーになってしましいました。これは送られてきたデータをそのまま信用してはいけない!というRailsのストロングパラメーターズという機能が働いている為です。blogアプリと同様にnameとdescriptionのデータは許可されており、必要だとlistコントローラへ明記しましょう。list_paramsと置き換えます。新規リスト作成の画面へ戻り新しくリストを追加して、送信してください。何も表示されていません。これは詳細画面であるshow.html.erbに何のコードもないからです。リストコントローラにshowアクションを追加し、show.html.erbにもコードを追加しましょう。コードは以下の通りです。作成したリストを一覧表示できるようにindexアクションを追加します。listコントローラに以下を追加してください。List.allend一覧画面では登録した全てのリストのデータを表示するのでList.allで取得したデータを@listというインスタンス変数に代入しています。アクションの追加だけでは一覧を表示することはできません。ページの表示を担っているviewファイルに一覧を表示するようにコードを追加します。一覧表示は取得したリストのデータを表示する必要があります。ここで必要な処理はループ処理です。descriptionの表示endとなります。@listsに代入されている全てのデータから、全てのnameデータを取得して、詳細画面(show.html.erb)へのリンクを作りましょう。nameデータとdescriptionデータを表示させましょう。表示されたnameにshow.html.erbへのリンクを作成します。routesで確認するとindexアクションのURIパターンは/listsです。一覧画面を表示してみます。ループ処理が実行され、きちんとリストの全てが表示されています。7.各リストに編集/削除用のリンクを作成リストの編集や、削除ができるようにeditアクションとdestroyアクションを追加します。リスト一覧で表示されている各リストをeditとdestroyができるようにしてみましょう。index.html.erbファイルを開いてください。現在のコードは下記のようになっているはずです。%>まずはeditという編集用のリンクを作成します。%>で|list|として渡されている変数です。%>内でしか機能しないという点に注意しましょう。次に削除用のリンクを作成します。%></p>となります。routesを確認した際、destroyアクションはDELETEメソッドになっているという点です。HTTPメソッドの中でGET以外はイレギュラー扱いとなる為、メソッドを明記しなければいけません。:deleteと記述が入っています。削除用のリンクも追加したコードの全体は下記となります。%>ではブラウザを更新してください。編集する、削除するというリンクが完成しています。編集や削除のリンクは完成しましたが、現在はlistsコントローラにアクションもありませんし、viewファイルの内容もデフォルトのテンプレートのままです。【コントローラの画像/viewファイルの画像】まずは編集リンクをクリックしたときに実際にリストの編集を実行できるようにeditアクションを追加しましょう。listsコントローラを開いてください。List.find(params[:id])endこのeditアクションで該当の(編集したい)リストのデータを[:id]で探して取得します。教程6で確認したように、editアクションで取得したデータはedit.html.erbファイルの中身として表示されます。edit.html.erbファイルを開いてください。編集用の画面にも、投稿用の画面と同じようにnameとdescriptionの編集用のフォームが必要です。そこでedit.html.erbファイルにもフォームを表示する為、下記のコードを追加します。%>form_withの特徴により、@listというインスタンス変数に代入されている値が空ではないと判断し、自動的にupdateアクションへ飛ばしてくれます。listsコントローラにはupdateアクションがありませんので、アクションを追加しましょう。listsコントローラに下記のコードを追加してください。endendupdateアクションに送られてきたデータを[:id]の情報から特定します。nameとdescriptionという2つの項目の更新(update)に成功したら、一覧画面に戻りなさい。いうif~elseの条件分岐のコードとなります。コントローラファイルとviewファイルにコードを追加し、保存したらブラウザを更新してください。続いてdestroyアクションを追加します。listsコントローラを開いてください。endまずは今から削除するリストのデータを取得し、@listというインスタンス変数に代入します。代入されたデータは@list.destroyで削除されます。削除が完了したら、リスト一覧画面へ戻るように設定します。リスト一覧のブラウザを更新してください。先ほどご自身が選んだリストが削除されていることを確認してください。先ほどの編集画面と同様に内容が削除されていることを確認してみましょう。◎各画面をリンクでつなぐ最後にリスト一覧(index.html.erb)、新規リスト作成(new.html.erb)をリンクでつなぎます。リスト一覧画面に、新規リスト作成画面へのリンクを張りましょう。index.html.erbファイルに以下のコードを追加して保存してください。%>次に、新規リスト作成画面からリスト一覧へのリンクを張ります。new.html.erbファイルに以下のコードを追加してください。%>これで2つの画面をリンクでつなぐことができました。ここまでで、最初にデータ設計をした際のリスト部分は完成です。次はアイテムを作成します。[スキルハブ]では無料の動画講座を多数公開しています。他校だと数万円するような講座が無料で受講できます。6】セカンドモデルを理解する。