RailsでSass自動コンパイル, assetsの設定 - RailsTIL(4h)

## tailwindとSass(dartsass)を使う
- tailwindcssをrailsにインストールすると、dartsassの自動ビルドが効かなくなるため
- dartsassの自動コンパイル設定を追記します
```diff_ada:Procfile.dev
web: bin/rails server -b 0.0.0.0 -p 3200
css: bin/rails tailwindcss:watch
+ css: bin/rails dartsass:watch
```

## 表示が変わらない・おかしいとき
- public/assetsの内容を全て削除
- rails assets:precompile実行時に生成され、表示に優先されます。開発時は要りません。

## それでもおかしいとき
- application.scssの内容をメモ帳にコピー、そして以下２つのフォルダ内容をすべて削除
```
app/assets/stylesheets
app/assets/builds
```
- 再インストールしてファイルを生成
```
rails tailwindcss:install
./bin/rails dartsass:install
```
- ファイルを生成したらメモ帳にコピーしたapplication.scssの内容を戻します。

## gemを再インストールするとき

```
bundle exec gem uninstall tailwindcss-rails
bundle install
```


## application.html.erb
```erb:application.html.erb
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JDIAPP</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
    <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
    <%= javascript_importmap_tags %>
  </head>
  <body>
    <main>
      <%= yield %>
    </main>
  </body>
</html>
```
 

### 補足説明

```
<%= csrf_meta_tags %>
```
- クロスサイトリクエストフォージェリの対策トークンです。（deviseで必須）

```
<%= javascript_importmap_tags %>
```
- config/importmap.rbを確認してjsを読み込みます。
- app/javascript/application.jsを参照するようになります。

## javascript/application.js
```javascript:applicaion.js
import "@hotwired/turbo-rails";
import "controllers";
import "task";
```
- importmapで宣言したものを読み込みます。

## config/importmap.rb
```ruby:importmap.rb
pin "application", preload: true
pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
pin_all_from "app/javascript/controllers", under: "controllers"
pin "task", to: "task.js"
pin "sortablejs", to: "https://ga.jspm.io/npm:sortablejs@1.15.0/modular/sortable.esm.js"
```
- pin_all_fromでcontrollerフォルダをまとめて指定できます。

## manifest.js
```javascript:manifest.js
//= link_tree ../images
//= link_tree ../../../vendor/javascript .js
//= link_tree ../builds
//= link task.js
//= link controllers/application.js
//= link controllers/clipboard_controller.js
//= link controllers/hello_controller.js
//= link controllers/index.js
//= link controllers/sortable_controller.js
```

- コメント付いていて正解です。使わないときは=を外すか、=の前に空白を入れます。
- css, javascriptなどのassetsファイルのリンクを示しています。

## クリップボードにコピー
https://stimulus.hotwired.dev/handbook/building-something-real
- 日本語訳で読むと簡単に実装できそうです。


## 日付の表し方

```javascript
const today = new Date()
    .toLocaleDateString("ja-JP", {
      year: "numeric",
      month: "2-digit",
      day: "2-digit",
    })
    .replaceAll("/", "-");

// 出力は2024-09-27
```

## クリップボードに今日の日付をコピーする
```javascript:clipboard_controller.js
copy() {
    const getToday = () => {
      const today = new Date()
        .toLocaleDateString("ja-JP", {
          year: "numeric",
          month: "2-digit",
          day: "2-digit",
        })
        .replaceAll("/", "-");

        //クリップボードにコピー
        navigator.clipboard.writeText(targetValue).then(today);
    };

    getToday();
}
```

```erb:_main.html.erb
<%= button_tag 'クリップボードにコピー',data: { controller: "clipboard,", action: "click->clipboard#copy" } %>
```

## JSの学習
### 配列に改行を加える
```javascript
const taskHTML = data.tasks.join("\n");
// tasks:[1,2,3]
//  👇️ 改行されます
//   1
//   2
//   3
```
- 改行をconsole.log(taskHTML)で確認できます。

### Railsへのget, put

```javascript:fetch
fetch("/tasks/response_data", {
  method: "GET",
  headers: {
    "Content-Type": "application/json",
  },
})
  .then((response) => response.json())
  .then((data) => {
    makeResData(data);
  })
  .catch((error) => {
    console.error("Error:", error);
  });
```
```javascript:put
import { put } from "@rails/request.js"

put(`/tasks/${evt.item.dataset.sortableId}/sort`, {
  body: JSON.stringify({row_order_position: evt.newIndex})
})
```

## Railsの学習
```ruby:tasks_controller.rb
  def response_data
    tasks = Task.includes(:user).where(user_id: current_user.id).rank(:row_order)
    archives = Archive.includes(:user).where(user_id: current_user.id).order(created_at: :desc)
    arrayTask = []
    arrayArchive = []
    tasks.each do |task|
      arrayTask.push(task.content)
    end
    archives.each do |archive|
      arrayArchive.push(archive.content)
    end
    data = { tasks: arrayTask, archives: arrayArchive }
    render json: data
  end
```

```ruby:routes.rb
  resources :tasks, only: [:index, :create, :edit, :update, :destroy] do
    collection do
      delete 'destroy_task_item', to: 'tasks#destroy_task_item'
      delete 'destroy_archive_item', to: 'tasks#destroy_archive_item'
      get 'response_data', to: 'tasks#response_data'
    end
    member do
      put :sort
      patch 'mark_as_done', to: 'tasks#mark_as_done'
    end
  end
```
- member do はtasks/:id/sortのようになります。
- 今回のresponse_dataはcollection do に追記しました。

## Rails Routes

- routesはterminalより、webのほうが見やすいです。
http://localhost:3000/rails/info/routes

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3822203/3953709e-11f7-5b9d-a7a8-44763224e74e.png)


以上です。

ruu2023