Kimama-IT

ITに関する覚書き

【prettier】tailwindcssへのprettierの適用

tailwindcss next.js prettier

免責事項

本ブログの内容の利用により生じたいかなる損害・トラブルについても、筆者は一切の責任を負いかねます。ご利用は自己責任でお願いいたします。

構成

以下のコマンドでnext.jsとtailwindcssをインストール済み。

  • npx create-next-app@latest

バージョン情報は

  • node.js　v22.18.0
  • next.js　v15.5.2
  • tailwindcss　v4.1.12

tailwindcssへのprettier導入手順

以下のコマンドを実行する。

  • npm install -D prettier prettier-plugin-tailwindcss

以下のファイルをプロジェクトルートディレクトリ（package.jsonがあるディレクトリ）に作成する。

{
  "plugins": ["prettier-plugin-tailwindcss"]
}

整形の実行

VSCodeのprettier拡張機能を使用する方法

  • VSCodeのprettier拡張機能を使用して整形できます。
  • 導入方法は他サイトに記載がありますので省きます。

nodeコマンドを使用する方法

TypeScriptの場合の必要条件

  • Node.jsがv22.6.0以上
  • Node.jsがv24.3.0より前なら --experimental-strip-types が必要

プロジェクトルートディレクトリでの実行を想定
/srcディレクトリ配下のファイルを全てチェックする。

  • node --experimental-strip-types node_modules/prettier/bin/prettier.cjs ./src --check

/srcディレクトリ配下のファイルを全て整形して保存する。

  • node --experimental-strip-types node_modules/prettier/bin/prettier.cjs ./src --write

参考サイト

tailwindcss.com
github.com
prettier.io

【HTML】【JavaScript】SVGの枠の長さを取得する

HTML JavaScript 
<!DOCTYPE html>
<html>
    <body>
        <div>
            <svg viewBox="0 0 30 1" width="300" height="10">
                <line id="line" x1="0" y1="1" x2="30" y2="1" stroke="red" />
            </svg>
        </div>
        <div>
            <svg viewBox="-3 0 33 9" width="360" height="90">
                <path id="path" d="M0,5 h-3 M0,7 h3 M0,9 h-1" stroke="green" />
            </svg>
        </div>
    </body>
</html>

document.querySelector("#line").getTotalLength()
> 30
document.querySelector("#line").getPointAtLength(0)
> SVGPoint {x: 0, y: 1}
document.querySelector("#line").getPointAtLength(30)
> SVGPoint {x: 30, y: 1}

document.querySelector("#path").getTotalLength()
> 7
document.querySelector("#path").getPointAtLength(0)
> SVGPoint {x: 0, y: 5}
document.querySelector("#path").getPointAtLength(7)
> SVGPoint {x: -1, y: 9}

【JavaScript】要素（DOM）操作のまとめ

JavaScript HTML CSS
要素の取得
// querySelectorは文書内の最初の Element を返します。
const el = document.querySelector("div") // 要素名
const el = document.querySelector("#id") // id名
const el = document.querySelector(".class") // class名

// querySelectorAllは文書中の一致する要素のリスト(NodeList)を返します。
const elList = document.querySelectorAll("div") // 要素名
const elList = document.querySelectorAll(".class") // class名

// リスト(NodeList)からElementを取得するには主にforEachを使用します。
elList.forEach((el) => {});
イベントリスナーへの登録
// 始めに実行される。
// { once: true }で一度実行されたらイベントリスナーから削除される。
window.addEventListener("load", (e) => {}, { once: true });

// ウィンドウの幅を変えたら実行される。
window.addEventListener("resize", (e) => {});

// 要素をクリックしたら実行される。
el.addEventListener("click", (e) => {});

// コールバック関数のeには呼び出し元の要素が代入され、関数内で使用できる。
// 今回はeとしているが、他の文字列でも動作する。
(e) => {e.target.classList.add("another-class")};
要素のスタイルの変更
// 要素の色を変更するにはstyleの後にcssのプロパティを続けて値を代入する。
el.style.color = "red";
el.style.color = "rgb(255 0 0)";

// font-weightのようにハイフンがあるcssプロパティはfontWeightのように書き換える。
el.style.fontWeight = "bold";
el.style.fontWeight = "300";

// styleを削除するにはremoveAttributeを使用する。
el.removeAttribute("style");
アニメーションの操作
// 要素にdisplay-onとdisplay-offという名前の２つのアニメーションがある場合の
// .display-offのアニメーションが開始した時の処理の書き方
el.addEventListener("animationstart", (e) => {
    if (e.animationName === "display-off") {
        e.target.style.pointerEvents = "none";
    }
});

// .display-onのアニメーションが終了した時の処理の書き方
el.addEventListener("animationend", (e) => {
    if (e.animationName === "display-on") {
        e.target.style.pointerEvents = null;
    }
});
data-属性の操作
// 要素のdata-viewという名の属性を操作する場合
el.dataset.view = "on";
el.dataset.view = "off";