プロジェクトのご説明
Tokens-To
(トークンズ・トゥー)
Typescript、Javascriptのオブジェクトとして定義されたデザイントークンをCSS変数に簡単に変換！
プロジェクトの詳細
Typescript、Javascriptのオブジェクトとして定義されたデザイントークンをCSS変数に簡単に変換し、簡単に他のHTML、CSSにimportして使用できるようにします。 Typescriptで作成されたら、 まずすべてのソースコードをJavascriptにトランスファイリングした後、 プロジェクトのルートを基準にDFSアルゴリズムを活用してデザイントークンが定義されたすべての対象ディレクトリを探索し、 JavascriptオブジェクトをCSSトークンに変換してCSSファイルに書きます。
プロジェクトの目的
Typescript、Javascriptのオブジェクトとして定義されたデザイントークンは、Typescript、Javascriptプログラムでは簡単に、そしてタイプ安全に(Typescriptの場合)使用できますが、場合によってはCSSファイルだけが必要な場合もかなり多いです。 このような場合、膨大なデザイントークンをいちいちCSS変数に変換するのは時間がかかります。 このような問題を解決するために、Typescript、Javascript ObjectをCSSに変換するコマンドラインプログラムを作成しました。活用した技術
ハイレベルアーキテクチャ
プロジェクトのポイントと学んだこと
このプロジェクトは実際に私が開発しながら経験した問題を解決し、その解決策を他の人と共有するための実戦プロジェクトでした。 フロントエンドを開発しながら、定義した数多くのデザイントークンを、CSSで使用する必要がありますが、いちいちCSS変数で再定義することはほとんど無理です。 そこで、ユーザーが指定した設定に従って、対象位置のTypescript、あるいはJavaScriptトークンオブジェクトをCSSファイルに変換します。 これは、デザイン トークンの再利用性を高め、移植を容易にするという利点があります。 さらに、変換する過程でファイルシステムを自然に探索する過程で、グラフ探索アルゴリズムおよびパターンマッチングアルゴリズムを適用して問題を解決し、Node.jsモジュールの基本も理解するようになりました。 また、このプロジェクトの中で、テストを作成することで、ただテストを作成するだけでなく、テストの対象になるコードから依存性を低くして、自然いもっとしやすいテストを 作る方法と、堅固なコードを作る方法を学びました。