Ruby on Rails 準備
いよいよこの章では、Ruby on Rails (以下、Rails)のアプリケーションを作成します。
アプリの概要
このカリキュラムでは、みなさんがプログラミング学習の記録をつけて
シェアすることができる TechLog というアプリを作成します。
TechLog では学習の記録 (以下、学習ログ) の投稿、詳細、削除が可能であり、
devise という gem を用いたユーザー認証機能も搭載しています。
また、見た目については最近流行している CSS フレームワークの一つである Tailwind Css を使用します。
(実際、著者が働いている現場でも CSS については Tailwind CSS で管理しています。)
Tailwind CSS は Rails 7.0 以降のバージョンでは標準搭載されており、
複雑な設定をすることなく最初から使用できるため Rails と相性が良いフレームワークです。
後述しますが、Tailwind CSS を使用には rails new を実行する際にオプションを付けるだけで済みます。
Rails インストール確認
Rails の gem 自体は前の章で Bundler を用いて workspace ディレクトリ内にインストールできているはずです。
今一度、workspace ディレクトリで Rails をインストールできていることを確認しましょう。
$ cd ~/workspace
$ bundle exec rails -v
Rails 7.0.3.1
Rails プロジェクト作成
Rails で新しいプロジェクト(各種ファイル一式)を作成するには
rails newコマンドを workspace ディレクトリで使用します。
アプリケーションの名前は TechLog なので、ディレクトリ名としては techlog-app と指定します。
また、先述の通り今回は CSS フレームワークとして Tailwind CSS を使用するので
--css tailwind というオプションを付けましょう。
$ bundle exec rails new techlog-app --css tailwind
create
create README.md
create Rakefile
...
Using bootsnap 1.12.0
Bundle complete! 16 Gemfile dependencies, 75 gems now installed.
Use `bundle info [gemname]` to see where a bundled gem is installed.
この時、ご利用の環境により cannot load such file -- bootsnap/setup (LoadError) という
以下のようなエラーメッセージが出力される場合があります。
run bundle binstubs bundler
rails importmap:install
/Users/YourName/workspace/techlog-app/config/boot.rb:4:in `require': cannot load such file -- bootsnap/setup (LoadError)
しかし、この後の手順で対応していくので今は気にしなくて大丈夫です。
rails プロジェクトの gem インストール
さて、これで Rails プロジェクト techlog-app が作成されました。
現在のディレクトリは workspace ですので、techlog-app ディレクトリに移動しましょう。
$ cd techlog-app/
次に、Rails プロジェクトを動かすために必須となる gem のインストールを行います。
必要な gem は rails new した時に Gemfile が自動生成されているので、
前の章と同じ手順で bundle install を実行するだけです。
最初に gem のインストール先 (パス) を指定しましょう。
$ bundle config set path '.bundle'
少しややこしいですが、techlog-app ディレクトリ内で /.bundleディレクトリを指定しているため
/workspace/techlog-app/.bundle ディレクトリに gem をインストールすることになります。
パスを指定できたら、bundle install を実行します。`
$ bundle install
Fetching gem metadata from https://rubygems.org/..........
Fetching rake 13.0.6
Installing rake 13.0.6
...
Fetching rails 7.0.3
Installing rails 7.0.3
Bundle complete! 16 Gemfile dependencies, 75 gems now installed.
Bundled gems are installed into `./vendor/bundle`
Post-install message from rubyzip:
RubyZip 3.0 is coming!
**********************
The public API of some Rubyzip classes has been modernized to use named
parameters for optional arguments. Please check your usage of the
following classes:
* `Zip::File`
* `Zip::Entry`
* `Zip::InputStream`
* `Zip::OutputStream`
Please ensure that your Gemfiles and .gemspecs are suitably restrictive
to avoid an unexpected breakage when 3.0 is released (e.g. ~> 2.3.0).
See https://github.com/rubyzip/rubyzip for details. The Changelog also
lists other enhancements and bugfixes that have been implemented since
version 2.3.0.
上記のように Bundle complete! を含んだメッセージが出ていれば OK です。
Import maps インストール
Rails 6 では JavaScript をまとめて取り扱うためのバンドラとして webpacker が標準でしたが
、Rails 7 から Import maps が標準となっています。
本カリキュラムでは JavaScript をゴリゴリ実装するわけではないため、
今の時点では詳しく知らなくても問題ありませんが、余裕があれば参考サイトも合わせてお読みください。
Import maps を Rails アプリにインストールするには rails importmap:installコマンドを使います。
techlog-app ディレクトリ内で次のコマンドを実行しましょう。
※もし rails new時に importmap:install のエラーが出ていなければ本手順は不要です。
$ bundle exec rails importmap:install
Add Importmap include tags in application layout
insert app/views/layouts/application.html.erb
Create application.js module as entrypoint
create app/javascript/application.js
Use vendor/javascript for downloaded pins
create vendor/javascript
create vendor/javascript/.keep
Ensure JavaScript files are in the Sprocket manifest
append app/assets/config/manifest.js
Configure importmap paths in config/importmap.rb
create config/importmap.rb
Copying binstub
create bin/importmap
上記のように各ファイルが作成されており、特にエラーが出ていなければ OK です。
Tailwind CSS インストール
続いて Tailwind CSS を Rails アプリにインストールします。
Tailwind CSS も Rails 7.0 以降では標準となっているため、railsコマンドを使ってインストールできます。
※もし rails new時に tailwindcss:install のエラーが出ていなければ本手順も不要です。
$ bundle exec rails tailwindcss:install
Add Tailwindcss include tags and container element in application layout
insert app/views/layouts/application.html.erb
insert app/views/layouts/application.html.erb
insert app/views/layouts/application.html.erb
Build into app/assets/builds
create app/assets/builds
create app/assets/builds/.keep
append app/assets/config/manifest.js
append .gitignore
Add default config/tailwindcss.config.js
create config/tailwind.config.js
Add default app/assets/stylesheets/application.tailwind.css
create app/assets/stylesheets/application.tailwind.css
Add default Procfile.dev
create Procfile.dev
Ensure foreman is installed
run gem install foreman from "."
Fetching foreman-0.87.2.gem
Successfully installed foreman-0.87.2
Parsing documentation for foreman-0.87.2
Installing ri documentation for foreman-0.87.2
Done installing documentation for foreman after 0 seconds
1 gem installed
Add bin/dev to start foreman
create bin/dev
Compile initial Tailwind build
run rails tailwindcss:build from "."
...
Done in 176ms.
こちらも、上記のように各ファイルが作成されており、特にエラーが出ていなければ OK です。
動作確認 (rails s)
ここまで準備ができたら、最後に Rails サーバを起動して最低限の動作確認をしておきましょう。
Rails サーバを起動するには bundle exec rails s コマンドを実行します。
$ bundle exec rails s
=> Booting Puma
=> Rails 7.0.3 application starting in development
=> Run `bin/rails server --help` for more startup options
Puma starting in single mode...
* Puma version: 5.6.4 (ruby 3.0.4-p208) ("Birdie's Version")
* Min threads: 5
* Max threads: 5
* Environment: development
* PID: 64014
* Listening on http://127.0.0.1:3000
* Listening on http://[::1]:3000
Use Ctrl-C to stop
上記のようなメッセージが表示されたら、ブラウザで http://127.0.0.1:3000/ にアクセスします。
以下のように Rails 7.0 以降のランディングページが表示されることを確認してください。
<img width="600" alt="スクリーンショット 2022-06-18 8 18 10" src="https://user-images.githubusercontent.com/68495563/174411772-6905b264-365e-44ad-8f2e-29efc9b0f762.png">
確認が終わったら Ctrl + C を押して、Rails サーバを停止させておきます。
補足：bin/rails コマンドについて
Rails プロジェクトの中に bin/というディレクトリが作成されています。
この中に rails というファイルがあり、rails s などの rails コマンドはこのファイルを使用しています。
このように bin/ ディレクトリ内に存在するファイルを通して実行される処理の場合、
実は bundle exec を付けずにbin/rails という形式で実行できます。
また、bin/rails コマンドで Rails サーバを起動する場合は spring という、
開発環境での起動高速化の仕組みを利用して実行できるため、開発上のメリットがあります。
ただ、この spring というのは便利な一方で厄介な存在でもあるため注意が必要です。
例えばコードを修正してもすぐに反映されなかったり、rails コマンドが
正常に実行できない場合があったりと、慣れていないと沼にハマってしまう場合があります。
そのため、本カリキュラムでは bin/rails コマンドを使わずに bundle exec rails コマンドを実行していきます。
(一部コマンドについては bin/xxx を使用する場合もあります。)
起動の高速化という恩恵は受けられないものの、本カリキュラムでは重い処理を実行するわけではなく、
大きな差は生まれないためご安心いただければと思います。