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;
Top comments (0)