2023.10.29

【入門】Reactとは？人気の理由や使い方まとめ

shin-memo

記事内にプロモーションを含む場合があります

読者の悩み

最近Reactに興味がある。Reactって何なのかな？基本的なことからReactでアプリを作成する方法まで教えてほしい。

こんなお悩みにお答えします。

この記事で解説する「Reactが使われる理由と基本的な使い方」を読めば、Reactの基本から簡単なアプリの作成方法まで知ることができますよ。

実際に僕は現役エンジニアとしてIT企業で勤務しています。実務ではJavaとJavaScriptを使用していまして、プライベートでReactを使っていますので、それらの知見をもとにわかりやすく解説しますね。

記事前半でReactの概要を説明し、後半でReactの雛形アプリの作成方法を解説します。

React公式サイト

Contents

Reactの概要

まずはReactの概要からみていきましょう。

Reactとは
Reactで作られているアプリ
React学習前に学んでおくべき技術
Reactが使われる理由
Next.jsとは
Reactの拡張子JSXとは
Propsとは
Reactコンポーネントとは
hooksとは
ライフサイクルとは

Reactとは

Reactとは、WebサイトやWebアプリのUI部分で使われる、関数型プログラミングの概念に沿ったJavaScriptのライブラリです。2013年にFacebook社がオープンソース化しました。

Reactで作られているアプリ

実際にReactで作られているアプリは下記の通り。

Facebook
Instagram
Netflix
Slack
Yahoo!
PayPal
Airbnb
Uber Eats

React学習前に学んでおくべき技術

Reactを学習する前に前提で学んでおくべき技術があります。それが下記の通り。

HTML
CSS
JavaScript

上記を理解しておくことでReactを効率よく習得できます。Reactでは上記の技術を利用するからですね。

基礎だけでいいので事前に学習しておきましょう。

Reactが人気の理由

Reactは世界でも日本でも最も利用されているJavaScriptのライブラリです。

Reactが人気の理由は、コンポーネント概念に基づいているため再利用性や保守性が高いこと、また案件単価が高い傾向にあることがあげられます。

ちなみに単価は月70万円以上が多く、日本国内外では3900件以上のプロジェクトで利用されています。

Reactのフレームワーク「Next.js」とは

Next.jsとは、Vercel社が開発したReactのフレームワークです。Reactアプリケーションの開発を効率化するためのツールです。ここではNext.jsの説明は省きますので、詳しく知りたい方はReactを学習後に調べてみてください。

Reactの拡張子JSXとは

Reactファイルの拡張子は.jsまたは.jsxです。TypeScriptの場合は.tsまたは.tsxとなります。

JSXとは、JavaScript XMLの略で、JavaScriptの構文を拡張したものであり、JavaScriptのオブジェクトとして扱えます。

JSXはHTMLのような構文で記述され、Reactコンポーネント内で仮想DOM（Virtual DOM）の要素を表現します。

下記はJSXの簡単なサンプルコードです。

const element = <h1>Hello, World!</h1>;

Propsとは

Propsは、コンポーネントに値を引数として渡す仕組みであり、親コンポーネントから子コンポーネントにデータを渡すことができます。メソッドでいう引数みたいな感じですね。

const Profile = ({ name = "John Doe", age = "??", country = "Japan"}) => {

}

Reactのコンポーネントとは

コンポーネントとは日本語で言うと部品です。コンポーネントはReactで画面の構成要素を定義したものであり、再利用性や可読性が向上し、バグを減らすメリットがあります。

コンポーネントにはクラスコンポーネントと関数コンポーネントがあります。いま主流なのは関数コンポーネントなので、これからReactを学習する方は関数コンポーネントを覚えていけばOKです。

関数コンポーネントは、JavaScriptで関数を定義することで作成します。関数の先頭は必ず大文字にする必要があります。

function Hello() {
  return <h1>Hello</h1>;
}

コンポーネントは一度作成すれば他のコンポーネントから呼び出すことができます。呼び出す際は、<コンポーネント名 /> のようにして呼び出します。

<Hello />

hooksとは

Reactにはhooksと呼ばれる機能があります。hooksを使えば効率よく開発できます。

hooksは種類があり、具体的には下記の通りです。

useState: 関数コンポーネント内で状態を持つために使用する。このHookは、状態の初期値とその状態を更新する関数を提供する。
useEffect: 関数コンポーネントがレンダリングされた後に副作用（API呼び出し、サブスクリプションの設定、タイマーのセットなど）を実行するために使用する。
useContext: Reactのコンテキストを利用するために使用する。コンテキストは、コンポーネントツリー全体で共有されるデータを渡すためのもの。
useReducer: useStateと同様に状態を管理するためのもの。複雑な状態のロジックやアクションを処理する際に使用する。
useMemo: 計算コストの高い処理の結果をキャッシュするために使用する。
useCallback: コールバック関数をキャッシュするために使用する。

上記の通り。React初心者の方は何のことかわからないと思いますが、hooksは今後Reactで開発していく上で頻繁に利用する機会があります。今はこんなものがあるんだなくらいの認識でOKです。

ライフサイクルとは

ライフサイクルとは、Reactでコンポーネントが作成され、更新され、削除されるまでの一連の流れのことをいいます。簡単に言えば処理の順番ですね。

たとえば、Reactのライフサイクルの例として、下記をご覧ください。

import React, { useEffect, useState } from 'react';

// コードは上から順番に読み込まれる
const MyComponent = () => {
  // 1.文字列の「こんにちは」をsampleの初期値としてセットする
  const [sample, setSample] = useState("こんにちは");

  // 4.useEffectが呼ばれたら実行されsampleにHello Worldをセットする
  const handleSample = () => {
    setSample("Hello World");
  };

  // 3.returnの後に呼ばれhandleSampleを実行する
  useEffect(() => {
    handleSample();
  }, []);

  // 2.sampleの値「こんにちは」がh1として画面に表示される
  // 5.sampleの値がこんにちはから「Hello World」に変わったため再レンダリングされて最終的に「Hello World」が呼ばれる
  return (
    <div>
      <h1>{sample}</h1>
    </div>
  );
};

export default MyComponent;

基本的にReactで作成されたコードは上から順に読み込まれますが、関数が実行されるのは上から順とは限らず、関数を呼び出したタイミングで実行されます。この一連の処理の流れをライフサイクルと言いますので、用語として覚えておきましょう。

Reactプロジェクトの作成方法

Reactの基本を学習した後は、実際にReactで簡単な雛形アプリをつくってみましょう。

以下手順で作成していきます。

Node.jsをインストールする
npmを最新バージョンに更新する
Reactプロジェクトを作成する
Reactアプリを起動する

Node.jsをインストールする

まずNode.jsをインストールします。Node.jsはReactアプリを作成する際に必要な実行環境です。公式サイトからインストーラをダウンロードして簡単にインストールができます。

Node.js公式サイトはこちら

npmを最新バージョンに更新する

npmとは、Node Package Managerの略です。Node.jsと同時にインストールされるパッケージマネージャーです。

ターミナルかコマンドプロンプトで、以下コマンドを実行して最新に更新しておきましょう。

npm install -g npm

Reactプロジェクトを作成する

次にReactプロジェクトを作成します。コマンドは以下の通り。

npx create-react-app プロジェクト名

プロジェクトを作成したら、そのディレクトリに移動します。

cd プロジェクト名

Reactアプリを立ち上げる

Reactアプリを立ち上げるには、下記コマンドを実行します。

npm start

以上の手順でReactのアプリを作成できます。localhostの画面にReactのロゴマークが表示されていれば完了です。

Reactの補足

ここからは実際にReactを使う上での補足情報を載せておきます。（随時更新）

ReactでJSを使う方法

React内でJavaScriptを利用する際は、通常のJavaScriptのコードを記述します。

const Sample = () => { 
  const title = "Sample"; 
  return ( 
    <div> <h3>Hello {title} </h3> </div>
  ); 
};

export default Sample;

HTMLでReactを呼び出す方法

HTML内でReactを呼び出すためには、適切なIDを持つHTML要素を用意し、それにReactをマウントします。

<div id="app"></div>
<script type="text/babel">
  const appEl = document.querySelector('#app');
  const root = ReactDOM.createRoot(appEl);
  root.render(<h1>こんにちは</h1>);
</script>