Ruby on Rails アプリ製作の基本的な手順

Railsの勉強としていくつかのwebappを作ったときのノートを残していたので，ブログに載せます．

ブログを書くのを後回しにしていたら年が明けてしまった．

記事の目的

Ruby on Railsの基本的な流れを掴む．
基本コマンドのチートシートとして．

作るもの

mygist という名前のウェブアプリ．
機能は次の2つ
- 投稿された記事の一覧を表示
- 記事を新たに投稿する

Ruby と HTML5が分かっていれば出来る，という物では無かったので大変でした…

前提

環境構築済みであること
- rails，ruby-devはもちろん，それ以外のパッケージについてもエラーが出たらその都度エラーを読んで，必要なものをインストールする．
詳しい説明はしない．
- 流れを把握することが目的であるため．
- 他のウェブサイトが詳しい．記事末尾の参考サイトを参照してください．
bash on ubuntu で操作を行う．

やる

準備

プロジェクト作成

rails new rails_gist

bootstrap を Gemfile に追加

gem 'bootstrap'
gem 'jquery-rails'

いつもの．必要なGemを一括インストールする．

bundle install

サーバを立てる．デフォルトでは localhost:3000にアクセスできる．

rails server

controller

コントローラを作る．

rails generate controller mygist

app/controllers/mygist_controller.rb を開き，アクションを定義する．
名前は予約語で無ければ何を指定しても構わないが，以下の7つが基本．

class MygistController < ApplicationController
    def index
        # 一覧を表示
    end
    def new
        # 新規作成するためのフォームを返す
    end
    def create
        # 作成する．(POST)
    end
    def show
        # 特定のコンテンツを表示する．
    end
    def edit
        # 編集するためのHTMLフォームを1つ返す
    end
    def update
        # 特定のコンテンツを更新する
    end
    def destroy
        # 特定のコンテンツを削除する．
    end
end

config/routes.rb でルーティングを設定する．
get "mygist/" => "mygist#index" …でも良いけれど，こちらの記法を試す．
http://guides.rubyonrails.org/routing.html の通り，この1行で7つのルーティングが作成される．
定義するアクション名の統一に役立ちそう．

Rails.application.routes.draw do
  resources :mygist
end

view

…bootstrapが適応するのを忘れていたので適応する．
app/assets/stylesheets．
application.css を scss にする．
@import 'bootstrap' を加える．
app/views/mygist/ に view を作成する．
ファイル名は #{viewname}.html.erb ．
とりあえず， index new の 2つのviewを作っておく．
erbの中身を書き込んでいく．まずはindexから．
デザインはbootstrapで適当に書けばそれっぽくなる気がする
軽い気持ちでbootstrap4に移行したらぜんぜん違う…
- panel -> card とか．
index.html.erb

<div class="container">
    <h2>my gist</h2>
    <ul class="nav nav-pills" style="margin: 20px;">
        <li class="nav_item"><a class="nav-link active" href="./mygist/new">new</a></li>
    </ul>

    <div class="container">
        <div class="card">
            <div class="card-header">
                title
            </div>
            <div class="card-block">
                <pre style="margin: 10px;">contents</pre>
                <ul class="nav nav-pills">
                    <li class="nav_item"><a class="nav-link" href="#">edit</a></li>
                    <li class="nav_item"><a class="nav-link" href="#">remove</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

new.html.erb

<div class="container">
    <h2>my gist</h2>
    <ul class="nav nav-pills" style="margin: 20px;">
        <li class="nav_item"><a class="nav-link" href="../">back</a></li>
    </ul>

    <form action="./" method="POST">
        <div class="card">
            <div class="card-header">
                create new mygist
            </div>
            <div class="card-block container">
                <div class="form-group">
                    <div>
                        <label for="inTitle">title</label>
                        <input class="form-control" type="text" id="inTitle">
                    </div>
                    <div>
                        <label for="inCont">text</label>
                        <textarea class="form-control" id="inCont" style="overflow: scroll"></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <button class="form-control" type="submit">submit</button>
                </div>
            </div>
        </div>
    </form>
</div>

model

ただのHTMLなので，DBと連携させていきたい．
modelを作る．
rails generate model gists
- あとから気づいたが，https://railsguides.jp/active_record_basics.html によると，モデル名の命名は単数形，テーブル・スキーマは複数形が望ましい．
- しかも，railsが命名ルールに従うよう修正してくれる．
db/migrate の中のcreate_gistsを書き換えて，テーブルの設計．
タイトル，コンテンツ，作成日，最終更新日の4つがあれば良さそう．

class CreateGists < ActiveRecord::Migration[5.1]
  def change
    create_table :gists do |t|
      t.string :title
      t.text :content
      t.datetime :created
      t.datetime :updated

      t.timestamps
    end
  end
end

マイグレーション
rake db:migrate
初期データを定義しよう．
初期データを定義するには， db/seeds.rb を編集して，rake db:seed．

Gist.create title:"example", content:"Hello, Hello!", created:"2017-1-1", updated:"2017-2-2"

レコードの書き方は1通りではない．詳しくは https://railsguides.jp/active_record_basics.html ．

model の表示

表示出来るように，mygistコントローラのindexアクションを修正していく．
Gist.all で，全てのデータを取得出来る．
取得したデータを，インスタンス変数に入れておく．

class MygistController < ApplicationController
    def index
        # 一覧を表示
        @gists = Gist.all
    end
    # ...
end

index.html.erb も修正．
php や jsp で馴染み深い記法でrubyを埋め込める．

    <!-- 一部略 -->
    <div class="container">
        <% @gists.each do |gist| %>
            <div class="card">
                <div class="card-header">
                    <%= gist.title %>
                </div>
                <div class="card-block">
                    <pre style="margin: 10px;"><%= gist.content %></pre>
                    <!-- 略 -->
                </div>
            </div>
        <% end %>
    </div>

model の書き換え(追加)

new.html.erb の submit ボタンを押すと，POSTクエリが送信される．
送信されたデータはどのように受け取るか？
formの書き方を改める必要があるらしい．
HTMLではなく，Rails の form helper を使って記述する．
modelに関連付けるので，form_for を使う．

<div class="container">
    <h2>my gist</h2>
    <ul class="nav nav-pills" style="margin: 20px;">
        <li class="nav_item"><a class="nav-link" href="../">back</a></li>
    </ul>

    <%= form_for(Gist.new, url: {action: 'create'}) do |f| %>
        <div class="card">
            <div class="card-header">
                create new mygist
            </div>
            <div class="card-block container">
                <div class="form-group">
                    <div>
                        <label for="gist_title">title</label>
                        <%= f.text_field :title, class: 'form-control' %> 
                    </div>
                    <div>
                        <label for="gist_content">text</label>
                        <%= f.text_area :content, class: 'form-control', style: 'overflow: scroll' %> 
                    </div>
                </div>
                <div class="form-group">
                    <%= f.submit class: 'form-control' %>
                </div>
            </div>
        </div>
    <% end %>
</div>

生成される部品の id は，model_name の様な形式になる．labelのforプロパティを貼り直しておく．
新しく生成したレコード Gist.new は未だ空なので，表示されるhtmlのフォームも空．
- @gist = Gist.new しておき， @gist.title='untitled' と入れておくと，formのtitleの欄に予め untitled と書き込まれた状態となる．
送信されたPOSTクエリは mygist#create アクションが受ける．
mygist#create を編集しよう．
受け取ったパラメータは，params で拾うことができる．
mygist#create に画面は要らないので，redirect_to を記述，一覧ページにリダイレクトする．

class MygistController < ApplicationController
    # ...
    def create
        # 作成する．
        Gist.create title: params[:gist][:title], content: params[:gist][:content]
        redirect_to '/mygist/'
    end
end

link

同様の内容は https://github.com/buyoh/rails_gist/blob/master/work.md にもあります．

shonen.hateblo.jp

やったこと，しらべたことを書く．

Ruby on Rails アプリ製作の基本的な手順

記事の目的

作るもの

前提

やる

準備

controller

view

model

model の表示

model の書き換え(追加)

link

参考サイト