こんにちは！まろんぼーいです。
今回は、「初心者がWebアプリを作ってみた」シリーズの第12回です。
このシリーズでは、過去に完全初心者の僕が作ったWebアプリを参考に、
初心者なりに試行錯誤しながらその改良版を一から作っていく過程をお見せしています。
このシリーズのモットーは、「同様の初心者が、アプリ作成の流れをつかみながら同様のアプリを作れるようになること」です。
ということで、基本的にアプリを作成していく過程を順を追って解説していますが、
「正確な内容」よりも、「わかりやすいなんとなくのイメージ」を重視して記事を書いています。
経験者の方からすると、「正確にはちがう！」と突っ込みたくなるような内容もあるかと思いますが、
難しい知識よりも、なんとなくでいいので流れをつかむ！
そんな内容となっていますので、同じ初心者の方の参考になればうれしいです！
それでは今回もはじめていきましょう！
〇前回までの進捗
前回はトップページをログインの有無で場合分けするとともに、ログアウト機能を実装しました。
これで、新規登録して、ログイン、ログアウトもできるようになりました。
ここから実際にアプリの中で投稿する機能を実装していきます。
今回の記事では、Model、Controllerまで作っていきます。
〇投稿機能について
さて、今回の旅行アプリは、ユーザが自分の体験を投稿するようなアプリにしようと思っています。
投稿機能の最終的なイメージは、Facebookの記事のように、「題名」、「内容」、「写真」、「コメント」、「いいね」等が実装されたものです。
また、「フランス」や、「ニューヨーク」など、国や都市でフィルタリングできるよう、
投稿と国、都市を紐づけます。
〇実装の流れ
投稿機能の実装は長丁場になるため、初めに流れを簡単に説明しておきます。
少し長くなるかと思いますが、かみ砕いて説明しますので読めばすぐ理解できます！
①「国」についてのMCRVの作成
まず、国のModelを作ります。
Model作成ではデータの項目を決める必要がありますが、国は名前のみ使うので、
「name」項目のみのModelを作ります。
それに付随してController、Router、Viewを作っていきます。
Controller、Router、Viewは何を作るか想像しづらいですが、
例えば今回はわかりやすいものとして、「国一覧ページ」と、「特定の国に関するページ」を実装します。
「国一覧ページ」はindex、「特定の国に関するページ」はshowなので、
index、showに関わるController、Router、Viewを作っていくイメージです。
また、ユーザが自分の投稿に紐づけたい国がない場合に自分で国を追加できるように、
newとcreateのメソッドも作成します。
②「都市」についてのMCRVの作成
続いて、都市についても同様にModelを作成します。
ここで、「国と一緒で項目はnameだけだ！」と考えるのはNGです。
都市のModelでは、name以外に「国」項目を有します。
？？？
ピンとこないかもしれません。
ある都市を指定する際は、必ず「○○（国名）の△△（都市名）」と、国とセットで考えられた方がフィルタリングすることを考慮すると非常に便利なんです。
例えば、パリは、「フランスのパリ」ですね。
このように、例えば都市のModelにパリを保存するときに、「name：パリ、country：フランス」と保存することができれば、フランスとパリを紐づけることができます。
紐づけることで、例えば「フランスにある都市を探したい」となった場合に、
都市のModelからcountry項目が「フランス」となっているものを探せば簡単に抽出できるって仕組みです！
このように、国1つに対して都市がいくつも紐づいている構造を、「1対多」と呼びます。
こちらは非常に重要で、ググれば解説が多くあるので詳しく知りたかったら調べておきましょう。
というわけで、項目はnameとcountryの2つとします。
また国と同様に、index、show、new、createに関わるController、Router、Viewを作ります。
③「投稿」についてのMCRVの作成
国、地域のMCRVができたら、やっと投稿についてのMCRVの作成です。
投稿はとりあえず一番基本的な「題名」と「内容」の項目を作ります。
また、投稿にはこれまで準備した多くのModelが1対多で紐づきます。
まず、上で作った「国」と「都市」。これは両方それぞれ投稿に1対多で紐づきます。
また、以前作成したUserのModelも投稿と1対多で紐づきます。
「1人のユーザに対して、そのユーザの投稿が多く紐づいている」という構造ですね。
以上のように、多くのModelどうしが紐づきあっていると、整理が難しいですよね。
このような場合に関係性を整理するために作成するのが、ER図です。
ER図については聞いたことがあるのではないでしょうか。
Modelどうしを線でつなぎ「1対多」なのか、「多対多」なのかなど記載することで視覚的にModelどうしの関係性を把握するためのものです。
（多対多についてはフォロー機能の記事で説明します！）
ということで、簡単にですがこれまで説明してきたModelについてER図を作ってみました。
それぞれの四角がUser、country（国）、city（都市）、post（投稿）のModelを示しています。
また、四角の中に書いてあるのがそれぞれのModelの項目です。
コチラを見てわかると思いますが、
1対多の関係性を紐づける場合は、
「多」の側のModelの項目に「1」の側のidを設定しているという点です。
これにより両者を紐づけることができます。
このようにER図を作成することで、
投稿（post）に多くのModelが紐づけられていることがわかります。
ちなみに補足となりますが、上のER図はCaccoというWebアプリを使うと非常に簡単に作れるので、ご参考まで！
〇次回 ～国のMCRV実装～
では次回から、上で述べた流れに沿って実装を進めていきます。
まずは、国のMCRVの実装からとなります。
本シリーズでまろんぼーいが実際に作成中のアプリについては、以下のURLで公開しています。
各viewページを直接確認する場合は、本記事と同様のURLを末尾につければ飛ぶことができます。
ご参考までに！
今回もご覧いただきありがとうございました！
