[Rails]タスク管理アプリ（Part.1）

## はじめに

Railsでタスク管理アプリを作成します。
利用する各ツールのバージョンは以下とします。
|ツール|バージョン|
|-|-|
|Ruby|3.2.4|
|Ruby on Rails|7.1.3.2|
|PostgreSQL|16.2| 

## アプリケーションのひな型を作成する

アプリケーションのひな型を作成します。
実行には少し時間がかかります。
```bash:
rails new taskapp -d postgresql
```

実行が完了したらアプリケーションフォルダに移動します。
```bash:
cd taskapp
```

データベースを作成します。
```bash:
bin/rails db:create
```
2つのデータベースが作成されました。
>$ bin/rails db:create
Created database 'taskapp_development'
Created database 'taskapp_test'

サーバを起動します。
```bash:
bin/rails s
```

以下にアクセスします。

http://127.0.0.1:3000/

サーバが起動していることを確認できました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/512307/7e1e9c17-bda8-99a9-9a0a-1b2d74eb47a7.png)

## Slimを利用できるようにする

アプリケーションフォルダ直下にあるGemfileを開いて、
最後の行にslim-railsとhtml2slimについての設定を追加します。

```bash:Gemfile
gem 'slim-rails' #追加
gem 'html2slim' #追加
```

gemをインストールします。
```bash:
bundle
```

erbファイルをslimに変更します。
```bash:
bundle exec erb2slim app/views/layouts/ --delete
```
>$ bundle exec erb2slim app/views/layouts/ --delete
NoMethodError: undefined method `exists?' for File:Class
  Use --trace for backtrace.

エラーとなったため、--trace オプションをつけて再実行します。
```bash:
bundle exec erb2slim app/views/layouts/ --delete --trace
```
>$ bundle exec erb2slim app/views/layouts/ --delete --trace
bundler: failed to load command: erb2slim (/home/yuta/.rbenv/versions/3.2.4/bin/erb2slim)
/home/yuta/.rbenv/versions/3.2.4/lib/ruby/gems/3.2.0/gems/html2slim-0.2.0/lib/html2slim/converter.rb:17:in `initialize':
 undefined method `exists?' for File:Class (NoMethodError)

調べたところ、exists? メソッドは削除されているため、exist? メソッドを使うように修正する必要があるそうです。
対象のファイルを直接修正しちゃいます。

```bash:
vi /home/yuta/.rbenv/versions/3.2.4/lib/ruby/gems/3.2.0/gems/html2slim-0.2.0/lib/html2slim/converter.rb
```

再度、erbファイルをslimに変更します。
```bash:
bundle exec erb2slim app/views/layouts/ --delete
```
今度はうまくいきました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/512307/666245b2-0bd0-7965-ebb1-dc5a1317d717.png)

## Bootstrapを導入する

アプリケーションフォルダ直下にあるGemfileを開いて、
最後の行にbootstrapについての設定を追加します。

```bash:Gemfile
gem 'bootstrap' #追加
gem 'dartsass-sprockets' #追加
```

gemをインストールします。
```bash:
bundle
```

scssを利用するため、application.cssを削除します。
```bash:
rm app/assets/stylesheets/application.css
```

application.scssを作成します。
```bash:
touch app/assets/stylesheets/application.scss
echo '@import "bootstrap";' >> app/assets/stylesheets/application.scss
cat app/assets/stylesheets/application.scss
```
>$ cat app/assets/stylesheets/application.scss
@import "bootstrap";

application.html.slimを編集します。
```diff_slim:application.html.slim
doctype html
html
  head
    title
      | Taskapp
    meta[name="viewport" content="width=device-width,initial-scale=1"]
    = csrf_meta_tags
    = csp_meta_tag
    = stylesheet_link_tag "application", "data-turbo-track": "reload"
    = javascript_importmap_tags
  body
+    .app-title.navbar.navbar-expand-md.navbar-light.bg-light
+      .navbar-brand Taskapp
+    .container
    = yield

```

## Railsのエラーメッセージなどを日本語化する

日本語翻訳ファイルをダウンロードします。
```bash:
wget https://raw.githubusercontent.com/svenfuchs/rails-i18n/master/rails/locale/ja.yml -P config/locales/
```

デフォルトで日本語のコンテンツを使用するように設定ファイルを作成します。
```bash:
touch config/initializers/locale.rb
echo 'Rails.application.config.i18n.default_locale = :ja' >> config/initializers/locale.rb
cat config/initializers/locale.rb
```
>$ cat config/initializers/locale.rb
Rails.application.config.i18n.default_locale = :ja

## タスクモデルを作成する

ジェネレータを利用して、タスクモデルを作成します。
```bash:
bin/rails g model Task name:string description:text
```

マイグレーションをデータベースに適用します。
```bash:
bin/rails db:migrate
```
>$ bin/rails db:migrate
== 20240505161038 CreateTasks: migrating ======================================
-- create_table(:tasks)
   -> 0.0938s
== 20240505161038 CreateTasks: migrated (0.0941s) =============================

## コントローラとビュー

アクションの設計パターンは以下の通りです。
|URLの例|HTTPメソッド|アクション名|機能名|役割|
|-|-|-|-|-|
|/tasks|GET|index|一覧表示|全タスクを表示|
|/tasks/17|GET|show|詳細表示|idのタスクを表示|
|/tasks/new|GET|new|新規登録画面|新規登録画面を表示|
|/tasks|POST|create|登録|登録処理を実施|
|/tasks/17/edit|GET|edit|編集画面|編集画面を表示|
|/tasks/17|PATCH、PUT|update|更新|更新処理を実施|
|/tasks/17|DELETE|destroy|削除|削除処理を実施|

ジェネレータを利用して、コントローラを作成します。
```bash:
bin/rails g controller tasks index show new edit
```

config/routes.rbを編集します。

```diff_ruby:routes.rb
Rails.application.routes.draw do
-  get 'tasks/index'
-  get 'tasks/show'
-  get 'tasks/new'
-  get 'tasks/edit'
-  get "up" => "rails/health#show", as: :rails_health_check
+  root to: 'tasks#index'
+  resources :tasks
end
```

サーバを起動します。
```bash:
bin/rails s
```

以下にアクセスします。

http://127.0.0.1:3000/

（いい感じです！）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/512307/b2b58e26-ca54-0f80-291d-5e0dc35bc361.png)

今回はここまでです。
次回は新規登録機能の実装から始めます。