React入門第２回 ~Reactのコードを書いてみよう~

2024.11.06
Contents
  1. Reactの基本的な書き方
  2. 補足解説：<script>タグの役割

Reactの基本的な書き方

プロ太先生、前回はReactが何なのかを学びましたけど、今日は実際にコードを書いてみたいです！

いいですね！では、さっそく基本的なコードを書きながら、Reactの仕組みを理解していきましょう。まず、このコードを見てください。

<!DOCTYPE html>
<html>
  <head>
    <script src="/libs/react.development.js"></script>
    <script src="/libs/react-dom.development.js"></script>
    <script src="/libs/babel-standalone.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">
      const appEl = document.querySelector("#app");
      const root = ReactDOM.createRoot(appEl);
      root.render(<h1>こんにちは!OZくん！</h1>);
    </script>
  </body>
</html>

あ！！画面に「こんにちは!OZくん！」って表示されてる！でも、このroot.renderってなんですか？

いい質問ですね！ここで使っているReactDOM.createRootとrenderは、Reactで画面に内容を表示するための仕組みなんです。
ReactDOM.createRootは、Reactアプリ全体の「根っこ」を作るようなもので、ここで作ったrootに対して、renderを使って表示したい内容を指定します。
ちなみに、「レンダリング」というのは、簡単に言うと「画面に表示すること」なです。Reactでは「レンダリング」を通して、コードの内容をブラウザ上に実際の見える形に変えていくんです。

なるほど！まずrootを作って、それに内容を表示する感じなんですね！

その通り！次に、Reactでよく使われる「コンポーネント」を作ってみましょう。例えば、画面に「元気かい？？OZくん？？」と表示するSampleというコンポーネントを作るとします。

Step1: 通常の関数として定義

function Sample() {
  return <h1>元気かい？？OZくん？？</h1>;
}

関数の形で定義するんですね？これはJavaScriptの普通の関数と同じですか？

そうです！この関数の中でreturnを使って、<h1>タグを返しているんですね。これがReactの「コンポーネント」と呼ばれるもので、いろいろな画面パーツを関数としてまとめて使えるようになります。

へぇ〜、じゃあこれを画面に表示するにはどうすればいいんですか？

先ほどのrenderに、このコンポーネントを指定してあげます。次のように書いてみましょう。

root.render(<Sample />);

おぉ！！画面に表示されました！！

Step2: アロー関数に書き換え

次に、今書いたSampleコンポーネントを「アロー関数」という書き方で定義してみますね。

const Sample = () => {
  return <h1>元気かい？？OZくん？？</h1>;
};

あれ？？functionがなくなってますね？

その通りです！アロー関数ではfunctionキーワードを使わないんです。さらに、1行で返せる内容ならreturnも省略できますよ。

Step3: 簡潔なアロー関数に

const Sample = () => <h1>元気かい？？OZくん？？</h1>;

ほんとだ、簡潔になりました！でもどうしてこう書けるんですか？

Reactのコンポーネントは基本的にUIを「返す」ものなので、1行でシンプルにまとめられる場合、このように書くことが多いんです。見やすくなるし、書くのも速くなりますね。

Step4: 複数の要素を含む場合

次に、もう少し複雑な例に進みましょう。例えば、<h1>以外に別の要素を追加する場合です。


      const Sample = () => {
        return (
          <div>
            <h1>やあ！OZくん！</h1>
            <p>Reactを楽しんでるかな？</p>
          </div>
        );
      };

Reactでは、複数の要素を返すときには1つのタグで「ラップ」する必要があるんです。今回は<div>タグを使って、2つの要素をまとめています。そして、上記のコードは、関数の中身が、return以外のコードが存在しないので、下のように｛｝とreturnを省略して書くことができます。

const Sample = () => (
  <div>
    <h1>やあ！OZくん！</h1>
    <p>Reactを楽しんでるかな？</p>
  </div>
);

Step5: 再度、実際に表示してみる

では、今のSampleコンポーネントを使って、画面に表示してみましょう。最後にもう一度、root.render(<Sample />);を実行します。

root.render(<Sample />);

おぉ！！今度は「やあ！OZくん！」と「Reactを楽しんでるかな？」が表示されました！

いいですね！これでReactの基本的な書き方が分かりましたね。次回からは、より複雑なUIの作成に進んでいきますが、今回学んだコンポーネントの作り方は今後もとても役に立ちますよ！

補足解説：<script>タグの役割

<!DOCTYPE html>
<html>
  <head>
    <script src="/libs/react.development.js"></script>
    <script src="/libs/react-dom.development.js"></script>
    <script src="/libs/babel-standalone.js"></script>
  </head>

プロ太先生、この最初の3つの<script>タグって、何のために入れてるんですか？

それぞれの<script>タグには、Reactを使うために必要なファイルが含まれているんです。それぞれの役割を簡単に説明していきましょう。

  1. react.development.js
    • これはReact本体のコードです。Reactの「コンポーネント」や「状態管理」など、Reactの基本的な機能を提供してくれます。
    • 「開発用」なので、エラーの詳細なメッセージが表示され、デバッグがしやすくなっています。
  2. react-dom.development.js
    • ReactをブラウザのDOM（画面表示のための構造）とつなげるためのものです。ReactDOM.createRootなどの関数がこのファイルに含まれています。
    • こちらも「開発用」で、エラー表示が分かりやすい仕様になっています。
  3. babel-standalone.js
    • Babelは、JavaScriptのコードを変換するツールです。ReactではJSXというHTMLに似た書き方をしますが、ブラウザが理解できるJavaScriptに変換する必要があります。このBabelがその変換を担当してくれます。
    • 特に、このファイルは「ブラウザ上でリアルタイムにJSXを変換」してくれるので、今回のような実験用コードで便利です。

なるほど！この3つがあるから、Reactのコードがブラウザで動くんですね！！

その通りです！実際のプロジェクトではこれらを直接使うのではなく、ビルドツールで管理することが多いですが、今のように学習中はとても便利です。というわけで、今日の授業はここまでとします！今日書いたコードをしっかりと復習しておいてくださいね。自分で手を動かして、コードを書いてくださいね！

分かりました！！次回の授業も楽しみにしています！！