【駆け出し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>

　
　
以上です。