何年にもわたる開発の後、最も重要な製品の 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 を提供しました。 当時  Tailwind プラグインがなかったため、ESLint プラグイン。 公式の ESLint-  Tailwind の多くのクラスの IntelliSense を提供することで、使用を簡素化する Visual Studio Code 拡張機能。 は、構成ファイル (   ) がプロジェクトに存在することを期待していたため、機能しませんでしたが、当時はビルド済みのバージョンを使用していました。他のタスクの中でも、構成ファイルを操作するために VS が必要でした。 公式の ESLint VS 拡張機能 tailwind.config.js 多かれ少なかれそれが背景です。それでは、実装に入りましょう。   Tailwind – クラス名は優れていますが、複雑になる可能性があります クラス名は良い のようなユーティリティ ファーストの CSS フレームワークには、HTML や JavaScript で直接使用できる既存のユーティリティ クラスの大規模なセットが付属しています。これらのクラスにより、コード全体で一貫性が保たれます。 Tailwind そして、それらは完全に構成可能です。同じクラス名を使用すると、アプリケーションをバリアントで簡単にブランド化できます。したがって、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 を改善することで、標準を強化することができました。

Visit us

このオーディオは、ストーリーの元の言語で制作されています。

長すぎる; 読むには

Make resilience your competitive advantage

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

About Author

コメント

ラベル

この記事は

Related Stories

ワークフローを10倍に向上させる方法: 必須アプリ17選

AI の力を解き放つ。最先端技術の体系的レビュー: 概要と序論

目に見えない層: ユーザーインタビューがかけがえのない資産である理由

タップして稼ぐ：テレグラムはソラナより先に次の100億人の暗号通貨ユーザーを獲得する可能性がある

ワークフローを10倍に向上させる方法: 必須アプリ17選

AI の力を解き放つ。最先端技術の体系的レビュー: 概要と序論

目に見えない層: ユーザーインタビューがかけがえのない資産である理由

タップして稼ぐ：テレグラムはソラナより先に次の100億人の暗号通貨ユーザーを獲得する可能性がある

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps

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