背景
最近、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.drawdoget'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
classPostsController<ApplicationControllerdefindex# indexアクションを定義したendend
※以下、定義できるアクションの種類
| アクション名 | 動作 |
|---|
| 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
classPostsController<ApplicationControllerdefindex@post="コントローラーで定義したインスタンス変数を確認"endend
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
classCreatePosts<ActiveRecord::Migration[5.2]defchangecreate_table:postsdo|t|#postsテーブルを作成するt.text:content#text型のcontentカラムを追加t.timestampsendendend
※「型」の種類
| 型 | どのような型か | 用途 |
|---|
| integer | 数字 | 金額、回数など |
| string | 文字(短文) | ユーザー名、メールアドレスなど |
| text | 文字(長文) | 投稿文など |
| boolean | 真か偽か | はい・いいえの選択肢など |
| datetime | 日付と時刻 | 作成日時、更新日時など |
ターミナルで以下を実行し、データベースのテーブルを作成
$ pwd # my_appのディレクトリにいることを確認する
$ rails db:migrate # マイグレーションを実行する
Sequel Proを起動し、my_app_developmentデータベース内にpostsテーブルがあるか、またpostsテーブル内にcontentカラムがあるかを確認。
⑨ コントローラーでデータベースの情報を取得
app/controllers/posts_controller.rb
classPostsController<ApplicationControllerdefindex@post=Post.find(1)# 「@post」というインスタンス変数を定義し、1番目のレコードに情報を全て代入endend
もし、1番目のレコードに複数個の値が存在していたら、正しく表示されない。
以下の方法で、特定のカラムだけを表示する。
app/views/posts/index.html.erb
<h1>例</h1>
<%= @post.content %>
<%= @post.created_at %>
そのほか、全てのデータを取得できるようにコントローラーを編集した状態で、eachメソッドで1つずつ順々に複数個の表示をさせることもできる。
app/controllers/posts_controller.rb
classPostsController<ApplicationControllerdefindex@posts=Post.all# 全てのレコードを@postsに代入endend
このまま画面表示について、まずは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.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
・コントローラーに追記。
app/controllers/posts_controller.rb
classPostsController<ApplicationControllerdefindex@posts=Post.allenddefnew#追記end#追記end
・ビューファイルの作成。
「app/views/posts」ディレクトリに、「new.html.erb」を作成。
app/views/posts/new.html.erb
以上です。
