Reactをはじめる

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

ウェブ向けに構築するには、開発者は 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 の読みやすさに価値があると考えています。さらに、外部ツールにより、JSX から JavaScript へのコンパイルがセットアッププロセスの一部になります。特段の必要がない限り、コンパイルを自分の手で行う必要はありません。

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

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

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 (Windows 用の git ツールセットの一部として提供) または Linux 用の Windows サブシステム (WSL) の両方が適しています。これら、および一般的な端末コマンドの詳細については、コマンドラインクラッシュコースを参照してください。

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

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

• nodejs.org の「npm とは」
• npm ブログの「npx の紹介」
• create-react-app のドキュメント

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
│└──manifest.json
└──src
    ├──App.css
    ├──App.js
    ├──App.test.js
    ├──index.css
    ├──index.js
    ├──logo.svg
    └──serviceWorker.js

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

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

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

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

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

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

import React from 'react';
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 React from 'react';
import logo from './logo.svg';
import './App.css';

最初のステートメントは、React ライブラリー自体をインポートします。React は、作成する JSX を React.createElement() に変換するため、すべての React コンポーネントが React モジュールをインポートする必要があります。この手順をスキップすると、アプリケーションでエラーが発生します。

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

React モジュールのインポート時にパスや拡張子は記述しません—これはローカルファイルではないからです。代わりに、package.json ファイルに依存関係としてリストされます。このレッスンでは、この違いに注意してください。

3 番目のステートメントは、App コンポーネントに関連する CSS をインポートします。変数名も from ディレクティブもないことに注意してください。この特定のインポート構文は、JavaScript モジュール構文に特有のものではありません。Webpack から提供されるものです。create-react-app ツールは、すべての JavaScript ファイルをバンドルしてブラウザーに提供するために使用します。

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';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

App.js と同様に、ファイルは、実行する必要のあるすべての JS モジュールとその他のアセットをインポートすることから始まります。src/index.css ではアプリ全体に適用されるグローバルスタイルを保持します。ここに、インポートされたAppコンポーネントも確認できます。下部の export により、App.js がインポートできるようになりました。

7 行目 ReactDOM.render() は 2 つの引数で React の関数を呼び出します：

• <App />: この場合、レンダリングしたいコンポーネント。
• 内部にコンポーネントをレンダリングする DOM 要素: この場合、root 要素。public/index.html の内側を見ると、これがの <div> であり、<body> すぐ内側の要素であることがわかります。

これらはすべて、App コンポーネントを最初のコンポーネントとして React アプリケーションをレンダリングすることを React に伝えます。

Service Worker は、アプリケーションのパフォーマンスを向上させ、ウェブアプリケーションの機能をオフラインで動作させることができる興味深いコードですが、この記事の対象ではありません。5 行目と 9 〜 12 行目を削除します。

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

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

ReactDOM.render(<App />, document.getElementById('root'));

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

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

<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 行目を変更して「world」という単語の代わりに subject 変数を使用します。

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、world！」の代わりにブラウザーに「Hello、React！」と表示されます。

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

props はコンポーネントに渡される任意のデータです。prop はコンポーネント内に記述され、HTML 属性と同じ構文を使用します — prop="value"。index.jsを開き、<App/> に最初の prop を渡しましょう。

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

ReactDOM.render(<App subject="Clarice" />, document.getElementById('root'));

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

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

App 関数の引数を変更して、props をパラメーターとして受け入れられるようにします。他のパラメーターと同様 props に、console.log() を入力して、ブラウザーのコンソールにそれを表示させます。すると、次のようになります。

function App(props) {
  const subject = "React";
  console.log(props);
  return (
    // return statement
  );
}

ファイルを保存し、ブラウザーの JavaScript コンソールを確認します。次のようなログが表示されるはずです。

Object { subject: "Clarice" }

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

subject は props の一部です。App.js でこれを使ってみましょう。subject 定数を変更して、React という文字列として定義する代わりに props.subject の値を読み取るようにします。console.log() は必要に応じて削除することもできます。

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

保存すると、アプリは「Hello、Clarice！」と挨拶するはずです。index.js に戻り、subject の値を編集して保存すると、テキストが変更されます。

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

React では:

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

• 前のページ (en-US)
• Overview: Client-side JavaScript frameworks
• 次のページ