astro について
Astro プロジェクトの開発者向けに、コンポーネントの実装指針をまとめたスキルです。props の最小化や静的な `.astro` コンポーネントの活用、描画とフォントの扱い方を示します。
主な機能
- 01コンポーネント props の最小化
- 02未使用フィールドの除去
- 03Hydration 対象で null を回避
- 04Astro fontProviders の利用
- 05静的な .astro コンポーネントの優先
活用シーン
- 01目的を絞ったコンポーネント型の定義
- 02余分なフィールドの HTML 出力防止
- 03不要な Hook 警告の回避
- 04Astro によるフォント読み込み
- 05静的 UI に適したコンポーネント選択
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、Claude Code で/astroを入力して読み込まれたか確認します。
詳細
Astro のガイドライン
最小限の props
コンポーネントでは、必要なデータだけを含む最小限の Props インターフェースを指定してください。将来のニーズを先取りしないでください。コンポーネントが現在使用していないプロパティは、Props に含めないでください。
コンポーネントに渡すデータには、Props に指定されていないプロパティを含めないでください。余分なフィールドは削除してください。削除しないと、本番環境の HTML に含まれてしまいます。
例
Button コンポーネントが次のようになっていて
interface Props {
user: { name: string };
}
親コンポーネントに次のデータがある場合
const aUser = {
name: "Any Thing",
id: "123abc",
};
まずコンポーネントのスクリプトで id を削除し、次のようにします。
const propUser = {
name: "Any Thing",
};
そしてテンプレートでは propUser だけを使用します。
---
import Button from './Button.astro';
const propUser = {
name: 'Any Thing',
}
---
<Button user={propUser} />
null の返却を避ける
@astro/react と @astro/mdx の両方を使用する場合、client:* ディレクティブでレンダリングするコンポーネントは null を返してはいけません。返すと、誤った「Invalid hook call.」警告が発生します。
これを避けるには、null の代わりに <></>（つまり空のフラグメント）を返してください。
フォント
スタイルシートにフォントを追加するために、@import url(...) や @font-face{} を使用しないでください。代わりに Astro の fontProviders を使用すると、フォントの読み込みが最適化されます。ガイド。
.astro コンポーネントを優先する
アプリケーションがほかの UI フレームワーク（React、Vue など）をサポートしていても、それらは必要な場合に限って使用してください。コンポーネントにインタラクティブ性が必要ない場合は、.astro コンポーネントを使用してください。 これにより、ハイドレーションが行われないことが明確になり、スクリプトディレクティブやビルド時の JavaScript 実行など、.astro 固有の強力な機能を利用できます。
新しいコンポーネントを作成するときは、次のいずれかに該当する場合にのみ UI フレームワークのコンポーネントを使用してください。そのコンポーネント自体がインタラクティブであるか、UI フレームワークのコンポーネントからインポートする必要がある場合です。静的コンポーネントを <slot> を介して UI コンポーネントに渡せる場合は、静的コンポーネントを .astro ファイルで作成してください。