近年、ウェブ開発業界は着実な成長を遂げています。この成長が続くにつれ、ユーザーフレンドリーなウェブサイトやウェブアプリケーションの開発者を支援する新たな技術が次から次へと登場しています。
長年にわたり、ウェブプログラミング言語が新たな機能を生み出し、より多くのプログラミング言語がウェブテクノロジーの作成に使用され、さらにはフレームワークやライブラリが既存のテクノロジーに基づいて構築されてきました。
今回は、ユーザーインターフェース構築に使用される人気のコンポーネントベースのJavaScriptライブラリであるReactについてご説明します。初心者向けでもあり、経験豊富なReact開発者のリファレンスとしてもご活用いただけます。
Reactの特徴、長所と短所、Reactの人気の理由、Reactのインストールと使用方法に迫ります。また、実用的なコードの例を用いてReactのコア機能をいくつか見てみましょう。
解説を読み終える頃には、Reactとは何なのか、どのように動作するのかを理解し、今後のプロジェクトの構築にReactを使用する準備が整っているはずです。
Reactとは
React.jsは、一般的に単に「React」と呼ばれ、ユーザーインターフェースの構築に使用されるJavaScriptライブラリです。Reactウェブアプリケーションでは、ユーザーインターフェースに再利用可能なコンポーネントを利用します。ナビゲーションバーにはあるコンポーネントを、フッターには別のコンポーネントを、メインコンテンツには別のコンポーネントを、といった具合です。これについては、後述するコンポーネントを扱うセクションを読むことで深く理解できるはずです。
コンポーネントの「再利用」により、繰り返しコードを書く必要がなくなり開発が楽になります。コンポーネントのロジック（どこがどう機能するかの設計図のようなもの）を作成して、必要とされる部分にコードをインポートするだけでOKです。
Reactはまた、シングルページのアプリケーションでもあります。そのため、ページがレンダリングされるたびにサーバーにリクエストを送信する代わりに、ページのコンテンツがReactコンポーネントから直接読み込まれます。このため、ページ全体の再読み込みが発生せず、レンダリングが高速になります。
多くの場合、Reactアプリの構築に使用される構文はJSX（JavaScript XML）と呼ばれ、簡単に言えばJavaScriptの構文拡張です。これを使ってコードを記述することで、JavaScriptのロジックとユーザーインターフェースのロジックの両方を自由に組み合わせることができます。JSXを使えば、例えばdocument.getElementById、querySelectorといったDOM操作のためのメソッドを使ってDOMとやりとりする必要がなくなります。
JSXの使用は厳密には必須ではありませんが、これを使いこなすことでReactアプリケーションの開発が容易になります。
以下は、ReactでJSXを使用する方法の一例です。
function App() {
const greetings = "Hello World";
return (
<div className="App">
<h1> {greetings} </h1>
</div>
);
}
}上のコードでは、Reactの関数コンポーネントを使用して、ブラウザにテキストをレンダリングしています。コンポーネントの名前はAppです。render()関数の前に変数（const）を作成しています。
そして、この変数を中かっこを使ってマークアップに渡しています。これはHTMLではなく、JSXを使ってコードを書く構文です。
基本構造に触れたところで、次はReactが便利な理由をご紹介します。
なぜReactが使われているのか
多くの開発者がReactを好んで使っているのにはいくつもの理由があります。
- 習得しやすい：Reactは、前提条件さえ把握していれば学びやすく理解しやすいです。Reactにはしっかりとしたドキュメントがあり、コミュニティも活発であることからオンラインで他の開発者が作成した無料のリソースを読むことができます。
- 再利用可能なコンポーネント：Reactの各コンポーネントには独自のロジックがあり、アプリのどこでも繰り返し利用できます。これにより、同じコードを何度も書き直す必要がなくなります。
- 仕事の機会：現在、フロントエンドウェブ開発の求人の多くで、Reactが必須スキルの1つとして位置付けられています。そのため、Reactの仕組みを理解し、それを使って仕事ができるようになれば、仕事を手にできる可能性が高まります。
- パフォーマンスの向上：Reactには仮想DOMが採用されており、ページのレンダリングが高速です。React Routerのようなルーティングライブラリを使えば、ページの再読み込みなしにページをレンダリングできます。
- 幅広い拡張性：Reactは言うなれば、アプリケーションのUIをレンダリングすることに特化したライブラリです。ページレンダリングのライブラリやデザインライブラリなど、どのツールを組み合わせるかは個々の開発者次第です。
誰がReactを使っているのか
Reactは、Facebook、Netflix、Instagram、Yahoo、Uber、The New York Timesなどのような世界的企業で多くのフロントエンドエンジニアに使用されています。
上記の企業すべてがReactを使って製品全体を構築しているわけではありませんが、技術の一部としてReactが活用されています。Reactの高いパフォーマンス、使いやすさ、拡張性に注目が集まっています。
Reactの使用例
Reactは一般的に、ウェブアプリケーションのユーザーインターフェース（フロントエンド）を構築するのに使用されます。ページの高速レンダリングとパフォーマンスの向上が特徴です。Reactはウェブ上で機能するあらゆるサービスの構築に使用できます。
Reactを使って、例えば以下のようなアプリケーションを構築可能です。
- 音楽プレーヤーアプリ
- SNSアプリ
- リアルタイムチャットアプリ
- フルスタックウェブアプリ
- EC（オンラインショップ）アプリ
- 天気予報アプリ
- ToDo管理アプリ
Reactの特徴
Reactには開発者に人気の素晴らしい機能が数多くあります。
Reactの中心的な機能や特徴をいくつかご紹介します。
- JSX：ES6（ECMAScript 2015）の機能を拡張したJavaScript構文拡張です。これにより、JavaScriptのロジックとマークアップをコンポーネント内で組み合わせることができます。
- 仮想DOM：簡単に言えばDOMオブジェクトのコピーで、変更が加えられたときに対応するかたちでページを更新し再レンダリングします。その後、最新の状態を元のDOMと比較して、変更と同期を管理します。これにより、ページのレンダリングが効率的かつ高速になります。
- コンポーネント：Reactアプリは、ロジックとUIを持つ再利用可能なコンポーネントで構成されます。そのため、他のフレームワークのようにコードが重複することが少なく、アプリケーションのスケーリングやパフォーマンスの維持に効果的です。
Reactの長所と短所
ReactはUIを構築するのに有用ですが、実際にこれをプロジェクトに採用するかどうかは開発者や個別の要件次第です。
このセクションでは、Reactの長所と短所についてお話しします。
Reactの長所は以下の通りです。
- Reactは学びやすく理解しやすい
- Reactのコミュニティは活発で必要なときに助けを求められる
- React開発者には多くの仕事の機会がある
- Reactを使ってアプリのパフォーマンスを改善できる
Reactの短所は以下の通りです。
- JavaScript（特にES6）をしっかり理解していない初心者は、Reactを理解するのが難しいと感じる可能性がある
- Reactには、包括的な状態管理やルーティングのような一般的な機能がない
Reactの利用を開始する
このセクションでは、まずReactを使用するための前提条件、そして、Reactアプリのセットアップ、コンポーネントの作成、イベントの処理、Reactでのステート（state）、フック（hook）、プロパティ（props）の操作についてご紹介します。
Reactを使うための前提条件
Reactを使用する前に、JavaScriptを十分に理解する必要があります。例えば、JavaScriptの以下の機能や特徴について把握しておくことをおすすめします。
- アロー関数
- レスト（Rest）演算子
- スプレッド（Spread）演算子
- モジュール
- 分割代入
- 配列メソッド
- テンプレートリテラル
- プロミス（Promise）
letとconst
上記のほとんどがES6に該当します。また、JSX構文の一部を構成しているためHTMLの使用経験も必須です。
Reactのインストール方法
Reactをインストールする前に、お使いのコンピュータにNode.jsがインストールされていることを確認してください。
インストールが完了したらターミナルで以下のコマンドを実行します。
node -v上記のコマンドを実行すると、コンピュータにインストールされているNode.jsのバージョンが表示されるはずです。
次に、Reactのインストールを開始するために別のコマンドを実行します。
まず、新規フォルダを作成するか、Reactアプリをインストールしたい場所に移動し、ターミナルで以下のコマンドを実行します。
npx create-react-app react-kit上のコマンドを実行すると、reactがreact-kitというフォルダにインストールされます。
インストールが完了したら、新しくインストールしたReactフォルダをお好みのコードエディタで開きます。ここではVisual Studio Codeを使用します。Visual Studio Codeにはターミナルが統合されています。Git BashやCMDのような別のターミナルを使う場合は、Reactアプリのディレクトリに移動して、以下のコマンドを実行してください。
npm run startこのコマンドで開発サーバーが起動します。しばらくすると、以下のページがブラウザのlocalhost:3000でレンダリングされるはずです。
ここまでくればReactアプリ開発の準備は完了です。
フォルダ構造を見てみると、publicというフォルダがあります。このフォルダには index.htmlファイルがあり、その中にある（これから記述していく）コードがブラウザに配信されることになります。
srcフォルダには、すべてのロジック、スタイル、マークアップが格納されます。このフォルダのApp.jsファイルがルートコンポーネントとして機能します。この中にあるコードを表示した結果が上のスクリーンショットです。
App.jsファイルを開き、ファイルに変更を加え保存すると、ブラウザに自動的にその内容が反映されます。
それでは、コードの記述へと進みましょう。
Reactのコンポーネント
Reactのコンポーネントについてです。コンポーネントには、主にクラスコンポーネントと関数コンポーネントの2種類があります。Reactのドキュメントは現在フック（hook）を使ったものに刷新されていますが、これは関数コンポーネントに見られる機能です。関数コンポーネントはReactアプリで最もよく使うコンポーネントなので、この解説でも関数コンポーネントを使うことにします。
ほとんどの場合、コンポーネントはJavaScriptで作成された動的な値を組み合わせたHTMLコードを返します。コンポーネントは、JavaScriptの関数のように作成します。
Reactのクラスコンポーネントの作成
先に進む前に、参考までにReactのクラスコンポーネントの例を見てみましょう。
すべてのクラスコンポーネントには、React.Componentステートメントと render() subclass.を記述する必要があります。
class Student extends React.Component {
constructor() {
super();
this.state = {language: "JavaScript"};
}
render() {
return <p>{this.state.language}を学習中です...</p>;
}
}上のコンポーネントでは「JavaScript」という文字列の値を持つlanguageという状態変数を作成しています。そして、この変数をマークアップで使用しました。この例は、DOMメソッドを参照せずにJavaScriptとHTMLを混在させる方法を示しています。
これがブラウザにレンダリングされると、ページ上に「JavaScriptを学習中です…」と表示されます。
Reactの関数コンポーネントの作成
続いては、関数コンポーネントを使用して前のセクションの例を再現します。
次の関数をファイルに追加してください。
function Student() {
const language = "JavaScript";
return (
<div>
<p>I am learning { language } </p>
</div>
);
}コンポーネントの名前は同じでStudentです。コンポーネントの名前は常に大文字から始めてください。この変数も、バニラJavaScript（素のJavaScript）のDOMメソッドを使ってDOMを操作することなく、前のセクションで行ったようにマークアップに渡しています。
このコンポーネントでStudent変数がレンダリングされていますが、解説を進めていくと、useStateというHookを使ってステート変数を作成することになります。
Reactでイベントを扱う
Reactで使用するイベントは、HTMLで使用するイベントとまったく同じです。唯一の違いとして、Reactのイベントはキャメルケースで記述しますのでご注意ください。つまり、「onclick」はReactでは「onClick」となり、「onchange」は「onChange」となります。
HTMLタグの属性としてイベントを渡す場合は、引用符onClick=”changeName”の代わりに中括弧 onClick={changeName}を使います。
以下に例を示します。App.jsファイル内のものです。
import { useState } from "react";
function App() {
const [name, setName] = useState("ジョン");
const changeName = () => {
setName("ジェームス");
};
return (
<div className=”App”>
<p>彼の名前は{name}です。</p>
<button onClick={changeName}>ここをクリック</button>
</div>
);
}
export default App;上記のコードでは、ブラウザにメッセージを表示する関数を作成しています。また、クリックされたときにこの関数を呼び出すボタンも用意しました。ここで使用しているイベントハンドラはonClickです。
関数名が引用符ではなく、中括弧でくくられていることにお気づきでしょうか。JSXでは、このようにして、変数名や関数名のような動的な値をマークアップに渡します。
また、HTMLのように「class」を使う代わりに、「className」を使っている点も要注意です。これは「class」がJavaScriptの予約語であるためです。
最後の行でコンポーネントをエクスポートしています。これで、他のコンポーネントでのインポートが可能になります。
Reactでステートを扱う
Reactでアプリケーションの状態を管理するときは、useStateというフックを使います。フックを使うことで、クラスを書かずにReactの機能を活用できます。
フックを使えば、コンポーネントの状態を管理したり、状態変数が初めてレンダリングされたときや変更されたときに特定のエフェクトを実行したりすることも可能です。
関数コンポーネントにuseStateフックがなければ、状態変数に加えられた変更はDOMに反映されず状態も変更されません。
例を見てみましょう。
import { useState } from "react";
function App() {
const [name, setName] = useState("ジョン");
const changeName = () => {
setName("ジェームス");
};
return (
<div className=”App”>
<p>彼の名前は{name}です。</p>
<button onClick={changeName}>ここをクリック</button>
</div>
);
}
export default App;では、今やったことを見てみましょう。
まず、useStateフックをReactからインポートしました。そして、nameという状態変数と、name変数の値を変更するための関数setNameを作成しました。name変数の初期値は、useStateフックに「ジョン」として格納されています。
次に、changeNameという関数を作成し、setName関数を使用してname変数の値を変更できるようにします。
マークアップでは、ボタンがクリックされると「ジョン」が 「ジェームス」に変わります。
次のセクションでは、Reactで別のフックを使う方法をご紹介します。
Reactでフックを使う
前のセクションでは、useStatetフックを使ってアプリの状態を管理する方法を見ました。このセクションでは、useEffectフックの使い方をご紹介します。
useEffectは、状態に変化が発生するたびにエフェクトを実行します。デフォルトでは、このフックは最初のレンダリング時と、状態が更新されるたびに実行されますが、それぞれの状態変数にエフェクトを設定し紐づけることもできます。
実際の例を見てみましょう。
import { useState, useEffect } from "react";
function App() {
const [day, setDay] = useState(1);
useEffect(() => {
console.log(`今日は${day}日です。`);
});
return (
<div>
<button onClick={() => setDay(day + 1)}>クリックして1日追加</button>
</div>
);
}
export default App;まず最初に、useEffectフックをインポートしました。
ボタンをクリックするたびに、name変数が1つずつ増加し、このnameの値の変化によって、useEffectフックがコンソールにメッセージを記録します。
次のセクションでは、propsとコンポーネント間のデータフローについて説明します。
Reactでpropsを使う
propsを使うと、あるコンポーネントから別のコンポーネントにデータを渡すことができます。これにより、アプリ内のデータの流れがダイナミックになり保守性が向上します。propsはプロパティ（properties）の略です。
propsの使い方の例を見てみましょう。
App.jsファイルはこのようになっています。
function App() {
return (
<div>
</div>
);
}
export default App;Bio.jsという別のコンポーネントを作成します。
function Bio() {
return (
<div>
<p>私はジョンです。</p>
<p>JavaScript開発者をしています。</p>
</div>
);
}
export default Bio;次に、このBioコンポーネントをAppコンポーネントにインポートします。
import Bio from "./Bio";
function App() {
return (
<div className="App">
<Bio/>
</div>
);
}
export default App;最初の行でBioコンポーネントをインポートしています。そして、このコンポーネントをAppコンポーネントのdivタグの間に配置します。ブラウザで見ると、Bioコンポーネントで作成したコードがレンダリングされているのがわかります。
これで、Reactでコードがどのように再利用できるかがわかります。しかし、このコードは静的なもので、どのコンポーネントで使っても中身は同じになります。これでは、同じコンポーネントを調整しながら使い分けたい場合に非効率的です。
propsを使ってこの問題を解決できます。
Bio.jsコンポーネントで次のようにコードを記述します。
function Bio({name, language}) {
return (
<div>
<p>私の名前は{ name }です。</p>
<p>{ language }開発者をしています。</p>
</div>
);
}
export default Bio;まず、nameとlanguageを分割し、パラメータとして渡しました。これらのパラメータは、マークアップで動的に使用されます。
コードの最後の行でコンポーネントをエクスポートしています。 export default Bio; により、そのロジックを必要とする他のコンポーネントにインポートできるようになります。
現時点では、表示される値はありません。Appコンポーネントでそれの指定を行います。
import Bio from "./Bio";
function App() {
return (
<div className="App">
<Bio name="ジェームス" language="Python"/>
</div>
);
}
export default App;Bioタグに先ほど作成したpropsに対応する属性を追加しました。これらの属性に渡した値はすべてブラウザにレンダリングされます。このような仕組みは、複数のコンポーネントで異なるデータを指定したい場合に重要です。
さらに学ぶには
今回は、Reactを使ってウェブアプリケーションを作るための基本的な知識をご紹介しました。Reactについて知っておくべきことはこれ以外にもたくさんあります。複数のページを持つアプリケーションでのルーティングや、Reduxのようなツールを使った単一の状態管理など、Reactで効率的なアプリケーションを構築するために必要な機能は他にもまだあります。
Reactについて詳しく学習するには、Reactのドキュメントをご覧ください。フックを使って書き直しの行われているベータ版のドキュメントもあります。
まとめ
フロントエンドライブラリとしてのReactは、開発者コミュニティにおける他のライブラリ／フレームワークと比較して大きな成長を続けており、その勢いはとどまるところを知りません。現代のウェブ開発者に欠かせない要素でしょう。
多くの開発者がウェブ3技術を採用する現在、Reactは分散型アプリケーション（DApps）のフロントエンドを構築するための定番ツールでもあります。
Reactを使えば、シンプルなToDoリストのウェブアプリからマーケットプレイス、ダッシュボードなど、さまざまなアプリケーションを構築できます。
Reactは、Bootstrap、Tailwind CSS、Axios、Redux、Firebaseなど、多くのテクノロジーと一緒に使うことができます。また、ReactをNode.jsやその他のバックエンド言語と併用することで、光速で動作するフルスタックアプリケーションやウェブアプリを構築することも可能です。
