先生と生徒の会話形式で理解しよう

生徒

「Reactで画像や入力欄を表示しようとしたら、エラーが出ました…」

先生

「もしかすると、自己終了タグの書き方が原因かもしれません。imgやinputは少し特別な書き方が必要なんですよ。」

生徒

「自己終了タグって何ですか？普通のタグと何が違うんですか？」

先生

「では、React（JSX）での自己終了タグの書き方を基本から見ていきましょう！」

1. JSXで使う自己終了タグとは？

React（リアクト）で使うJSX（じぇいえすえっくす）は、JavaScriptでHTMLのような記述ができる仕組みです。

その中で、自己終了タグと呼ばれるものがあります。これは、内容がなくても単独で使えるタグのことです。

たとえば、imgタグ（画像表示）やinputタグ（入力欄）、brタグ（改行）などが該当します。

2. HTMLとJSXの違いに注意

HTMLでは、次のように自己終了タグの閉じ方を省略しても動作します。

<img src="sample.jpg">

しかし、JSXではそれはエラーになります。

JSXでは必ずスラッシュ（/）を使って閉じる必要があります。

つまり、JSXでは次のように書きます：

<img src="sample.jpg" />

3. JSXでの自己終了タグの正しい書き方

それでは、Reactで自己終了タグを使った具体例を見てみましょう。


import React from "react";

function App() {
  return (
    <div>
      <h1>画像と入力欄の例</h1>
      <img src="https://via.placeholder.com/150" alt="サンプル画像" />
      <br />
      <input type="text" placeholder="名前を入力してください" />
    </div>
  );
}

export default App;

（画面に「画像と入力欄の例」と表示され、画像と名前入力欄が表示されます）

上の例では、imgやinput、brタグをすべて/で閉じています。

JSXではこのようにしないと、構文エラーになるので注意が必要です。

4. よく使う自己終了タグの例

ReactのJSXでよく使われる自己終了タグには次のようなものがあります。

img：画像を表示する
input：入力欄（テキスト、パスワード、チェックボックスなど）
br：改行
hr：横線（区切り線）
meta：HTMLの情報を定義（主にhead内）
link：CSSファイルの読み込み

どれも、中にコンテンツを持たないタグなので、必ず/を使って閉じましょう。

5. alt属性はimgタグで必須

imgタグを使うときは、alt（あると）属性も忘れずに書くのがおすすめです。

alt属性とは、画像が表示できなかったときに代わりに表示される文字のことです。

また、視覚に障がいがある方のための読み上げにも利用されるので、アクセシビリティの面でも重要です。

6. inputタグのタイプを変えることでいろんな入力欄に

inputタグは、typeの値を変えることで、いろいろな種類の入力欄を作れます。

type="text"：文字を入力
type="password"：パスワード入力（●で表示）
type="checkbox"：チェックボックス
type="radio"：ラジオボタン
type="submit"：送信ボタン

このように、1つのinputタグでも、設定を変えるだけでさまざまな入力が可能になります。

まとめ

Reactの自己終了タグを理解する重要性

今回の記事では、Reactで必ず理解しておきたい「自己終了タグ」の書き方について、JSX特有のルールを中心に解説してきました。 ReactではHTMLとよく似た見た目でコードを書くことができますが、実際にはJavaScriptの文法として解釈されるため、 HTMLでは問題なく動いていた書き方が、そのままではエラーになるケースが多くあります。特に、imgタグやinputタグ、brタグのように中身を持たない要素は、JSXでは必ずスラッシュを付けて閉じる必要があります。

初心者の方がReactで最初につまずきやすい原因のひとつが、この「自己終了タグの閉じ忘れ」です。エラーメッセージを見ても最初は意味が分かりにくく、どこが間違っているのか悩んでしまうことも多いでしょう。しかし、JSXでは「すべてのタグは必ず閉じる」という基本ルールを覚えておくだけで、多くのエラーを未然に防ぐことができます。この考え方は、Reactコンポーネント全体を理解するうえでも、とても大切なポイントです。

HTMLとの違いを意識することで理解が深まる

HTMLでは、imgやinputの閉じタグを省略してもブラウザが自動的に補完してくれます。しかしJSXでは、そのような補完は行われません。 JSXは見た目こそHTMLに似ていますが、実体はJavaScriptの構文であり、正しい文法で書かれていない場合はエラーとして扱われます。この違いを意識できるようになると、Reactのコードが「なぜ動かないのか」を自分で考えられるようになります。

また、imgタグでalt属性を指定することや、inputタグのtypeを正しく使い分けることも、 React開発では基本中の基本です。表示されればよい、入力できればよい、というだけでなく、使う人の立場や後からコードを読む人のことを考えて書く意識が、自然と身についていきます。

自己終了タグを使ったシンプルなサンプル


function App() {
  return (
    <div>
      <h1>自己終了タグの確認</h1>
      <img src="https://via.placeholder.com/100" alt="サンプル画像" />
      <br />
      <input type="text" placeholder="文字を入力してください" />
    </div>
  );
}

（画面に「自己終了タグの確認」と表示され、画像と入力欄が表示されます）

このサンプルのように、自己終了タグを正しく書くだけで、 Reactコンポーネントはエラーなく動作します。特別な処理をしていなくても、JSXのルールを守ることが、安定したReactアプリを作る第一歩になります。小さなサンプルでも、正しい書き方を積み重ねていくことが大切です。

基礎を押さえることがReact上達への近道

Reactは便利で柔軟なライブラリですが、その分、基本ルールを理解していないとエラーに悩まされがちです。自己終了タグのような一見細かいルールも、実際の開発では何度も登場します。今回学んだ内容をしっかり身につけておけば、今後フォームや画像を多用する画面を作るときにも安心してコードを書けるようになります。

最初は覚えることが多く感じるかもしれませんが、ひとつひとつのルールを理解しながら進めることで、 Reactのコードがだんだん読みやすく、書きやすくなっていきます。焦らず、基本を大切にしながら学習を続けていきましょう。

先生と生徒の振り返り会話

生徒

「最初はimgタグを書いただけでエラーが出て、すごく混乱していましたが、自己終了タグのルールが分かってからは原因がすぐ分かるようになりました。」

先生

「それは大きな成長ですね。Reactでは、このような基本的なJSXのルールを理解しているかどうかで、学習の進み方が大きく変わります。」

生徒

「HTMLと同じ感覚で書いてはいけない、というのがよく分かりました。これからはタグがちゃんと閉じているか、意識して書いてみます。」

先生

「その意識がとても大切です。自己終了タグを正しく書けるようになれば、 Reactのフォームや画像表示も怖くなくなりますよ。基礎を大切に、少しずつステップアップしていきましょう。」