Ruby 3.2.0 で Rails 7.0.4 を動かす。Turbo Rails Tutorial をやってみた（0章）

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

https://www.hotrails.dev/turbo-rails

# 0章 [Turbo Rails tutorial introduction](https://www.hotrails.dev/turbo-rails/turbo-rails-tutorial-introduction)

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

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

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

https://github.com/rbenv/ruby-build/discussions/2118


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

```terminal
$ brew install libyaml
$ rbenv install 3.2.0
$ rbenv local 3.2.0
```

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

```terminal
$ gem install rails
$ rails -v
Rails 7.0.4
```

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

https://stackoverflow.com/questions/70482086/rails-7-0-esbuild-running-app-gives-error-command-build-not-found

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

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

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

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

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

https://techracho.bpsinc.jp/hachi8833/2022_05_26/118202#3

`bundler`のバージョンでエラーが出たので、バージョンを揃えてから`rails new`し直しました。
```terminal
.
.
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`のバージョンをロックします。

```ruby: Gemfile
gem "turbo-rails", "~> 1.0"
```

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

```terminal
$ 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 コードをプリコンパイルするスクリプトを同時に実行することができます。


```terminal
$ bin/dev
```

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

```terminal
.
.
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`にアクセスできるようになっていれば、環境構築完了です！👌 

![スクリーンショット 2023-01-03 18.26.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/293962/7a63206d-428c-c49d-5abc-b81d3ce1d3a3.png)

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

https://qiita.com/jnchito/items/5c41a7031404c313da1f#bindev-%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E3%81%A7%E3%82%B5%E3%83%BC%E3%83%90%E3%82%92%E8%B5%B7%E5%8B%95%E3%81%99%E3%82%8B

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

https://qiita.com/yuppymam/items/4d7a778040207cc4d698