rails アプリ作成クイックスタート【初心者向け】

Webアプリの基本crudとは

• create: 作成処理
• read: 読み込み処理
• update: 更新
• delete: 削除

これらの頭文字をとってcrudと言われます。

ブログの記事で例えるなら、記事作成、記事読み込み（一覧や記事）、更新（内容の変更）、削除（記事の削除）ですね。

Webアプリのフレームワークを触る際には、まずcrudの操作を確かめると全体的なイメージが湧きやすい印象です。

Railsでのcrud

今回はrailsでのcrudの実装方法について紹介したいと思います。

railsでのcrud作成はscaffoldで一応作成できますが、自動生成された、コードの中身を理解していないと、実際に業務で作成する際には非常に困ると思います。

rails g model や rails g controller などのコマンドを使用して今回は解説します。

またせっかくなので、bootstrapという、Webデザインの知識がなくても、それなりに綺麗にしてくれるフロントエンドのフレームワークを使用して、綺麗にcrudの処理を作ってみましょう。

一例として投稿機能を作りましょう。

テンプレートエンジンはERBを使用します。

対象読者

• これからrailsを勉強しようという方
• railsの環境はとりあえずできている方

環境

• MacOS Catalina ver10.15.3
• ruby 2.7.0
• Rails 6.0.3
• git version 2.26.2

プロジェクト作成

まずは、今回のプロジェクトを作成するためにプロジェクトを作成します、

rails new アプリケーション名 [オプション]

この際データベースを使用する際は[オプション]の部分に、利用するデータベースとを入れましょう、今回はなしでも大丈夫です。なしの場合はSQlite

rails new crud-quickstart

ディレクトリをrailsのルートに移動します、

cd crud-quickstart

MySQLやPostgresqlなどのDBを使用してる際はDBを作成します。

rails db:create

rails s

サーバーが起動 http://localhost:3000 にアクセスしてください

Bootstrapの導入

導入でも記述しますが、アプリケーションを作成するには、見た目がそこそこいいとテンションがあがりますね。しかし、画面のタイトルやメニュバーやテーブルなど、全てをかっこいい感じにCSSで書くのは工数的に無理なシーンも多いと思います。そこで今回はbootstrapというフロントエンドフレームワークを使用します。 自分も二社Railsの開発会社で働いてますが、両方で使用しているので、そこそこ実務でも使えるイメージです。

Railsの5ではgemでbootstrapをインストールしてましたが、Rails6ではyarnというパッケージ管理ツールが導入されたのでこちらにインストールします。 以下のコマンドをターミナルで実行してください、それでインストール完了です。

作業は全て、railsのルートで行います

yarn add bootstrap@4.3.1 jquery popper.js
mkdir app/javascript/src
touch app/javascript/src/application.scss
echo 'import "bootstrap"' >> app/javascript/packs/application.js
echo 'import "../src/application.scss"' >> app/javascript/packs/application.js
echo '@import "~bootstrap/scss/bootstrap";' >> app/javascript/src/application.scss

コマンドについて上から説明します

• yarnでbootstrap jquery popperをインストールします。
• スタイルシートの設定を記述するapp/javascript/srcディレクトリを作成します。
• app/javascript/src/application.scssファイルを作成します。
• import "bootstrap"をapp/javascript/packs/application.jsに記述します。これによりbootstrapのjsを読み込めます。
• import "../src/application.scss"をapp/javascript/packs/application.jsに記述します。これによりapplication.scssを読み込むことができます。
• @import "~bootstrap/scss/bootstrap";をapp/javascript/src/application.scssに記述します。これでbootstrapのcssを読み込むことができます。

これで下準備は完了です。

投稿ページのモデルを作成する

モデル作成コマンド

rails g model [モデル名] [属性名:データ型 属性名:データ型] [オプション]

実際にモデルを作成

今回は投稿機能を作りたいので、postモデルを作成します。

$ rails g model post name:string

このコマンドで自動でマイグレーションファイルが作成されたので、そのままマイグレートしてDBに反映します。

rails db:migrate

投稿ページのコントローラーを作成する。

コントローラー作成コマンド

rails g controller コントローラー名 [アクション名] [オプション]

実際にコントローラーを作成

getのアクションであるindex,show,new,editを指定してジェネレータを動かします。

rails g controller posts index new edit

今回はルーティング、rootにpostsコントローラーの一覧画面を追加します。

[config/routes.rb]

Rails.application.routes.draw do
+  root to: 'posts#index'
+ 
-  get 'posts/index'
   get 'posts/new'

resourcesとか便利な機能あるんですが、今回はgetとかpostとかのrestapi準拠で作ってみます。

一度サーバーを停止して再起動して http://localhost:3000 にアクセスしてみます。以下のようになれば下準備は完了です

新規登録機能(Create)を実装する

新登録機能を追加しましょう

ユーザーの操作としては一覧画面から、「新規登録画面」のリンクがあるのでそれをクリックして、登録フォームに移動し、そこで、値を入力して「登録する」のボタンを押すと登録が完了するものを作成します。

シーケンス図は以下のような感じです。

sequenceDiagram
  participant index as 一覧画面(index)
  participant new as 新規登録画面(new)
  participant create as createアクション
  participant database as データベース
  index ->new: 一覧画面の「新規作成」から新規登録画面に遷移
  new ->create: 値を入力して登録
  create ->database: 入力された値をデータベースに登録
  create -->index: データが保存されたら一覧画面に
  database -->index: データベースに保存されてる内容を一覧で表示

一覧画面から作っていきます。

一覧画面に新規リンクを追加する

[app/views/posts/index.html.erb]

<h1>投稿一覧</h1>

<%= link_to '新規登録', posts_new_path, class: 'btn btn-primary' %>

新規登録画面作成の流れ

まずnewアクションで新規登録ようの画面を作ります。 次にpost先のcreateアクションで、データベースに値を追加します。

新規登録画面ようのアクションを作成する

フォームをスムーズに描画するために、Postオブジェクトを作成して、インスタンス変数@postに代入します。

@post = Post.newを追記します。

[app/controllers/posts_controller.rb]

class PostsController < ApplicationController
   def index
   end
 
   def new
+    @post = Post.new
   end

新規登録画面のビューを実装する

[app/views/posts/new.html.erb]

<h1>新規投稿</h1>

<div class="nav justify-content-end">
  <%= link_to '一覧', "/", class: 'nav-link' %>
</div>

<%= form_with url: "/posts", local: true do |f| %>
  <div class= "form-group">
    <%= f.label :name %>
    <%= f.text_field :name, class: 'form-control' %>
  </div>
  <%= f.submit "登録する", class: 'btn btn-primary' %>
<% end %>

url: "/posts"の遷移先がないとエラーになるので、以下をルーティングに追加します

[config/routes.rb]

  post '/posts', to: 'posts#create'

post先のcreateアクションを作成する

[app/controllers/posts_controller.rb]

以下を追記します

  def create
    post = Post.new
    post.name = params[:name]
    post.save
    redirect_to root_path
  end

コーディングの説明します。

• post = Post.newでPostモデルをpostに代入
• パラメータできた:nameをpostのnameに代入
• post.saveしてrootにリダイレクト

さらに凝りたい人はストリングパラメータとかあるんで、調べてみてください！

データが保存されたら一覧画面に戻るまでできました。

続いて、データベースに保存されている内容を一覧画面に表示ですね！

データベースに保存されている内容を一覧画面に表示

以下を追記してください。

[app/controllers/posts_controller.rb]

def index
  @posts = Post.all
end

@postsにPostのレコードの全てを代入します。

@postsで取得したレコードを表示するスクリプトをviewに書きます。

以下を追記します

[app/views/posts/index.html.erb]

<table class="table table-hover">
  <tbody>
    <tr>
      <th> ID </th>
      <th> 内容 </th> 
    </tr>    
    <% @posts.each do |post| %>
    <tr>
      <td><%= post.id %></td>
      <td><%= post.name %></td>
    </tr>
    <% end %>
  </tbody>
</table>

以下のようにレコードの値がしっかり表になっていたら成功です

ここでの改善点はi18nなどを使用して、日本語の部分を国際化するとかですね、 あとはデータが膨大になるとページネーションももちろん必要だと思います。 いずれも要件しだいですね。

ここまでのまとめ

ここまでのまとめとしては、crudのうちのcreateとreadつまりは作成と表示ですね 残りはupdate（更新)とdelete(削除)ですね。 ここができれば、Webアプリとしての基本は抑えたことになるので頑張っていきましょう！

updateとdeleteシーケンス図

更新と削除の流れはこんな感じです。

sequenceDiagram
  participant index as 一覧画面(index)
  participant edit as 編集画面(edit)
  participant update as updateアクション
  participant delete as deleteアクション
  participant database as データベース
  index ->edit: 一覧画面の「編集」から編集画面に遷移
  edit ->update: 値を入力して更新
  update ->database: 入力された値をデータベースで更新
  update -->index: データが保存されたら一覧画面に
  index ->delete: 一覧画面から「削除」でdeleteメソッドに遷移
  delete -> database: データベースから削除
  delete -->index: 削除されたら一覧画面に

早速作成していきましょう。

editとupdateとdeleteのルーティングを設定する

[config/routes.rb]

  get '/posts/:id/edit', to: 'posts#edit'
  patch '/posts/:id' , to: 'posts#update'
  delete '/posts/:id', to: 'posts#delete'

editは入力画面なのでgetですね更新はpatchで削除はdeleteメソッドですね。

一覧画面から遷移を作成

シーケンス図を見ると一覧画面からはeditへのリンクとdeleteメソッドでの遷移がありますね、それを実装して行こうと思います。

[app/views/posts/index.html.erb]

<h1>投稿一覧</h1>
<%= link_to '新規登録', posts_new_path, class: 'btn btn-primary' %>

<table class="table table-hover">
  <tbody>
    <tr>
      <th> ID </th>
      <th> 内容 </th>
      <th></th>
    </tr>    
    <% @posts.each do |post| %>
    <tr>
      <td><%= post.id %></td>
      <td><%= post.name %></td>
      <td>
	<%= link_to "編集", "/posts/#{post.id}/edit", class: 'btn btn-primary' %>
	<%= link_to "削除", "/posts/#{post.id}", method: :delete,data: { confirm: "投稿を削除しますか？" }, class: 'btn btn-danger' %>
      </td>
    </tr>
    <% end %>
  </tbody>
</table>

edit画面はgetなので普通にリンクを作成します deleteはdeleteメソッドなのでリンクに定義しておきます、これで一覧画面は完了です。

以下のようになります！

次は編集画面を作成しましょう。 controllerに@postを追記します。

[app/controllers/posts_controller.rb]

  def edit
+    @post = Post.find(params[:id])
  end

[app/views/posts/edit.html.erb]

<h1>編集画面</h1>

<div class="nav justify-content-end">
  <%= link_to '一覧', "/", class: 'nav-link' %>
</div>

<%= form_with url: "/posts/#{@post.id}", local: true, method: :patch do |f| %>
<div class= "form-group">
  <%= f.label :name %>
  <%= f.text_field :name, class: 'form-control' %>
</div>
<%= f.submit "更新する", class: 'btn btn-primary' %>
<% end %>

form_withでupdateのmethodのpatchを指定しています、これでupdateのアクションに遷移できます。 画面ができたのでupdateとdeleteのアクションを追記します。

[app/controllers/posts_controller.rb]

  def update
    post = Post.find(params[:id])
    post.name = params[:name]
    post.save
    redirect_to root_path
  end

  def delete
    post = Post.find(params[:id])
    post.delete
    redirect_to root_path
  end

以上で完了です！

Yarn not installed. Please download and install Yarn from https://yarnpkg.com/lang/en/docs/install/

brew install yarn
rails  webpacker:install
~~[log]
✨  Done in 5.31s.
Webpacker successfully installed 🎉 🍰
~~[log]