📄

【React入門】HTML in React　（JSX）

2025/05/18に公開

 はじめにこの記事は今までwebやプログラミング自体に触れた機会があまりない方に向けて、いきなりReactを学習し始めたい！といった方向けです。

Reactはモダンなwebフロントエンドライブラリで、初心者がいきなり学習しても問題ないくらいの学習難易度かと思います。
ReactはJSXという仕組みをドキュメント表記方法として採用しています。
JSXは、Reactの.jsx（.tsx）ファイルの中でreturn（）の中に記載されます。
const AComponent = () => {
  return(
    <div>some words</div>
  )
}
上記の<div>some words</div>にあたる部分がJSXです。
（tsxはjsxのTypeScript版ですが、慣例的にどちらもjsxと呼びます。また、jsxを含むファイル全体をjsxファイルと言います。）
JSX内では基本的にHTMLのような方法で表記していきます。

したがって、Reactを学ぶにはHTMLの前提知識が必須となります。

 HTML概要HTMLとはレガシーなWebの文章表記技術。コードで書くMicrosft Wordだと思ってもらえば良いです。

web制作で、文字やらなんやらを作成するときに、その構成なども含めてhtmlファイルに記述します。

それをサーバーに公開すれば、webサイトになるわけです。

 要素（タグ）と属性
HTMLには上記のようなパーツに分かれています。

ポイントは以下の④つです

①鍵かっこのように、開始と終了で1セット

例えばdivタグは最小構成で<div></div>のようになります。<div>が開始タグで、</div>が終了タグです。基本的には二つでセットですが、開始タグと終了タグの間に何もない時は<div/>のように記載することもできます。
②属性で詳細を指定する

タグには「属性」と言って、そのタグに情報を追加し、要素のスタイルや機能を制御できます。

よく使われるのはclassName属性で、ここにtailwindクラス名を指定することで、見た目を設定できます。

【参考】属性まとめ
③開始タグと終了タグの間に文字を書く

画像の「あいうえお」の部分が文字の部分になります。

ここに書いた文字が属性で指定されたスタイルや機能によって決められた形で画面上に表示されるようになります。

 よく使われるタグと属性HTMLタグはたくさんの種類がありますが、全てを覚える必要はありません。
【参考】HTMLタグ一覧
ここではReactでよく使われるタグをいくつか紹介します。

 Linkタグ(Next.jsの機能)名前の通り、urlを設定するタグです。クリックすると指定したurlのページを開くことができます
<Link href="https://...">表示する文字</Link>
href属性にジャンプ先のページURLを指定します。

 input タグフォーム入力を受け付ける基本タグ。type属性で挙動が大きく異なります。
// テキスト入力
<input
  type="text"
  value={value}
  onChange={(e) => setValue(e.target.value)}
  className="border rounded px-2 py-1"
/>

// チェックボックス
<input
  type="checkbox"
  checked={checked}
  onChange={(e) => setChecked(e.target.checked)}
/>
【参考】

inputのtypeによる違い種類

 button タグクリック操作を受け付けるボタン。

handleClickという変数をコンポーネント内より上で定義する。
const SomeComponent = () =>
  const handleClick = () => {
    alert("onClick was invoked")
  }
  return(
    【JSX部分】
  )
}
以下JSX部分
<button
  type="button"
  onClick={handleClick}
  className="bg-blue-600 text-white px-4 py-2 rounded"
>
  送信
</button>
これで、送信をクリックするとalertが表示される

 Image （Next.jsコンポーネント）画像を表示します。
<Image
  src="/hero.png"
  alt="ヒーロー画像"
  width={800}
  height={400}
  className="rounded-lg object-cover"
/>
使用するにはファイルの先頭にimport Image from "next/image";を追加する必要があります。また、width属性とheight属性は必須で、これを追加しないとエラーになります。

 変数JSXの優れている所は見た目（HTML・TailwindCSS）とロジック（JavaScript or TypeScript）を同一画面に記載できること※である。

（※近年のプログラミングに多い仕組み。Jetpack ComposeやSwiftUIなどもそう）
const SomeComponent = () =>
  const Hoge = "test"
  return(
    <div>
      {Hoge}
    </div>
  )
}

 終わりにReact学習者向けの解説にはHTMLをよく知っている人向けに書かれていることが多く、Reactからプログラミングに入門した方向けの記事が少なかったので、今回記載するに至りました。React初学者の方にとって少しでも参考になれば幸いです。

はじめに

HTML概要

要素（タグ）と属性

よく使われるタグと属性

Linkタグ(Next.jsの機能)

input タグ

button タグ

Image （Next.jsコンポーネント）

変数

終わりに

Discussion