ユニット3の導入 - コンポーネント
.astroファイルと.mdファイルによりウェブサイトのページ全体を生成できるようになったので、AstroコンポーネントでHTMLの小さな部品を作成して再利用しましょう！
今立っている場所
チュートリアルのこの段階でのコードは、GitHubまたはStackBlitzで確認できます。
あなたのコードを上の例と比較してみてください。また、チュートリアルを始めたばかりであれば、StackBlitzでフォークして、ここからブラウザ上でコーディングを始めてください。
これから向かう場所
このユニットでは、ウェブサイト全体で共通する要素のコードを再利用するために、Astroコンポーネントを作成する方法を学びます。
作成するものは以下となります。
- ページへのリンクのメニューを表示するナビゲーションコンポーネント
- 各ページの下部に表示されるフッターコンポーネント
- フッターで使用される、プロフィールページへとリンクするソーシャルメディアコンポーネント
- モバイルデバイスでナビゲーションを切り替えるためのインタラクティブなハンバーガーコンポーネント
その過程で、CSSとJavaScriptを使用して、画面サイズやユーザーの入力に反応するレスポンシブデザインを実現します。