ReactのJSXで関数を呼び出して要素を生成する方法を完全ガイド！初心者向けReactの基本をやさしく解説
生徒
「ReactのJSXって、HTMLみたいに見えるけど関数も呼べるんですか？」
先生
「はい、JSXの中で関数を呼び出して、HTMLのような要素を作ることができますよ。」
生徒
「それってどんなときに使うんですか？」
先生
「たとえば、同じようなタグをたくさん作りたいときなどに便利です。実際の書き方を見てみましょう！」
1. JSXの中で関数を使うってどういうこと？
Reactでは、JSX（JavaScript XML）という書き方で、まるでHTMLのようにタグを書くことができます。でも実は、JSXはJavaScriptのコードなので、関数を呼び出してタグを生成することもできます。
これにより、同じ形のタグを繰り返し表示したいときや、条件によって表示内容を変えたいときに、とても便利になります。
2. JSXで関数を使う基本：中かっこ {} で呼び出す
JSXの中では、JavaScriptの式を 中かっこ { } で囲むことで使うことができます。これは、関数も同じです。
たとえば、{hello()} のように書けば、helloという関数を呼び出して、その戻り値を画面に表示することができます。
3. サンプルコード：関数で要素を返す
実際に、関数の中で要素を作って、それをJSX内で表示してみましょう。
import React from "react";
function App() {
function renderMessage() {
return <p>これは関数から表示されたメッセージです。</p>;
}
return (
<div>
<h1>こんにちは、React！</h1>
{renderMessage()}
</div>
);
}
export default App;
関数内でReactの要素を作ってreturnすれば、それをJSXに埋め込むことができるのです。
4. 複数の要素を関数で作ることもできる
関数の中で複数のタグを返したいときには、<> ～ </> という「フラグメント」を使えばOKです。
import React from "react";
function App() {
function createList() {
return (
<>
<li>りんご</li>
<li>ばなな</li>
<li>みかん</li>
</>
);
}
return (
<ul>
{createList()}
</ul>
);
}
export default App;
<> ～ </> は「React.Fragment」の省略記法で、余計なタグを増やさずに複数の要素を返せる便利な方法です。
5. 繰り返し処理で関数を使ってリストを作る
関数を使うと、配列とmap関数を使って要素を量産することもできます。これは、商品一覧やコメント表示などでよく使われる書き方です。
import React from "react";
function App() {
const items = ["ノート", "えんぴつ", "けしゴム"];
function renderItems() {
return items.map((item, index) => (
<li key={index}>{item}</li>
));
}
return (
<div>
<h2>持ち物リスト</h2>
<ul>
{renderItems()}
</ul>
</div>
);
}
export default App;
このように、関数を使って要素を動的に作成することで、コードを短く・わかりやすく保つことができます。
6. なぜ関数を使うのか？メリットとは
JSXの中で関数を使うことには、いくつかのメリットがあります。
- 同じ構造の要素を再利用できる
- 複雑な条件やデータ処理を関数の中で整理できる
- JSXの中身をスッキリさせて、読みやすくできる
たとえば、「3つのアイテムを表示するコード」を何度も書くのではなく、関数として定義しておけば、必要なときに呼び出すだけで済みます。
7. JSXで呼び出せる関数のルール
関数をJSXで呼び出すときは、必ずタグの外で中かっこ {} を使って書きます。また、戻り値としてReact要素（タグ）を返す必要があります。
以下のような書き方はエラーになります。
<div>
<renderItems() /> ←これは間違い！
</div>
JSXの中で関数を呼ぶときは、以下のように書きましょう。
<div>
{renderItems()} ←これが正しい！
</div>
8. JSXと関数を組み合わせて使えるようになろう
Reactでは、JSXと関数を組み合わせることで、より柔軟で再利用性の高いコードが書けます。特に、リストの描画、条件分岐、繰り返し処理などにおいては、関数を使うことでコードの見通しがよくなります。
最初は難しく感じるかもしれませんが、何度も書いていくうちに自然と身についていきますよ。
まとめ
JSXと関数の関係を振り返ろう
ここまで、ReactのJSXで関数を呼び出して要素を生成する方法について、基本から具体例まで丁寧に見てきました。 JSXは見た目こそHTMLに似ていますが、実体はJavaScriptの構文拡張であり、式として評価されるという大きな特徴があります。 そのため、JSXの中では変数だけでなく、関数の呼び出しや配列処理、条件分岐など、JavaScriptの力をそのまま活用できます。
特に初心者の方が最初につまずきやすいポイントとして、「JSXの中でなぜ中かっこを使うのか」「関数をタグのように書いてはいけない理由」 といった点がありますが、この記事で紹介した通り、JSXの中でJavaScriptを使う場合は、必ず中かっこで囲む必要があります。 これはReactの基本ルールであり、今後コンポーネントを分割したり、状態管理を学んだりする際にも何度も登場します。
関数で要素を返すメリット
JSXで関数を使って要素を生成する最大のメリットは、コードの再利用性と可読性が大きく向上する点にあります。 同じ構造の要素を何度も書く代わりに、関数としてまとめておけば、必要な場所で呼び出すだけで同じ表示を再現できます。 これにより、修正が必要になった場合も、関数の中身を一か所直すだけで済むため、保守性の高いReactアプリケーションを作ることができます。
また、配列とmap関数を組み合わせてJSXを生成する方法は、React開発において非常によく使われます。 商品一覧、メニューリスト、コメント表示など、実際のWebアプリ開発では「同じ形のデータを繰り返し表示する」場面が頻繁に登場します。 そのようなときに、関数とJSXを組み合わせた書き方を理解していると、Reactの仕組みが一気に身近に感じられるようになります。
サンプルプログラムで最終確認
ここで、今回学んだ内容をまとめたシンプルなサンプルプログラムをもう一度確認してみましょう。 JSXの中で関数を呼び出し、リスト要素を生成する基本形です。
import React from "react";
function App() {
const fruits = ["りんご", "ばなな", "みかん"];
function renderFruits() {
return fruits.map((fruit, index) => (
<li key={index}>{fruit}</li>
));
}
return (
<section className="mb-5">
<h2>フルーツ一覧</h2>
<ul>
{renderFruits()}
</ul>
</section>
);
}
export default App;
このように、関数がReact要素を返し、それをJSXの中で呼び出すことで、画面に動的な内容を表示できます。 「関数は値を返すもの」「JSXはその値を受け取って表示できる」という考え方を意識すると、Reactの理解がより深まります。
生徒
「JSXって、ただHTMLっぽく書くだけのものだと思っていましたけど、 中かっこを使えば関数まで呼べるのが分かって、Reactらしさを感じました。」
先生
「いい気づきですね。JSXは見た目に惑わされがちですが、 JavaScriptの式として評価される点がとても重要なんですよ。」
生徒
「関数で要素をまとめておくと、同じリストを何度も書かなくていいので、 コードがすごくスッキリするのも実感できました。」
先生
「その感覚は大切です。Reactでは、小さな関数やコンポーネントを組み合わせて 画面を作っていくので、今回の内容は今後の学習の土台になります。」
生徒
「次は条件分岐やコンポーネント分割にも挑戦してみたいです。 JSXと関数の関係が少しずつ分かってきました。」
先生
「とても良い流れですね。今回学んだJSXと関数の使い方をしっかり身につけておくと、 これからのReact学習がぐっと楽になりますよ。」
この記事を読んだ人からの質問
