React を始める

公式のキャッチフレーズにあるように、React はユーザーインターフェイスを構築するためのライブラリーです。React はフレームワークではなく、ウェブに限定されるものでもありません。他のライブラリーと共に使用して、特定の環境にレンダリングします。たとえば、React Native はモバイルアプリケーションの構築に使用できます。

ウェブ向けに構築するには、開発者は ReactDOM と連携して React を使用します。React と ReactDOM は、他の本当のウェブ開発フレームワークと同じ土台で頻繫に議論され、同じような問題を解決するために用いられます。React を「フレームワーク」と呼ぶとき、それは口語的な理解として扱います。

React が目指すところは、開発者が UI を構築しているときに発生するバグを最小限に抑えることです。これは、コンポーネント（ユーザーインターフェイスの一部を記述する自己完結型の論理的なコード）を使用して行われます。これらのコンポーネントを組み合わせて完全な UI を作成でき、React はレンダリング作業の大部分を抽象化して、UI デザインに集中できるようにします。

このモジュールで取り上げられている他のフレームワークとは異なり、React はコード規則やファイル編成に関する厳密なルールを適用しません。これにより、チームは自分に最適な規則を設定し、React を好きなように採用することができます。React は、単一のボタン、一部のインターフェイス、またはアプリのユーザーインターフェイス全体を処理できます。

React はインターフェイスの一部に適用することが できます が、jQuery のようなライブラリーや Vue のようなフレームワークほどアプリケーションに「ドロップ」するのは簡単ではありません。React でアプリ全体を構築するのに適しています。

さらに、JSX のインターフェイスの作成など、React アプリの開発者体験にはコンパイルプロセスが必要とします。Babel のようなコンパイラーをウェブサイトに追加すると、コードの実行が遅くなるため、開発者はビルドステップでそのようなツールをセットアップすることがよくあります。間違いなく React には厳しいツール要件がありますが、学習することはできます。

この記事では、Facebook 独自の create-react-app を使って、アプリケーションのインターフェイスを構築していきます。

React は、そのパターンの多くに最新の JavaScript の機能を利用しています。JavaScript からの最大の違いは、JSX 構文を使うことです。JSX は JavaScript の構文を拡張して、HTML のようにコードを書くことができます。例えば次のようになります。

const heading = <h1>Mozilla Developer Network</h1>;

この定数 heading は、JSX 式と呼ばれます。React はこのように <h1> タグをレンダリングすることができます。

セマンティックの観点で、 <header> タグで、見出しを囲みたいとします。JSX では、HTML のように、要素を相互にネストすることができます。

const header = (
  <header>
    <h1>Mozilla Developer Network</h1>
  </header>
);

const header = <header>
  <h1>Mozilla Developer Network</h1>
</header>;

もちろん、ブラウザーはそのままでは JSX を読むことができません。（Babel や Parcel などのツールを使用して）コンパイルすると、ヘッダー式は次のようになります。

const header = React.createElement(
  "header",
  null,
  React.createElement("h1", null, "Mozilla Developer Network"),
);

コンパイルステップとコンパイル自体をスキップし、React.createElement() を使って、独自の UI を自分で書くことができます。ただし、こうすると JSX の宣言的なメリットが失われ、コードが読みにくくなってしまいます。コンパイルは開発プロセスとは別のステップですが、React コミュニティの多くの開発者は、JSX の読みやすさに価値があると考えています。さらに、現代のフロントエンド開発は常にビルドプロセスを伴います。古いブラウザーとの互換性を保つために現代の構文をダウンレベルしなければなりませんし、読み込みパフォーマンスを最適化するためにコードをミニファイしたくなることがあります。 Babel のような人気のあるツールはすでに JSX 対応をしているので、コンパイラーを自分で設定する必要はありません。

JSX は HTML と JavaScript を交ぜたものなので、一部の開発者にとっては直感的に使うことができます。しかしそうでない人にとってはは、交ぜられてされていることで混乱させられると言います。ただし、慣れれば、ユーザーインターフェイスをより迅速かつ直感的に構築できるようになり、他の人がコードを一目で理解しやすくなります。

JSX の詳細については、React チームの Writing Markup with JSX の記事をご覧ください。

React を使用する方法はたくさんありますが、前述のように、コマンドラインインターフェイス (CLI) ツールの create-react-app を使用します。これにより、いくつかのパッケージをインストールして作成することにより、React アプリケーションの開発プロセスをスムーズにします。

<script> を HTML ファイルにコピーすることで create-react-app なしでウェブサイトに React を追加することは可能ですが、 create-react-app CLI は、React アプリケーションの一般的な始め方です。これを使うことで、アプリの作成に集中でき、セットアップに煩わされなくなります。

create-react-app を使用するには、 Node.js をインストールする必要があります。長期サポート (LTS) バージョンを使用することをお勧めします。ノードには、npm (ノードパッケージマネージャー) および npx (ノードパッケージランナー) が含まれます。

代わりに Yarn パッケージマネージャーを使用することもできますが、この一連のチュートリアルでは npm を使用するものとします。npm と yarn の詳細については、パッケージ管理の基本を参照してください。

Windows を使用している場合、このチュートリアルで言及されている端末コマンドを使用するには、Unix / macOS 端末と同等のソフトウェアをインストールする必要があります。 Gitbash （git for Windows のツールセットの一部として提供）または Linux 用の Windows サブシステム (WSL) の両方が適しています。これら、および一般的な端末コマンドの詳細については、コマンドライン短期集中講座を参照してください。

また、React と ReactDOM は、かなり近代的な一連のブラウザー（IE9 以降）でのみ機能するアプリを生成することにも注意してください。これらのチュートリアルを実行するときは、Firefox、Microsoft Edge、Safari、Chrome などの最新のブラウザーを使用することをお勧めします。

詳細については、以下も参照してください。

• "About npm" on the npm blog
• "Introducing npx" on the npm blog
• The create-react-app documentation

create-react-app は引数を 1 つ取ります。アプリに付ける名前です。create-react-app はこの名前を使用して新しいディレクトリーを作成し、その中に必要なファイルを作成します。cd でアプリのハードドライブ上の場所に移動したことを確認してから、ターミナルで次のコマンドを実行します。

npx create-react-app moz-todo-react

これは moz-todo-react ディレクトリーを作成し、その中でいくつかのことを行います:

• アプリの機能に不可欠な npm パッケージをインストールします。
• アプリケーションを起動および提供するためのスクリプトを記述します。
• 基本的なアプリアーキテクチャを定義するファイルとディレクトリーの構造を作成します。
• コンピュータに git がインストールされている場合、ディレクトリーを git リポジトリーとして初期化します。

npx create-react-app moz-todo-react --use-npm

create-react-app が機能している間、端末にいくつかのメッセージが表示されますが、正常な動作です！これには数分かかる場合がありますので、お茶でも作って待ってみましょう。

プロセスが完了したら、moz-todo-reactディレクトリーへ cd して、コマンド npm start を実行します。create-react-app によってインストールされたスクリプトは、localhost:3000 のローカルサーバーで提供され始め、新しいブラウザータブでアプリを開きます。ブラウザーには次のように表示されます。

create-react-app は、React アプリケーションの開発に必要なすべてのものを提供します。初期のファイル構造は次のようになります。

moz-todo-react
├── README.md
├── node_modules
├── package.json
├── package-lock.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── reportWebVitals.js
    └── setupTests.js

src ディレクトリーはアプリケーションの実態ともいえるソースことがある場所で、私たちが触るのは主にこの部分です。

public ディレクトリーには、アプリを開発している間、ブラウザーによって読み込まれるファイルが含まれています。これらの中で最も重要なのは index.html です。React はこのファイルにコードを挿入して、ブラウザーで実行できるようにします。create-react-app 関数に役立つマークアップが他にもいくつかあるので、何をしているのかを理解していなければ、自分で編集しないように注意してください。このファイルの要素内の <title> を変更して、アプリケーション自体のタイトルを反映させる必要があります。アクセシビリティ向上のためには正しいページタイトルが重要です。

public ディレクトリーは、アプリをビルドしてデプロイするときにも公開されます。このチュートリアルではデプロイ自体については説明しませんが、アプリのデプロイチュートリアルで説明されているものと同様のソリューションを使用できるはずです。

このpackage.json ファイルには、Node.js / npm がプロジェクトを整理するために使用するプロジェクトに関する情報が含まれています。このファイルは React アプリケーションに固有のものではありません。create-react-app は単にそれを生成します。このチュートリアルを完了するためにこのファイルを理解する必要はまったくありませんが、詳しく知りたい場合は package.json on the npm blog を参照してください。パッケージ管理の基本のチュートリアルでも言及しています。

React における、コンポーネントとはアプリの一部をレンダリングする再利用可能なモジュールを指します。これらのパーツは大きくても小さくてもかまいませんが、通常は明確に定義され、単一責務のもとに作られます。

ブラウザーに表示されているように、src/App.js を開いて編集しましょう。このファイルには、最初のコンポーネント、App、その他の数行のコードが含まれています。

import logo from "./logo.svg";
import "./App.css";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer">
          Learn React
        </a>
      </header>
    </div>
  );
}
export default App;

この App.js ファイルは 3 つの主要な部分で構成されています。上部にいくつかの宣言されている import、中央にある App、最下部にある export。ほとんどの React コンポーネントはこのように書かれます。

import はファイルの先頭に宣言され、App.js が他の場所で定義されているコードを使用するのを許可します。これらをさらに詳しく見てみましょう。

import logo from "./logo.svg";
import "./App.css";

最初の文は、 './logo.svg' をインポートします。最初の ./ パスのと最後の拡張子 .svg に注意してください。これらはファイルがローカルであり、 JavaScript ファイルではないことを示しています。実際、logo.svg ファイルはソースディレクトリーにあります。

2 つ目の文は、 App コンポーネント関連の CSS をインポートしています。変数名も from ディレクティブもないことに注意してください。これは side-effect import と呼ばれ、JavaScript ファイルに値をインポートしませんが、参照する CSS ファイルを最終的な CSS バンドルに追加するようにバンドルする Webpack に指示します。

2020 年の React 17 リリース以前の React のリリースでは、 React ライブラリー自体のインポートも import React from 'react' のように行う必要がありました。この手順をスキップするとエラーになっていました。 React は書いた JSX を React.createElement() に変換するので、 React のコンポーネントはすべて React モジュールをインポートする必要がありました。React 17 では、この文を不要にする新しい JSX 変換に書き直されたバージョンが導入され、React 16.14.0、React 15.7.0、React 0.14.10 にバックポート対応しています（詳しくは React 公式ドキュメントをご覧ください）。

import の次に、App という名前の関数があります。ほとんどの JavaScript コミュニティは helloWorld のようなキャメルケース名を好みますが、 React コンポーネントは HelloWorld のようなパスカルケース変数名を使用して、特定の JSX 要素が React コンポーネントであり、通常の HTML タグではないことを明確にしています。App 関数の名前を app に変更すると、ブラウザーにエラーが表示されます。

アプリをもっと詳しく見てみましょう。

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer">
          Learn React
        </a>
      </header>
    </div>
  );
}

この App 関数は JSX 式を返します。この式には、ブラウザーが最終的に DOM にレンダリングするものを定義します。

HTML と同じように、attribute="value" のように属性をもつ要素があります。3 行目では、<div> 開始タグに className 属性があります。これは HTML のclass 属性と同じですが、 JSX は JavaScript であるため使用できません。class が予約されているためです。つまり、JavaScript ではすでにそれを使用しており、もし同様に使うと問題が発生するということです。同じような理由で、他のいくつかの HTML 属性は、HTML とは異なる方法で JSX で記述されています。

6 行目の <p> タグを「Hello, World！」に変更して、ファイルを保存します。この変更はブラウザー http://localhost:3000 で実行されている開発サーバーですぐにレンダリングされます。次に、<a> タグを削除して保存します。すると、「Learn React」リンクはなくなります。

App コンポーネントは次のようになります。

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>Hello, World!</p>
      </header>
    </div>
  );
}

App.js ファイルの一番下にある export default App は、App コンポーネントを他のモジュールで使用できるようにしています。

src/index.js を開きましょう。App コンポーネントを使用しているのがわかります。このファイルはアプリのエントリーポイントであり、最初は次のようになっています。

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

App.js と同様に、ファイルは、実行する必要のあるすべての JS モジュールとその他の資産をインポートすることから始まります。

最初の 2 つの文は React および ReactDOM ライブラリーをインポートしています。これらのライブラリーはローカルファイルではないので、インポートする際にパスや拡張子は書きません。実際、これらのライブラリーは package.json ファイルに依存ファイルとして掲載されています。この区別に注意して、このレッスンを読み終えてください。

index.css はアプリ全体に適用されるグローバルスタイルを保持します。ここに、インポートされたAppコンポーネントも確認できます。下部の export により、App.js がインポートできるようになりました。

7 行目では、 React 要素をレンダリングする DOM 要素を指定して ReactDOM.createRoot() 関数を呼び出しています。public/index.html の中を見ていくと、 <body> の中にある <div> 要素であることがわかります。 React はこのノードのルートを作成し、その中の DOM の管理を引き継ぎます（詳しくは react 公式 ドキュメントを参照してください）。この関数は root を返します。

8 行目では、 DOM にレンダリングしたい React 要素、この場合は <App /> を指定して root.render() メソッドを呼び出しています。開発中は厳格モードを使用して、コンポーネントによくあるバグを探します。

これらはすべて、 <App /> を最初の要素として React アプリケーションをレンダリングすることを React に伝えます。

reportWebVitals は、ウェブページのユーザー使い勝手を把握することを目的とした有益な指標の集合ですが、この記事の対象ではありません。 reportWebVitals(); の行と同様に、そのインポート行を削除することができます。

最終的な index.js ファイルは次のようになります。

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

次に、JavaScript スキルのいくつかを使用して、コンポーネントの編集と React でのデータの操作をもう少し快適にします。JSX 内での変数の使用方法について説明し、データをコンポーネントに渡す方法である prop を紹介します (その後、変数を使用してアクセスできます)。

App.js に戻り、8 行目に注目しましょう。

<img src={logo} className="App-logo" alt="logo" />

ここでは、<img /> タグの src 属性値は中括弧で囲まれています。これは、JSX が変数を認識する方法です。React が {logo} を表示し、アプリの 2 行目のインポートを参照していることを確認してから、logo ファイルを取得してレンダリングします。

独自の変数を作ってみましょう。App の return 文の前に const subject = 'React'; を追加します。すると、App コンポーネントは次のようになります。

function App() {
  const subject = "React";
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>Hello, World!</p>
      </header>
    </div>
  );
}

次のように、8 行目を変更して subject 変数を "world" という単語の代わりに使用します。

function App() {
  const subject = "React";
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>Hello, {subject}!</p>
      </header>
    </div>
  );
}

保存すると、ブラウザーに "Hello, React!" が "Hello, World!" の代わりに表示されます。

変数は便利ですが、設定したばかりの変数は React の機能をあまり活用していません。そこで、 prop の登場です。

prop とは、Reactコンポーネントに渡されるデータのことです。 React の prop は HTML の属性に相当します。 HTML 要素が属性を持つのに対し、 React コンポーネントは prop を持ちます。 prop はコンポーネント呼び出しの中に記述され、 HTML の属性と同じ構文 prop="value" を使用します。 React では、データフローは一方向です。 prop は親コンポーネントから子コンポーネントにのみ渡すことができます。また prop は読み取り専用です。

index.jsを開き、<App/> に最初の prop を渡しましょう。

<App/> コンポーネントに subject という prop を追加して、値は Clarice とします。完了すると、コードは次のようになります。

root.render(<App subject="Clarice" />);

App.js に戻り、App 関数自体をもう一度見てみましょう。この関数は次のようになっています（簡潔にするために return で短くしています）。

function App() {
  const subject = "React";
  return (
    // return statement
  );
}

App 関数の引数を変更して、props を引数として受け入れられるようにし、知数 subject を削除しましょう。 他の引数と同様 props に、console.log() を入力して、ブラウザーのコンソールにそれを表示させます。 return 文の前にこのように書いてください。

function App(props) {
  console.log(props);
  return (
    // return statement
  );
}

この変更に伴い、 {subject} は未定義になるので、とりあえず Hello, {subject}! の行はコメントアウトしてください。 ファイルを保存し、ブラウザーの JavaScript コンソールを確認します。次のようなログが表示されるはずです。

Object { subject: "Clarice" }

オブジェクトプロパティ subject は、<App /> コンポーネント呼び出しに追加した subject プロパティに対応し、文字列 Clarice はその値に対応します。React のコンポーネントプロップは、常にこのようにオブジェクトに集約されます。

subject は props の一つになりました。App.js でこれを使ってみましょう。subject 定数を変更して、React という文字列として定義する代わりに props.subject の値を読み取るようにします。これで、 Hello, {subject}! という行のコメントを解除することもできますし、必要であれば、 console.log() を削除することもできます。

function App(props) {
  const subject = props.subject;
  return (
    // return statement
  );
}

保存すると、アプリは「Hello、Clarice！」と挨拶するはずです。index.js に戻り、subject の値を編集して保存すると、テキストが変更されます。 なお、この変更を通して Hello の行を残したければ、JSX 変数を {props.subject} に更新することもできます。

これで、React をローカルでインストールする方法、スターターアプリを作成する方法、基本的にどのように機能するかなど、React の入門が終わりました。次の記事では、最初に適したアプリケーションである todo リストの作成を開始します。ただし、その前に、私たちが学んだことのいくつかをおさらいしましょう。

React では:

• コンポーネントは必要なモジュールをインポートでき、ファイルの下部でエクスポートする必要があります。
• コンポーネント関数は PascalCase で名前が付けられます。
• JSX 変数は、{so} のように中括弧で囲むことで読み取ることができます。
• 一部の JSX 属性は HTML 属性とは異なるため、JavaScript の予約語と競合しません。例えば class、HTML では className JSX に変換されます。複数単語の属性はキャメルケースであることに注意してください。
• prop は、コンポーネント呼び出し内の属性と同じように記述され、コンポーネントに渡されます。

• 前のページ
• Overview: クライアントサイドの JavaScript フレームワークを理解する
• 次のページ