DEV Community

gumi TECH for gumi TECH Blog

Posted on

8 1

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
Enter fullscreen mode Exit fullscreen mode

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

npx create-react-app react-comment-box
Enter fullscreen mode Exit fullscreen mode

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

cd react-comment-box
npm start
Enter fullscreen mode Exit fullscreen mode

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

01_001.png

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

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

01_004.png

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

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;
Enter fullscreen mode Exit fullscreen mode

JSXのテンプレートは、基本的にはHTML(XML)の書き方に添います。ただし、class属性はclassNameに替えなければなりません。classECMAScript 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;
Enter fullscreen mode Exit fullscreen mode

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

import React from 'react';

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

export default CommentList;
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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

01_005.png

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

コンポーネント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>
  );
};
Enter fullscreen mode Exit fullscreen mode

切り出す子コンポーネント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;
Enter fullscreen mode Exit fullscreen mode

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

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

import CommentForm from './components/CommentForm';

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

      <CommentForm />
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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

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

01_006.png

以下に、手直しした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;
Enter fullscreen mode Exit fullscreen mode

コード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;
Enter fullscreen mode Exit fullscreen mode

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs