Next.jsで出会った「TSX」

Next.jsの勉強を始めて、最初に少し戸惑ったものの一つが 「TSX」でした。

HTMLファイルなら、これまでのWeb制作でも見慣れています。 ところがNext.jsのプロジェクトを開くと、 page.tsxやlayout.tsxといったファイルが並んでいます。

実際に触ってみると、TSXはHTMLとまったく別のものというより、 HTMLに似た書き方を使いながら、JavaScriptやTypeScriptの処理も一緒に書けるもの と考えると理解しやすくなりました。

まずは、HTMLとTSXがそれぞれ何をするものなのかを見ていきます。

そもそもHTMLとは？

HTMLは、Webページの構造を作るためのマークアップ言語です。

見出し、文章、画像、リンク、表など、 ページの中にどのような要素があるのかをタグで表します。

<section class="profile">
  <h2>プロフィール</h2>
  <p>Web制作を勉強しています。</p>
  <a href="/contact/">お問い合わせ</a>
</section>

HTMLは、基本的にタグを使って文書の意味や構造を組み立てます。

• <h1>や<h2>は見出し
• <p>は文章
• <a>はリンク
• <img>は画像
• <section>は内容のまとまり

TSXとは？

TSXは、簡単にいうと TypeScriptの中に、HTMLのような見た目の記述を書ける形式です。

ReactやNext.jsでは、画面を作るためにJSXという記法を使います。 そのJSXにTypeScriptの型チェックを加えたものがTSXです。

例えば、次のようなコードがTSXです。

export default function Profile() {
  const name: string = "さくら";

  return (
    <section className="profile">
      <h2>プロフィール</h2>
      <p>こんにちは、{name}です。</p>
    </section>
  );
}

タグの部分だけを見るとHTMLに似ています。 しかし、上には関数があり、文字列を入れた変数も書かれています。

さらに{name}のように波括弧を使うと、 TypeScriptやJavaScriptの値を画面内に表示できます。

HTMLとTSXの主な違い

HTMLとTSXは見た目がよく似ていますが、役割や書き方にはいくつか違いがあります。

HTMLは完成した文書に近い

HTMLでは、表示したい内容をタグの中に直接書いていきます。

<h2>新着記事</h2>
<p>HTMLとTSXの違いを解説します。</p>

TSXはデータから画面を作れる

TSXでは、変数や外部から取得したデータを使って画面を作れます。

const title = "HTMLとTSXの違いを解説します";

return (
  <>
    <h2>新着記事</h2>
    <p>{title}</p>
  </>
);

この違いは、microCMSのような外部サービスから取得したデータを表示するときに、 とても重要になります。

TSXで特に気をつけたい書き方

HTMLの知識があるとTSXも理解しやすいのですが、 HTMLとまったく同じようには書けません。

初心者のうちは間違えやすいポイントを、順番に確認します。

<div class="card">
  カードの内容
</div>

<div className="card">
  カードの内容
</div>

<img src="/images/photo.jpg">
<br>

<img src="/images/photo.jpg" />
<br />

return (
  <h1>タイトル</h1>
  <p>本文です。</p>
);

return (
  <div>
    <h1>タイトル</h1>
    <p>本文です。</p>
  </div>
);

return (
  <>
    <h1>タイトル</h1>
    <p>本文です。</p>
  </>
);

const userName = "あかり";
const articleCount = 5;

return (
  <div>
    <p>こんにちは、{userName}さん。</p>
    <p>記事は全部で{articleCount}件あります。</p>
  </div>
);

<p>合計金額は{1200 + 800}円です。</p>

<p style="color: pink;">
  ピンクの文字
</p>

<p style={{ color: "pink" }}>
  ピンクの文字
</p>

TSXでは条件によって表示を変えられる

TSXの大きな特徴は、データの状態に合わせて表示内容を変えられることです。

例えば、ログインしているときだけメッセージを表示する、 記事が存在しないときは別の案内を表示する、といった処理ができます。

export default function UserMessage() {
  const isLoggedIn = true;

  return (
    <div>
      {isLoggedIn ? (
        <p>ログインしています。</p>
      ) : (
        <p>ログインしてください。</p>
      )}
    </div>
  );
}

isLoggedInがtrueなら「ログインしています」、 falseなら「ログインしてください」と表示されます。

配列のデータを繰り返し表示できる

ブログの記事一覧や商品一覧のように、 同じ形の要素を何件も表示したい場面があります。

HTMLだけで作る場合は、同じようなタグを件数分書く必要があります。

<article>
  <h3>記事タイトル1</h3>
</article>

<article>
  <h3>記事タイトル2</h3>
</article>

<article>
  <h3>記事タイトル3</h3>
</article>

TSXでは、配列のデータをmap()で繰り返して表示できます。

const articles = [
  { id: 1, title: "HTMLの基本" },
  { id: 2, title: "TSXの基本" },
  { id: 3, title: "Next.jsの始め方" },
];

export default function ArticleList() {
  return (
    <div>
      {articles.map((article) => (
        <article key={article.id}>
          <h3>{article.title}</h3>
        </article>
      ))}
    </div>
  );
}

これなら、記事が3件でも30件でも、 基本となる画面のコードは一つだけで済みます。

microCMSから取得した記事一覧を表示するときも、 このような繰り返し処理を使います。

Next.jsではTSXをどう使う？

Next.jsでは、ページや共通パーツをReactコンポーネントとして作ります。

App Routerを使用している場合、 例えばトップページはsrc/app/page.tsxに記述します。

src
└── app
    ├── layout.tsx
    ├── page.tsx
    ├── globals.css
    └── blog
        └── page.tsx

page.tsxには、そのURLで表示する画面を書きます。

export default function Home() {
  return (
    <main>
      <h1>はじめてのNext.js</h1>
      <p>TSXを使ってトップページを作っています。</p>
    </main>
  );
}

このHomeという関数は、Reactコンポーネントです。 関数の中でreturnしたTSXが、ブラウザーに表示される画面になります。

私が最初に混乱したのは、 「TSXがそのままブラウザーに表示される」と思っていたからでした。

実際には、Next.jsやReactがTSXを処理し、 最終的にブラウザーが理解できるHTMLなどへ変換してくれます。

コンポーネントに分けると管理しやすい

Next.jsでは、ヘッダー、ボタン、記事カードなどを 小さなコンポーネントに分けて作れます。

例えば、記事カードを次のようなTSXファイルとして作ります。

type ArticleCardProps = {
  title: string;
  description: string;
};

export default function ArticleCard({
  title,
  description,
}: ArticleCardProps) {
  return (
    <article className="article-card">
      <h2>{title}</h2>
      <p>{description}</p>
    </article>
  );
}

ページ側では、作成したコンポーネントを読み込んで使います。

import ArticleCard from "@/components/ArticleCard";

export default function Home() {
  return (
    <main>
      <ArticleCard
        title="HTMLとTSXの違い"
        description="初心者向けにやさしく解説します。"
      />
    </main>
  );
}

titleやdescriptionのように、 コンポーネントへ渡す値をpropsと呼びます。

TypeScriptでは、どのようなpropsを受け取るのかを型として書けるため、 間違った値を渡したときにエディターが教えてくれます。

microCMSのデータをTSXで表示する

Next.jsとmicroCMSを組み合わせる場合、 microCMSから取得した記事タイトルや本文をTSX内で表示します。

ここでは仕組みを理解するために、簡単な形で見てみます。

type Article = {
  id: string;
  title: string;
  description: string;
};

export default async function BlogPage() {
  const articles: Article[] = await getArticles();

  return (
    <main>
      <h1>ブログ記事一覧</h1>

      {articles.map((article) => (
        <article key={article.id}>
          <h2>{article.title}</h2>
          <p>{article.description}</p>
        </article>
      ))}
    </main>
  );
}

microCMSから取得したデータがarticlesに入り、 map()で記事を一件ずつ表示しています。

HTMLだけを見ると同じ記事カードが並んでいるように見えますが、 実際にはmicroCMSに登録した内容から自動で作られています。

最初から全部理解しなくても大丈夫

TSXを初めて見たときは、 HTML、JavaScript、TypeScript、Reactの書き方が一度に出てきたように感じます。

私自身も、最初はどこまでがHTMLで、 どこからがTypeScriptなのか分からなくなることがありました。

けれど、最初からすべてを理解しようとしなくても大丈夫です。 まずは次の順番で覚えると、少しずつ整理しやすくなります。

1. 1
   HTMLのタグ部分を見る

   まずはh1、p、sectionなど、 見慣れたタグを確認します。

2. 2
   classNameと閉じタグに慣れる

   HTMLとの細かな違いを、少しずつ覚えていきます。

3. 3
   波括弧の中に変数を入れてみる

   文字列や数字を変数にして、画面へ表示してみます。

4. 4
   配列をmap()で表示する

   記事一覧やカード一覧の作成に挑戦します。

5. 5
   microCMSのデータに置き換える

   固定のデータを表示できたら、APIから取得したデータへ進みます。

初心者がよく出会うエラー

TSXを書き始めたばかりの頃に出会いやすいエラーをまとめました。

エラーが出ると難しく感じてしまいますが、 エディターが間違っている場所を教えてくれることも多いです。

エラーメッセージの行番号を確認し、 その少し上からタグや括弧が閉じられているかを見ると、 原因を見つけやすくなります。