Rails7 で TODOアプリを作ろう ① (プロジェクトの作成)

## はじめに

Rails7がリリースして随分たちまが、Rails6とはだいぶ変更点があり、改めて把握しておく必要もありそうです。
今回は、簡単かつ良く出てくる実装を取り上げつつ、簡単なTODOアプリを作っていきます。

機能的には、認証機能や一対多のリレーションについて学ぶことができます。

### 今回は

#### プロジェクトの作成として

- asdf
- railsコマンド

について学びます。

では、はじめていきましょう。

## 1. asdfでRuby等の言語バージョンを管理する

### asdfとは

言語やライブラリのバージョン管理を行ってくれるツールの一つです。

書く言語やライブラリごとの、プラグインを追加することによって、機能が追加されます。

ここでは、ざっくりとMacでの導入方法を紹介しますが、基本的には各OSはパッケージマネージャー毎のコマンドは用意されています。

### ※すでに `rbenv` 等を使っている場合 

すでに `rbenv` 等でバージョン管理を行っている方は、そのままでも構いませんが、

`asdf` の導入にあたっては、先に各ツールを削除する必要があります。

例えば `rbenv` であれば

https://github.com/rbenv/rbenv#uninstalling-rbenv

こちらに `uninstall` に関しての記載があるようです。

初めて `ruby` の環境を作る方は上記内容は無視して、次に進んでください。

### Macへの導入方法

https://asdf-vm.com/

公式サイトより、asdfの導入をします。

まずは、上記リンクにアクセスし、

[![Image from Gyazo](https://i.gyazo.com/35cc2709d11d2e3c7e3096d797c2e967.png)](https://gyazo.com/35cc2709d11d2e3c7e3096d797c2e967)

赤枠のボタンを押しましょう。すると、

[![Image from Gyazo](https://i.gyazo.com/8996412881aabde2039041f7c8bdbd85.png)](https://gyazo.com/8996412881aabde2039041f7c8bdbd85)

このように各言語ごとの導入方法が細かく書いてありますので、Mac用の設定を見ていきます。

curl と git をインストール

```zsh
% brew install coreutils curl git
```
asdf をインストール

```zsh
% brew install asdf
```

パスを通す

```zsh
% echo -e "\n. \"$(brew --prefix asdf)/libexec/asdf.sh\"" >> ~/.zshrc
```

シェルの再起動
```zsh
source .zshrc
```

現在Macでは `bash` ではなく `zsh` が使われている為、公式のコマンドを一部改変し、このようなパスを指定する流れとなります。

最後にバージョンの確認が出来るか確認しておきましょう。

```zsh
% asdf version
v0.12.0
```

このようにバージョン番号が帰ってくればOKです。

### ruby

次に、`ruby` をインストールします。

asdfではまずプラグインをインストールしますので、

https://github.com/asdf-vm/asdf-ruby

こちらのリンクから、

```zsh
% asdf plugin add ruby https://github.com/asdf-vm/asdf-ruby.git
```

プラグインを導入しておきます。

 `ruby` のインストールには、 `ruby-build` というツールが必要となりますので、

https://github.com/rbenv/ruby-build/wiki

こちらのリンクより、今回インストールする ruby3.1以降に必要な設定を行います。

```zsh
% brew install openssl@3 readline libyaml gmp
```

これでrubyがインストール出来るはずです。

```zsh
% asdf list-all ruby
```

で、インストール可能なバージョンの確認ができます。

インストールは、

```zsh
% asdf install ruby 3.2.2
```

バージョン指定して行い、使用バージョンは、

環境全体の設定の `global` を使って

```zsh
% asdf global ruby 3.2.2
```

とりあえず、このように指定しておきましょう。

### nodejs

続けて `nodejs` です。 

https://github.com/asdf-vm/asdf-nodejs

こちらのリンクから

```zsh
% brew install gpg gawk
% asdf plugin add nodejs https://github.com/asdf-vm/asdf-nodejs.git
```

必要ツールとプラグインを導入します。

また、使用可能なバージョンの確認もしておきます。

```zsh
% asdf list-all nodejs
```

ただし、今回は最終バージョンである、 `latest` を使います。

```zsh
% asdf install nodejs latest
% asdf global nodejs latest
```

`latest` を使えば新しいものを使えますが、依存関係のエラーを起こす場合もありますので、プロジェクトによっては適宜バージョンを明示的に指定する必要があります。

### yarn

最後に `yarn` もasdfで管理しておきましょう。

```zsh
% asdf plugin-add yarn
% asdf install yarn latest
% asdf global yarn latest
```

これで準備は完了です。

## 2. プロジェクトを作成し、サーバーを起動する

### asdfのローカル設定

では、プロジェクトを作っていきましょう。

任意のディレクトリからで良いですが、ここでは

`Desktop` > `my_work`

に作成していきましょう。

```zsh
% cd ~/Desktop
Desktop % mkdir my_work
Desktop % cd my_work
```

これでカレントディレクトリを `my_work` としました。

次に、このディレクトリ以下で使う各言語バージョンを `asdf` の `local` 設定として行っておきます。

```zsh
my_work % asdf local ruby 3.2.2
my_work % asdf local nodejs latest
my_work % asdf local yarn latest
```

### Railsのインストール

`rails` は `gem` を使ってインストールしていきます。

`gem` は `ruby` のライブラリを導入するためのマネージャーの事を指します。

まずは `bundler` をいう `gem` をインストールします。

```zsh
my_work % gem install bundler
```

`bundler` は導入する `gem` の管理を一元化するためのライブラリです。

結果が以下のようになればOKです。

```zsh
my_work % gem install bundler
Fetching bundler-2.4.21.gem
Successfully installed bundler-2.4.21
Parsing documentation for bundler-2.4.21
Installing ri documentation for bundler-2.4.21
Done installing documentation for bundler after 0 seconds
1 gem installed
```

そして、いよいよ `Rails` です

```zsh
my_work % gem install -v 7.1.1 rails
```

今回は `7.1.1` を指定していますが、 `-v 7.1.1 rails` この部分はオプションとなりますので、なければ最新版が自動で入ります。

```zsh
.
.
(略)
Done installing documentation for activesupport, actionview, actionpack, railties, activemodel, activerecord, activejob, activestorage, actiontext, actionmailer, actionmailbox, actioncable, rails after 4 seconds
13 gems installed
```

これでプロジェクトを作成可能となりました。

## 3. プロジェクトの作成

### rails new

早速コマンドを打ってみましょう。

```zsh
my_work % rails _7.1.1_ new todo_app -c bootstrap 
```

以下のような結果になればOKです。

```zsh
my_work % rails _7.1.1_ new todo_app -c bootstrap 
      create  
      create  README.md
      create  Rakefile
      create  .node-version
      create  .ruby-version
      create  config.ru
.
.
（略）
.
.
  Add watch:css script
         run    npm pkg set scripts.watch:css="nodemon --watch ./app/assets/stylesheets/ --ext scss --exec \"yarn build:css\"" from "."
        gsub    Procfile.dev
         run  bundle install
Bundle complete! 16 Gemfile dependencies, 85 gems now installed.
Use `bundle info [gemname]` to see where a bundled gem is installed.
         run  bundle lock --add-platform=x86_64-linux
Writing lockfile to /Users/kimuratomoaki/Desktop/my_work2/todo_app/Gemfile.lock
         run  bundle lock --add-platform=aarch64-linux
Writing lockfile to /Users/kimuratomoaki/Desktop/my_work2/todo_app/Gemfile.lock
my_work % 
```

ここの `_7.1.1_` もオプションなので、なければインストールされているRailsの最新版が使われます。

##### 【＊注意】 `Rails 7.0.x` と　 `Rails ７．１．ｘ` 　とで 挙動が変わります。

CSSフレームワークの選択オプションで、 `-c tailwind` の場合は `importmap` が自動で採用されていました。が、

`-c bootstrap` の場合、Rails 7.0.x だと `esbuild` を採用しており、 7.1.x からは `importmap` になっていました。

今回は `7.1.1` を使っていますので、 `7.0.x` を使ってしまうと以降の一部の実装（Bootstrapの適用）が参考にならなくなります。 ご注意下さい。


その他のオプションとして、

| オプション   | 項目      | オプションの種類                                                  |
|---------|---------|-----------------------------------------------------------|
| -c      | 使用するCSS | tailwind<br/>bootstrap<br/>等                              |
| -d      | データーベース | mysql<br/>postgresql<br/>sqlite3<br/>等                    |
|  --skip | 項目を含めない | --skip-test<br/>--skip-javascript<br/>--skip-bundle<br/>等 |

など、沢山用意されています。

興味があれば、 `rails new -h` で参照することができますので、調べてみてください。

続いて、プロジェクトに移動します。

```zsh
my_work % cd todo_app 
todo_app % 
```

プロジェクトフォルダからアプリを起動します。
```zsh
todo_app % rails s
```

以下のようにサーバーが動けば成功です。

```zsh
todo_app % rails s
=> Booting Puma
=> Rails 7.1.1 application starting in development 
=> Run `bin/rails server --help` for more startup options
Puma starting in single mode...
* Puma version: 6.4.0 (ruby 3.2.2-p53) ("The Eagle of Durango")
*  Min threads: 5
*  Max threads: 5
*  Environment: development
*          PID: 57685
* Listening on http://127.0.0.1:3000
* Listening on http://[::1]:3000
Use Ctrl-C to stop
```

では、プレビューも確認しておきましょう。

`chrome` を開いて、urlバーに

```
localhost:3000
``` 

と打ってみましょう

[![Image from Gyazo](https://i.gyazo.com/7833dddbb8b1312a648e2f7aa9fbb79a.png)](https://gyazo.com/7833dddbb8b1312a648e2f7aa9fbb79a)

Railsのロゴが出てくればOKです。

これでプロジェクトの作成ができました。

### シャットダウン

プレビュー中はrailsサーバーを動かしますので、使わない時はシャットダウンしておきましょう。

`ctrl` + `c` でサーバーを止める事ができます。

```zsh
^C- Gracefully stopping, waiting for requests to finish
=== puma shutdown: 2023-10-26 10:20:48 +0900 ===
- Goodbye!
Exiting
 todo_app % 
```

## 4. gitで作業を管理する

### git

ここまでを保存しておきましょう。

```zsh
todo_app % git init
todo_app % git add .
todo_app % git commit -m "プロジェクト作成"
```

### GitHub

Githubの設定ができているのであれば、同名のリポジトリを作成し、pushしておきましょう。

## おわりに

本チャプターはここまでとなります。

### 次回は

https://qiita.com/tomoaki-kimura/items/7936127388d235b72011

- Scaffold
- MVC
- ルーティング

を学びます。