ソーシャルメディアフッターを作成する

ここで学ぶことは…

フッターコンポーネントを作成する
ソーシャルメディアコンポーネントを作成し、propsを渡す

ページでAstroコンポーネントを使用したので、次にコンポーネントの中で別のコンポーネントを使用してみましょう！

フッターコンポーネントを作成する

src/components/Footer.astroに新しいファイルを作成します。

新しいファイルFooter.astroに以下のコードをコピーします。

---
const platform = "github";
const username = "withastro";
---

<footer>
  <p>私のプロジェクトについて詳しくは<a href={`https://www.${platform}.com/${username}`}>{platform}</a>をご確認ください！</p>
</footer>

`Footer.astro`をインポートして使用する

index.astro、about.astro、blog.astroの各Astroページのフロントマターに以下のインポート文を追加します。
```
import Footer from '../components/Footer.astro';
```
各ページのAstroテンプレートに<Footer />コンポーネントを追加します。ページの一番下にフッターを表示するために、</body>閉じタグの直前に置いてください。
```
    <Footer />
  </body>
</html>
```
ブラウザのプレビューで、各ページに新しくフッターのテキストが表示されていることを確認してください。

やってみよう - フッターをカスタマイズする

複数のソーシャルネットワーク（Instagram、Twitter、LinkedInなど）を表示し、またユーザー名を追加して自分のプロフィールに直接リンクするようにフッターをカスタマイズしてください。

コードの確認

ここまでチュートリアルの各ステップに従ってきた場合、index.astroファイルは以下のようになっているはずです。

---
import Navigation from '../components/Navigation.astro';
import Footer from '../components/Footer.astro';
import '../styles/global.css';

const pageTitle = 'ホームページ';
---

<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>{pageTitle}</title>
  </head>
  <body>
    <Navigation />
    <h1>{pageTitle}</h1>
    <Footer />
  </body>
</html>

ソーシャルメディアコンポーネントを作成する

リンクしたいオンラインアカウントが複数ある場合のために、再利用可能なコンポーネントを1つ作成し、それを何度も表示するようにしましょう。これを使う際、オンラインプラットフォームとユーザー名という2つのプロパティ（props）を渡します。

src/components/Social.astroに新しいファイルを作成します。

新しいファイルSocial.astroに以下のコードをコピーします。

---
const { platform, username } = Astro.props;
---
<a href={`https://www.${platform}.com/${username}`}>{platform}</a>

`Social.astro`をフッターにインポートして使用する

上の新しいコンポーネントをインポートして3回使用するように、src/components/Footer.astroのコードを変更します。その際、毎回異なるコンポーネント属性をpropsとして渡します。

---
const platform = "github";
const username = "withastro";
import Social from './Social.astro';
---

<footer>
  <p>私のプロジェクトについて詳しくは<a href={`https://www.${platform}.com/${username}`}>{platform}</a>をご確認ください！</p>
  <Social platform="twitter" username="astrodotbuild" />
  <Social platform="github" username="withastro" />
  <Social platform="youtube" username="astrodotbuild" />
</footer>

ブラウザのプレビューを確認してください。3つのプラットフォームへのリンクを含んだ新しいフッターが各ページに表示されているはずです。

ソーシャルメディアコンポーネントにスタイルを適用する

<style>タグをsrc/components/Social.astroに追加して、リンクの外観をカスタマイズします。

---
const { platform, username } = Astro.props;
---
<a href={`https://www.${platform}.com/${username}`}>{platform}</a>

<style>
  a {
    padding: 0.5rem 1rem;
    color: white;
    background-color: #4c1d95;
    text-decoration: none;
  }
</style>

src/components/Footer.astroに<style>タグを追加して、コンテンツのレイアウトを改善します。

---
import Social from './Social.astro';
---
<style>
  footer {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
  }
</style>

<footer>
  <Social platform="twitter" username="astrodotbuild" />
  <Social platform="github" username="withastro" />
  <Social platform="youtube" username="astrodotbuild" />
</footer>

ブラウザのプレビューを再度開き、各ページに新しいフッターが表示されていることを確認します。

確認テスト

title、author、dateの各値をpropsとして受け取るために、Astroコンポーネントのフロントマターに書く必要があるコードはどれですか？
1. const { title, author, date } = Astro.props;
2. import BlogPost from '../components/BlogPost.astro'
3. <BlogPost title="私の最初の投稿" author="Dan" date="2022年8月12日" />
Astroコンポーネントに値をpropsとして渡すにはどうすればよいですか？
1. const { title, author, date } = Astro.props;
2. import BlogPost from '../components/BlogPost.astro'
3. <BlogPost title="私の最初の投稿" author="Dan" date="2022年8月12日" />

チェックリスト

src/components/に新しい.astroコンポーネントを作成できる。
Astroコンポーネント内で他のAstroコンポーネントをインポートして使用できる。
Astroコンポーネントにpropsを渡せる。

Resources

Astroにおけるコンポーネントprops