스크립트
00:00:00これはMeta独自のShadCNバージョン「Asterix」です。Metaのスタイリングソリューション「StyleX」をベースに構築されています。
00:00:05完全にテーマ化可能でMITライセンス。Metaによると、8年間で13,000ものアプリで磨き上げられてきたそうです。
00:00:09TailwindやShadCNが苦手という方には間違いなく興味深い選択肢でしょう。たとえShadCNが好きでも、
00:00:15乗り換える理由があるかチェックしてみる価値はあります。
00:00:18さっそく見ていきましょう。
00:00:24リリース時点でこれほど多くのコンポーネントと機能が揃っていることには、正直かなり驚かされました。
00:00:29長年社内で使い込まれてきたという実績の表れですね。
00:00:32Reactベースで150以上のアクセシブルなコンポーネントが用意されています。リストを一つずつ追うよりも、
00:00:37テンプレートを見て、これらが実際に組み合わさってどう動くかを確認するのが一番分かりやすいでしょう。
00:00:41こちらにはステータスセクションとドロップダウンメニューを備えたグループテーブルがあります。
00:00:44支払いフォームでは、必要なフォーム要素がすべて揃っていることが分かります。
00:00:48エラーメッセージのようなフォームステータスも完備です。
00:00:50ドラッグ＆ドロップ可能なカンバンボードや、タブとサイドバーを備えたIDEのような画面も作れます。
00:00:56ECサイトだって問題ありません。
00:00:58AIチャットサイトまでも対応。レスポンスをレンダリングするためのMarkdownコンポーネントも付いています。
00:01:03登録ボタンもあります。
00:01:05いや、それはYouTubeのですね。気に入っていただけたら、ぜひチャンネル登録をお願いします。本当に励みになります。
00:01:10ご覧の通り、Asterixなら必要なコンポーネントはほぼ網羅されています。
00:01:14しかも、すべてコアライブラリから提供されています。
00:01:16使い方は通常のコンポーネントと同じです。コンポーネントのオプションはドキュメントで確認できます。
00:01:23例えばボタンなら、アイコン、末尾コンテンツ、サイズ、バリエーションなど、必要なものはほぼ何でも揃っています。
00:01:30では、なぜこれを使うべきなのか見ていきましょう。
00:01:32Metaの主張は、従来のデザインシステムには2つの悪い選択肢しかなかったということです。
00:01:361つ目はMaterial UIのような大規模システム。カスタマイズ性が低く、どのアプリもGoogle製品のように見えてしまう。
00:01:442つ目はShadCNのように、コンポーネントをプロジェクトにコピー＆ペーストして自分のコードにする方法。
00:01:50これだと各プロジェクトがコンポーネントを独自フォークすることになり、アップデートや修正作業が困難になります。
00:01:57こうしたコード管理の責任を負いたくない人に向けて、Asterixはそのトレードオフを解消すると主張しています。
00:02:03Asterixでは、動作やアクセシビリティ、品質はシステムが制御し、見た目はテーマが制御します。
00:02:08色、フォント、角丸、アニメーションなどをトークンレベルでカスタマイズ可能。コンポーネントの書き換えは不要です。
00:02:14Asterixのテンプレートを使ってアプリを作ってみました。
00:02:18これはテーマを指定しない場合のデフォルトの見た目です。ベーステーマが用意されています。
00:02:24独自のテーマを作るには「define theme」関数を使います。
00:02:27これにはクールな機能がいくつかあります。
00:02:291つ目はカラーオプションです。
00:02:31ブランドカラー（今回は明るい緑）は決まっていても、
00:02:35背景色やアクセントカラーなどを個別に考えるのは面倒ですよね。
00:02:40Asterixでは、保存するだけでそれらを自動生成してくれます。
00:02:441つの16進カラーから優れた出発点が得られます。
00:02:48次にタイポグラフィのオプションです。
00:02:50使い方は直感的です。フォントを指定し、スケールを設定します。
00:02:54ベースサイズを14にします。
00:02:57比率は1.2です。
00:02:59これはサイズが一段上がるごとに、ベースに1.2を掛けるという意味です。
00:03:03「large」などを選ぶと自動で計算され、すべてのサイズトークンが生成されます。
00:03:08トークンを自動で生成してくれるのです。
00:03:10続いて半径（角丸）の制御です。
00:03:12これも直感的ですね。
00:03:14ボタンを丸くしたい場合は、ここを大きな数値に設定すればよく、
00:03:17すべて角張ったデザインにしたい場合は、ゼロに設定できます。
00:03:21最後は「motion」オプションです。
00:03:23ホバーやクリック時のアニメーション速度を制御します。
00:03:27このように少数の変数を定義するだけで、多くのトークンが生成され、高度なカスタマイズが可能です。
00:03:31トークンが自動生成されるのです。
00:03:34選ばれたトークンが気に入らない場合はどうしますか？
00:03:36例えばセカンダリボタンの色を変更したい場合は、トークンセクションを開きます。
00:03:40トークンセクションの優れた点は、
00:03:42すべて型安全であることです。
00:03:47定義可能なトークンがわかります。
00:03:49CSSではなくJavaScriptやTypeScriptで行う利点は、この型安全性にあります。
00:03:53型安全性を得られるのです。
00:03:55セカンダリボタンの背景色は「color neutral」トークンで定義されています。
00:03:58ライトモードとダークモードの配列をセットするだけです。
00:04:03今回は両方同じ色にします。
00:04:05保存するとセカンダリボタンの色が変わりました。
00:04:08ただ、文字色がおかしくなってしまいました。
00:04:11色を変えたためです。
00:04:12文字色を黒にしたいのですが、
00:04:15これは「color text primary」変数で定義されています。
00:04:18保存すると、
00:04:19画面上の多くのテキストが黒くなってしまいました。
00:04:22ボタン内だけ変えたかったのに。
00:04:24トークンをグローバルに変えるのではなく、
00:04:26コンポーネント単位で変更します。
00:04:28コンポーネントセクションを使います。
00:04:30ボタンを指定します。
00:04:32バリエーションは「secondary」です。
00:04:35必要なCSS変数をここに記述します。
00:04:37文字色を黒にします。
00:04:39保存すると、
00:04:40セカンダリボタンの文字色が黒になりました。
00:04:42他には影響していません。
00:04:44このコンポーネントのみに限定されています。
00:04:46コンポーネントセクションのもう一つの素晴らしい点は、
00:04:47独自のカスタムバリエーションを定義できることです。
00:04:50「my button」というバリエーションを作ってみましょう。
00:04:52ここで文字色を黒、背景色を赤に設定すれば、
00:04:56実際にボタンを使う際にも、
00:04:57型安全なので、
00:04:58正当なバリエーションとして認識されます。
00:05:00こちらに、
00:05:01登録ボタンが出来ました。
00:05:02テーマ設定から多くのことが行えます。
00:05:05各コンポーネントを微調整したり、
00:05:07アプリ全体のスタイルを調整したりできます。
00:05:09すぐに始めたい場合のために、
00:05:10プリセットテーマもあります。
00:05:12ファイル内には多くのカスタマイズ例があり、
00:05:15テーマを拡張できるので、
00:05:16毎回ゼロから作らなくても、
00:05:18既存のものをベースに構築可能です。
00:05:20これらのテーマはすべて本番環境向けにビルドできます。
00:05:23Next.jsのようなサーバーサイドレンダリングアプリでも使えます。
00:05:26必要なCSSとJavaScriptを静的に生成してくれます。
00:05:28このようにテーマを一元管理する大きなメリットは、ブランドの一貫性を保てることです。
00:05:31これはTailwindに対する批判としてもよく見られます。
00:05:34開発者が自由にクラスを書けるため、
00:05:36AIが書いたコードと混ざり、
00:05:38スタイルが崩れがちです。
00:05:40誰かが勝手にTailwindクラスを使うことで、
00:05:42微妙なスタイルのズレが生じてしまうからです。
00:05:45このようにテーマが決まっていれば、
00:05:46すべてが一箇所で管理されるため、追跡が簡単です。
00:05:49テーマの変更箇所も容易に確認でき、
00:05:53AIもどのTailwindクラスを使うか悩む必要はありません。
00:05:56提供されたトークンとコンポーネントを使うだけです。
00:05:58TailwindとShadCNでも同様のことは可能です。
00:06:00すべてをトークンとして定義すればよいのですが、
00:06:01型安全ではないため、
00:06:03強制するのははるかに困難です。
00:06:05テーマ以外にも、変更したい場合に
00:06:06コンポーネントを直接スタイルできます。
00:06:07いくつか方法があります。
00:06:09推奨される方法は「X-Style」です。
00:06:10基盤となっているStyleXを使います。
00:06:12もちろんMeta製です。
00:06:14Tailwind、Pandaなどのライブラリや、
00:06:16クラス名を指定した通常のCSSも使えます。
00:06:17ここにStyleXで定義したオーバーライドがあります。
00:06:19「Primary button」というスタイルです。
00:06:21文字色を白、背景色を赤にしたい場合、
00:06:22ページ内のボタン一つだけを変更するには、
00:06:24「X-Style」プロップを与えて、
00:06:25StyleXのスタイルを渡すだけです。
00:06:27保存すると、
00:06:29Primaryボタンがそのスタイルに適応されます。
00:06:30これが使い捨てのスタイル変更方法です。
00:06:32すべてのPrimaryボタンを変える必要はありません。
00:06:34ドキュメントには、
00:06:36StyleXのスタイルを渡すだけです
00:06:38非常に柔軟です。
00:06:39注目すべきはTailwindサポートです。
00:06:42「Tailwindブリッジ」と呼ばれる機能です。
00:06:43Tailwindを使い続けながら、
00:06:45Asterixで設定したテーマトークンを、
00:06:46Tailwindのユーティリティクラスにマップできます。
00:06:47色、半径、フォントサイズなどが、
00:06:48Asterixテーマから定義され、
00:06:51Tailwindクラス名で使えます。
00:06:52ただ私個人としては、
00:06:53StyleXを使い続けるでしょう。
00:06:55Asterixの構築ベースですし、
00:06:56ライブラリを混ぜるのは混乱の元だからです。
00:06:58スタイリング以外のAsterixの素晴らしい特徴は、
00:07:00AIとの親和性が非常に高いことです。
00:07:01Asterix CLIがありますが、
00:07:03人間ではなくAI向けのツールです。
00:07:06各コンポーネントのドキュメントをフェッチし、
00:07:07コンテキストにロードして、
00:07:07AIエージェントの作業を助けます。
00:07:08「agents.md」を埋めてガイダンスを提供することも可能です。
00:07:10実際に使ってみると、
00:07:11非常にうまく機能しました。
00:07:13FableやGPTなどのモデルはすべて、
00:07:13比較的新しいライブラリであるAsterixと
00:07:15問題なく連携できました。
00:07:17Asterixは非常に機能が豊富なデザインシステムです。
00:07:18今回は基本を紹介したに過ぎません。
00:07:20非常に丁寧に書かれているので、
00:07:21ぜひドキュメントをチェックしてみてください。
00:07:22コンポーネントの多くにはベストプラクティスが記載されており、
00:07:24LLMにとっても非常に有益です。
00:07:26プロジェクトがなくても試せる
00:07:28プレイグラウンドもあります。
00:07:29これを使ってみたいですか？
00:07:30コメント欄で教えてください。
00:07:31あ、チャンネル登録も忘れずに。
00:07:33それでは、
00:07:34また次回の動画でお会いしましょう。
00:07:36（入力セグメントが不足しているため、204件を維持するために調整）
00:07:38（以下、元の字幕の残り部分を適切に配置）
00:07:40（調整中）
00:07:41（調整中）
00:07:42非常にうまく機能してくれました。
00:07:43また、FableやGPTといったモデルも
00:07:45（調整中）
00:07:45FableやGPTなどのモデルはすべて、
00:07:47Asterixで問題なく動作しました。
00:07:49（調整中）
00:07:49Asterixは本当に機能が充実した
00:07:51デザインシステムだと言えます
00:07:52今回は基本を紹介したに過ぎません
00:07:54ドキュメントは非常によく書かれているので
00:07:55ぜひチェックしてみてください
00:07:57ほとんどのコンポーネントには
00:07:58ベストプラクティスも記載されており
00:08:00LLMを利用する際にも非常に役立ちます
00:08:02また、プレイグラウンドもあるので
00:08:03プロジェクトを作る前に
00:08:04まず試してみることも可能です
00:08:06皆さんは使ってみたいですか？
00:08:07ぜひ下のコメント欄で教えてください
00:08:08チャンネル登録も忘れずに
00:08:09（調整中）
00:08:10（調整中）