【Rails入門】初めてのWebアプリ開発ならscaffoldが最短!

みなさん、RailsでWebアプリを開発するときにscaffoldを使ったことがありますか。

scaffoldを使えば、基本的な機能を備えたWebアプリをすぐに作成できます。

この記事では、以下の内容を説明しています。

・scaffoldでサクッとWebアプリを作る方法
・サクッと作ったWebアプリをカスタマイズするための知識
・Webアプリの動作を理解するためのルート構成(RESTful)に関する知識

scaffoldを使ってサクッとWebアプリを作成して、Ruby on Railsの動作を理解していきましょう!

scaffoldとは

scaffoldは、Railsに用意されているコマンドの一つです。

scaffoldを使えば、基本的な機能を備えたWebアプリをすぐに作成できます。

したがって、Railsの基本的な動作を知りたい場合や、Railsの解説記事を自分で試してみる場合に、非常に便利なコマンドと言えるでしょう。

また、scaffoldを使って作成したWebアプリをカスタマイズしながら、目的のWebアプリを開発していくときにも非常に便利です。

一方、scaffoldで作成したWebアプリが、目的のWebアプリとかけ離れている場合は、scaffoldを使わない方がスムーズに開発が進められるでしょう。

それを見極めるにも、まずはscaffoldでWebアプリを作成する必要がありますね!

CRUD(クラッド)機能とは

scaffoldで作成したWebアプリには、データを追加したり削除したりといった、以下の4つの機能が実装されています。

機能概要
Createデータベースに新しいデータを追加する機能
Readデータベースに保存されたデータを読む機能
Updateデータベースに保存されているデータを編集する機能
Deleteデータベースに保存されているデータを削除する機能

この4つの機能のことをまとめて呼ぶときには、機能を表す単語の頭文字をつなげてCRUD(クラッド)機能と呼びます。

scaffoldでサクッとWebアプリを作ろう!

それでは実際に、Webアプリを作ってみましょう。

(1)Ruby on Railsをインストールします。

私は、以下の記事を参考に、VirtualBoxで作成した仮想パソコンにインストールしたLinux Mintに、開発環境を作成しました。

基本的には記事の手順に従って操作しますが、app/samurai/sample1ディレクトリを作成する代わりに、app/samurai/scaffold-sampleディレクトリを作成しました。

また、Ruby on Railsを起動して、ブラウザで画面が表示されることを確認したら、いったんRuby on Railsを終了してから次に進みます。

初心者でもかんたん!Ruby on Rails の開発環境の構築手順(Mac/Windows 両対応)
更新日 : 2018年4月15日

Linux Mintのインストールについては、以下の記事で詳しく説明しています。

Linux Mint Cinnamonエディションを使ってみよう
更新日 : 2019年5月22日

(2)「端末」を起動して、以下のコマンドを1行ずつ順番に入力します。

scaffoldコマンドの構文を見てみよう

さてここで、scaffoldのコマンドの構文を紹介しておきましょう。

項目説明
モデル名MVCのModel(モデル)の名前です。
データベースに保存するときの、テーブルに相当する単語と考えても良いでしょう。
Fruit
フィールド名データベースに保存するときの、カラムに相当する単語です。name
description
データ型データベースに保存するときの、データ型に相当する単語です。
以下の単語が指定できます。
string:文字列
text:長い文字列
integer:整数
float:浮動小数
decimal:精度の高い小数
datetime:日時
timestamp:より細かい日時
time:時間
date:日付
binary:バイナリデータ
boolean:Boolean型

※has_many、belongs_to、enumなど、データ型で指定できない単語については、scaffoldコマンドでWebアプリを作成してから、app/models/fruit.rbに追記します。
string
text

rails generate scaffoldについてさらに詳しく知りたい方は、以下のページが参考になります。

参考:http://railsdoc.com/references/rails#アプリケーションに必要なコントローラ、モデル、ビューをまとめて生成(rails generate scaffold)

scaffoldで作成したWebアプリを見てみよう

scaffoldで作成されたWebアプリをカスタマイズするためには、自動作成されたページと、そのページを表示するために使われているファイルを整理しておく必要がありますね。

赤枠で囲まれたファイルがscaffoldで作成されたファイルです。

元々多くのファイルがありますが、scaffoldによってさらに作成されていることがわかります。

rails-scaffold01

ページに対応するファイルについて

データ一覧ページや新規登録ページなど、ユーザーが利用するページをカスタマイズするために、対応するファイルを整理します。

果物データ一覧ページ

登録した果物データを一覧表示するページです。

表示
rails-scaffold02

URL
http://localhost:3000/fruits

対応ファイル
app/views/fruits/index.html.erb
app/views/fruits/index.json.jbuilder

果物データ新規登録ページ

果物データを登録するページです。

表示
rails-scaffold03

URL
http://localhost:3000/fruits/new

対応ファイル
app/views/fruits/new.html.erb
app/views/fruits/_form.html.erb

果物データ表示ページ

登録済みの果物データを表示するページです。

表示
rails-scaffold04

URL
http://localhost:3000/fruits/1

対応ファイル
app/views/fruits/show.html.erb
app/views/fruits/show.json.jbuilder

果物データ編集ページ

登録済みの果物データを編集するページです。

表示
rails-scaffold05

URL
http://localhost:3000/fruits/1/edit

対応ファイル
app/views/fruits/edit.html.erb
app/views/fruits/_form.html.erb

ページに対応していないファイルについて

上で紹介した対応ファイルは、すべてviewsディレクトリに作成されていました。

ここからは、viewsディレクトリ以外のファイルについて、よく変更するファイルに限って紹介します。

app/assets/stylesheets/fruits.scss、app/assets/stylesheets/scaffolds.scss

SCSSスタイルシートです。

fruits.scssとscaffolds.scssで、同じ要素に対するスタイルを指定した場合は、scaffolds.scssの指定が反映されます。

app/controllers/fruits_controller.rb

コントローラークラスです。

この後に説明する「RESTfulなルート構成」を実現するために作成されたファイルです。

db/migrate/20180619005823_create_fruits.rb

migrationファイルです。

migrationファイルについては、以下の記事で詳しく説明していますので、ぜひご覧ください。

【Rails入門】データベースを設定するrails db:migrateを説明!
更新日 : 2018年8月21日

その他

その他にもいくつかファイルが作成されていますが、サクッとWebアプリを作るだけなら、ここで紹介したファイルを把握しておけば、しばらくは大丈夫です。

ここで説明したファイルだけでも、自分で1からすべて間違えずに作成しようと思ったら、相当な時間がかかりそうですね。

今回のようにscaffoldを使うと、すべて間違えずに簡単に作成できますので、scaffoldを超おすすめしています!

scaffoldで作成したWebアプリのルート構成を解説!(RESTful)

RESTfulとは

RESTfulは、RESTRoy Fielding氏が考案したWebアプリケーションのガイドライン)に従って開発されている、という意味を持ちます。

RESTfulなWebアプリを開発することは、RESTに慣れた人が読みやすく書きやすいWebアプリを開発できるというメリットがあります。

以下の記事でも紹介されているように、RESTは、RailsにもRubyにも限らず、Webアプリの世界で共通の考え方です.

【Django入門】REST FrameworkでAPIを作ってみよう
更新日 : 2019年7月12日
【Java EE】Java EE 7の新機能
更新日 : 2017年6月7日

RESTについて詳しく知りたい方は、Wikipediaなどをご覧ください。

参考:https://ja.wikipedia.org/wiki/Representational_State_Transfer

RailsのRESTfulとは

scaffoldで作成したWebアプリでは、ルート構成がRESTfulの考え方に従って作成されています。

RailsでRESTfulと書いたときは、以下の2つを対応させることを意味します。

  • ブラウザがWebサーバー(今回は、Rails)に対して利用するURL+HTTPメソッド(GET、POST、PATCH、DELETE)
  • データベースに対して利用するCRUD機能(Create、Read、Update、Delete)

scaffoldで作成したWebアプリでは、アクションルート構成を設定することで、URL+HTTPメソッドCRUD機能を以下のように対応させています。

番号CRUD機能アクションHTTPメソッド
1CreatenewGET
2CreatecreatePOST
3ReadindexGET
4ReadshowGET
5UpdateeditGET
6UpdateupdatePATCH、PUT
7DeletedestroyDELETE

では、具体的にどのように設定しているか確認しましょう。

アクションの定義

scaffoldで作成されたWebアプリのアクションは、app/controller/fruits_controller.rbで定義されています。

上記の7つのアクションが定義されていることが確認できます。

ルート構成の定義

scaffoldで作成されたWebアプリのルート構成は、config/routes.rbで定義されています。

「resources :fruits」の1行だけで、app/controller/fruits_controller.rbで定義した7つのアクションに対して、URLとHTTPメソッドを割り当てています。

ルート構成を確認するために、ブラウザでhttp://localhost:3000/dummyにアクセスしてください。

※dummyは、存在しないURLであれば何でも大丈夫です。

rails-scaffold06

Routesの表の1行目からは、HTTPメソッドGEThttp://localhost:3000/fruitsにアクセスすると、fruits#index(app/controller/fruits_controller.rbのindexアクション)が呼び出されることが読み取れます。

同様に2行目からは、HTTPメソッドPOSTで(1行目と同じ)http://localhost:3000/fruitsにアクセスすると、fruits#index(app/controller/fruits_controller.rbのindexアクション)が呼び出されることが読み取れます。

ルート構成は、以下のコマンドでも確認できます。

実行結果:

ブラウザで確認したときと、ほぼ同じ情報が読み取れますね。

会員制のサイトでプロフィールを編集するときの動作をイメージしよう

Railsのルート構成を理解するために、例として会員制のサイトでプロフィールを編集するときの動作をイメージしてみましょう。

(1)ブラウザからプロフィールを更新するためのHTTPメソッドを送信します。

一般的には、「更新」ボタンをクリックすることで、適切なHTTPメソッド(GET、PATCH、PUTのいずれか)で更新用のURLにアクセスします。

(2)Webアプリは、アクセスを受けたURLと使用されたHTTPメソッドと、ルート構成の定義(config/routes.rb)に基づいて、適切なアクションを呼び出します。

(3)呼び出されたアクションに従って、データベースに保存されているプロフィールを更新します。

アクションは、app/controller/fruits_controller.rbで定義されています。

scaffoldが、どのようにRESTfulなルート構成を実現しているか分かったでしょうか?

まとめ

この記事では、scaffoldを使ってサクッとWebアプリを実行する方法を解説しました。

ただ、なにが自動で作られているかを理解して使わないと、scaffoldで作ったWebアプリをカスタマイズするときに非常に困ります。

そんなときは今回説明したとおり、作成されたファイルを追いかけていきましょう。

ルート構成やアクションについても、しっかり理解しておきましょう。

もしscaffoldの使い方を思い出したくなったら、この記事を確認してくださいね!

エラーばかりでプログラミング学習が進まない、と悩んでいませんか?

プログラミング学習を始めたけれど、エラーの原因がよく分からなかったり、調べてみたけれど解決されず「どうやって進めればいいんだろう」と放置してそのまま挫折しかけていませんか?

一度進め方が分からなくなるとやる気も失せてしまいますよね。

そんなあなたにオススメしたいのが、「侍エンジニア塾」の無料体験レッスンです。独学で1000時間以上の学習が必要と言われているところを300時間に短縮する「プログラミング独学法」をお伝えします。

下記の無料体験レッスン予約カレンダーよりお申し込みいただけます。あなたのご相談を心よりお待ちしております。

LINEで送る
Pocket

書いた人

侍テック編集部

侍テック編集部

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説