Home » ruby » railsアプリに対してCRUD(作成,読み出し,更新,削除)の操作をしていこうの巻

railsアプリに対してCRUD(作成,読み出し,更新,削除)の操作をしていこうの巻

環境

ruby 2.4.1
ruby on rails 5.1.3
CentOS 7.3

今回はミニブログのような railsアプリ を作成して、そのアプリにCRUD(create(作成),read(読み出し),update(更新),削除(destroy))操作の機能を付加していこうと思ってます。

ruby on rails の2つの主要の基本理念をおさらいしておきます

  • 同じことを繰り返すな (Don’t Repeat Yourself: DRY): DRYはソフトウェア開発上の原則であり、「システムを構成する知識のあらゆる部品は、常に単一であり、明確であり、信頼できる形で表現されていなければならない」というものです。同じコードを繰り返し書くことを徹底的に避けることで、コードが保守しやすくなり、容易に拡張できるようになり、そして何よりバグを減らすことができます。

  • 設定より規約が優先される (Convention Over Configuration): Railsでは、Webアプリケーションで行われるさまざまなことを実現するための最善の方法を明確に思い描いており、Webアプリケーションの各種設定についても従来の経験や慣習を元に、それらのデフォルト値を定めています。このようにある種独断でデフォルト値が決まっているおかげで、開発者の意見をすべて取り入れようとした自由過ぎるWebアプリケーションのように、開発者が延々と設定ファイルを設定して回らずに済みます。

上記のふたつを要約すると 同じコードは書かないこととRails固有の規約の遵守。プログラミング経験が少い方は難しい部分はありますが解説しながらやっていこうと思います。

 

現段階のバージョンを確認

$ ruby -v
ruby 2.4.1p111
$ sqlite3 --version # railsアプリを作成する際に自動的に入るので意識しなくても大丈夫です。
3.7.17
$ rails -v
Rails 5.1.3
$ gem i bundler # bundlerを入れていない方は入れておいてください。 ※ bundlerがないとrailsをインストールできません
$ gem i rails # railsをインストールしていない方はこのコマンドを実行してください

ruby のインストールをすましていない方は下記のリンクでインストールしてください。

Railsアプリ作成

railsコマンドで railsアプリを作成します

$ rails new blog

posts に移動する

cd blog

ファイル関係は以下のようなものになります。

ファイル/フォルダ 目的
app/ ここにはアプリケーションのコントローラ、モデル、ビュー、ヘルパー、メイラー、そしてアセットが置かれます。以後、本ガイドでは基本的にこのディレクトリを中心に説明を行います。
bin/ ここにはアプリケーションを起動したりデプロイしたりするためのRailsスクリプトなどのスクリプトファイルが置かれます。
config/ アプリケーションの設定ファイル (ルーティング、データベースなど) がここに置かれます。詳細についてはRailsアプリケーションを設定する を参照してください。
config.ru アプリケーションの起動に必要となる、Rackベースのサーバー用のRack設定ファイルです。
db/ 現時点のデータベーススキーマと、データベースマイグレーションファイルが置かれます。
Gemfile
Gemfile.lock
これらのファイルは、Railsアプリケーションで必要となるgemの依存関係を記述します。この2つのファイルはBundler gemで使用されます。Bundlerの詳細についてはBundlerのWebサイトを参照してください。
lib/ アプリケーションで使用する拡張モジュールが置かれます。
log/ アプリケーションのログファイルが置かれます。
public/ このフォルダの下にあるファイルは外部 (インターネット) からそのまま参照できます。静的なファイルやコンパイル済みアセットはここに置きます。
Rakefile このファイルには、コマンドラインから実行できるタスクを記述します。ここでのタスク定義は、Rails全体のコンポーネントに対して定義されます。独自のRakeタスクを定義したい場合は、Rakefileに直接書くと権限が強すぎるので、なるべくlib/tasksフォルダの下にRake用のファイルを追加するようにしてください。
README.rdoc アプリケーションの概要を説明するマニュアルをここに記入します。このファイルにはアプリケーションの設定方法などを記入し、これさえ読めば誰でもアプリケーションを構築できるようにしておく必要があります。
test/ Unitテスト、フィクスチャなどのテスト関連ファイルをここに置きます。テストについてはRailsアプリケーションをテストするを参照してください。
tmp/ キャッシュ、pid、セッションファイルなどの一時ファイルが置かれます。
vendor/ サードパーティによって書かれたコードはすべてここに置きます。通常のRailsアプリケーションの場合、外部からのgemファイルをここに置きます。

引用元 https://railsguides.jp/

railsアプリの実装

serverの起動方法

$ rails s # rails server の省略形
=> Booting Puma
=> Rails 5.1.3 application starting in development on http://localhost:3000
=> Run `rails server -h` for more startup options
Puma starting in single mode...
* Version 3.10.0 (ruby 2.4.1-p111), codename: Russell's Teapot
* Min threads: 5, max threads: 5
* Environment: development
* Listening on tcp://0.0.0.0:3000
Use Ctrl-C to stop

※javascript系ランタイムがインストールされていないとサーバーは起動しません

動作しているか確認するために http://localhost:3000 にアクセスして確認してみてください

rootを設定していない場合は上記の画面が表示されます。

 

CRUD

作成 (create)、読み出し (read)、更新 (update)、削除 (destroy) のロジックを実際に書いていきます

コントローラーを railsコマンドで作成

$ rails g controller posts

タイトルとそのタイトルに付随する内容を扱うテーブルを作成していきます
では上記の内容でモデルを railsコマンドで作成

$ rails g model Post title:string text:text

上記のコマンドを実行するとマイグレーションファイルといわれるものが生成されます。
マイグレーションファイルにはデータベースに対する情報が記載されています。
db/migrate/時刻_create_posts.rb にデータベースの構造の変更を加える設定が記載されています。

class CreatePosts < ActiveRecord::Migration[5.1]
  def change
    create_table :posts do |t|
      t.string :title # タイトル
      t.text :text # 内容

      t.timestamps # 日時に関する情報が入ります。作成時刻や更新時刻などが入ります
    end
  end
end

ではマイグレーションファイルを実行します

$ rails db:migrate
== 20170823195310 CreatePosts: migrating ======================================
-- create_table(:posts)
   -> 0.0103s
== 20170823195310 CreatePosts: migrated (0.0120s) =============================

migrateを実行するとデータベースの構造が変わります。
今回は postsテーブルを作成して、タイトルと内容のカラムを追加しました。

入力ページ

内容を登録するフォームをパーシャルで作成していきます。

何度も使うビューをパーシャルとして作成して必要に応じて使うものです
便利な機能なので覚えておくと開発スピードがあがると思います。

※パーシャルファイルを作成する場合、先頭にアンダースコア(_)をつけてファイルを作成します

app/views/posts/_form.html.erb ファイルをパーシャルで作成します

<%= form_for @post do |f| %>
  <p>
    <%= f.label :title %><br>
    <%= f.text_field :title %>
  </p>
  <p>
    <%= f.label :text %><br>
    <%= f.text_area :text %>
  </p>
  <p>
    <%= f.submit %>
  </p>
<% end %>

このファイルはパーシャルなの他のビューにフォームを出力できます。
今回は新規作成のページと編集ページのファイルにパーシャルを追加します。
このようにパーシャルを使い回すことで同じコードを何度も書かずにすむので、
railsの基本理念の DRY に遵守したコードの書き方であると言えます。

newページでパーシャルを実際に使ってみます。
app/views/posts/new.html.erb というファイルを作成します


<h1>新規作成</h1>


<%= render "form" %>
newページでフォームを挿入することができました

詳細ページ

フォームが完成したので詳細ページの作成をしていきます
詳細ページは登録後のページになります。
app/views/posts/show.html.erb ファイルを作成します。

<p>
    <strong>Title:</strong>
    <%= @post.title %>
  </p>
   
  <p>
    <strong>Text:</strong>
    <%= @post.text %>
  </p>
  <%= link_to 'home', posts_path %>  <!-- 未実装 -->

コントーラーの設定

先程作成したコントローラーの設定をしていきます。

class PostsController < ApplicationController
before_action :set_post, only: [:show] # 指定したアクションを行う前に指定したメソッドを実行

    def show # before_actionでパラメータを受け取る
    end

    def new  
        @post = Post.new # モデルオブジェクト生成
    end

    def create
        @post = Post.new(post_params)

        @post.save # 標識に入ったものを保存する
        redirect_to @post # show ページに移ります
    end

    private
        def post_params
            params.require(:post).permit(:title, :text) # create, edit メソッドで使用。
        end
        
        def set_post
            @post = Post.find(params[:id]) # idを検索して取り出し、@post標識に値が入ります。
        end
end

コントローラーのコードを解説していきます
2行目 指定したアクションを行う前にパラメーターを標識にセット
4行目 @post標識にパラメーターがセットされているものを使用
8行目 newアクションでモデルオブジェクトを生成してform_forを使用可能にする
12行目 入力したデータを@post標識に代入
14行目 データを保存
15行目 showページにリダイレクト
18行目 外部から呼び出されないようにプライベート宣言をしてセキュリティを強化
20行目 postテーブルのtitleとtextのパラメーターの利用を許可
24行目 パラメーターを@post標識にセット

コントローラーを上記のように設定にしました。
今のままではページにアクセスできません。routingの設定をしないとページのアクセスができませんので次にrootの設定をします。
config/routes.rb を開いてください

Rails.application.routes.draw do
  resources :posts # リソースを指定することでpostsページ全体にアクセス可能に設定

  root 'post#index'  # 一覧ページをrootに設定 indexページはまだ設定をしてないのでアクセスできません
end

routingの設定が反映されているか確認します

$ rails routes
   Prefix Verb   URI Pattern               Controller#Action
    posts GET    /posts(.:format)          posts#index
          POST   /posts(.:format)          posts#create
 new_post GET    /posts/new(.:format)      posts#new
edit_post GET    /posts/:id/edit(.:format) posts#edit
     post GET    /posts/:id(.:format)      posts#show
          PATCH  /posts/:id(.:format)      posts#update
          PUT    /posts/:id(.:format)      posts#update
          DELETE /posts/:id(.:format)      posts#destroy
     root GET    /                         post#index

routingの設定がされているのが確認できました。
ではサーバーを起動して実際に記事の作成と詳細ページの機能を確認してみます
サーバーを起動して http://localhost:3000/posts/new にアクセスします


Create Post を押下してみます。押下するとshowページにリダイレクトします。


このように表示された場合、データベースにデータが保存されたことになります。

一覧ページ

indexページの設定をしていきます。
コントローラーでpostテーブルから全てのデータを取得の設定をしていきます
app/controllers/posts_controller.rb

    def index
       @posts = Post.all # 複数のデータが入っている場合は標識を複数形にする。 allで全データを取得
    end

全データの取得の設定をしたのでビューで表示をしていきます
app/views/posts/index.html.erb という名前のファイルを作成します

<h1>一覧ページ</h1>

<table>
<tr>
<th>タイトル</th>
<th>内容</th>
<th colspan="2"></th>
 </tr>

 <% @posts.each do |p| %> # postsの全データをひとつずつ取り出し 変数 p に代入
   
<tr>  # ハッシュのキーを指定して値を取り出す
     
<td><%= p.title %></td>
<td><%= p.text %></td>
<td><%= link_to 'Show', post_path(p) %></td>
<td><%= link_to 'Edit', edit_post_path(p) %></td># 編集ページにリンク 未実装
</tr>

 <% end %>
</table>

一覧ページの解説をしていきます
11行目 @postsデータを ひとつずつ p に代入
13行目〜14行目 変数 p のデータを取り出す
15行目〜16行目 link_toヘルパーでリンクを作成

サーバーを起動して http://localhost:3000 にアクセスしてみてください root設定をすればアクセスできます


アクセスしてみるとこのようなページになってます。

編集ページ

コントローラーに編集アクションを作成します。

before_action :set_post, only: [:show, :edit, :update] # 指定したアクションを行う前に指定したメソッドを実行
   def edit 
   end
   
   if @post.update(post_params)
      redirect_to @post
   else
      render 'edit'
   end

before_action に edit と update アクションを追加
edit アクションパラメーターを取得
update アクションで更新を行う。更新後 showページに遷移
編集に失敗した場合編集画面になる

編集を行うための設定をしました、次に編集ページを作成していきます。

app/views/posts/edit.html.erb というファイルを作成します

<h1>編集ページ</h1>

<%= render  "form" %>

これで編集の設定を完了しました。

削除機能

削除機能をコントローラーに設定していきます

before_action :set_post, only: [:show, :edit, :update, :destroy] # 指定したアクションを行う前に指定したメソッドを実行

    def destroy
        @post.destroy
        
        redirect_to posts_path
    end

destroy アクションを実行前にパラメーターを取得して削除を行い、ホーム画面に遷移。

削除リンクを index.html.erb に設置します


<h1>一覧ページ</h1>

<table>
 <tr>
   <th>タイトル</th>
   <th>内容</th>
   <th colspan="3"></th> <!-- 数値を増やす -->
 </tr>

 <% @posts.each do |p| %>
   <tr>
     <td><%= p.title %></td>
     <td><%= p.text %></td>
     <td><%= link_to 'Show', post_path(p) %></td>
     <td><%= link_to 'Edit', edit_post_path(p) %></td>
     <td><%= link_to 'destroy', post_path(p), method: :delete %></td> <!-- 削除リンクを追加 -->
   </tr>
 <% end %>
</table>

リンクが増えたので、colspanの数値を増やします。
削除リンクを設置する際に、デリートメソッドを送信し、削除を行う。

CRUD 操作が終わったのでこれで終わりとなります。
ruby on rails で開発をしていくにあたっては、基本理念をしっかりと熟知して開発をしていけばバグなどが発生しても、
解決していきやすくなると思うので、コードの省略と規約をしっかりと守って ruby on rails を楽しみましょう。

参考文献

,

コメントを残す

%d人のブロガーが「いいね」をつけました。