Rails覚書1: Ruby on Railsを理解しよう
Railsの覚書、詳しくはコチラを参照:https://paiza.jp/works/rails/primer/
Webアプリケーションフレームワークである、Ruby on Railsについて学習してみたいと思います。
Railsを使って、基本的な機能を持ったWeb掲示板とWebページを作ることで、本格的なWebアプリケーション開発の第1歩を体験しましょう。
#01:Ruby on Railsとは
Ruby on Railsとは
プログラミング言語Ruby上で動作するWebアプリケーションフレームワーク。
Webアプリケーションフレームワークとは、Webアプリを開発するために便利な部品やツールをひとまとめにしたものです。
実践的なWeb開発では、このようなフレームワークを使うことで、効率よくWebアプリケーションを作っていくことができます。
Rails使用に必要な最低限の知識
- Ruby
- HTML/CSS
- PHP+MySQL
参考チュートリアル
-
Rails をはじめよう | Rails ガイド
https://railsguides.jp/getting_started.html -
Ruby on Rails チュートリアル:実例を使って Rails を学ぼう
https://railstutorial.jp/
02:Railsを使う準備をしよう
今回使ったrailsコマンド
Railsのバージョンを確認する。
rails -v
bbsプロジェクトを作成する。
rails new bbs
Rails用のWebサーバーを起動する
rails server -b 0.0.0.0
RailsのWebページにアクセスするには
-
paizaの場合: New Broweserタブに表示されたアドレスに「:3000」を追加する
例 https://xxx.paiza-app.cloud:3000 -
自分のPCでrailsを起動する場合: ブラウザで「http://localhost:3000」にアクセスする
RailsのWebサーバーを停止するには
「CTRL」キー(コントロールキー)を押しながら「C」のキーを押します。
03:3分で掲示板を作ってみよう
今回使ったrailsコマンド
Rails用のWebサーバーを起動する
rails server -b 0.0.0.0
掲示板を自動生成する
rails generate scaffold article content:string
rails db:migrate
04:Railsで、Webページを追加しよう
Welcomeページを作成する
$ rails generate controller welcome index
サーバーを起動する(ショートカット)
$ rails s -b 0.0.0.0
トップページに設定する
config/routes.rbに記述する
Rails.application.routes.draw do
get 'welcome/index'
resources :articles
root 'welcome#index'
# For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end
05:RailsのWebページを修正してみよう
ここでは、Railsコマンドで自動生成したWebページを修正します。
Webページの修正方法
RailsのWebページの表示は、「app/views」のerbファイルに記述します。
ウェルカムページのindex.html
app/views/welcome/index.html.erb
<h1>Hello BBS</h1>
Rubyのコードを埋め込む
app/views/welcome/index.html.erb
<h1>Hello BBS</h1>
<p><%= Date.today %></p>
リンクを貼る
app/views/welcome/index.html.erb
<h1>Hello BBS</h1>
<p><%= Date.today %></p>
<%= link_to 'Show list', articles_path %>
<%= ... %>
テンプレート中でRubyコードを実行します。対応するコントローラのインスタンスコンテキストで実行されるので、グローバル変数のほか、コントローラのインスタンス変数、インスタンス関数なども利用できます。
演習課題1:「h1タグの見出しの変更」
右の環境には、Railsで「myblog」というプロジェクトに「start#index」というWebページが作られています。
このWebページのh1タグの見出しを、「Welcome to my diary」に変更してください。
rails serverを起動した上で、採点して、すべてのジャッジに正解すれば、演習課題クリアです!
模範解答1
~/myblog/app/views/start/index.html.erbを次のように編集する
Welcome to my diary
Find me in app/views/start/index.html.erb
------------------------------------------------------------ #### 演習課題2「現在の日付を表示」 右の環境には、Railsで「myblog」というプロジェクトに「start#index」というWebページが作られています。 このWebページに、現在の日付を追加してください。rails serverを起動した上で、採点して、すべてのジャッジに正解すれば、演習課題クリアです!
模範解答2
~/myblog/app/views/start/index.html.erbを次のように編集する
Welcome to my diary
<%= Date.today %>
------------------------------------------------------------ #### 演習課題3「リンクの追加」 右の環境では、Railsで「myblog」というプロジェクトに、「diary」掲示板と「start/index」というWebページが作られています。 この「start/index」に、「diary」掲示板へのリンクを追加してください。「diary」掲示板へのリンクのパスは、diaries_pathで取得できます。
rails serverを起動した上で、プログラムを実行して、正しく出力されれば演習課題クリアです!
模範解答3
~/myblog/app/views/start/index.html.erbを次のように編集する
Welcome to my diary
<%= Date.today %>
<%= link_to 'Show list', diaries_path %> ------------------------------------------------------------06:Rails掲示板の構成を調べよう
ここでは、Ruby on Rails(ルビー オン レイルズ)で作成した掲示板の構成を調べます。
MVCアーキテクチャ
- Model:アプリで扱うデータを保持し、操作する。
- View:受け取ったデータを表示する。
- Controller:ユーザーからのリクエストを処理し、モデル・ビューを呼び出して結果を返す。
参考:
-
RailsにおけるMVC(モデル/ビュー/コントローラ) - Ruby on Rails入門
http://www.rubylife.jp/rails/ini/index7.html -
MVC、本当にわかってますか? - Qiita
http://qiita.com/tshinsay/items/5b1724baf32b8b5113c2
07:Rails掲示板を改良しよう
ここでは、Ruby on Railsで作成した掲示板に投稿者名を保存する機能をを追加してみたいと思います。
カラムの追加方法
データベースのarticlesテーブルに、nameカラムを追加する
$ rails generate migration AddNameToArticle name:string
$ rails db:migrate
viewファイルを変更する
<table>
<thead>
<tr>
<th>Content</th>
<th>Name</th>
<th colspan="3"></th>
</tr>
</thead>
<tbody>
<% @articles.each do |article| %>
<tr>
<td><%= article.content %></td>
<td><%= article.name %></td>
<td><%= link_to 'Show', article %></td>
<td><%= link_to 'Edit', edit_article_path(article) %></td>
<td><%= link_to 'Destroy', article, method: :delete, data: { confirm: 'Are you sure?' } %></td>
</tr>
<% end %>
</tbody>
</table>
<p>
<strong>Name:</strong>
<%= @article.name %>
</p>
<div class="field">
<%= f.label :name %>
<%= f.text_field :name %>
</div>
コントローラーを修正する
def article_params
params.require(:article).permit(:content, :name)
end
演習課題1「nameカラムの追加」
右の環境には、Railsで「myblog」というプロジェクトに、「diary」掲示板が作られています。
ターミナルを使って、ここに「name」カラムを追加してください。
採点して、すべてのジャッジに正解すれば、演習課題クリアです!
範解答1
次のコマンドを順にターミナルで実行する
$ cd ~/myblog
$ rails generate migration AddNameToDiary name:string
$ rails db:migrate
Rails入門1-2: RailsのDBの動作を理解しよう
01:Railsの設計方針を知ろう
このチャプターでは、Rails の設計方針について学習すると共に、データベースとの連携の概要を理解します。
MVCアーキテクチャ
- Model:アプリで扱うデータを保持し、操作する。
- View:受け取ったデータを表示する。
- Controller:ユーザーからのリクエストを処理して、モデル・ビューを呼び出し、結果を返す。
02:Rails コンソールで動作を確認しよう
ここでは、Rails の動作確認に欠かせない Rails コンソールの基本的な使い方を学習します。
Rails コンソールを使うと、Rails アプリの環境を有効にした状態で、Ruby コードをひとつずつ実行することができます。
Railsコンソールの起動
cd bbs
rails console
次のように、短縮形も利用できる。
rails c
railsコンソール終了
exit
データ数を表示する
Article.count
特定のデータを表示する
Article.find(1)
特定のデータを変数に代入して、カラムを取り出す
article = Article.find(1)
article.content
カラムを更新する
article = Article.find(1)
article.content = "hello world"
article.save
演習課題「Railsコンソールで、データベースの値を変更する」
右の環境には、「myblog」プロジェクトに「Diary」という1行掲示板が作成されています。
Railsコンソールを使って、掲示板の最初の記事(id = 1)のcontentカラムの値を次の文字列に変更してください。
sunny day
採点して、すべてのジャッジに正解すれば、演習課題クリアです!
模範解答1
次のコマンドをターミナルで実行する
$ cd myblog
$ rails c
$ diary = Diary.find(1)
$ diary.content = 'sunny day'
$ diary.save
#03:ActiveRecord を理解しよう
ここでは、Rails のデータベースを操作する ActiveRecord について学習します。ActiveRecord は、データベースのテーブルを Ruby のオブジェクトに割り当てる機能です。
ActiveRecordとは
ActiveRecordは、データベースのテーブルをRubyのオブジェクトに割り当てる機能です。ActiveRecordを使うことで、SQLを書かなくても、Rubyの作法でデータベースを操作することができるんですよ。
すべてのデータを表示する
articles = Article.all
articles.each {|article| p article}
#04:データベースのマイグレーションを理解しよう
ここでは Rails のマイグレーションについて学習します。
マイグレーションは Rails で自動生成した設定内容をデータベースに反映させます。
マイグレーションとは
マイグレーションとは、簡単に言うと、データベースのテーブルを作成・変更するための仕組みです。
Railsは、マイグレーションファイルという設定ファイルを自動作成して、それをmigrationコマンドで、データベースに反映させます。
カラムを追加するマイグレーションファイルを生成する
rails generate migration AddCategoryToArticle category:string
生成されたマイグレーションファイルは、db/migrateにあります。
データベース設定を反映する
rails db:migrate
データベース設定を取り消す
rails db:rollback
演習課題1「マイグレーションでカラムを追加」
右の環境では、「myblog」プロジェクトに「Diary」という1行掲示板が作成されています。
「diaries」テーブルに「degree」という文字列のカラムを追加してください。
手順は次の通りです。
- カラムを追加するマイグレーションファイルを生成し、
- 生成したファイルの設定をデータベースに反映させてください。
採点して、すべてのジャッジに正解すれば、演習課題クリアです!
模範解答1
次のコマンドをターミナルで実行する
$ cd myblog
$ rails generate migration AddDegreeToDiary degree:string
$ rails db:migrate
演習課題2「ロールバックでカラムを削除」
右の環境では、「myblog」プロジェクトに「Diary」という1行掲示板が作成されています。
「diaries」テーブルの「degree」というカラムを削除してください。
ただし、「degree」というカラムを追加するマイグレーションファイル「作成日時_add_degree_to_diary.rb」がすでに存在します。
マイグレーションのロールバックによって、このファイルの設定を取り消すことで、「degree」カラムを削除してください。
採点して、すべてのジャッジに正解すれば、演習課題クリアです!
模範解答2
次のコマンドをターミナルで実行する
$ cd myblog
$ rails db:rollback
演習課題3「マイグレーションファイルのカラム名を変更する」
右の環境では、「myblog」プロジェクトに「Diary」という1行掲示板が作成されています。
ここに、「degree」というカラムを追加するマイグレーションファイルが作られています。
カラム名を変更するため、このマイグレーションファイルでカラム名を下記のように変更してから、
マイグレーションを実行してください。
degree -> temperature
採点して、すべてのジャッジに正解すれば、演習課題クリアです!
模範解答3
myblog/db/migrate/XXXX_add_degree_to_diary ファイルを修正する
class AddDegreeToDiary < ActiveRecord::Migration[5.0]
def change
add_column :diaries, :temperature, :string
end
end
#05:ビューにカラムを追加しよう
ここでは、モデルのデータをビューに表示する時、ActiveRecord のメソッドをどのように記述するか学習します。
そのために、モデルに追加したカラムを ビューに表示させてみましょう。
Railsコンソールで、新しい記事を投稿する
article = Article.new
article.feeling = "(^o^)"
article.save
erbとは
erbは、embedded Rubyの略。erbを使うと、htmlファイルを表示するときに、埋め込んでおいたRubyのコードが実行される。
erbの書き方
- <% %> : Rubyのコードを実行する
- <%= %> : Rubyのコードを実行し、その結果をhtmlの該当位置に出力する
<% @articles.each do |article| %>
<tr>
<td><%= article.content %></td>
<td><%= article.name %></td>
<td><%= article.feeling %></td>
<td><%= link_to 'Show', article %></td>
<td><%= link_to 'Edit', edit_article_path(article) %></td>
<td><%= link_to 'Destroy', article, method: :delete, data: { confirm: 'Are you sure?' } %></td>
</tr>
<% end %>
演習課題「Railsコンソールで、記事を投稿する」
右の環境には、「myblog」プロジェクトに「Diary」という1行掲示板が作成されています。
Railsコンソールを使って、この掲示板に、次の内容を持つ新しい記事を作成してください。
It was fine weather today
採点して、すべてのジャッジに正解すれば、演習課題クリアです!
模範解答1
次のコマンドをターミナルで実行する
$ cd myblog
$ rails c
$ diary = Diary.new
$ diary.content = 'It was fine weather today'
$ diary.save
演習課題「Viewにカラムを追加する」
右の環境には、「myblog」プロジェクトに「Diary」という1行掲示板が作成されています。
この一覧ページ(index.html.erb)に、次の順序で「temperature」カラムを追加してください。
「temperature」カラムは、すでにデータベースに追加してあります。
content, temperature
採点して、すべてのジャッジに正解すれば、演習課題クリアです!
模範解答1
index.html.erb に temperature を表示するよう修正する
<p id="notice"><%= notice %></p>
<h1>Diaries</h1>
<table>
<thead>
<tr>
<th>Content</th>
<th colspan="3"></th>
</tr>
</thead>
Rails入門1-3: Railsのデータの流れを理解しよう
#01:Webアプリのデータの流れを理解しよう
このレッスンでは、Ruby on Rails のアプリが動作するとき、どのようにデータを処理していくか学習します。先ほどのレッスンから引き続き、簡単な 1 行掲示板を題材にして、Rails の動作をさらに理解しましょう。
Webフォームのデータ送信方式
- GETメソッド
URLに含める
- POSTメソッド
リクエストメッセージに含める
article[name]=paiza
article[content]=hello+world
Railsサーバーのログを上下にスクロールするには
ターミナルタブでは、マウスのホイールで、表示内容を上下にスクロールされることができます。
Railsサーバーのログなどが、画面の上部に消えてしまった場合に役立ちます。
なお、ホイールでは操作できない場合、下記の操作が有効です。
Mac:CTRLキー + Altキー + 上下矢印キー
Windows: CTRLキー + 上下矢印キー
#02:Railsのルーター機能を理解しよう
ここでは、Rails アプリへのアクセスを振り分けるルーター機能について学習します。Rails アプリでは、機能ごとに URL が割り当てられており、ルーターは、そのアクセスをどのコントローラーのどのメソッドに振り分けるか制御します。
Routersの設定内容を確認する
rails routes
ルーターの振り分け先を設定する
routes.rbで設定します。
config/routes.rb
Rails.application.routes.draw do
get 'welcome/index'
resources :articles
root 'welcome#index'
end
参考になるWebサイト
-
Rails のルーティング | Rails ガイド
https://railsguides.jp/routing.html -
ルーティング(routes) - - Railsドキュメント
http://railsdoc.com/routes -
Railsのルーティングを極める(前編)
https://techracho.bpsinc.jp/baba/2014_02_17/15665 -
Railsのルーティングを極める (後編)
https://techracho.bpsinc.jp/baba/2014_03_03/15619
演習課題「インデックスページのルーター設定」
右の環境には、「myblog」プロジェクトに「Diary」という1行掲示板が作成されています。
このroutes.rbファイルを修正して、アドレスに何も付けずにアクセスした時、
1行掲示板の一覧ページを表示するようにしてください。
採点して、すべてのジャッジに正解すれば、演習課題クリアです!
模範解答1
myblog/config/routes.rb ファイルを修正する
Rails.application.routes.draw do
resources :diaries
get 'start/index'
root 'diaries#index'
For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end
#03:ビューのテンプレートをさらに理解しよう
ここでは、Rails アプリの表示内容を制御するビューの書き方について、さらに理解を深めます。そのために、詳細ページを例にとり、コントローラーとビューの連携について学習します。また、ビューを作る時に便利なヘルパーメソッドについても取り上げます。
ヘルパーメソッドとは
ヘルパーメソッドは、ビューを作るときに利用できる専用コマンドです。
ヘルパーメソッドは、このように不等号とパーセント記号の中に記述します。
<%= link_to 'Edit', edit_article_path(@article) %> |
<%= link_to 'Back', articles_path %>
link_toヘルパーメソッドについて
htmlのタグに相当するヘルパーメソッドで、Railsアプリのページ間のリンクなどをシンプルに記述できる。
<%= link_to 'text', path %>
上記のlink_toヘルパーメソッドは、次のhtmlに変換される。
link_toのパスには、rails routesコマンドで最初に表示される名前付きパスが利用できる。
演習課題「ビューにカラムを追加する」
右の環境には、「myblog」プロジェクトに「Diary」という1行掲示板が作成されています。
この詳細ページ(show.html.erb)に、次の順序で「weather」カラムを追加してください。
「weather」カラムは、すでにデータベースに追加してあります。
content, weather
採点して、すべてのジャッジに正解すれば、演習課題クリアです!
模範解答1
myblog/views/diaries/show.html.erb ファイルを修正する。
<%= notice %>
Content: <%= @diary.content %>
Weather: <%= @diary.weather %>
<%= link_to 'Edit', edit_diary_path(@diary) %> |
<%= link_to 'Back', diaries_path %>
演習課題「リンク先を変更する」
右の環境には、「myblog」プロジェクトに「Diary」という1行掲示板が作成されています。
この詳細ページ(show.html.erb)で、記事一覧に戻る「Back」リンクを、Welcomeページへのリンクに変更してください。
Welcomeページは、すでにRailsアプリに追加してあります。
採点して、すべてのジャッジに正解すれば、演習課題クリアです!
模範解答1
myblog/views/diaries/show.html.erb ファイルを修正し、link_to の 'Back' を welcome_index_path にする。
<%= notice %>
Content: <%= @diary.content %>
Weather: <%= @diary.weather %>
<%= link_to 'Edit', edit_diary_path(@diary) %> |
<%= link_to 'Back', welcome_index_path %>
#04:投稿フォームの動作を理解しよう
ここでは、Rails アプリの Web フォームの動作について、さらに理解を深めます。そのために、投稿フォームにカラムを追加すると共に、form_for メソッドの使い方について学習します。
部分テンプレートとは
複数のビューの共通要素を記述するテンプレート。
呼び出すには、次のようにrenderメソッドを利用する。
<%= render 'form', article: @article %>
この場合、「_form.html.erb」が部分テンプレートのファイル名になる。
また、article変数で、@articleのオブジェクトを利用できる。
フォームを作成するヘルパーメソッド
- form_for:投稿フォームのように、Modelの新規作成・更新に使用する
- form_tag:検索フォームのように、Modelを更新しない場合に使用する
form_forメソッド
対象となるモデルのカラムをf変数で取り出して、フォームの構成要素を指定する。
<%= form_for(@article) do |f| %>
演習課題「フォームにカラムを追加する」
右の環境には、「myblog」プロジェクトに「Diary」という1行掲示板が作成されています。
この投稿フォームページに、次の順序で「weather」カラムを追加してください。
「weather」カラムは、すでにデータベースに追加してあります。
content, weather
採点して、すべてのジャッジに正解すれば、演習課題クリアです!
模範解答1
myblog/app/views/diaries/_form.html.erb ファイルを修正し、weather カラムの内容を表示させる。
<%= form_for(diary) do |f| %>
<% if diary.errors.any? %>
<%= pluralize(diary.errors.count, "error") %> prohibited this diary from being saved:
<ul>
<% diary.errors.full_messages.each do |message| %>
<li><%= message %></li>
<% end %>
</ul>
</div>
<% end %>
#05:controllerがデータを書き込む流れを理解しよう
ここでは、投稿フォームのデータを Controller でデータベースに書き込む流れについて学習します。そのために、Web フォームから受信した Parameters の処理について理解すると共に、データベースに書き込む際の安全性を高める strong parameter について説明します。
ストロングパラメータとは
データベースに安全にアクセスするために、データベースに書き込みできるカラムをリストアップしておく。
controllerのarticle_paramsメソッドに記述する。
articles_controller.rb(一部)
Never trust parameters from the scary internet, only allow the white list through.
def article_params
params.require(:article).permit(:content, :name, :feeling)
end
演習課題「コントローラにカラムを追加する」
右の環境には、「myblog」プロジェクトに「Diary」という1行掲示板が作成されています。
この掲示板に「weather」カラムを追加しましたが、フォームを投稿ボタンをクリックしても、データベースに書き込まれません。
コントローラーを修正して、「weather」カラムのデータが反映されるようにしてください。
採点して、すべてのジャッジに正解すれば、演習課題クリアです!
模範解答1
myblog/app/controllers/diaries_controller.rb を修正し、ストロングパラメータ部分に weather を追加する。
Never trust parameters from the scary internet, only allow the white list through.
def diary_params
params.require(:diary).permit(:content, :weather)
end
#06:検索フォームを追加してみよう
ここでは、1 行掲示板に検索フォームを追加します。そのために、検索フォームから送信した検索キーワードを、サーバー側で受け取って、一覧ページを絞り込み表示してみましょう。
ビューに検索フォームを追加する
index.html.erb(一部)
<%= form_tag('/articles', method: 'get') do %>
<%= label_tag(:name_key, 'Search name:') %>
<%= text_field_tag(:name_key) %>
<%= submit_tag('Search') %> <%= link_to 'Clear', articles_path %>
<% end %>
コントローラーにindexメソッドに検索コードを追加する
articles_controller.rb(一部)
GET /articles
GET /articles.json
def index
if params[:name_key]
@articles = Article.where('name LIKE ?', "%#{params[:name_key]}%")
else
@articles = Article.all
end
end
演習課題「間違い探し」
右の環境には、「myblog」プロジェクトに「Diary」という1行掲示板が作成されています。
この掲示板の一覧ページに「weather」カラムの検索フォームを追加しましたが、「search」ボタンをクリックしても、検索ができません。どうやら、index.html.erbに間違いがあるようです。
viewを修正して、「weather」カラムを検索できるようにしてください。
採点して、すべてのジャッジに正解すれば、演習課題クリアです!
模範解答1
myblog/app/views/diaries/index.html.erb ファイルを修正し、form_tag メソッドを使用して検索フォームを作成する。
<%= form_tag('/diaries', method: 'get') do %>
<%= label_tag(:weather_key, 'Search weather:') %>
<%= text_field_tag(:weather_key) %>
<%= submit_tag('Search') %> <%= link_to 'Clear', diaries_path %>
<% end %>
演習課題「間違い探し」
右の環境には、「myblog」プロジェクトに「Diary」という1行掲示板が作成されています。
この掲示板の一覧ページに「weather」カラムの検索フォームを追加しましたが、部分一致検索ができません。どうやら、diaries_controller.rbに間違いがあるようです。
コントローラーを修正して、「weather」カラムを検索できるようにしてください。
採点して、すべてのジャッジに正解すれば、演習課題クリアです!
模範解答1
myblog/app/controllers/diaries_controller.rb を修正し、部分一致検索を可能にする。