Ruby on Rails アプリ製作の基本的な手順
Railsの勉強としていくつかのwebappを作ったときのノートを残していたので,ブログに載せます.
ブログを書くのを後回しにしていたら年が明けてしまった.
記事の目的
- Ruby on Railsの基本的な流れを掴む.
- 基本コマンドのチートシートとして.
作るもの
- mygist という名前のウェブアプリ.
- 機能は次の2つ
- 投稿された記事の一覧を表示
- 記事を新たに投稿する
Ruby と HTML5が分かっていれば出来る,という物では無かったので大変でした…
前提
やる
準備
- プロジェクト作成
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
<!-- 一部略 --> <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 にもあります.