React.jsを始めよう：動かしながら仕組みを知ろう

今回はJavaScriptのライブラリであるReact.js(以下React)について紹介します。

この記事ではReactに触れてみたい人のために、環境構築から実際にアプリケーションの立ち上げ、ブラウザ上で表示させるところまで行います。

「Reactって聞いたことあるけど一度も触ったことのない」という人が、勉強してみたくなる第一歩になることができれば嬉しい限りです。

想定読者

この記事はJavaScript(ES6)の基本構文がなんとなく理解できている人を想定しています。

特に関数やクラスの概念が全くわからないと厳しいかもしれないので、少し確認してからこの記事を読むと理解しやすいと思います。

Keyword : import, export, クラス, 継承, アロー関数

React.jsに関する他の記事はこちら

【React特集】アプリ開発オススメ記事まとめ！言語・FWの知識から開発・運用まで

React.jsとは

ReactはFacebook社が開発したJavaScriptのライブラリです。

ユーザーの入力などの操作に応じて高速でWebページに反映できます。
そのためいわゆるモダンなUIを作ることができるため今非常に人気があります。

React …ユーザインターフェース構築のためのJavaScriptライブラリ

Reactではコンポーネント(component)というWebページの部品を作成できます。
コンポーネントの種類はヘッダーコンポーネントやリストコンポーネントなど様々です。

このコンポーネントを作ってユーザーの操作に応じて動的にDOMを生成しWebページを構成していきます。
これを使うとシングルページアプリケーション(Single Page Application: SPA)とよばれるページ遷移が全くいらないアプリケーションを作ることができます。

以下のサイトはReactで書かれているわけではないですが、SPAのイメージとしては伝わるかと思います。
DAISUKE KOBAYASHI PHOTOGRAPHY

自分のポートフォリオサイトをSPAで作れたら楽しいと思います。
是非、この記事でReactの大枠を掴んでください。

React.jsの開発環境を整えよう

いきなりコンポーネントがどうとか言われてもよくわからないと思いますので、実際に作ってみたいと思います。
そのためにもまずはReactをローカルで動かすための環境を整えましょう。

CODEPEN等のブラウザ上でコーディングする方法もありますが、いずれ本格的に自分で開発する際には必要になりますので紹介します。

まずReactをローカルで使用するためにはnode.jsというバックエンドで動くJavaScriptを入れる必要があります。
node.jsを入れることでjsのパッケージ管理をすることが可能です。

入れていない方は、以下のサイトから最新のものをインストールしましょう。

2019/09/08の最新版は12.10.0です。
node.js

node.jsを入れるとnpmコマンドが使用できるようになり、JavaScript関連のライブラリをインストールできるようになります。

$ node --version

reactでアプリを作るためにはcreate-react-appというFacebookが公式で出しているツールを入れます。
以下のコマンドを実行しましょう。

$ npm install create-react-app -g

-gを入れることでglobal環境のどこからでもcreate-react-appのコマンドを使用することができます。
このコマンドでエラーが出てしまう場合はnpmの前にsudo(管理者権限)をつけて、pcのパスワード等を入力してください。

次に自分の好きなファルダに移動してアプリを作成しましょう。
今回はmy-appという名前で行いますが、この部分はご自分の好きな名前をつけて頂いて問題ありません。

$ create-react-app my-app

実行するとReactに必要なファイルを作成してくれます。
しばらく時間がかかりますので、気長に待ちましょう。

完了すると以下のフォルダができていると思います。

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js

ここまでできていれば開発用サーバーが起動できるはずです。
実際に起動してみましょう。

$ cd my-app
$ yarn start
Control+C でサーバーを停止できます

Compiled successfully!

You can now view react-complete-guide in the browser.

  Local:            http://localhost:3000/
  On Your Network:  http://172.27.0.2:3000/

Note that the development build is not optimized.
To create a production build, use yarn build.

コンパイルが成功したとメッセージが出ると思います。
http://localhost:3000/にアクセスして以下の画面が表示されていれば成功です。

ここまで上手くできたでしょうか。
今後開発はこのサーバーで行っていきます。

React.jsの仕組みとjsxを知ろう

先ほど作成したmy-appの中身の解説とreactで特徴的な記述方法であるjsxを紹介したいと思います。

my-appの中身

my-appには多くのReactアプリを作るために必要なものが入っています。
一部必要なところのみ紹介します。

試しに、public/index.htmlを開いてみましょう。
以下のように記述されています。

<!--一部抜粋-->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

これはWebページの基盤となるHTMLファイルです。
public/index.jsからbodyタグの中のid=rootの部分に動的にDOMを生成して画面を変更してます。

// public/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

// この部分でAppからDOM生成してrootを指定しています。
ReactDOM.render(<App />, document.getElementById('root'));

serviceWorker.unregister();

node_modulesにはReactを動かすために必要なものが大量に入っています。
このフォルダは触らないようにしましょう。

そしてsrcフォルダがアプリの根幹になるApp.jsやそこに適応するCSSファイルであるApp.cssなどがあります。
アプリを開発するのはこのフォルダ内を変更することがメインとなります。
このフォルダは次から早速操作していきます。

jsxとは

次にReactで使われる記述方法について説明します。

Reactではコンポーネントを作る際にjsxという少し特殊な記法を使用します。
この記法はHTMLっぽいものをJavaScriptのファイル内に書くことができます。

その前にそもそもなぜこのjsxが必要なのでしょうか。
例えばsrc/App.jsに以下のように書きます。

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  render() {
    return React.createElement('div', { className: 'App' }, React.createElement('h1', null, 'Does it work?'))
  }
}

export default App;

ReactではReact.createElementというメソッドの引数を記述することで、HTMLの構造やプロパティを指定しレンダリングできます。
また、React.createElement自体を引数に取ることで上記のようにネストも表現できます。

このコードでレンダリングすると、

<div class='App'>
  <h1>
    React App!!!
  </h1>
</div>

のように表示されます。

ただ、このように記述していくことには問題点があります。
上記のようにHTMLを記述していくとネストが複雑になった際に、render関数の返り値も複雑になってしまいます。
そのため、よりHTMLlが直感的にわかるように記述できるのがjsxと呼ばれる記法です。

同じ記述をjsxを使うとすっきり書けます。

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>Does it work?</h1>
      </div>
    );
  }
}

export default App;

この方がReact.createElementを使ったものよりも可読性が高く、記述も直感的です。

jsxではこのメソッドを使わなくても、内部的に自動でレンダリングしてくれます。
なので試しにimportしているReactを消してレンダリングするとエラーが出ます。

Failed to compile.

./src/App.js
  Line 7:  'React' must be in scope when using JSX  react/react-in-jsx-scope
  Line 8:  'React' must be in scope when using JSX  react/react-in-jsx-scope

Search for the keywords to learn more about each error.

つまり使っていないように見えてもimport React from 'react';は使っているため、消さないようにしてください。

ただしこのjsxを使うにあたって注意してほしいことがあります。
jsxはHTMLと似ていますが、HTMLではなくあくまでJavaScriptの一部です。
なので、HTMLと記述が異なる部分もあります。

例えば<div className='App'>と記述していますが、実際のHTMLでは<div class='App'>と記述するはずです。
これは、classという変数はJavaScriptの予約語になっており使えないためです。

HTMLとだいたい同じですがこのような少しの違いはあるので、区別するようにしてください。

コンポーネントを作成しよう

次に簡単なコンポーネントを作成したいと思います。

src/Person/Person.jsというファイルを作ります。
コンポーネントには関数ベースで作るものとクラスベースで作るものの2種類がありますが、関数ベースで作るほうが一般的です。

なので今回は関数ベースで記述していきます。

import React from 'react';

const person = () => {
    return <p>This is Person Component.</p>
};

export default person;

personという関数を定義し、返り値に表示させたいHTML要素を記述しました。

このコンポーネントはpタグで「This is Person Component.」という表示をさせる単純なものです。
このファイルからApp.jsへexportしてレンダリングします。

import React, { Component } from 'react';
import Person from './Person/Person'
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>React App!!!</h1>
        <Person />
      </div>
    );
  }
}

export default App;

importするコンポーネントの名前は自由ですが、ファイル名と揃えてPersonとしたほうが分かりやすいので特別な理由がなければ揃えたほうが良いです。
あとは<div className=’App’>内に<Person />と書くとPersonコンポーネントが呼び出せます。

コンパイルすると以下のように表示されます。

このように一度作ったコンポーネントは簡単に呼び出すことができます。

この完成したPersonコンポーネントを使い回す上で、中の内容をコンポーネントごとに変更していきたいということがよくあります。

その場合はPersonコンポーネントの関数に引数を与えることで可能です。

import React from 'react';

const person = (props) => {
    return <p>This is {props.name} Component.</p>
};

export default person;

引数にpropsと与え、中身のカスタマイズしたい部分に{ props.name }と記述しています。
関数の引数には好きな値を入れることができます。
この名前は自由ですが、propsとすることが通例ですので今回はそれに従います。

この{ props.name }には以下のように値を入れます。

import React, { Component } from 'react';
import Person from './Person/Person'
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>React App!!!</h1>
        <Person name='person' />
        <Person name='PERSON' />
      </div>
    );
  }
}

export default App;

このように<Person name='person' />のように値を渡すとその部分だけ渡したもので表示できます。