create-react-appでReactの導入とJSXの記法に触れてみる

React2021.10.12

最終更新日：2021.10.12 Update!!

実務ではVue.jsを使うことが多いのですが、最近は少しずつReactについても勉強をしていて、またVue.jsとは違った良さがあるのかなと感じています。今回はReactを始める上でまずおさえておきたい「create-react-app」コマンドを使った開発環境の構築と、JSXと呼ばれるReactで使われる独特な記法についてまとめてみたいと思います。

create-react-appでReactのプロジェクトを作成する

Reactを始めるにはいくつか方法はあるようですが、一番手軽なものとして「create-react-app」コマンドを使う方法があります。このコマンドはNode.js環境が必要となるので、インストールを事前に済ませておきます。npxコマンドが使えるようになると、下記のようにプロジェクト名を指定してReactのプロジェクトを作成します。

$ npx create-react-app PROJECT_NAME

必要なモジュールが自動的にインストールされプロジェクトが作成されると、ディレクトリに移動して、ローカルサーバーを立ち上げます。

$ cd PROJECT_NAME
$ yarn start

ローカルホスト（http://localhost:3000/）にアクセスすると下記のようにデモページが表示されます。これでReactを使う準備が整いました。

create-react-appでプロジェクトを作成すると、デフォルトでは下記のようなディレクトリ構成になります（一部省略しています）ソースファイル用のディレクトリや、ビルド後のファイルが入るディレクトリなど分かれているのが確認できます。

/ PROJECT_ROOT
  ┣ node_modules
  ┣ build
    ┣ index.html
    ┣ ......
    ┗ static
      ┣ ......
  ┣ public
    ┣ css
      ┗ *****.css
    ┗ index.html
  ┣ src
    ┣ index.js
    ┣ index.css
    ┣ ......
  ┣ package.json
  ┗ yarn.lock

ケースによってディレクトリ構成は変わるかと思いますが、基本的な部分はおさえておきたいですね。

src	バンドル前のソースファイルが格納される、Reactのコンポーネントファイル（.jsxや.tsx）やスクリプト、CSS、SVGファイルなど
public	HTMLや画像、バンドルしない静的ファイルなどが格納される
build	ビルドコマンドを実行した際に生成される公開用ファイルが格納される
build/static	バンドルされたチャンク形式のスクリプトファイルやCSSなどが格納される

Reactの導入とJSX記法

実際にウェブページ上でReactを使った処理を作成してみます。デモページを下記のようにカスタマイズしていきます。まずはpublicディレクトリ配下にあるindex.htmlを書き換えます。シングルページアプリケーションの場合はこれが基本となるHTMLになります。基本的には通常の静的サイトと同じですが、Reactで記述した処理やコンポーネントをマウントするためのルート要素をidをつけて用意しておきます。【public/index.html】

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="css/*****.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="" />
    <title>example</title>
  </head>
  <body>
    <noscript>JavaScriptを有効にしてください</noscript>
    <div id="root"></div>
  </body>
</html>

続いて、ソースファイルとなるスクリプトを用意します。ReactでHTML要素を出力したり、DOMの操作を行うために「react-dom」のモジュールをインポートします。また、CSSファイルをバンドルする場合には合わせて対象のCSSファイルをインポートしておきます。 JSX記法では、下記のように関数としてHTMLをreturnするような形で書いていきます。returnの後には丸括弧を記述し、空のHTMLタグの要素のような記号で囲みます。その中に出力するHTMLを書いていきます。Vue.jsでいうところのtemplateタグのようなイメージですね。【src/index.js】

import ReactDOM from 'react-dom';
import './index.css';

const App = () => {
  return (
    <>
      <h1>Hello World</h1>
    </>
  )
};
ReactDOM.render( <App />, document.getElementById('root') );

HTMLを返す関数として定義したものを、ReactDOMのrenderメソッドで実行することで、指定した要素にマウントすることができます。第一引数には対象となる関数をアッパーケースでHTMLのタグのように書いて指定します。第二引数にはマウント先となる要素を指定します。合わせて、バンドル用のCSSを作成してみます。ここは通常通りのCSSの記述になりますね。格納先はsrcディレクトリ配下に入れておきます。【src/index.css】

h1 {
  color: red;
}

もしCSSファイルなどをバンドルしない場合にはpublicディレクトリ配下に置くことになります。このファイルはHTMLから直接読み込む形になります。【public/*****.css】

body {
  background: black;
}

これで実際にウェブページを確認すると、Reactで書いた処理がウェブページに反映されているのが確認できます。CSSもバンドルファイルとして読み込まれて反映されているのがわかります。

JSX記法を使ったコンポーネントファイルの読み込み

Reactでは基本的に各要素をコンポーネントとして扱い、それらをインポートしていく形になります。ソースコードとなるディレクトリに下記のようにコンポーネント用のファイルを作成します。この時、拡張子を「.jsx」というものに変えておきます。こうすることで、コンポーネントファイルであることを明示できるのと、エディタなどでも補完が働くのでメリットが多くなります。一般的にReactでのコンポーネントファイルにはこの拡張子が用いられるようですね。

┣ src
  ┣ index.js
  ┣ index.css
  ┗ components
    ┗ component.jsx

では実際にコンポーネントファイルを作成していきます。コンポーネント側では関数としてエクスポートされるようにします。同じく、returnでHTMLを返すようにしますが、下記のように属性などを設定するときには注意が必要で、値はオブジェクトの形にして、さらに波括弧で囲んであげる必要があります。通常通りの属性値の記述ですとエラーになるので注意が必要です。【src/components/component.jsx】

export function Component() {
  const textStyle = {
    color: 'white'
  };
  return (
    <>
      <p style={ textStyle }>コンポーネント要素のテキスト</p>
    </>
  );
};

作成したコンポーネントはメインとなるスクリプトであるindex.jsで下記のようにインポートします。そして、出力するHTML内でアッパーケースの名前でHTMLのタグのように記述することで、コンポーネントファイル内で定義したHTMLが出力されるようになります。【src/index.js】

import ReactDOM from 'react-dom';
import { Component } from './components/Component';
import './index.css';

const App = () => {
  return (
    <>
      <h1>Hello World</h1>
      <Component />
    </>
  )
};
ReactDOM.render( <App />, document.getElementById('root') );

実際にウェブページで確認するとこのようにコンポーネントが読み込まれてページ上に反映されているのがわかります。

今回はReactを始める上でまずおさえておきたいcreate-react-appを使った開発環境の構築と、JSX記法の基本についてまとめてみました。JSX記法についてはまだまだ色んな特徴がありますが、また改めて別記事にまとめていきたいと考えています。少しずつReactに関する記事も発信していければと思います。