This article is a Private article. Only a writer and users who know the URL can access it.
Please change open range to public in publish setting if you want to share this article with other users.

More than 1 year has passed since last update.

Railsアプリケーション開発の基本手順書（この記事は自分専用のメモをベースに作成しているので、内容の誤りや説明の仕方などに問題があるかもしれません）

Last updated at 2023-05-09Posted at 2023-04-29

アプリケーションの新規作成手順

新規アプリケーションを作成する際、まずは以下の２つを行います。

Railsアプリケーションの新規作成
データベースの作成

【流れ】

①を実行すると、新規でrailsアプリケーション（さまざまなディレクトリやファイル）が作成されます。
①を実行した後、アプリのフォルダ（ここではappに相当）へ移動してください。(cd：チェンジディレクトリ)
②で、MySQL上にデータベースを作成しましょう。

【操作】

①：Railsアプリケーションの新規作成の入力コマンド

% rails _6.0.0_ new app -d mysql

※DBを使用するため、mysqlを使用するコマンドを最後に付けています。
※コマンドの構成：rails new アプリケーション名 -d データベース管理システム名
※以降は、config/database.ymlのencoding: utf8mb4をencoding: utf8へ変更してから実行する方が良い

②：データベースの作成
"app"というアプリを作成したので、そのフォルダに移動し、データベースを作成します。

% rails db:create

作成した後、ターミナル上に以下の表示がされれば、成功となります。

% Created database 'app_development'
% Created database 'app_test'

※うまくいかない場合は、以下のコマンドを実行することも検討してください。

% bundle config --global build.mysql2 --with-opt-dir="$(brew --prefix openssl@1.1)"

①を実行する際に、このコマンドを実行して、設定を事前に済ませておく必要がありますが、一度設定されていれば、以降実行する必要はありません。Railsアプリケーションで用いる仕組みの一部を設定するコマンドを実行になります。

【確認】

ターミナル上で、rails sコマンドを実行することでローカルサーバーが立ち上がります。

% rails s

その後、以下のURLからローカルホストにアクセスできるかを確認することができます。
http://localhost:3000

アクセスすれば、以下のような画面が表示されます。

【Visual Studio Codeを開く】

Visual Studio上で、"app"のフォルダを開きましょう。

画像では、先に"projects"というフォルダを作成しており、そこに"app"を新規作成しています。

サンプル

\\wsl.localhost\Ubuntu\home\portfoliokns3\projects\app

一覧機能（indexアクション）を実装する手順

一覧機能の実装する際には、以下4つを行います。

①コントローラーの作成および設定
②ルーティングの設定
③モデルの作成　※MySQLと連携する必要がなければ、モデルの作成は不要の場合があります。
④ビューの作成

【流れ】

①で、コントローラーを作成し、コントローラーへ必要なアクションを記述してください。
②で、ルーティングの設定を行い、リクエストの振り分け設定をしてください。
③で、.erbファイルを新たに作成し、表示する画面を設定してください。
④で、モデルを作成し、データベースを作成してください。

【操作】

①コントローラーの作成および設定
アプリのディレクトリへ移動していることを確認した後、以下のコマンドを用いて、コントローラを生成してください。

% rails g controller items

意味：
rails g controller コントローラー名を実行すると、
items_controllerという名前が作成されます

app/controllers/items_controller.rb へ以下のように記述します。(＠はインスタンス変数といいます)

def index  # indexアクションを定義した例
  @item = "これはコントローラーで定義したインスタンス変数を確認するための文字列です"
  #@items = Item.all   #このインスタンス変数は、ここではまだエラーとなるため、コメントアウトしています。
end

②ルーティングの設定
config/routes.rb へ以下のようなコードを記入します。

Rails.application.routes.draw do
 get 'items', to: 'items#index'  #←このような記述を追加する
 #root to: 'items#index' #←ルートパスへ設定したい場合は、このように記述する  http://localhost:3000 からindexへ通じます。
end

意味：
itemsというパスに、GETメソッドでリクエストが送られてきたとき、
itemsコントローラーのindexアクションを呼び出す

③ビューの作成
app/views/itemsに、index.html.erbという拡張子のファイルを作成し、以下のような編集を加える。

<h1>トップページ</h1>
<%= @item %>

CSSの設定をしたい場合は以下から設定できます。（デザインについては状況に応じて、作ってください）
app/assets/stylesheets/posts.scss

その後、正しく表示されているかを、以下のURLから確認できます。
http://localhost:3000/item

④モデルの作成

% rails g model item

なおモデル名には単数形を使用します。
作成できれば、db/migrate/に20XXXXXXXXXXXX_create_posts.rbというファイルが生成されています。

マイグレーション

class CreatePosts < ActiveRecord::Migration[6.0]
  def change
    create_table :posts do |t|
      t.text :content   #←このような記述を追加する。ここがデータテーブルのカラム名となる。
      t.timestamps
    end
  end
end

マイグレーション実行

rails db:migrate

DBeaverでテーブルを確認してみる。
https://dbeaver.io/
ダウンロードは上記サイトから行えます。モデルおよびカラムが表示されていれば、問題ありません。

マイグレーションの状況を確認

% rails db:migrate:status

up：データベースに反映されている
down：データベース反映されていない状態。

マイグレーションに記述した変数名に誤りがあるなどは、以下のコマンドを使って、ロールバックして、もう一度、編集を行なった後、マイグレーション実行してください。

% rails db:rollback

※ロールバックせず、テーブルを削除した場合、トラブルに発展するので、十分な注意が必要となります。

投稿画面（newアクション）を作成する手順

新規投稿画面を実装する際には、以下の3つを行います。

①ルーティングの設定
②コントローラーの設定
③ビューの作成と設定

【流れ】

①で、ルーティングの設定をしてください。
②で、コントローラーへアクションを定義してください。
③で、.erbファイルを新たに作成し、新規投稿ページと遷移元ページを設定して、動作を確認してください。

【操作】

①ルーティングの設定
config/routes.rbへ以下のようなコードを記入します。

  root to: 'items#index'
  get 'items', to: 'items#index' 
  get 'items/new', to: 'items#new'

ターミナル上から、設定ができたかを、以下のコマンドで確認してください。

% rails routes

このコマンドを実行すると、各ルーティングの設定を確認することができます。以下の例では、items_newのアクションが設定されています。

②コントローラーの設定
コントローラーへアクション（以下の記述）を追加してください。

  def new
  end

③ビューの作成と設定
app/views/items/new.html.erb を作成し、記述してください。

<h1>新規投稿ページ</h1>
<%= form_with url: "/items", method: :post, local: true do |form| %>
  <%= form.text_field :content %>
  <%= form.submit '投稿する' %>
<% end %>

以下のコマンドで、表示を確認してください。
http://localhost:3000/items/new
以下のようなページが表示されます。

このページはitemを新たに投稿するためのページになります。※この時点では、まだ投稿ボタンを押しても、エラーとなります。

次に、新規投稿ページへ遷移するためのページを作成してください。
app/views/items/index.html.erb

<h1>トップページ</h1>
<%= link_to '新規投稿', '/items/new' %>
<% @items.each do |item| %>
  <div class="item">
    <div class="item-date">
      投稿日時：<%= item.created_at %>
    </div>
    <div class="item-content">
      <%= item.content %>
    </div>
  </div>
<% end %>

コントローラーのindexアクションを以下のように変更してください。

    def index
        #@item = "これはコントローラーで定義したインスタンス変数を確認するための文字列です"
        @items = Item.all #このインスタンス変数は、MySQLに保存されているitemsの情報を取得するコマンド
    end

その後、以下のURLにアクセスして、表示を確認してください。
http://localhost:3000

保存機能（createアクション）を実装する手順

新規投稿画面を実装する際には、以下4つの実行が必要となります。

【流れ】

ルーティングの設定
コントローラーの設定
ビューの作成
保存機能の実装

【操作】

①ルーティングの設定
routes.rbに、以下を追記しましょう。

post 'items', to: 'items#create'

ターミナル上から、設定ができたかを、以下のコマンドで確認してください。

% rails routes

ルーティングにcreateアクションが設定されます。HTTPメソッドがGETではなく、POSTであることがポイントになります。items_newに対して、POSTメソッドを指定することで、クライアント側からサーバー側へデータを含めてリクエストすることができます。

②コントローラーの設定
コントローラーへアクション（以下の記述）を追加してください。

def create
end

③ビューの作成
app/views/items/create.html.erb を作成し、記述してください

<h1>投稿が完了しました</h1>
<%= link_to 'トップページに戻る', '/items' %>

④保存機能の実装
コントローラーのcreateアクションへ、保存するための処理を記述します。このコードはあくまでサンプルであるため、Strong Parametersを使用していません。この場合、意図しないパラメータが送信された場合、セキュリティ上の問題となるので、このコードは量産しないようにしてください。

Item.create(content: params[:content])

以下のURLにアクセスして、表示や動作を確認してください。
http://localhost:3000/items

登録したい項目(item)を入力し、投稿します。

投稿が完了すると、完了ページ(create.html.erb)へ遷移します。

トップページに戻ることもできます。

MySQL側にも投稿した項目も保存されています。

補足事項.

生成したファイル一式を削除する場合は、以下のコマンドを利用します。

% rails d ファイルの種類 削除するファイル名

アクションの種類と動きは以下の通り。

index 一覧表示ページを表示するリクエストに対応して動く
new 新規投稿ページを表示するリクエストに対応して動く
create データの投稿を行うリクエストに対応して動く
show 個別詳細ページを表示するリクエストに対応して動く
edit 投稿編集ページを表示するリクエストに対応して動く
update データの編集を行うリクエストに対応して動く
destroy データの削除を行うリクエストに対応して動く

カラムの型は以下の通り。

integer 数値金額、回数など
string 文字(短文) ユーザー名、メールアドレスなど
text 文字(長文) 投稿文、説明文など
boolean 真か偽かはい・いいえの選択、合格・不合格のフラグなど
datetime 日付と時刻作成日時、更新日時など

フォームを設定する場合、注意すべき点

resoucesを設定しなければならない。

ユーザー管理機能の実装

●目的:Gemをインストールする

①deviseのGemをGemfileに追加

gem 'devise'

②ターミナル上でbundle installを実行する

bundle install

③ターミナル上でローカルホストサーバーを再起動する

rails s

④ターミナル上でGemをインストールする

rails g devise:install

以下の2つの文言が表示されれば、成功。

config/initializers/devise.rb
config/locales/devise.en.yml

参考
https://master.tech-camp.in/v2/curriculums/4836

●目的：Userモデルを作成する

①ターミナル上で以下のコマンドを実行

rails g devise user

以下のような表示がされれば、成功。

# 中略
invoke  active_record
create    db/migrate/20200523092621_devise_create_users.rb
# 中略
create    app/models/user.rb
insert    app/models/user.rb
route  devise_for :users

●usersテーブルに追加するカラムを追記する

①20221010140819_devise_create_users.rbにカラムを追記
例.t.string :name, null: false null: falseにするとNot Null制約で登録される。

②ターミナル上で以下のコマンドを実行

rails db:migrate

③カラムが登録されてかは、seaquelproを確認

補足：rails db:migrate:status で upになっていることも確認しよう。

④ローカルサーバーを再起動

rails s

参考
https://master.tech-camp.in/v2/curriculums/4837

※devise:viewsで関連するファイルを出力させたい場合は、以下のコード。

rails g devise:views

●ログインしていない場合はログイン画面に遷移するように実装
app/controllers/application_controller.rbに以下を追加

  before_action :authenticate_user!を追加

●ユーザー名をDBへ保存できるように設定
app/controllers/application_controller.rbに以下を追加

  before_action :configure_permitted_parameters, if: :devise_controller?

  private
  def configure_permitted_parameters
    devise_parameter_sanitizer.permit(:sign_up, keys: [:name])
  end

※ユーザーテーブルに新たなカラムを追加した場合、↑で情報が登録できるようにしてあげる必要がある。

なぜならdeviseのコントローラーは、Gemに書かれていて直接編集ができないため、applicationコントローラーから登録できるようにしなければならない。

動作の確認
http://localhost:3000/　へアクセスすると、ログイン画面へ遷移することを確認してください。

問題なければ、アカウントを新規作成して、作成直後にログイン画面に移るかを確認してください。

●ユーザー編集画面が表示されるように、ルーティングとコントローラを編集
config/routes.rbへ以下を追加

resources :users, only: [:edit, :update]

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

rails g controller users

app/controllers/users_controller.rbへアクションを定義

def edit
end

http://localhost:3000/users/1/edit へアクセスして編集画面が出ればOK

●ユーザー情報が更新されるように実装する(updateアクション)
app/controllers/users_controller.rbへアクションを定義

  def update
    current_user.update(user_params)
  end

  private

  def user_params
    params.require(:user).permit(:name, :email)
  end

●ログアウトを実装する
参考

<%= link_to "ログアウト", destroy_user_session_path, method: :delete, class: 'btn'%>

deviseについて

●deviseの処理に関わるコントローラーはGemに記述されている＝編集できない
●そのためapplication_controllerにストロングパラメータを定義しておいて、処理を読み込ませる

app/controllers/application_controller.rb

class ApplicationController < ActionController::Base
  before_action :configure_permitted_parameters, if: :devise_controller?

  private
  def configure_permitted_parameters
    devise_parameter_sanitizer.permit(:sign_up, keys: [:nickname])
  end
end

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up