【学習内容】

○Ruby on railsでCRUD機能を持つアプリを作る
・実行環境
・scaffoldを使ったユーザー管理アプリの作成
・タスク管理アプリの作成（Slim,Sass,Bootstrapの使い方）前半

【書籍】

現場で使えるRUBY ON RAILS5速習実戦ガイド

これまでは1から10までTECH::EXPERTのカリキュラムで指示された環境でなんとなく環境構築をして開発を進めてきましたが、今回は少し違う環境で開発を進めます。

CRUD機能を持つアプリの作成を通じて、異なる環境での開発、その他フレームワークの使い方の練習をしていきます。

（※CRUD機能とは、「作成(Create)」、「読み出し(Read)」、「更新(Update)」、「削除(Delete)」の総称のこと）

【実行環境】

これまでと異なる点はざっくり下記の2点です

①scaffoldを使う
実際に現場で使う機会はほぼないとは思いますが、この魔法みたいなコマンドは経験として一度くらい使ってみてもいいんじゃないかなと思います。
Scaffoldはrailsに用意されているジェネレータの1つです。

$rails g scaffold モデル名 カラム名:型,カラム名・・・

上記のコマンドで、コントローラー、モデル、ビュー、ルーティングを全部作成することができます。

各ビューに対応されるjbilderなんかも一気に生成されます。（恐ろしい子！）

②DBがPostgreSQL
PostgreSQL(通称：ポスグレ)は、RDBMSの1つです。
これまで使用してきたMySQLと人気を二分する存在でLinuxなど主要なUNIX系OSやWindowsに対応し、機能の豊富さや拡張性の高さに定評があります。

PostgreSQLは、Homebrew経由でダウンロードしておきます。

【scaffoldを使ったユーザー管理アプリの作成】

ここからはCRUD機能を持つ「scaffold_app」というアプリを作成します。

(1)rails newする

$rails new scaffold_app –d postgresql

-dの後には今回使用するPostgresqlをオプションで指定します。

このコマンドを実行したディレクトリ以下にRails関連のファイルが一気に生成されます。

(2)DBの作成

$bin/rails db:create

「bin/rails」は、binディレクトリにあるrailsというスクリプトを呼び出すことで、「bundle exec rails」実行時と同様に、Gemfileどおりのgemを使用できる環境上でrailsコマンドを実行できます。

よって、今後の作業も「bin/rails」を使用します。

(3)サーバーを立ち上げる

$bin/rails s

DBの作成ができたので、bin/rails sを実行した後、http://localhost:3000/にいけばいつもの画面がでてきます。

(4)scaffoldを実行して雛形を作る

$bin/rails g scaffold user name:string address:string age:integer

冒頭で説明したように、$rails g scaffold モデル名 カラム名:型,カラム名・・・と記載することで、コントローラー、モデル、ビュー、ルーティングを一気に作成することができます。

さらに、DB関連の設定やユーザー管理の処理が記述されたコードが生成されます。

今回はユーザー管理機能の雛形を作成しました。

(5)DBにテーブルを作成する

$bin/rails db:migrate

(6)再起動
DB周りの諸々の環境が整ったので、再度rails sします。

$bin/rails s

(7)http://localhost:3000/usersにアクセス

アクセスすると、簡単な管理画面が確認できるかと思います。

この画面は登録されたユーザーの一覧を表示する画面です。

現時点ではまだユーザーは1人もいないので、実際に登録すれば、ユーザー情報が確認できます。

また、画面を確認するとその他にも「編集」や、「削除」などの機能があります。

このようにユーザーを管理するために必要な機能である「作成(Create)」、「読み出し(Read)」、「更新(Update)」、「削除(Delete)」の総称を頭文字を取って「CRUD機能」と呼びます。

Scaffoldが持つ力を発揮すれば、テキストエディタで1行もコードを書かずに、ターミナル操作だけでここまで動くアプリが作成できます。

ひとまず超簡易版のアプリが完成したので、このアプリの処理の流れを記載します。

①クライアントからのリクエストがWebサーバーを介してrailsアプリケーションにくる
②ルーティングがリクエストの内容を読み取って、適切なコントローラーとアクションを特定
③アクションは、必要に応じてモデルを使ってDBからデータを取り出す指示を出す
④モデルがDBの書き込みや読み出しを担当し、DBのテーブルからレコードを読み出すSQLを発行する
⑤アクションごとに対応するviewによってHTML等々を生成する
⑥コントローラーがレスポンスを作成し、Webサーバ経由でクライアントに返す

【タスク管理アプリの作成　前半】

今回作成するのは、タスク管理のためのアプリです。

日常の様々な用事を一覧で読めるようにして、新しく用事が増えたら一覧に追加し、用事が済んだら削除するようなものです。（つまりCRUD機能を携えるアプリと言えます）

(1)アプリの内容を考える

今回必要になるのは下記の機能です。

①一覧表示機能：用事の一覧を読むことができる機能です
②詳細表示機能：各用事の詳細を確認できる機能です
③新規登録機能：新しく用事を登録する機能です
④編集機能　　：一度登録した用事を編集する機能です
⑤削除機能　　：登録した用事を削除する機能です

(2)アプリの名前をつける

今回は「taskleaf」という名前にします。異論は認めません。

(3)rails newで雛形を作成する

今回は「scaffoldコマンド」は使用せず、1からコツコツ記述していきます。

$rails new taskleaf –d postgresql

上記のコマンドを実行すると、諸々のファイルが作成されます。

(4)ディレクトリの移動

(3)でrails newを実行すると、カレントディレクトリの1つ下の階層にappが作成されるので、cdコマンドでディレクトリ移動します。

$cd taslleaf

(5)DBの作成

DBがないとサーバーを起動することはできません。

$bin/rails db:create

(6)サーバー起動とアクセス

$bin/rails s

上記コマンドでサーバーを立ち上げたら、「http://localhost:3000」にアクセスし、railsのいつもの画面に辿り着けたらOKです。

(7)Slimの導入
今回はHamlではなく、Slimを使用してViewの編集を進めます。

Slimで記述するには、「slim-rails」、「html2slim」というgemを使用します。

■Gemfile

gem  ‘slim-rails’
gem  ‘html2slim’

Gemを導入したら忘れずにbundle installします。

$bundle install

Slimの導入ができたので、すでにerb形式で記述されているファイルをslimに変更しておきます。

$bundle exec erb2slim app/views/layouts/ --delete

(8)Bootstrapの導入

フロントエンドフレームワークであるBootstrapを使用し、手軽にそこそこ見栄えのよいCSSを作成します。

■Gemfile

gem ‘bootstrap’

Gemを導入したら忘れずにbundle installします。

$bundle install

(9)application.scssの作成
まず、railsアプリ全体が読み込むファイルであるapp/assets/stylesheets/application.css を削除します。

$rm app/assets/stylesheets/application.css

代わりにapplication.scssを同じ場所(app/assets/stylesheets直下)に作成します。

ファイル内には下記のように記述し、application.scssを通じて自動的に生成される「application.css」がアプリケーション内の各画面のHTMLから呼ばれるようにして、Bootstrapが当たった状態で全ての画面に適用されます。

■app/assets/stylesheets/application.scss

@import ‘bootstrap’;

(10)application.html.slimの編集

(application.html.erb⇒application.html.slimに変換されている)

■app/views/layouts/application.html.slim

doctype html
html
 head
   title
     | taskleaf
   = csrf_meta_tags
   = csp_meta_tag
   = stylesheets_link_tag    ‘application’, media: ‘all’ , ‘data-turbolinks-track’: ‘reload’
   = javascript_include_tag  ‘application’, ‘data-turbolinks-track’: ‘reload’
 body
   .app-title.navbar.navbar-expand-md.navbar-light.bg-light
     .navbar-brand Taskleaf
   .container
     = yield

▲Bootstrapについて

containerは、コンテンツを入れるためのブロックで、Bootstrapのグリッドシステムを利用するために必要なブロックです。

そもそもbootstrapのグリッドシステムとは、サイトの横幅を均等に分けるガイドラインを「グリッド」と呼び、bootstrapでは12本のグリッドが存在します。

グリッドに沿って表示物を配置しておけば、パソコンやスマホなど画面幅が異なってもレイアウトを組み替えやすくなります。

この仕組みを利用してレイアウトする仕組みを「グリッドシステム」と呼び、複雑なレイアウトでも簡単にレスポンシブにできます。

そのグリッドシステムを支えているのが、「.container」、「.row」、「.col」です。

「.container」は、「.row」と「.col」を格納する大きなハコの役割を果たします。

「.container」は一定の幅を持ち、レスポンシブデザインでは、スマホ、タブレット、パソコンなど異なる画面幅に合わせてレイアウトを切り替えます。

Bootstrapでは、閲覧側の画面幅を「極小から特大」までの5種類を想定し、.containerの幅も5段階に分け用意されてます。（このようにレイアウトが切り替わる画面幅のことをブレイクポイントと呼びます）

.containerはPC画面のように比較的大きなディスプレイ（Extra large:1140px）などでは、中央寄りに配置されます。（イメージ的にはmargin:0 auto;的な感じです）

ちなみに、コンテナ用のクラスには、もう1つ「.container-fluid」というものがあります。

こちらのクラスは、ブラウザのウィンドウ幅いっぱいに広がり、ウィンドウのサイズを狭くしたり広くしたりすると、「.container-fluid」の幅も流動的に変化します。

「.row」「.col」については、後日説明します。

現段階ではひとまず、「.containerはBootstrapを使うときの大きな箱なんだなあ」くらいの理解でOKです。

ひとまずここまででアプリ作成の下準備は完了です！

(11) タスクモデルの属性設計

①モデルの設計

(1)でアプリに
必要な機能を考えた通り、タスクモデルにおいても、その属性が必要か設計する必要があります。

属性はDBのテーブルカラムに対応するので、カラムについて検討します。
同時にカラムに値が必須か？（null制約）、デフォルト値を設定するかなどもあわせて行う必要があります。

今回のtaskleafでは下記のような属性設計の下進めていきます

●「予定」
属性名・カラム名：name
データ型　　　　：string
NULL許可　　　：許可しない
デフォルト値　　：なし

●「予定の詳細」
属性名・カラム名：description
データ型　　　　：text
NULL許可　　　：許可する
デフォルト値　　：なし

(12)タスクモデルの雛形を作成する

$bin/rails g model Task name:string description:text

コマンドを実行すると、モデルのクラスファイルやマイグレーションファイル、テストファイルなどが作成されます。

現時点では、まだテーブルは作成されていないので、次のステップで実際に作成します。

(13)マイグレーションでDBにテーブルを追加する

■db/migrate/XXXXXXXXXXX_create_tasks.rb

class CreateTasks < ActiveRecord::Migration[5.2]
 def change
   create_table :tasks do |t|
     t.string :name
     t.text :description

     t.timestamps
   end
 end
end

このマイグレーションファイルでカラム名と型を定義し、テーブル作成します。

$bin/rails db:migrate

これでDBにtasksテーブルが追加されました。

【所感】

ちょっと目にしたことはあったけど、見て見ぬ振りをしていたScaffold、PostgreSQL、Bootstrap、SlimなどRails周りの知識がまた少しついたような気がします。

今回使用している書籍なのですが、まだ難しいことはやっていないので、そこまで苦戦することはないですが、ある程度の前提知識を持ってから臨むと、一口にRailsといっても実行環境による様々な違いに気付かされます。