VUEレンダリング機能の実用的なケース：設計システムの構築タイポグラフィグリッド

この記事では、VUEレンダリング関数を使用した設計システムタイポグラフィグリッドの作成について詳しく説明しています。ライブデモとソースコードが提供されます。レンダリング関数は、標準のVUEテンプレートと比較してHTML生成を優れた制御を提供しますが、チュートリアルを超えた実用的な例はほとんどありません。このプロジェクトは、そのギャップを埋めることを目指しています。

レンダリング関数は、強力ですが、Vueのシンプルさに焦点を当てたフレームワーク内で直感に反すると感じることができます。 HTMLとJavaScriptのブレンドは、読みやすいコードにつながる可能性があります。たとえば、シンプルになります<div>で<code><p><code>createElementを使用したより冗長なアプローチが必要です。

課題は、デザイナーのモックアップによると、Vuepressを使用して、設計システム用のタイポグラフィグリッドを構築することでした。 CSSには、フォントの重量とサイズの個別のクラスが含まれており、クラス名を介してタグ名やその他の要素を介して見出しをターゲットにしています。

いくつかのアプローチが考慮されました：

• ハードコード：繰り返し、データ分離の欠如、および更新の管理の困難により拒否されました。
• 従来のVUEテンプレート：さまざまなタイポグラフィオプションの条件付きレンダリングとそのバリエーションを処理するために必要な広範なv-ifおよびv-elseステートメントのために、不適切とみなされます。

事前定義された基準に基づいて子ノードを動的に作成する能力により、レンダリング関数は最適なソリューションとして浮上しました。

データモデル：タイポグラフィデータは、簡単に変更するために別のJSONファイルに保存されました。各JSONオブジェクトは、テキストコンテンツ、ルート要素タグ（ h1 、 pなど）、スタイリングプロパティ、使用例などの情報を含む行を表します。 JSON構造内の配列は、スタイリングと複数の使用例のバリエーションを処理します。

実装には、親コンポーネント（ TypographyTable.vue ）と子の機能コンポーネント（ TypographyRow.vue ）が含まれます。親コンポーネントはJSONデータを繰り返し、各行を子コンポーネントに渡します。子コンポーネントは、レンダリング関数を使用してHTMLを生成します。

データ変換機能は非常に重要でした。これらの関数は、RAW JSONデータをcreateElement関数に適した構造化された形式に変換しました。これには、各セルの木のような構造の作成、スタイリングのバリエーションと子ノードの存在の処理が含まれます。ヘルパーはクラス名を解析し、適切なHTMLタグとクラスを生成しました。

TypographyRow.vue内のレンダリング関数は、これらの変換されたデータ構造を使用して、各行のHTMLを生成します。ネストされた関数構造は、読みやすさと保守性を向上させます。

このアプローチは比較的単純なタスクでは過度に複雑に見えるかもしれませんが、データ分離に優先順位を付け、将来の変更を簡素化します。タイポグラフィの変更は、VUEコンポーネントを変更せずにJSONファイルを更新することで行うことができます。初期の複雑さと長期的な保守性のトレードオフについて説明します。