コンテンツにスキップ
Astro Astro

自分に関する動的なコンテンツを追加する

HTMLコンテンツをもつ複数ページのウェブサイトができたので、動的なHTMLを追加しましょう！

ここで学ぶことは…

  • ページのタイトルをフロントマターで定義し、HTMLで使用する
  • HTML要素を条件に応じて表示する
  • 自分に関するコンテンツを追加する

HTMLファイルであればAstro言語として有効です。しかし、Astroでは通常のHTML以上のことができます！

変数を定義して使用する

about.astroを開くと、以下のようになっているはずです。

src/pages/about.astro
---


---
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Astro</title>
  </head>
  <body>
    <a href="/">ホーム</a>
    <a href="/about/">概要</a>
    <a href="/blog/">ブログ</a>
    <h1>私について</h1>
    <h2>... そして私の新しいAstroサイトについて！</h2>


    <p>私はAstroの入門チュートリアルを進めています。これは私のウェブサイトの2番目のページで、自分で作った初めてのページです！</p>


    <p>このサイトはチュートリアルを進めるにつれて更新されていきます。定期的にチェックして、私の旅の様子を見に来てください！</p>
  </body>
</html>

  1. 以下のJavaScriptをフロントマターのコードフェンスの間に追加します。

    src/pages/about.astro
    ---
    const pageTitle = "私について";
    ---

  2. HTML内の静的な「Astro」というタイトルと「私について」という見出しを、動的な変数{pageTitle}に置き換えます。

    src/pages/about.astro
    <html lang="ja">
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>Astro</title>
        <title>{pageTitle}</title>
      </head>
      <body>
        <a href="/">ホーム</a>
        <a href="/about/">概要</a>
        <a href="/blog/">ブログ</a>
        <h1>私について</h1>
        <h1>{pageTitle}</h1>
        <h2>... そして私の新しいAstroサイトについて！</h2>
    

        <p>私はAstroの入門チュートリアルを進めています。これは私のウェブサイトの2番目のページで、自分で作った初めてのページです！</p>
    

        <p>このサイトはチュートリアルを進めるにつれて更新されていきます。定期的にチェックして、私の旅の様子を見に来てください！</p>
      </body>
    </html>

  3. /aboutページのライブプレビューを更新します。

    ページ内のテキストは変化せず、一方でブラウザのタブに表示されるページタイトルが「Astro」から「私について」に変わっているはずです。

    .astroファイル内の2箇所で、HTMLタグに直接テキストを入力する代わりに、変数を定義して使用したのです。

  4. 同様にして、index.astro（「ホームページ」）とblog.astro（「私のAstro学習ブログ」）でpageTitleを作成して使用しましょう。各ページのHTMLを2箇所ずつ更新し、ページタイトルが各ページに表示される見出しと一致するようにします。

AstroでJavaScriptの式を書く

  1. 以下のJavaScriptを、コードフェンスの間のフロントマターに追加します。

    （コードを変更しても構いませんが、このチュートリアルでは以下の例を使用します。）

    src/pages/about.astro
    ---
    const pageTitle = "私について";
    

    const identity = {
      firstName: "サラ",
      country: "カナダ",
      occupation: "技術ライター",
      hobbies: ["写真", "バードウォッチング", "野球"],
    };
    

    const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "ドキュメントの執筆"];
    ---

  2. 続いて、HTMLテンプレートの既存コンテンツの下に以下のコードを追加します。

    src/pages/about.astro
    <p>以下は私に関するいくつかの事実です。</p>
    <ul>
      <li>私の名前は{identity.firstName}です。</li>
      <li>{identity.country}に住んでおり、{identity.occupation}として働いています。</li>
      {identity.hobbies.length >= 2 &&
        <li>私の2つの趣味は{identity.hobbies[0]}と{identity.hobbies[1]}です。</li>
      }
    </ul>
    <p>私のスキルは以下の通りです。</p>
    <ul>
      {skills.map((skill) => <li>{skill}</li>)}
    </ul>

確認テスト

  1. .astroファイルのフロントマターで使用される言語はどれですか？

  2. HTMLに加えて、Astro構文に含めることができるのは何ですか？

  3. JavaScriptを波括弧で囲む必要があるのはいつですか？

条件に応じて要素をレンダリングする

スクリプト変数を使用して、HTML<body>コンテンツの個々の要素をレンダリングするかどうかの選択も可能です。

  1. 変数を定義するために、フロントマターに以下の行を追加します。

    src/pages/about.astro
    ---
    const pageTitle = "私について";
    

    const identity = {
      firstName: "サラ",
      country: "カナダ",
      occupation: "技術ライター",
      hobbies: ["写真", "バードウォッチング", "野球"],
    };
    

    const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "ドキュメントの執筆"];
    

    const happy = true;
    const finished = false;
    const goal = 3;
    ---

  2. 既存の段落の下に以下の行を追加します。

    そして、ブラウザタブのライブプレビューから、ページに表示されている内容を確認します。

    src/pages/about.astro
    {happy && <p>I am happy to be learning Astro! Astroを学べて幸せです！</p>}
    

    {finished && <p>I finished this tutorial! このチュートリアルを終えました！</p>}
    

    {goal === 3 ? <p>My goal is to finish in 3 days. 3日で終えるのが目標です。</p> : <p>My goal is not 3 days. 3日が目標ではありません。</p>}

  3. 作業を進める前に、変更をGitHubにコミットします。作業を保存してウェブサイトを更新したいときは、常にこれをおこなうようにしましょう。

パターンを分析する

以下の.astroスクリプトが与えられたとします。

src/pages/about.astro
---
const operatingSystem = "Linux";
const quantity = 3;
const footwear = "ブーツ";
const student = false;
---

以下の各Astroテンプレート式について、ブラウザに送信されるHTML（もしあれば）を予測できますか？正しく予測できたかどうか、クリックして確認してください！

  1. <p>{operatingSystem}</p>

  2. {student && <p>私はまだ学生です。</p>}

  3. <p>私は{quantity + 8}足の{footwear}を持っています。</p>

  4. {operatingSystem === "MacOS" ? <p>私はMacを使っています。</p> : <p>私はMacを使っていません。</p>}

チェックリスト

参考