本記事は、🔽「Turbo Rails Tutorial」の学習を進めていく際の個人メモです！

0章 Turbo Rails tutorial introduction

この章では、環境構築をしていきます。ちなみに私は Mac ローカルで進めます。最新の ruby で進めたかったので ruby 3.2.0 をインストールしました。

$ brew update
$ brew upgrade ruby-build
$ rbenv install 3.2.0

インストール時に下記と同じエラーが出ました。

ruby 3.2.0では、libyamlやlibffiを別途インストールする必要があるそうです。

$ brew install libyaml
$ rbenv install 3.2.0
$ rbenv local 3.2.0

無事インストールできたので、次は rails をインストールします。

$ gem install rails
$ rails -v
Rails 7.0.4

本記事の最後のbin/devコマンドでエラーが出るので、以下の記事を参考に、

この時点で最新の npm バージョンにしておきます。

$ brew upgrade node
$ brew upgrade npm
$ node -v
v19.3.0
$ npm -v
9.2.0

rails newします。ここでは JavaScript のbundleに使うツールをesbuildに指定しています。

$ rails new quote-editor --css=sass --javascript=esbuild --database=postgresql

🔽 JavaScript バンドラーの違いについては、以下の記事内の内容も参考になりました。

bundlerのバージョンでエラーが出たので、バージョンを揃えてからrails newし直しました。

.
.
can't find gem bundler (= 2.4.1) with executable bundle
.
.
$ rm -rf quote-editor
$ gem install bundler -v 2.4.1
$ rails new quote-editor --css=sass --javascript=esbuild --database=postgresql

rails 7.0系での動作で、予期せぬ問題を回避するため、turbo-rails gemのバージョンをロックします。

Gemfile

gem "turbo-rails", "~> 1.0"

bundle installして、bin/setupコマンドで依存関係をインストールし、データベースを作成します。（ここで postgresql が起動できずエラーとなったので、postgresql@15に切り替えてみたところ成功しました。自分の過去記事が役立ちました✌️）

$ bundle install
$ bin/setup
== Installing dependencies ==
The Gemfile's dependencies are satisfied

== Preparing database ==

== Removing old logs and tempfiles ==

== Restarting application server ==

別ターミナルでbin/devコマンドを打ち、rails server、CSS と JavaScript コードをプリコンパイルするスクリプトを同時に実行することができます。

$ bin/dev

ruby3.2.0にsassが入っていないことで止まってしまったので、インストールしてから再挑戦。

.
.
rbenv: sass: command not found
.
.
$ gem install sass

$ bin/dev
18:04:12 web.1  | started with pid 62059
18:04:12 js.1   | started with pid 62060
18:04:12 css.1  | started with pid 62062
18:04:12 css.1  | yarn run v1.22.19
18:04:12 js.1   | yarn run v1.22.19
18:04:12 css.1  | $ sass ./app/assets/stylesheets/application.sass.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules --watch
18:04:12 js.1   | $ esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=assets --watch
18:04:13 js.1   | [watch] build finished, watching for changes...
18:04:13 css.1  | Sass is watching for changes. Press Ctrl-C to stop.
18:04:13 css.1  | 
18:04:13 web.1  | => Booting Puma
18:04:13 web.1  | => Rails 7.0.4 application starting in development 
18:04:13 web.1  | => Run `bin/rails server --help` for more startup options
18:04:14 web.1  | Puma starting in single mode...
18:04:14 web.1  | * Puma version: 5.6.5 (ruby 3.2.0-p0) ("Birdie's Version")
18:04:14 web.1  | *  Min threads: 5
18:04:14 web.1  | *  Max threads: 5
18:04:14 web.1  | *  Environment: development
18:04:14 web.1  | *          PID: 62061
18:04:14 web.1  | * Listening on http://127.0.0.1:3000
18:04:14 web.1  | * Listening on http://[::1]:3000
18:04:14 web.1  | Use Ctrl-C to stop

http://localhost:3000にアクセスできるようになっていれば、環境構築完了です！👌

bin/devでは、CSS や JavaScript の変更があった場合に即時に変更を反映してくれるので便利ですね！bin/devの仕組みは、以下の記事が参考になりました✨

以上、0章でした👍
🔽 次は1章です