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

Posted at 2024-09-28

tailwindとSass(dartsass)を使う

tailwindcssをrailsにインストールすると、dartsassの自動ビルドが効かなくなるため
dartsassの自動コンパイル設定を追記します

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

<!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

applicaion.js

import "@hotwired/turbo-rails";
import "controllers";
import "task";

importmapで宣言したものを読み込みます。

config/importmap.rb

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

//= 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ファイルのリンクを示しています。

クリップボードにコピー

日本語訳で読むと簡単に実装できそうです。

日付の表し方

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

// 出力は2024-09-27

クリップボードに今日の日付をコピーする

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();
}

_main.html.erb

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

JSの学習

配列に改行を加える

const taskHTML = data.tasks.join("\n");
// tasks:[1,2,3]
//  👇️ 改行されます
//   1
//   2
//   3

改行をconsole.log(taskHTML)で確認できます。

Railsへのget, put

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);
  });

put

import { put } from "@rails/request.js"

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

Railsの学習

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

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

以上です。

ruu2023

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up