ESLint、タグ付きテンプレート リテラルなどを使用して Tailwind CSS を簡素化する方法

何年にもわたる開発の後、最も重要な製品の 1 つであるマルチアプリケーション ダッシュボードのユーザー インターフェイスを標準化することにしました。

これは、顧客と内部ユーザー (使いやすさ) だけでなく、製品チーム (設計プロセス、意思決定、およびコーディングの容易さ) のためにも行いました。また、当社のブランドと一貫性を保つ必要もありました。

このために、Satellite と呼ばれる社内設計システムを構築しました。

サテライトの開発では、UI ライブラリのさまざまな CSS ソリューションを検討しましたが、すべて長所と短所があります: Saas 、 css modules 、 css-in-js 。

Bootstrap に似たフレームワークを検討した結果、CSS フレームワークTailwind CSSに落ち着きました。なんで？

• 純粋な CSS (JS ランタイムなし) – パフォーマンスに優れています。

  
  

• 小さな CSS スタイルシート ファイルを生成する傾向があり (パージ後)、パフォーマンスにも優れています。

  
  

• 新しいコンポーネントの開発中に CSS ファイルと JavaScript コードを切り替える必要はありません。

  
  

• ユーティリティ クラスの適切な名前を探すのに時間を無駄にする必要はありません。

  
  

• UI の一貫性を促進するのに役立ちます。

  
  

• デザイン トークンに適切にマッピングされる間隔と色のコレクションを定義できます (「制限付きパレット」)。

  
  

ただし… Tailwind には欠点がありました。それは、複雑なコンポーネントの可読性です。クラス名に慣れていないと、Tailwind のスープを消化するのが難しい場合があります。

私たちの場合、従来の CSS との競合を避けるために CSS クラスのプレフィックス付きバージョン ( stl- ) を使用する必要があり、クラス名の文字列にノイズと長さがさらに追加されたため、さらに悪化しました。

この記事では、読みやすさの問題をどのように軽減したかを示します。手始めに、タグ付けされたリテラルや補間など、いくつかの Web 開発手法を使用して、文字列の長さを短縮しました。

次に、リンター ツール ESLint を使用してクラス名の使用を簡素化し、2 つのツールでより優れた DX を提供しました。

• 当時公式の ESLint- Tailwind プラグインがなかったため、ESLint プラグイン。

  
  

• Tailwind の多くのクラスの IntelliSense を提供することで、使用を簡素化する Visual Studio Code 拡張機能。公式の ESLint VS 拡張機能は、構成ファイル ( tailwind.config.js ) がプロジェクトに存在することを期待していたため、機能しませんでしたが、当時はビルド済みのバージョンを使用していました。他のタスクの中でも、構成ファイルを操作するために VS が必要でした。

  
  

多かれ少なかれそれが背景です。それでは、実装に入りましょう。

Tailwind – クラス名は優れていますが、複雑になる可能性があります

クラス名は良い

Tailwindのようなユーティリティ ファーストの CSS フレームワークには、HTML や JavaScript で直接使用できる既存のユーティリティ クラスの大規模なセットが付属しています。これらのクラスにより、コード全体で一貫性が保たれます。

そして、それらは完全に構成可能です。同じクラス名を使用すると、アプリケーションをバリアントで簡単にブランド化できます。したがって、Tailwind の CSS クラス名を使用することで、一貫した色、間隔、フォントのセット (基本的にすべての CSS) を作成し、実装しやすいデザイン システムを展開することができました。

ただし、Tailwind クラスは複雑になる可能性があります

私たちは、Tailwind のクラスの使用を簡素化したいと考えていました。

このために、タグ付けされたテンプレート リテラル、補間、条件などの手法を使用しました。

次のような CSS クラスの長い文字列から始めました。

 const className = 'stl-inline-flex stl-items-center stl-justify-center stl-rounded-full stl-h-10 stl-w-10 stl-bg-blue-100';

しかし、これは読みにくいことにすぐに気付きました。さらに、他のクラスとの衝突を避けるために使用されるプレフィックスstl-などの不要なノイズが含まれていました。

そこで、 タグ付けされたテンプレート リテラルの助けを借りて、文字列からプレフィックスを削除しました。 stlタグを作成しました。

 const className = stl 'inline-flex items-center justify-center rounded-full h-10 w-10 bq-blue-100';

最後に、読みやすさを向上させたいと考えました。そこで、以下を追加しました:

• 行を分けて読みやすくし、共通要素をグループ化する
• インラインのタグ付きテンプレート リテラルによる補間
• よりパワフルで適応性の高いスタイリングの条件

結果はエレガントな (CSS) コードです。

 const className = stl ' inline-flex items-center justify-center h-10 w-10 ${round && 'rounded-full'} ${iscool ? 'bg-blue-100' : 'bq-red-100'} ;

ESLint – 人的エラーを簡単に修正

エレガンスはひとつです。正解は別です。特に、Tailwind で最初に学習するクラスが多数ある場合は、クラスのスペルを間違えやすいです。

以下に、問題が発生する可能性のある例を示します。

 cost className = stl 'felx space-between text-gray-200';

エラーを見つけることができますか？

• 文字の切り替え (flex の場合は felx)
• 不完全または存在しないクラス (スペース間)
• アメリカとイギリスのスペル (灰色)

ESLint の救出 – ESLint プラグインの作成

人々が使用したクラスが正しいものであることを確認する必要がありました。そのため、リンター ツールのESLintを使用してコードを解析し、分析し、エラーを報告しました。

コードの品質向上と、存在しないクラス名のエラーを報告するための ESLint プラグインを作成しました。

検証を行う中心的な ESLint コードは次のとおりです。

ESLint は、個々のコード行へのアクセスを提供する抽象構文ツリー (AST) を使用します。

AST は基本的に、コードの文字列をノードに変換し、コレクションおよび要素として解析できます。

ESLint がコードを解析する方法の内訳は次のとおりです。式全体がVariableDeclataionタイプのnodeです。

右側のTaggedTemplateExpressionの式を解析します。

ご覧のとおり、この種の式を処理するコールバックがあります。

TaggedTemplateExpressionコールバックでは、そのテンプレート内のすべての文字列を収集します。例えば：

• TemplateElement

  
  

• Literals

  
  

収集が完了すると、収集されたクラス名をループして存在するかどうかを確認する別の登録済みコールバックがあります。

コレクションvalidClassNamesでこれを行います。

それでおしまい。

この検証プラグインを作成することが正しいことであることがすぐにわかりました。システムと既存のダッシュボード コードベースで実際にいくつかのスペルミスを発見したからです。

ESLint VisualStudio 拡張機能を使用した提案の提案

最後に作成したツールは、Visual Studio Code の拡張機能です。プラグインと同じロジックを使用して、ESLint は typescript クラスを開発者の型として提案します。

このインテリセンスにより、開発者は正しいクラスを検索して見つけるために、推測したり、Tailwind Web サイトにアクセスしたりする必要がなくなります。

GIF でわかるように、クラス名を提案するだけでなく、提案ごとに色や便利なアイコンも表示します。

Tailwind CSS と ESLint を使用することで、標準 (Github で内部的にアクセス可能) を実装する際に DX を改善することで、標準を強化することができました。