Reactの基礎 その2:JSX記法

新しい現場で本格的にReactを触ることになったのでReactについて学んだことを備忘録として記事にしていきます。
今回はJSX記法とコンポーネントについて説明しながら、Reactアプリで表示される内容の記述方法をまとめていきたいと思います。

JSX記法

JSX記法とは

JSX記法とはReact特有のJavaScriptの拡張構文で、アプリの見た目の構造をHTMLのように記述することができます。
JSX記法を用いることで、コードの見通しをよくすることができます。
では、実際のコードを見てみましょう。
create-react-appで自動で作成されたファイルのsrc/App.jsの中身を見てみましょう。

JavaScriptのファイル内にHTMLが記述されています。
これがJSX記法で記述されている箇所になります。

JSX記法でビューを作成してみる

では、先ほど見たsrc/App.jsを編集してJSX記法を試してみましょう。
App関数の中身を以下のように書き換えます。

function App() {
  return <h1>React App!</h1>;
}

ローカルサーバーを立ち上げて表示を確認してみましょう。

複数の要素を記述する

<h1>タグ1つだけを表示させることができました。
今度は要素を追加してみましょう。
App関数を下記のように変更してみましょう。

function App() {
  return (
    <h1>React App!</h1>
    <p>This is sample app</p>
  )
}

コンパイルエラーが発生しますね。
これはJSX記法で記述した関数は一つの要素を返却する必要があるため発生しています。
以下のように修正しましょう。

function App() {
  return (
    <div>
      <h1>React App!</h1>
      <p>This is sample app.</p>
    </div>
  );
}

コンパイルエラーが解消されて画面が表示できるようになったと思います。

属性の指定とJavaScriptの記述

JSX記法では属性の指定もHTMLと同じように記述することができます。
一部、classはclassNameとなっているなど名前が変わっているものもありますが、基本的には同じように指定できます。
また、JSX記法内で変数や関数などJavaScriptのプログラムを利用したい場合、{}で囲むことでその中で利用することができます。
App関数を以下のように修正してみましょう。

function App() {
  const button_label = 'sample button'
  return (
    <div>
      <h1 className='header'>React App!</h1>
      <p>This is sample app.</p>
      <button onClick={() => alert('Click!!!')}>{button_label}</button>
    </div>
  );
}

class属性の付与やonClick属性によるクリック時の挙動などを指定しています。
また、buttonタグのonClickでは{}内にJavaScriptの関数を、タグ内には{}内に変数”button_label”を指定してJavaScriptのプログラムを利用しています。
以下のような画面表示になると思います。
ボタンをクリックしてアラートの動作や、開発者ツールでclass属性が付与されていることを確認してみてください。

まとめ

今回の記事ではJSX記法についてまとめました。
JSX記法を用いることでJavaScriptのコード内にHTMLライクなビューの構造を記述することができ、コードの視認性を高めることができます。
また、HTMLはフロント開発の基礎知識であるため直感的に理解する手助けにもなります。
HTMLの様々なタグが利用できるのでぜひ試してみてください。
ここまで読んでいただきありがとうございました。
それでは、また。