今更ながらRuby on Railsの概要を詳しく追ってみる(完全版) – off.tokyo

1.Summary

　Ruby on Rails とは、プログラミング言語 Ruby を用いた Web Application Framework のひとつです。Ruby on Rails の公式ウェブサイトには、こう書かれてあります。 ※2019.10.24 現在

　Ruby on Rails を学ぶと、あなたのしたい最新のウェブサイトを、とても簡単に、もっと楽しく開発することができます。Ruby on Rails には、ファンタスティックな Web Application を開発するのに必要なすべてが含まれています。そして、あなたは開発に必要な学習に、大きくてフレンドリーなコミュニティからのサポートを得ることができます。

Ruby on Rails 公式ウェブサイト
https://rubyonrails.org/

2.Install

　インストール方法です。環境は、Ubuntu 19.04 で行っています。必要に応じて、git や gcc、curl などもインストールするといいでしょう。

sudo apt-get install zlib1g-dev libssl-dev libreadline-dev  
sudo apt-get install libyaml-dev libxml2-dev libxslt-dev

SQLite と node.js をインストールします。

sudo apt-get install sqlite3 libsqlite3-dev nodejs

Ruby の環境を定義した .rbenv を下記 Sam Stephenson さんの GitHub から取得し、.bashrc へ読込みます。

Sam Stephenson
https://github.com/rbenv/rbenv

cd ~/.
git clone https://github.com/sstephenson/rbenv.git .rbenv
echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bashrc
echo 'eval "$(rbenv init -)"' >> ~/.bashrc
source .bashrc
cd ~/.rbenv

ruby-build をインストールします。ruby-build は、UNIX系のシステム上で異なるバージョンの Ruby をコンパイルしインストールするための、 rbenv install コマンドを提供する rbenv のプラグインです。

mkdir plugins
cd plugins
git clone https://github.com/sstephenson/ruby-build.git
cd ~/.

Ruby 本体をインストールします。

rbenv install 2.5.0
rbenv global 2.5.0

.gemrc の設定を行います。.gemrc は、gem(RubyGems)の設定ファイルです。gemは、Ruby言語用のパッケージ管理システムであり、Rubyのプログラムと（”gem” と呼ばれる）ライブラリの配布用標準フォーマットを提供しています。

vi ~/.gemrc

.gemrc に下記の内容を入力します。

install: --no-ri --no-rdoc
update: --no-ri --no-rdoc

いよいよ Ruby on Rails のインストールを行います。

gem install rails -v '5.2.1'
rbenv rehash

これで、インストールが完了しました。

3.Operation Check

　動作チェックをしましょう。vi などのエディタから下記のプログラムを入力して、実行します。

def sayGoodnight(name)
  result = "Goodnight, " + name
  return result
end

puts sayGoodnight("John-Boy")
puts sayGoodnight("Mary-Ellen")

もし、basic_ruby.rb と言うファイル名でプログラムを入力したなら、下記のように実行します。

プログラムの実行

ruby ./basic_ruby.rb

Ruby のプログラムファイルは、普通、.rb というサフィックスを用います。下記のような結果が得られれば、動作確認終了です。

実行結果

Goodnight, John-Boy
Goodnight, Mary-Ellen

このプログラムは、Ruby のドキュメントにあるものです。Ruby の公式なドキュメントは、下記から参照できます。

Programming Ruby
The Pragmatic Programmer’s Guide
https://ruby-doc.com/docs/ProgrammingRuby/
　
日本語のドキュメントは、こちらから参照できます。
https://www.ruby-lang.org/ja/documentation/
　
　

4.Getting started with Rails

　Ruby on Rails を始めていきましょう。Rails は、鉄道のレール(Rail)のことです。Ruby on Rails は、Web Applicaion Framework ですから、このレールに乗って開発を行えば、簡単にアプリケーションが開発できますと言うものです。

初めにビルド環境を構築しましょう。今回は、Ruby on Rails のドキュメントにある通り、blog と言うアプリケーションから初めます。

Getting Started with Rails
https://guides.rubyonrails.org/getting_started.html

ビルド環境の構築

rails new blog
cd blog
ls

作成が終わったら、blog ディレクトリに移動し、各種ファイルが作成されていることを確認します。問題なく作成されているようであれば、初期画面を表示させてみましょう。Ruby on Rails は、Web Application ですから、Web Browser から確認します。その為に下記コマンドによって、Rails 用の httpd サーバ WEBrick を起動します。

WEBrick の起動

rails server

正常に起動したら、お好きな Browser から https://localhost:3000/ をアクセスしてみます。どうでしょうか。”Ya! You’re on Rails!” と言う画面が現れたでしょうか。

正常に確認ができたら、WEBrick を CTRL+c で終了します。

5.Static pages

　作成したビルド環境には、各種ファイルとディレクトリが用意されていますが、静的 html ファイルは、public ディレクトリに格納します。今回作成した blog アプリケーションの場合、下記のディレクトリとなります。

cd blog/public

public ディレクトリに移動したら、何か HTML ファイルを作成してみましょう。ここでは、hellorails.html と言う HTML ファイルを作成してみます。

vi ./hellorails.html

HTML が分かる人なら、内容は何でもいいのですが、ここでは下記のような内容を入力してみます。

<HTML>
<H2>Hello Rails!</H2>
</HTML>

ファイルが用意できたら、別の Terminal から WEBrick を起動し、https://localhost:3000/hellorails.html を開いてみます。どうでしょうか。”Hello Rails!” と表示されたでしょうか。静的 HTML ファイルは、この public フォルダに置いておけば表示されます。

6.First Application

　簡単なアプリケーションを作成してみましょう。既に blog と言うビルド環境ができあがっているはずです。まだ作成していない方は、ここで作成します。

ビルド環境の作成

rails new blog
cd blog
ls

rails の Web Application Framework では、MVC アーキテクチャ、つまり、Model、View、Controller 構造を採用しています。簡単に説明すると、Model はデータ、View は表示、Controllerは Model と View のコントロールを行います。

まず Controller を作成します。

rails generate controller list

“list” という Controller を作成しました。rails では、Controller を作成するのに上記のコマンドを使用します。よく見ると意味は分かりますが、簡単に説明します。

rails generate controller コントローラ名

実行が終わると、いくつかファイルが作成されたとメッセージが表示されます。

Running via Spring preloader in process 17026
      create  app/controllers/list_controller.rb
      invoke  erb
      create    app/views/list
      invoke  test_unit
      create    test/controllers/list_controller_test.rb
      invoke  helper
      create    app/helpers/list_helper.rb
      invoke    test_unit
      invoke  assets
      invoke    coffee
      create      app/assets/javascripts/list.coffee
      invoke    scss
      create      app/assets/stylesheets/list.scss

“list_controller.rb”が Controller です。中身を見てみましょう。

class ListController < ApplicationController
end

同じようになっているでしょうか。ここでは詳細な説明は省きますが、オブジェクト指向プログラミングを経験している人に簡単に説明すると、”ListController” class を “ApplicationController” を継承して作成するという意味です。

これで、Controller の準備が終わりました。次は、Action と言うものを作成します。名前の通り、何を行うのか、そのアクションを定義するものです。他のオブジェクト指向プログラミング言語で言うところのメソッドに当たります。今開いている “list_controller.rb” を下記のように編集して、Action を追加してください。

class ListController < ApplicationController

        def view
        end     
end

“view” アクションを追加しました。また、この Action が呼ばれた時に表示する .erb テンプレートファイルを用意します。.erb は、Embedded Ruby の略になります。Ruby の組み込まれた HTML ファイルという意味でしょう。テンプレートファイルは、”app/viewers/” の下に作成します。この場合、”list” コントローラ用の “view” アクションですから、”list” ディレクトリの下に、アクション用の .erb テンプレートファイル、つまり “app/viewers/list/view.html.erb” を以下のように作成します。

<H2>This is view action.</H2>

“view” アクションが呼ばれたときには、この HTML ファイルが表示されます。”ListController” に他の Action を追加したくなったときには同じように、これらのファイルを編集して追加します。

後は、routing を設定します。routing は、ユーザーが入力した URL に対応する動作を指定するものです。つまり、”view” の指定が来たら、”view” Action を実行すると言うことを設定しておきます。routing の設定は、”config” ディレクトリの中にある “routes.rb” です。そのまんまですね。”routes.rb” を開いて編集します。

Rails.application.routes.draw do
  # For details on the DSL available within this file, see https://guides.rubyonrails.org/>routing.html
end

上記のようなファイルが開いたでしょうか。開いたら、routing の設定を加えます。

Rails.application.routes.draw do

  get 'view' => 'list#view'

end

これも、読んだままです。”view” を取得したら、’list’ コントローラの ‘view’ アクションを実行するという意味になります。

get 'ルート名' => 'コントローラ名#アクション名'

Controler 名などには、大文字小文字の区別かあるので注意してください。作成し終わったら再度、WEBrick を起動して https://localhost:3000/view へアクセスします。今度は、URL に “view” が指定されています。

どうでしょうか。無事表示されたでしょうか。
　
　

7.Create Database

　次は、アプリケーションで使用するデータを格納する Database を用意します。Rails では、既定の Database として、SQLite が指定されています。しかし、SQL を直接入力して Database を準備しなくてもいいように Framework が用意されています。Database を作成するためには、rake コマンドを使用します。

rake db:create

これで、Database を使用する準備ができました。今回の blog アプリケーションでは、DB の項目として、name と about を使用します。それぞれ、string 型と text 型にしました。ここでは詳しくは説明しませんが、読んで字のごとく、string(文字列)型と text(テキスト)型としています。この項目を user テーブルに作するには、以下のコマンドを使用します。

rails generate model user name:string about:text

このコマンドでは、MVC アーキテクチャの Model を作成します。コマンドの意味は説明するまでもありませんが、”rails generate model” は、model を生成、続く引数は、”user” テーブルを “name:string” と “about:text” 項目として作成すると言う意味です。

rails generate model テーブル名 項目名:型 項目名:型 ...

実行すると、”app/models/user.rb” と言うファイルが作成されています。中身は、以下の通りです。

class User < ApplicationRecord
end

“ApplicationRecord” を継承した “User” class が作成されています。

また、”db/migrate/YYYYMMDDhhmmss_create_users.rb” と言うファイルも作成されています。YYYYMMDDhhmmss の部分には作成年月日時間が入ります。このファイルの中身は、以下の通りです。

class CreateUsers < ActiveRecord::Migration[5.2]
  def change
    create_table :users do |t|
      t.string :name
      t.text :about

      t.timestamps
    end
  end
end

これも、class 定義となっています。SQL が分かるなら、中身は SQL そのものである事に気付くでしょう。そして、この users テーブルを Database に作成します。

rake db:migrate

これで、Database の準備が完了しました。

8.Insert data

　作成した Database に、データを入れていきます。これも、Framework が用意されているので、直接 SQLite を操作せずとも、Rails が入れてくれます。これまでの作業で、”db/seeds.rb” と言うファイルが作成されています。中身は、以下のようになっています。

# This file should contain all the record creation needed to seed the database with its default values.
# The data can then be loaded with the rails db:seed command (or created alongside the database with db:setup).
#
# Examples:
#
#   movies = Movie.create([{ name: 'Star Wars' }, { name: 'Lord of the Rings' }])
#   Character.create(name: 'Luke', movie: movies.first)

ここに、初期データを入力します。

# This file should contain all the record creation needed to seed the database with its default values.
# The data can then be loaded with the rails db:seed command (or created alongside the database with db:setup).
#
# Examples:
#
#   movies = Movie.create([{ name: 'Star Wars' }, { name: 'Lord of the Rings' }])
#   Character.create(name: 'Luke', movie: movies.first)

@user = User.new
@user.name = 'Scott'
@user.about = 'Good morning everyone. How are you?'
@user.save

@user = User.new
@user.name = 'Tiger'
@user.about = 'Fine thiank you.'
@user.save

これも、内容を概観すると意味は解ると思います。”User.new” で新しいデータ(SQLite は、リレーショナル・データベースなので、この場合、新しい行となります)を作成、項目は、”name” が “Scott”、”about” には “Good morning everyone. How are you?” を入力すると言う意味です。続く行も、同様の意味となります。

準備ができたら “rake” コマンドで、Database へ追加します。

rake db:seed

SQLite をご存知なら、テーブルの内容を直接確認してもいいでしょう。今回は、作成しているアプリケーションから表示して確認を行います。
　
　

9.View list

　それでは、Database に格納してあるデータのリストを表示してみましょう。これまでに作成してある “app/controllers/list_controller.rb” を開きます。今は、以下のようになっているはずです。

class ListController < ApplicationController

        def view
        end
end

これは、”view” アクションを追加した状態です。このアクションに命令を加え、以下のように変更します。

class ListController < ApplicationController

        def view
                @users = User.all
        end
end

これまでプログラミングの解説はしてきませんでした。それはまだ、プログラムと呼べるような内容は含まれていないからです。これらは、Ruby on Rails と言う Web Application Framework の使い方なのです。ここに来て、少しだけプログラムの一部が登場します。上記は、”ListController” class の定義となります。class とは、プログラムを記述する単位だと今は思ってください。中には、”view” アクションを追加してあります。

この “def view” と “end” で囲まれた部分に “view” アクションに対するプログラムを書いていきます。今回は、Database からすべてのデータを取得し、リストとして表示したいのですから、”User” model から “all” メソッドを呼び出し、すべてのデータを取得して、”@users” へ代入します。メソッドとは、アクションと置き換えても今は大丈夫です。つまりそれは、このように記述します。

@users = User.all

そして、”@users” に取り込んだ情報は、.erb テンプレートファイルにて使用することができます。”view.html.erb” テンプレートファイルを開いてみましょう。このファイルは、”app/viewers/list” の下にあります。

<H2>This is view action.</H2>

思い出してきたでしょうか。URL から https://localhost:3000/view とすると、このテンプレートファイルが呼び出され、画面に「This is view action.」と表示されたのでした。

この .erb テンプレートファイルの erb は、Embedded Ruby の略でした。この .erb テンプレートファイルに Ruby のプログラムを組込みます。

<H2>This is view action.</H2>
<% @users.each do |user| %>
  <h2><%= user.name %>：<%= user.about %></h2>
<% end %>

先程の “view” アクションの定義の際にデータを代入した “@users” が使われていることに気づいたでしょうか。”<%” と “%>” で囲まれた部分が Ruby のプログラムとなります。2行目の “@users.each do |user|” は、繰り返し処理となっており、”@users” に入っている情報それぞれ “each” を取得し、”user” へ代入すると言う意味です。