Aikの技術日記

技術的な進捗とか成果とかを細々と投稿するブログです。時々雑記も。

トップ > Ruby on Rails > RubyonRails入門 その3

RubyonRails入門 その3

Ruby on Rails

その4追記(Atomの環境設定-後編追記)はこちら
その4後編(Atomの環境設定-後編)はこちら
その4前編(Atomの環境設定-前編)はこちら

その2(Rails起動編)はこちら
その1(Railsインストール編)はこちら
その0のようなもの(PrograteでRails触ってみた編)はこちら

※筆者が利用しているRuby on Railsのバージョンは5.2.0です。

入門サイトを参考にRailsを学ぼう

前回は自力でアプリケーションを作ろう…として、挫折してしまいました。
主要因はモデルについての理解が乏しかった事ですね…。

と言う訳で、今回は入門サイトをがっつり参考にしながらRailsのアプリを作っていきたいと思います！

そして、今回参考にした入門サイトのは下記の通りです。
小学生でもわかるRuby on Rails入門 | OpenBook
【Ruby on Rails】ToDoアプリを簡単に作ってみる ～ その1. index new create ～ | Webird Programming.Tech

また、今回の記事はこれら入門サイトでアプリ構築をした経験を踏まえた、Railsの簡単な構築方法をメモしていく形にしようと思います。

新規作成

Railsアプリを新規に作るには、まずシェル上で下記のコマンドを打ち、Railsのプロジェクトを立てます。
rails new プロジェクト名

このコマンドによって、カレントディレクトリにプロジェクト名がついたフォルダが生成されます。
なお、このフォルダの中にはRailsに必要なファイルが一通り揃ってあります。
次の手順以降は、このプロジェクトフォルダに移動してから行います。

実はこれだけで、すでにこのプロジェクトにブラウザからアクセスができちゃいます。
rails serverとシェルで打ち、その後ブラウザからlocalhost:3000にアクセス。

アクセス後は"Yay! You're on Rails!"と書かれ、可愛いイラストが付いた画面に移行すると思います。
この画面はRailsのデフォルト画面になっています。
ただ、まだ何にも設定してないのでこのWebページには特に意味はありません(外枠だけが作られた感じです)。
次からは、このWebページの中を色々と操作していくことになります。

コントローラー、ビューについて

次は、ここに紐づくコントローラーとそれに付随するビューを作ります。
シェル上でrails generate controller コントローラー名 ビュー名1 ビュー名2と打ちましょう。
上記コマンドを打った後にlocalhost:3000/コントローラー名/ビュー名1へ行けば、ビュー名が表示されたWebページにアクセスできます。

なお、1つのコントローラーにビューは複数個持たせることが可能です…こんな感じに。

  • コントローラー1
    • ビュー1
    • ビュー2
  • コントローラー2
    • ビュー1
    • …

このビューはプロジェクトフォルダのapp/views/コントローラー名/ビュー名.html.erbというファイルを編集することで変更できます。
拡張子に.erbと付いてますが、中身はHTMLとさほど変わりはありません。
ただ、大きな違いとして「Rubyスクリプトをを埋め込み記述できる」と言うものがあります。

この「埋め込みRubyスクリプト」を使って、データベース上のデータをWebページに表示させたりすることが可能になります。
そして、この機能はコントローラーと組み合わせる事で、絶大な効果を発揮します。

ここでコントローラーに関する説明をば。
コントローラーはRubyスクリプトファイルになっており、この中には「各ビューにクライアントがアクセスする前に実行したい処理」を記述します。
例えばモデル内のデータをロードし、変数に入れたり、Formを設置したビューから得た情報をモデルに反映させたり出来ます。
(ビューから直接モデルにはアクセス不可能で、コントローラーを経由しないと参照できません。これはモデルからビューへも同様です)

このコントローラーとモデルの機能を使えば、実に様々な事が可能になります。
例えば下記の様な簡単なスクリプトをerbファイルに書くことで、データベース内の情報を表示させる事が可能になります。

コントローラー.rb

def index
    @変数名1(何でも可) = モデル名.all # モデル内にあるデータを変数に代入
end

ビュー.html.reb

<% @コントローラーで指定した変数名1.each do |変数名2| %>
  <p><%= 変数名2.属性1 %></p>
  <p><%= 変数名2.属性2 %></p>
  <p><%= 変数名2.属性3 %></p>
<% end %>

なお、ビューにはHTMLのヘッダ部分を記載しなくて大丈夫です。
ヘッダ部分を編集したい場合は、app/views/layouts/application.html.erbを編集していきましょう。

ここで1つ小話…。
Railsでは、先に述べた様にビューにはHTMLのヘッダ部分を記載しなくてもいい様になっています。
というのも、Railsから出力されるHTMLは、application.html.erb+ビュー.html.erbという構成になっているからです。
※application.html.erbのBodyタグにある<%= yield %>にビューのHTML情報が格納されて、1つのHTMLファイルが出来上がる感じです。
参考に、初期状態のapplication.html.erbの中身を下記においておきます。

展開する

<!DOCTYPE html>
<html>
  <head>
    <title>Railsプロジェクト名</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

モデルについて

※こちらの章に関しては下記の記事も参考にさせていただきました
RailsでデータをDBに投入するActive Record [初心者向けチュートリアル] | 酒と涙とRubyとRailsと

Railsでは、データベースへのアクセスはモデルを介して行います。
言い換えると、Railsモデルに関する操作=データベースに関する操作になるといった感じですね。
モデルの新規作成には、下記のコマンドをシェルに打ち込みます。

rails generate model モデル名(単数系が望ましい) 属性名1:型 属性名2:型

例えば下記のようなモデルを作りたいときは、rails generate model task name:string description:textと打ちます。

  • モデル名: model
    • name: string型
    • description: text型

コマンド実行後は、下記の2つのファイルが生成されます。

  • db/migrate/xxxx_モデル名s.rb: モデルをDBのテーブルとして作成するためのファイル、モデルの設定が記述されている
  • app/model/モデル名.rb : モデルに関わる処理を書く

なお、型は下記のものが設定可能です。

型名 意味
string 文字列
text 長い文字列
integer 整数
float 浮動小数
decimal 精度の高い小数
datetime 日時
timestamp より細かい日時
time 時間
date 日付
binary バイナリデータ
boolean Boolean型

ただ、この段階ではまだモデル自体…データベースの実態は出来ていない状態です。
なので、現段階では実際にモデルにレコード(実際のデータ)を入れる事ができません。
※先のコマンドでは、モデルのテンプレートの様なものができている状態…みたいな感じです

データベースの実態を作るには、まずrake db:createでデータベースを作ります。
そしてrake db:migrateで、データベース内に先ほど作ったモデルの設定を参照したテーブルを生成します。
これでやっとレコードが挿入できる様になります。

レコードの挿入方法には大きく分けて2種類あります。
1つはRubyのスクリプトファイルを実行してレコードを挿入する方法、もう1つはデータベースに直接アクセスしてレコードを挿入する方法です。

Rubyのスクリプトファイルでデータ挿入

Railsプロジェクトファイル内には、db/seeds.rbと言うファイルがあります。
このseeds.rbにデータを追加するためのスクリプトを記述し、実行することでデータの追加が出来る様になります。

それではまず、seeds.rbにスクリプトを記述しましょう。
記述するスクリプトの基本形は、下記の通りです。

変数名1(何でも可) = データを挿入したいモデル名.create({属性名:"挿入したい文字など1"})
変数名2(何でも可) = データを挿入したいモデル名.create({属性名:"挿入したい文字など2"})

なお、変数をいくつも使う事で、異なるレコードを同時に挿入することもできます。
※また、CSVファイルを読み込ませることも可能な様です…詳しくはこちらを参照に

次にスクリプトの実行です。
シェルよりrake db:seedを実行してください。
これで指定したモデルにレコードを挿入できます。

なお、データの確認にはRailsのビューで表示させるほかに、Railsコンソールやデータベースコンソールを用い直接データベースにアクセスしてみることも可能です。
この方法については次の項目でまとめて説明します。

データベースへの直接アクセスでデータ挿入

データベースに直接アクセスするには、RailsコンソールかRailsデータベースコンソールを使います。
Railsコンソールを起動するにはrails console、Railsデータベースコンソールを起動するにはrails dbconsoleコマンドを実行します。

まず前者…Railsコンソールを起動すると、Rubyのスクリプトが実行できるプロンプトが起動されます。
データを挿入するには、下記のコマンドを順に実行していけばOKです。

  1. 変数名1(何でも可) = データを挿入したいモデル名.new({属性名:"挿入したい文字など1"})
  2. test.save

なお、Railsコンソールからデータベースの中身を見る場合は、変数名(何でも可) = データを見たいモデル名.allと実行すればOKです。
※内部的にはsqliteのコマンドが実行されているみたいです

そして、後者のRailsデータベースコンソールを起動すると、なんとsqliteのコンソールが起動します。
これはRuby on Railsではデータベース体系にsqliteを使用しているためです。
こちらでデータ挿入するには、sqliteのデータ挿入コマンドを実行すれば大丈夫なので説明は省きます。
データを見たい場合もsqliteのデータ閲覧コマンドを見ればOKです。 ※この辺りは「sqliteの使い方」として、別記事でまとめるかもです

ルート設定

これまでの設定では、各ビューにアクセスするには「localhost:3000/コントローラー名/ビュー名」と入力しなければなりませんでした。
でもこれだとすっごくアクセスしづらいですよね…。
例えば「localhost:3000」と打てば何かしらのビューにアクセスするように設定したい。
そんな時は、Railsプロジェクトファイルのconfig>routes.rbを扱いましょう！

初期状態だと、get 'コントローラー名/ビュー名'と書かれている文があると思います。
ここを変更する事で、任意のURL名に変更する事が可能になります。

例えばlocalhost:3000/ビュー名で指定ビューにアクセスしたい場合は、get 'ビュー名' => 'コントローラー名#ビュー名'。
いきなりlocalhost:3000で指定ビューにアクセスしたい場合は、root 'コントローラー名#ビュー名'と書きましょう。
なお、rootは1つしか設定できません。

また、ビュー内にformで送信するデータの行き先も、こちらで設定します。
というのもクライアントからアクセスしてもらった

削除

モデルやデータベースの削除は、destroyコマンドで実行可能です。
使い方は、下記の通りです。

rails destroy model/controller モデル名/コントローラー名

今後について

今回実際に作って見たおかげで、Railsに関するある程度のことを学べたかなと思います。

そして、Railsについて情報収拾している際「Atomを使うと超絶クールな開発環境が仕上がる」とあったので…。
次回はAtomの開発環境構築を行いたいと思います！

余談- 今回出て来た用語について

またまた前回と同様に、初見の用語に関してちょっと調べてみました。

CRUD

今回参考にした入門サイト(こちら)で、CRUDという見慣れない用語を見たので…。 少し調べてみました。

CRUD(クラッド)とは、ほとんど全てのコンピュータソフトウェアが持つ永続性の4つの基本機能のイニシャルを並べた用語。
その4つとは、Create(生成)、Read(読み取り)、Update(更新)、Delete(削除)である。
ユーザインタフェースが備えるべき機能(情報の参照/検索/更新)を指す用語としても使われる。

参考記事:Wikipedea

こういう英語略称用語って、意外と色んなところで見るので…。
1つ1つ理解を深めていかないとですね( ﾟдﾟ)ｳﾑ