なぜReactを使うかを理解してみる(#1 JavaScript編)

はじめに

はじめまして、私は今年の1月からReactを触り始めた初学者です。

日々キャッチアップに苦闘する中で、

• Reactを習得する上で、学ぶべきことが多すぎる…
• なんとなく便利なことはわかったが、それぞれの技術がなぜ使われているのか、全然わかっていない…

といった想いがふつふつと湧いてきてしまいました。

そんな私のような「悩めるReactぴよぴよエンジニア」に向け、一緒に頑張っていきましょうといった想いから、本記事を書きました。
本記事では、初学者を対象としているため、なるべく専門用語は使わず、認知負荷がかからないように心がけております。

この記事の対象者

• React入門者
• React始めてみたけど、何をすればいいかわからない人
• なんとなくReactを使っているけど、実はよくわかっていない人

本記事は今後、連載形式にて投稿予定となっていまして、今回はJavaScriptについての記事となります。少しでもお役に立てればと思います。
また、間違い等ございましたら、ご指摘いただけると幸いです。

なぜJavaScriptが使われるのか

画像参照元
Reactについて触れる前に、本記事ではフレームワーク元のJavaScriptがなぜフロントエンドで使われるかについて、話していきたいと思います。
結論、以下の4点が理由となります。

1. JavaScriptはブラウザで直接動作する唯一の言語
2. ユーザーの動作に応じた動的な処理ができる
3. 多くのライブラリ・フレームワークが充実している
4. SPA(シングルページアプリ)・PWA(プログレッシブウェブアプリ)に最適

1. JavaScriptはブラウザで直接動作する唯一の言語

表題の通り、JavaScriptはブラウザに標準で組み込まれており、追加のランタイム（プログラムを実行するための環境や仕組み）なしで直接実行できる唯一の言語であるためです。
サーバーサイドの言語は、開発者や環境の都合に応じて自由に選べますが、フロントエンドで異なる言語が乱立してしまうと、以下のような問題が発生します。

• ブラウザごとに異なる処理系を用意する必要があり、開発負担が増える
• 異なる言語を動作させるために、ブラウザのメモリやリソースを無駄に消費する

実際にブラウザ黎明期には、JavaScriptに似た独自の言語が乱立してしまい、ブラウザごとにJavaScriptの動作が異なり、Web開発が大変になってしまいました。
この混乱を解決するために、ECMA（欧州電子計算機工業会）がJavaScriptの標準仕様を策定し、ECMAScriptとして統一しました。
この標準化のおかげで、現在のJavaScriptはどのブラウザでも共通して動作するようになったというわけです。

2. ユーザーの動作に応じた動的な処理ができる

HTML, CSSのみでは、ユーザーのアクションに応じた柔軟な処理を実装することができません。
JavaScriptを使うことで、ページの振る舞いを動的に制御できます。

以下は、動的操作としての一例です。

• フォーム入力の制御（バリデーションなど）
• ボタン、リンクのクリック処理
• ページのレイアウト変更やコンテンツの動的な更新
• 非同期処理（データの取得・更新など）
• アニメーション、エフェクトの追加
• ユーザーの状態を記録・反映（ログイン情報の保持など）

例えば、以下のように<button>タグのonclick属性を利用すると、ボタンをクリックした際にアラートを表示できます。このonclickはHTMLの属性ですが、実際に処理を行っているのはJavaScriptです。（私はHTMLの処理だと思っていました…）

<button onclick="alert('ボタンがクリックされました！')">ボタン</button>

3. 多くのライブラリ・フレームワークが充実している

画像参照元

JavaScriptには、開発を効率化するために多くのフレームワークが存在します。
特に、フロントエンド開発ではReact, Vue.js, Angularなどのフレームワークが代表的なものとなり、それぞれ基本的な設計思想を保持しつつ、成熟期を迎えているようです。

フレームワーク	特徴
React	・コンポーネントを組み合わせて作るアーキテクチャ ・React Hooksを用いた状態管理 ・単方向データバインディング
Vue.js	・シンプルで学習コストが低い ・HTMLに近い書き方で直感的
Angular	・純粋なTypeScriptファイルで書ける ・インクリメンタルDOM ・依存性注入などBackendを触れていた人にはお馴染みの機能

以下では、それぞれのフレームワークの特徴と最近の流れを簡潔に記載します。

React

ReactはFacebook（現Meta）によって2013年にリリースされました。

特徴としては、

• 部品（コンポーネント）を組み合わせて作るアーキテクチャ
  
  画像参照元

• React Hooksを用いた状態管理（関数コンポーネントで状態管理やライフサイクルを扱える仕組み）

import { useState, useEffect } from "react";

function Counter() {
  // useState: カウンターの状態を管理
  const [count, setCount] = useState(0);

  // useEffect: 初回レンダリング時に実行
  useEffect(() => {
    console.log("コンポーネントがマウントされました！");
  }, []);

  return (
    <div>
      <h1>カウント: {count}</h1>
      <button onClick={() => setCount(count + 1)}>増やす</button>
    </div>
  );
}

export default Counter;

• 単方向データバインディング（データが一方向（親→子）にのみ流れる仕組み）
  
  画像参照元

最近の流れとしては、

• React単体で用いられることは少なく、Next、React Router、Gatsbyなどのフレームワークを併せて使う

Vue.js

Vue.jsはEvan Youによって、2014年にリリースされました。

特徴としては、

• シンプルで学習コストが低い
• HTMLに近い書き方で直感的

  <template>
    <div>
      <h1>{{ message }}</h1>
      <button @click="changeMessage">クリックして変更</button>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        message: "こんにちは、Vue.js！"
      };
    },
    methods: {
      changeMessage() {
        this.message = "メッセージが変わったよ！";
      }
    }
  };
  </script>
  

最近の流れとしては、

• Composition APIの登場で、よりJavaScript、TypeScriptっぽく書けるように

Angular

Angularは前身のAngularJSを含めると、2009年にリリースされました。

特徴としては、

• 純粋なTypeScriptファイル（.ts）で書ける（ReactやVueでは.tsxや.vueなどのカスタマイズされた書式で書く）
• インクリメンタルDOM（変更があった部分のみを直接更新する（仮想DOMのように全体を比較しない））
• 依存性注入（オブジェクトが自分で依存するものを作らず、外部から渡してもらう仕組み）などBackendを触れていた人にはお馴染みの機能がある

最近の流れとしては、

• サーバーサイドレンダリング（WebページのHTMLをサーバーで生成し、完成した状態でブラウザに送る仕組み）の強化と非破壊ハイドレーション（サーバー側でレンダリングされたHTMLをそのまま維持しつつ、クライアント側で動的な機能を追加する仕組み）によるパフォーマンス向上

4. SPA(シングルページアプリ)・PWA(プログレッシブウェブアプリ)に最適

SPAになぜ最適なのか

Google Map
最近のWebアプリではSPA（Single Page Application）方式が増えてきています。
SPAとはユーザーがページを遷移せずに、必要なコンテンツのみを動的に読み込んで表示するアプリケーションのことを指します。

SPAのメリット

• スムーズな画面操作
  • ページ遷移時の読み込み時間やリロードがなく、動的にコンテンツを更新できるため、ユーザーにとってストレスなく操作できます。
  • コンテンツの部分的な更新だけで済むため、ユーザーが操作している状態を保持したまま、迅速に画面を切り替えることができます。
• 高速な表示
  • 必要なデータのみを取得して表示するため、ページ全体のリロードを避け、レスポンスが向上します。
• サーバー負荷の軽減
  • 通常のWebサイトではページごとにサーバーからコンテンツをリロードする必要がありますが、SPAでは最初に読み込むものが多いため、サーバーへのリクエスト回数が減少します。
• UIの制御が柔軟
  • ユーザーがシステムやアプリケーションとやりとりする際、クライアントサイドで管理され、JavaScriptで状態管理やデータ取得を行うため、UIの制御が柔軟。
• UIがモバイルアプリに近い
  • 多くのフレームワークは、モバイルアプリケーションに似たインターフェースを提供できるので、ユーザーはスムーズに操作できる。
• ページ間移動をシームレスに
  • クライアントサイドでページの状態やURLを管理することができるため、ブラウザの履歴機能を利用して、ページ間をシームレスに移動できる。

SPAの具体的な例としては、

• X(旧Twitter)
• Google Maps
• Gmail

PWAになぜ最適なのか

Spotify
PWA（Progressive Web Application）とは、ウェブ技術(HTML, CSS, JavaScript)を使用して作られたアプリケーションであり、アプリストアからインストールせずにブラウザから利用でき（ネイティブアプリケーション）、オンライン操作やプッシュ通知などの機能を備えています。

PWAのメリット

• インストール不要
  • ユーザーはアプリをアプリストアからインストールすることなく、URLをブラウザで開くだけで使用できます。
• オフラインでも使用可能
  • サービスワーカー技術（ウェブアプリケーションのバックグラウンドで動作するJavaScriptのプロセスの一種）により、キャッシュ（保存されたデータ）を利用してオフラインでもアプリを利用できます。
• 高速表示
  • キャッシュ機能や非同期処理を活用することで、従来のウェブアプリよりも高速にコンテンツを表示できます。
• ネイティブアプリに近い挙動
  • プッシュ通知やホーム画面への追加、フルスクリーンでの表示など、ネイティブアプリに近い動作を提供します。
• 開発コストの削減
  • ネイティブアプリはiOS、Androidなど異なるプラットフォームごとに個別に開発が必要ですが、PWAは1つのコードベースで動作します。
• SEOに強い
  • ウェブアプリなので、Googleなどの検索エンジンにインデックスされ、SEO（検索エンジン最適化）の効果があります。

PWAの具体的な例としては、

• Starbucksアプリ
• Spotify
• instagram
  
  

まとめ

今回はなぜフロントエンドにJavaScriptが使われるかについての記事を書かせていただきました。
記事作成が初めてということもあり、苦労はしましたが、学べることが多く良い経験ができました。
次回は「なぜTypeScriptが使われるのか」について書いていく予定です。
最後までご覧いただき、ありがとうございました。

参考文献

Wikipedia: React
Wikipedia: Vue.js
Wikipedia: Angular
React ステート管理 比較考察
React と Vue から単方向・双方向データバインディングの違いを知る