概要
初めて Ruby on Rails で Web アプリ開発するための、入門編の記事。
Rails の基礎部分をなるべく絞って解説する。
| 手順 | 記事 |
|---|---|
| #1 | Rails の開発環境構築（今回） |
| #2 | コントローラ・ビューの基本 |
| #3 | モデルとマイグレーションの基本 |
| #4 | DB のデータを画面に表示する |
| #5 | 画面から DB にデータを登録する |
| #6 | 画面から DB のデータをの更新・削除する |
対象
- Ruby on Rails で開発をしてみたい（しなければならない状況になった）方
- HTML/CSS で簡単な Web ページを書いたことがある方
- 「DB」「SQL」という言葉の意味を何となく理解できる方
- 「REST API」や「GET」「POST」などを聞いたことがある方
- Ruby もしくは、その他のオブジェクト指向のプログラミング言語に触れた方
- 変数、四則演算、if 文、for 文、などは書いたことある
- クラス、メソッド、インスタンス、などは聞いたことある
前提
macOS で作業する前提で書いてます。Windows の方は適宜、読み替えてください🙏
- Ruby がインストール済みであること
- 筆者は v3.1.3（確認コマンド
ruby -v） - Mac なら標準でインストールされている
- Windows はインストールが必要なので、Ruby Installer などから導入する
- OS 毎のインストール方法は こちら を参照
- 筆者は v3.1.3（確認コマンド
- SQLite3 がインストール済みであること
- 筆者は v3.39.5（確認コマンド
sqlite3 -version） - 今回は簡単に構築するために軽量な SQLite を採用
- Mac なら標準でインストールされている
- Windows はインストールが必要なので、公式サイトから導入する
- 筆者は v3.39.5（確認コマンド
- （参考）その他、記事の中で導入されるツールのバージョンは以下
- Bundler： v2.4.9
- Rails： v7.0.4
Ruby on Rails とは
Ruby on Rails（ルビー・オン・レイルズ）とは、Ruby の Web アプリケーション・フレームワークです。単に 「Rails（レイルズ）」 とも呼ばれます。
フレームワークとは「複雑な事を簡単に実現するための仕組み・ツール」です。
つまり簡単に言うと、「Ruby という言語で Webアプリを簡単に構築できる技術」です。
仕事現場でも "Ruby で開発する" となったら、高確率でこれがセットになっているので、Ruby を触ったらほぼ確実にこちらも触ることになるでしょう。
手順
今回は使い勝手の都合で Bundler（バンドラー）を中心に rails を構築していきます。
Bundler をインストール
※ 既に PC に入っていたら手順不要（確認コマンド bundle -v ）
Bundler はパッケージマネージャです。gem（ジェム：Ruby のライブラリ）を管理します。
既に Ruby には、標準の RubyGems というパッケージマネージャがありますが、Bundler の方が gem の依存関係まで管理できるので便利です。Bundler 自体も gem なので gem コマンドで入ります。
# インストール
gem install bundler
# インストール確認（バージョン確認）
bundle -v
アプリ用のディレクトリを用意する
好きな名前でディレクトリを用意しましょう（GitHub 等からクローンしたディレクトリでも構いません）。
コマンドで作成する場合は以下
# ホームディレクトリに "rails-demo" というディレクトリを用意
mkdir rails-demo
# 用意したディレクトリに移動
cd rails-demo
用意したディレクトリの配下で初期化コマンドを実施
bundle init
すると、ディレクトリに下に Gemfile という管理ファイルが自動生成される
rails-demo/ # 用意したディレクトリ
+ └ Gemfile
Gemfile とは
Gemfile（ジェムファイル）は、gem（Ruby のライブラリ）を管理するファイル。これがあれば、アプリ内で何の gem を使っているのかがわかり、更にインストールコマンド一発でいつでも gem を再インストールできる
# frozen_string_literal: true
source "https://rubygems.org"
# gem "rails"
Rails インストール
さて、ここからは、エディタ（VScode等）で作業していきます。
コメントアウトされている gem "rails" という部分をコメントインして、インストール可能な状態にする
- # gem "rails"
+ gem "rails"
ディレクトリ配下で、ターミナルを開いて、以下のコマンドを実行する
# Gemfile の中身をインストール
bundle install --path vendor/bundle
👉 尚、--path vendor/bundle オプションをつけると、グローバルではなくプロジェクト内に限定して gem がインストールされる。グローバルを汚染したくない人は付けると良いかも
以下のようにファイルが生成される
demo-rails
+ ├ .bundle/ # 自動生成
+ ├ vendor/ # 自動生成
+ │ └ bundle/ # オプション指定したディレクトリ
+ │ └ ruby/ # この配下に Rails のプログラムがインストールされる
├ Gemfile
+ └ Gemfile.lock # 自動生成（gem の更に細かい依存関係が書かれている）
Web アプリを自動生成する
続いて、rails コマンドで Web アプリを自動生成する。
アプリ生成コマンドは rails new {アプリフォルダ名}
今回は、既にアプリを作りたいディレクトリの中にいるので、「その場に作る」を意味するドット（.）を指定して実行する
# アプリ自動生成コマンド
rails new .
# 結果（例）
skip README.md # skip：上書きしない
create Rakefile # create: 新規作成する
create .ruby-version
create config.ru
conflict .gitignore # conflict: 内容が競合している
Overwrite /xxxxx/demo-rails/README.md? (enter "h" for help) [Ynaqdhm]
最後に [Ynaqdhm] のどれかを選んでエンターキーを押すように求められる。以下の中からアルファベットを１文字選び実行する。
（GitHub や GitLab から作成したものは、READMEファイルだけは n で上書きせず進めた方が良いと思います。それ以外は、個人利用なら a を選べば OK）
| 文字 | 意味 |
|---|---|
| Y | yes, overwrite.（上書きします） |
| n | no, do not overwrite.（上書きしません） |
| a | all, overwrite this and all others.（全てを上書き） |
| q | quit, abort.（実行の中断） |
| d | diff, show the differences between the old and the new（上書きする内容のファイル差分を表示する） |
| h | help, show this help（ヘルプの呼び出し） |
| m | merge, run merge tool（マージする。ツールの統合をする） |
これでファイルの新規作成や上書きが行われて Web アプリの最低限のソースコードが自動生成されました。
Gemfile をのぞいてみると、いろいろなライブラリ（gem）が勝手に追加されていると思います。
動作確認
先ほどのコマンドによって、Web アプリとして最低限のファイルが自動生成されたので、既に起動して画面が表示できる状態です。
以下のどちらかのコマンドを実行して開発用サーバを起動する。
# サーバ起動コマンド
rails server
# もしくは短縮系
rails s
Windows の場合は、ruby bin\rails server というコマンドでなければ起動しないかもしれません。
起動が完了すると、以下の状態でターミナルの表示が止まる。
=> Booting Puma
=> Rails 7.0.4.3 application starting in development
=> Run `bin/rails server --help` for more startup options
Puma starting in single mode...
* Puma version: 5.6.5 (ruby 3.1.3-p185) ("Birdie's Version")
* Min threads: 5
* Max threads: 5
* Environment: development
* PID: 69373
* Listening on http://127.0.0.1:3000
* Listening on http://[::1]:3000
Use Ctrl-C to stop
サーバ起動した状態で、Web ブラウザから http://localhost:3000 にアクセスしてみる。以下の様な画面が出れば、Web アプリの初期構築は完了です。
サーバ停止方法
サーバを止める場合は、ターミナルで control + C（Mac）/ Ctrl + C（Windows）で止めることができます。
停止操作をすると、以下の様なメッセージがターミナルに表示されて自動停止します。
^C- Gracefully stopping, waiting for requests to finish
=== puma shutdown: 2023-03-22 09:10:32 +0900 ===
- Goodbye!
Exiting
ここからは、app ディレクトリを中心に色々をコーディングしていくことで、独自の Web アプリが開発できます！