JSXで実装するUIライブラリに依存しないコンポーネント
- カテゴリー
- JavaScript／TypeScript >
- Web Components
全8回
このシリーズではJSX記法でDOMツリーを生成し、UIライブラリに依存しないコンポーネントの実装方法を解説します。
第8回 JSXをDOMにトランスパイルする方法 - 4
JSXを使って独自実装のUIコンポーネントをマークアップ的に埋め込む方法を解説し、TypeScriptの変換ルールと関数の調整で属性値や子要素を扱える仕組みを紹介します。
第7回 JSXをDOMにトランスパイルする方法 - 3
JSXでDOMを直接生成しながら、UIライブラリに頼らずコンポーネント指向を実現する。そのために、JSXによるDOM生成の仕組みにフォーカスし、コンポーネントとしてUIを分離する方法や「状態」を扱うために、どのような実装が必要になるかを考えます。
第6回 JSXをDOMにトランスパイルする方法 - 2
JSXをDOMに直接変換する方法を解説します。DOM要素の生成からイベントハンドラの適切な実装まで段階的に学びます。
第5回 JSXをDOMにトランスパイルする方法 - 1
JSXをDOMに直接変換する方法を解説します。まずは、TypeScriptの最小構成でJSXのトランスパイルの仕組みを理解します。
第4回 CSS Modulesのビルド結果の最適化
CSS Modulesのビルドにおいては、ひとえにクラス名の一意性と一貫性を保つことが必要です。そのために必要なビルド時の設定について解説します。
第3回 CSSの型チェックとビルドの連携
ビルド環境は整ったので、CSS Modulesのインポートで発生する型チェックエラーを適切にハンドリングできるようにしましょう。さらに、TypeScriptとCSSの型チェックをビルドに統合します。
第2回 esbuildによるビルド環境の構築
esbuildによって、できるだけシンプルなビルド環境を整えます。開発モード、プロダクションモードの2種類でビルドできるよう、設定を行います。
第1回 JSX記法を用いた実装と利用場面
このシリーズではJSX記法でDOMツリーを生成し、UIライブラリに依存しないコンポーネントの実装方法を解説します。まずは、そのメリットとデメリット、利用場面と考慮すべきポイントを解説します。