React入門 01: コンポーネントを組み立てる

ReactはFacebook社により開発が進められている、もっとも注目度の高いJavaScriptフレームワークのひとつです。DOM(Document Object Model)の要素をデータと関連づけて(データバインディング)、データの変化に応じてページを動的に構成します。

そして、アプリケーションの機能は小分けして、それぞれのデータの処理とテンプレートをまとめたものがコンポーネントです。小さなコンポーネントを組み合わせて、ひとつのシステムがつくられます。コードはコンポーネントごとに確かめればよいので、読みやすく、メンテナンスもしやすくなるのです。

ただ、なじみの少ない構文の知識や準備が求められるため、初めての方には少し始めにくいかもしれません。本稿では、簡単なコンポーネントを組み合わせて、シンプルなシングルページアプリケーション(SPA)をつくってみます。

Create React Appでアプリケーションのひな形をつくる

「Create React App」は、シングルページアプリケーション(SPA)のひな形をつくってくれる開発環境です。このひな形に手を加えて目的のアプリケーションにします。

まずは、Create React Appのインストールです。予めNode.js(npm)が入っていなければなりません。コマンドラインツールからnpmでつぎのコマンドを打ち込んでください。

npm install -g create-react-app

npx create-react-appまたはcreate-react-appコマンドにつづけてアプリケーション名を入力すると、その名前でフォルダとアプリケーションのひな形がつくられます。

npx create-react-app react-comment-box

ひな形がつくられたら、アプリケーションのディレクトリに移って、npm startとコマンドを打てば、ローカルサーバーでひな形のページが開きます(図001)。

cd react-comment-box
npm start

図001■Reactのひな形アプリケーションページ

アプリケーションのディレクトリには、つぎのようなファイルがつくられます(図002)。この中で手を加えるのは、src/App.jsとsrc/App.cssです。

図002■アプリケーションのディレクトリにつくられたファイル

アプリケーションに子コンポーネントを加える

src/App.jsは大もとになるコンポーネントです。ひな形アプリケーションには、ほかのコンポーネントはまだありません。つぎのJavaScriptコードの抜書きが、軸となる枠組みです。まず、スタイルシートのファイル(App.css)をimportしています。コンポーネント(App)を定めるのは、関数です(「関数コンポーネントとクラスコンポーネント」参照)。そして、JSXで定められたDOMのテンプレートを返さなければなりません(JSX の導入」参照)。

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App"><!-- JSXのテンプレート -->
      <!-- 中略 -->
    </div>
  );
}

export default App;

JSXのテンプレートは、基本的にはHTML(XML)の書き方に添います。ただし、class属性はclassNameに替えなければなりません。classがECMAScript 2015の予約語になっているためでしょう。また、テンプレートは必ずひとつのルート要素にまとめてください。

src/App.jsのコードはつぎのように書き替えます。importに加えたのは、このあとにつくる子コンポーネント(CommentList)です。これを、テンプレートにタグとして加えています。なお、ファイルsrc/logo.svgは要らなくなりましたので、フォルダから削って構いません。

import React from 'react';
import CommentList from './components/CommentList';
import './App.css';

function App() {
  return (
    <div className="App">
      <h1>コメント</h1>
      <CommentList />
    </div>
  );
}

export default App;

子コンポーネントはsrc/components/CommentList.jsとして、つぎのように定めます。枠組みの記述は同じで、コンポーネントをアロー関数式で定めたのとテンプレートにテキストの要素が加わっただけです。

import React from 'react';

const CommentList = () => {
  return (
    <div className="CommentList">
      <h2 className="CommentAuthor">
      ヘンリー・キッシンジャー
      </h2>
      チャンスは貯金できない。
    </div>
  );
};

export default CommentList;

CSSファイルsrc/App.cssは、つぎのコード001のように書き替えましょう。あとで使うクラスも、すでに加えてあります。ブラウザで読み込み直すと、ページが描き改められるでしょう。子コンポーネント(CommentList)のテキストが表示されるはずです(図003)。

コード001■src/App.css

h1 {
  border-bottom: 1px solid #ddd;
}
.App {
    margin-left: 20px;
    margin-right: 20px;
}
.CommentList {
  margin-bottom: 10px;
}
.CommentForm {
  margin-top: 20px;
}
.CommentForm input {
  font-size: 12px;
}
.Comment {
  margin-bottom: 10px;
  font-size: 16px;
}
.CommentAuthor {
  border-bottom: 1px solid #ddd;
  margin: 0;
}
.CommentText {
  display: flex;
  align-items: center;
}

図003■ページに子コンポーネントのテキストが表示される

さらにコンポーネントに切り出す

コンポーネントsrc/components/CommentList.jsのテンプレートに加えた<div>要素(className属性CommentList)は、複数リストにするつもりです。そのために、この部分は別のコンポーネント(Comment)に切り出しましょう。そして、<h2>要素に加えるテキストは、タグに属性(author)として与えます。この値は、子コンポーネントから取り出すことができるのです。

import Comment from './Comment';

const CommentList = () => {
  return (
    <div className="CommentList">
      {/* <h2 className="CommentAuthor">
      ヘンリー・キッシンジャー
      </h2>
      チャンスは貯金できない。 */}
      <Comment author="ヘンリー・キッシンジャー">チャンスは貯金できない。</Comment>
      <Comment author="マーク・トウェイン">禁煙なんてたやすい。私は何千回もやった。</Comment>
    </div>
  );
};

切り出す子コンポーネントsrc/components/Comment.jsの定めは、つぎのコード002のとおりです。親のテンプレートから与えられた値は、子コンポーネントの関数が引数(props)に受け取ります(「関数コンポーネントとクラスコンポーネント」参照)。属性値は属性名で、子要素はprops.childrenで、つぎのコード002のように波かっこ{}にくくって参照してください(「子要素の出力 (Containment)」参照)。{}の中はJavaScriptコードとして評価されます。

コード002■src/components/Comment.js

import React from 'react';

const Comment = (props) => {
  return (
    <div className="Comment">
      <h2 className="CommentAuthor">
      {props.author}
      </h2>
      {props.children}
    </div>
  );
};

export default Comment;

子コンポーネントをもうひとつ加える

子コンポーネント(CommentForm)をもうひとつ、大もとのアプリケーション(src/App.js)に加えましょう。

import CommentForm from './components/CommentForm';

function App() {
  return (
    <div className="App">

      <CommentForm />
    </div>
  );
}

src/components/CommentForm.jsに書くのは、つぎのコード003のとおりで、まだダミーの状態です。

コード003■src/components/CommentForm.js

import React from 'react';

const CommentForm = () => {
  return (
    <div className="CommentForm">
      CommentFormを表示
    </div>
  );
};

export default CommentForm;

これで、コンポーネントに切り分けたコメントがふた組と、あとから加えたコンポーネントのダミーのテキストがページに表示されます(図004)。

図004■ふた組みのコメントとダミーテキストがページに表示される

以下に、手直ししたsrc/App.js(コード004)とsrc/components/CommentList.js(コード005)をまとめて掲げます。

コード004■src/App.js

import React from 'react';
import CommentList from './components/CommentList';
import CommentForm from './components/CommentForm';
import './App.css';

function App() {
  return (
    <div className="App">
      <h1>コメント</h1>
      <CommentList />
      <CommentForm />
    </div>
  );
}

export default App;

コード005■src/components/CommentList.js

import React from 'react';
import Comment from './Comment';

const CommentList = () => {
  return (
    <div className="CommentList">
      <Comment author="ヘンリー・キッシンジャー">チャンスは貯金できない。</Comment>
      <Comment author="マーク・トウェイン">禁煙なんてたやすい。私は何千回もやった。</Comment>
    </div>
  );
};

export default CommentList;