背景

最近、10年のブランクをへてプログラムを猛勉強中で、特に未経験のWEBプログラミング（Rails）に挑戦しております！

TECH::EXPERTにて基礎は学びましたが、どこか「あと少し」な感じで全体像が掴めずにいました。
全体像を把握するためにも、WEBアプリ作成の大まかな作業フローをメモさせていただきました。

※フォーム、ログインなど、他の機能は別途記事を作成いたします。
　

WEBアプリ作成の作業フロー（概要）

①アプリの雛形作成（$ rails 5.2.3 new ディレクトリ名 -d mysql）
　　　　　　　　　（$ bundle install）
②データベース作成（$ rails db:create）
③サーバー立ち上げ（$ rails s）
④ブラウザでアプリケーションの状態確認（ http://localhost:3000）
⑤ルーティング作成（config/routes.rb を編集）
⑥コントローラーを作成（$ rails g controller コントローラー名 で作成）
　　　　　　　　　　　（app/controllers/コントローラー名_controller.rb を編集）
⑦ビューファイルを作成（app/views/コントローラー名/index.html.erb を作成・編集）
⑧モデルを作成（rails g model モデル名）
　　　　　　　（rails db:migrate）
⑨コントローラーでデータベースの情報を取得
⑩新しく別のページも追加してみる

MVCモデル：役割と関係性（図）

※作成中

WEBアプリ作成の作業フロー（詳細）

①　アプリの雛形作成

まずはターミナルで以下の作業を実施。

# projectsディレクトリの作成
$ mkdir ~/projects

# projectsディレクトリに移動
$ cd ~/projects

# Railsのバージョン5.2.3を用いて、「my_app」を「-d」オプションでMySQLを指定して作成。
$ rails _5.2.3_ new my_app -d mysql

# 「my_app」ディレクトリに移動
$ cd my_first_app

# Users/ユーザー名/projects/my_appと表示されることを確認する
$ pwd

# 関連ファイルが読み込まれていることを確認する
$ bundle install

ここで、テキストエディタでmy_appのディレクトリを開いて中身を確認しておく。

②　データベース作成

ターミナルで以下の作業を実施。

$ pwd  # my_appのディレクトリにいることを確認
$ rails db:create  # データベースの作成
Created database 'my_app_development'
Created database 'my_app_test

development ： 開発環境。通常、開発をする際に使用。
test ： テスト環境。アプリケーションの動作をテストする際に使用。
production ： 本番環境。

ここで、データベースが正しく作成できているかを確認しておく。
※例えば、Sequel Pro(シークエル・プロ)などを用いて。
　
もしエラーで確認できなければ、以下でMySQLの再接続を試す。

# ホームディレクトリに移動
$ cd ~

$ mysql.server start
starting MySQL
.. SUCCESS!

③　サーバー立ち上げ

ターミナルで以下の作業を実施。
※何か変更したり、うまく反映されない時は立ち上げなおしてみる。

# アプリケーションのあるディレクトリに移動
$ cd ~/projects/my_app

# ローカルサーバーを起動
$ rails s

④　ブラウザでアプリケーションの状態確認

以下にアクセス。
http://localhost:3000

⑤　ルーティング作成

以下を記述（例）。
・「HTTPメソッド：GET、アクション：index」なので、ページを表示する操作のみを行う時、一覧表示ページを表示するリクエストに対応して動く。

・リクエスト
GETのHTTPメソッド（トップページを表示するため）
URLはhttp://localhost:3000/posts

・行き先
postsコントローラーという名前のコントローラー
indexアクションという名前のアクション

Rails.application.routes.drawdoget'posts',to: 'posts#index'end

以下のコマンドで、ルーティングが確認できる。

# my_appディレクトリにいることを確認しましょう
$ pwd

# ルーティングを確認
$ rails routes
Prefix  Verb  URI Pattern       Controller#Action
posts   GET   /posts(.:format)  posts#index

※以下、リクエストの種別を示すHTTPメソッド

⑥ コントローラーを作成

ターミナルで以下を実行。

$ pwd  # my_appのディレクトリにいることを確認する
$ rails g controller posts  # 例：コントローラー名を「posts」としてコントローラーを作成してみる

以下にindexアクションを定義してみる

classPostsController<ApplicationControllerdefindex# indexアクションを定義したendend

※以下、定義できるアクションの種類

⑦　ビューファイルを作成

・ビューファイルは「app/views/コントローラー名」ディレクトリに格納する。上記（例）ではコントローラー名をpostsとしたため、「app/views/posts」ディレクトリにビューファイルを作成。ファイル名は「アクション名.html.erb」となるが、上記（例）ではindexアクションを定義したため、「index.html.erb」とする。

・「app/views/posts/index.html.erb」にHTMLで記述することで、「 http://localhost:3000」に記述内容を表示することができる。

・以下のようにコントローラーにインスタンス変数を定義することで、「index.html.erb」にRubyでの記述をしてブラウザに表示させることができる。

classPostsController<ApplicationControllerdefindex@post="コントローラーで定義したインスタンス変数を確認"endend

<h1>例</h1>
<%= @post %> #Rubyの記法がHTMLに埋め込める
<% @post %>  #Rubyの記法がHTMLに埋め込めるが表示はされない

⑧　モデルを作成

ターミナルで以下を実行。
コントローラーの名前はpostsでしたが、今回はその単数形のpost。

$ pwd  # my_appのディレクトリにいることを確認する
$ rails g model post  # モデル名を「post」としモデルを作成

作成されたファイルのうち、以下2つに注目。
・app/models/post.rb
・db/migrate/20XXXXXXXXXXXX_create_posts.rb　（マイグレーションファイル（仕様書・設計図））

以下のように、マイグレーションファイルを編集。

classCreatePosts<ActiveRecord::Migration[5.2]defchangecreate_table:postsdo|t|#postsテーブルを作成するt.text:content#text型のcontentカラムを追加t.timestampsendendend

※「型」の種類

　
ターミナルで以下を実行し、データベースのテーブルを作成

$ pwd  # my_appのディレクトリにいることを確認する
$ rails db:migrate  # マイグレーションを実行する

Sequel Proを起動し、my_app_developmentデータベース内にpostsテーブルがあるか、またpostsテーブル内にcontentカラムがあるかを確認。

⑨　コントローラーでデータベースの情報を取得

classPostsController<ApplicationControllerdefindex@post=Post.find(1)# 「@post」というインスタンス変数を定義し、1番目のレコードに情報を全て代入endend

もし、1番目のレコードに複数個の値が存在していたら、正しく表示されない。
以下の方法で、特定のカラムだけを表示する。

<h1>例</h1>
<%= @post.content %>
<%= @post.created_at %>

そのほか、全てのデータを取得できるようにコントローラーを編集した状態で、eachメソッドで1つずつ順々に複数個の表示をさせることもできる。

classPostsController<ApplicationControllerdefindex@posts=Post.all# 全てのレコードを@postsに代入endend

このまま画面表示について、まずはHTMLファイルの編集。

<h1>トップページ</h1>
<% @posts.each do |post| %> #インスタンス変数「@posts」から1つずつ変数「post」に代入
  <%= post.content %>  #1番目のレコードのcontentのみ表示
  <%= post.created_at %>  #1番目のレコードのcreated_atのみ表示
<% end %>

続いて、「app/assets/stylesheets」ディレクトリ内の、「posts.scss」を編集。
デザインに合わせて整えていきます。

※以下、ActiveRecordクラスのメソッドの一例

⑩　新しく別のページも追加してみる

・まずはルーティングの設定。
以下を追記（HTTPメソッド：GET、アクション：new ➡︎ ページを表示する操作のみを行う時、新規投稿ページを表示するリクエストに対応して動く）。

Rails.application.routes.drawdoget'posts',to: 'posts#index'get'posts/new',to: 'posts#new'#追記end

・ターミナルで以下を実行。

$ rails routes

Prefix      Verb    URI Pattern           Controller#Action
posts       GET     /posts(.:format)      posts#index
posts_new   GET     /posts/new(.:format)  posts#new

・コントローラーに追記。

classPostsController<ApplicationControllerdefindex@posts=Post.allenddefnew#追記end#追記end

・ビューファイルの作成。
「app/views/posts」ディレクトリに、「new.html.erb」を作成。

<h1>新規ページ</h1>

　
　
以上です。