【駆け出しWEBエンジニアのためのメモ】WEBアプリ作成の作業フロー_基礎（Rails）

#背景
最近、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アクションという名前のアクション

```config/routes.rb
Rails.application.routes.draw do
  get 'posts', to: 'posts#index'
end
```

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

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

# ルーティングを確認
$ rails routes
Prefix  Verb  URI Pattern       Controller#Action
posts   GET   /posts(.:format)  posts#index
```
※以下、リクエストの種別を示すHTTPメソッド

| HTTPメソッド | どのような時に用いるリクエストか |
|:--|:--|
| GET | ページ表示 |
| POST | データ登録 |
| PUT | データ変更 |
| DELETE | データ削除 |

##⑥ コントローラーを作成
ターミナルで以下を実行。

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

```app/controllers/posts_controller.rb
class PostsController < ApplicationController

  def index  # indexアクションを定義した
  end

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

| アクション名 | 動作 |
|:--|:--|
| index | 一覧表示ページを表示するリクエストに対応 |
| new | 新規投稿ページを表示するリクエストに対応 |
| create | データの投稿を行うリクエストに対応 |
| show | 個別詳細ページを表示するリクエストに対応 |
| edit | 投稿編集ページを表示するリクエストに対応 |
| update | データの編集を行うリクエストに対応 |
| destroy | データの削除を行うリクエストに対応 |

##⑦　ビューファイルを作成
・ビューファイルは「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での記述をしてブラウザに表示させることができる。

```app/controllers/posts_controller.rb
class PostsController < ApplicationController
  def index
    @post = "コントローラーで定義したインスタンス変数を確認"
  end
end
```
```app/views/posts/index.html.erb
<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　（マイグレーションファイル（仕様書・設計図））

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

```db/migrate/20XXXXXXXXXXXX_create_posts.rb
class CreatePosts < ActiveRecord::Migration[5.2]
  def change
    create_table :posts do |t|  #postsテーブルを作成する
      t.text :content  #text型のcontentカラムを追加
      t.timestamps
    end
  end
end
```
※「型」の種類

| 型 | どのような型か | 用途 |
|:--|:--|:--|
| integer | 数字 | 金額、回数など |
| string | 文字(短文) | ユーザー名、メールアドレスなど |
| text | 文字(長文) | 投稿文など |
| boolean | 真か偽か | はい・いいえの選択肢など |
| datetime | 日付と時刻 | 作成日時、更新日時など |


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

```
$ pwd  # my_appのディレクトリにいることを確認する
$ rails db:migrate  # マイグレーションを実行する
```
Sequel Proを起動し、my_app_developmentデータベース内にpostsテーブルがあるか、またpostsテーブル内にcontentカラムがあるかを確認。


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

```app/controllers/posts_controller.rb
class PostsController < ApplicationController
  def index
    @post = Post.find(1)  # 「@post」というインスタンス変数を定義し、1番目のレコードに情報を全て代入
  end
end
```
もし、1番目のレコードに複数個の値が存在していたら、正しく表示されない。
以下の方法で、特定のカラムだけを表示する。

```app/views/posts/index.html.erb
<h1>例</h1>
<%= @post.content %>
<%= @post.created_at %>
```
そのほか、全てのデータを取得できるようにコントローラーを編集した状態で、eachメソッドで1つずつ順々に複数個の表示をさせることもできる。

```app/controllers/posts_controller.rb
class PostsController < ApplicationController
  def index
    @posts = Post.all  # 全てのレコードを@postsに代入
  end
end
```
このまま画面表示について、まずはHTMLファイルの編集。

```app/views/posts/index.html.erb
<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クラスのメソッドの一例

| メソッド | 用途 |　例　|
|:--|:--|:--|
| all | テーブルの全てのデータを取得 | Post.all |
| find | テーブルのレコードの内、ある1つのデータを取得 | Post.find(1) |
| new | クラスのインスタンス（レコード）を生成 | Post.new |
| save | クラスのインスタンス（レコード）を保存 | Post.save |

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

```config/routes.rb
Rails.application.routes.draw do
  get '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
```

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

```app/controllers/posts_controller.rb
class PostsController < ApplicationController
  def index
    @posts = Post.all
  end

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

```app/views/posts/new.html.erb
<h1>新規ページ</h1>
```
　
　
以上です。