コンテンツにスキップ
jsys Web 研修 2026

3. 概論

さて、環境構築も終えて早速 Web アプリケーション開発に入っていきたいところですが、まずは React 周りのプログラミング言語事情について知っておく必要があります。実際の開発では必ずしも役に立つとは言い切れませんが、良いコードを書くためのプログラミングの手筈や言語そのものについて知っておくことは重要です。本章では、React を用いたプログラミングの基礎である宣言型プログラミングや、コンポーネント指向プログラミングについて述べていきます。

3.1 宣言型プログラミング

プログラミング・パラダイムの一つに宣言的プログラミングと呼ばれるものがあります。プログラミング・パラダイムとは、プログラミングを行う際に模範となる考え方を指し、ある側面ではプログラミングそのものに対する見方を与えるものと解釈することもできます。OOP、いわゆるオブジェクト指向プログラミングがその一例で、OOP ではデータとデータに対する操作をオブジェクトとみなしてプログラミングをします。以下にプログラミング・パラダイムの例を挙げます。

  • オブジェクト指向プログラミング
  • 手続き型プログラミング
  • 関数型プログラミング

このようなプログラミング、パラダイムに並べて登場するのが宣言型プログラミングです。宣言型プログラミングでは、プログラムに「どのように（How）」を記述するのではなく、「何（What）」を記述していくのが特徴です。説明だけでは理解するのが難しいので、ここで例を見てみましょう。次のコードは、それぞれ 0 から 9 までのボタンを生成する際の JavaScript と React でのプログラムです。

3.1.1 演習

他に知っているプログラミング・パラダイムを 2 つ挙げて下さい。インターネットなどで調べても良いです。

JavaScript

<div id="parent"></div>


<script>
    const parent = document.getElementById('parent');


    for (let i = 0; i < 10; i++) {
        const button = document.createElement('button');
        button.textContent = `${i}`;
        parent.appendChild(button);
    }
</script>

React

<div>
{
    new Array(10).fill(null).map((_, index) =>
        <button>{index}</button>
    )
}
</div>

2 つのコードを見比べてみましょう。JavaScript のプログラムでは「createElement 関数で要素を作って、その要素の値に数字を設定して、id が parent の要素に追加する処理を 10 回行う」という命令を書いています。一方で React のプログラムでは、「div の子要素として現れる、0 から 9 の値を持つボタン要素」という処理が記述されています。

これが宣言型プログラミングの本質です。JavaScript の方では「要素を作成しろ」という命令（= How）が数行にわたって記述されていますが、React の方では欲しい要素（= What）を記述しただけです。特に appendChild などといった「要素を追加しろ」という命令が明示的に書かれていない部分が特徴的です。このように React では、要素の生成・追加の部分が仮想 DOM の仕組みによって隠蔽され、欲しい要素を書くだけでコンポーネントの作成が完了するので、完成したドキュメントの構造やプロダクトの核となるロジックの記述に集中することができます。

他にも、本書とは直接的には関係しませんが SQL においても宣言型プログラミングを見ることができます。次の例は、SQL でテーブル Users から id が 3 のユーザを取り出す場合のプログラムです。

SELECT * FROM Users WHERE id = 3

やはり SQL においても、どのようにデータベースからユーザを取得するかを記述することなく、どのようなユーザが欲しいかのみを記述しています。実際の取得方法はデータベースの管理システムによって最適なアルゴリズムが選択されるため、特段の理由がない限り我々がそこに干渉する必要も理由もないのです。

一方で、プログラミングに慣れていないうちはプログラムに対してこのような見方をすることは難しいかも知れません。様々なプログラミング言語を知り、たくさんプログラムを書くことによってこのような本質的な部分が見えるようになってきます。初めのうちにやるべきことは、ただひたすらにプログラムを書くだけです。

3.2 コンポーネント指向プログラミング

コンポーネント指向プログラミングとは、ソフトウェアを独立したコンポーネントに分割し、それらを組み合わせることによって一つのシステムを構築するというプログラミング・パラダイムです。React においては、ソフトウェアの部分が UI 部品にあたります。

React ではよく使用される UI 部品をコンポーネントとしてまとめ、それを再利用することによって UI 全体を構築するといったアプローチをとります。コンポーネントを再利用することによって、全体的なプログラム量の削減や、同じプログラムを何度も書かなくて良くなるといった利恩恵が得られます。なお、React におけるコンポーネントは、一つ以上の HTML 要素または別のコンポーネントの集合から構成されます。

またコンポーネントが再利用されるという前提からも分かるように、コンポーネントどうしは常に疎結合であることが望まれます。疎結合であるとはコンポーネントどうしの依存度合いが低いということを指しますが、疎結合であることによってコンポーネントの再利用性が増し、またリファクタリングや再描画の削減につながります。

例えば YouTube のページを眺めてみると、赤枠で示したように同じようなカード型コンポーネントが並んでいることが分かります。

YouTube の画面

実際の実装がどうかはさておき、このようにしてコンポーネントを適切に分割しておくことで、宣言型プログラミングの恩恵を受けつつ、パフォーマンス的にもプログラムの読み方的にも優れたプログラムを書くことができます。

3.3 仮想 DOM

React は DOM を仮に構築するための仮想 DOM を備えています（これに対して従来の DOM をリアル DOM と表現します） 。従来、JavaScript で直接操作してきた DOM はリアル DOM にあたり、要素を追加するなど DOM に変更を加えるたびに DOM 全体を再構築していたため、比較的再描画が遅いという欠点がありました。一方 React では、DOM を変更しようとした際、まずは仮想 DOM の構築を行います。そして変更前の仮想 DOM との差分を抽出し、差分のみを再構築しています。こうすることによって DOM の再構築される部分が限定的になり、結果的に再描画が高速化されます。

従来は一つのページに対して一つの HTML ファイルを用意する MPA（Multi Page Application）が主流でしたが、このような高速化によって SPA（Single Page Application＝ページを遷移せずに DOM の切り替えによってページ遷移を表現する手法） が確立されました。

3.4 用語

  • レンダリング：変更前と変更後の仮想 DOM を構築して変更差分を検出し、リアル DOM を構築する必要があるかどうかを知るためのプロセス。
  • TSX：JavaScript の中に HTML のような記述が可能になった言語として JSX があり、TSX は JSX の TypeScript 版。
  • コンポーネント：ボタンやカード、モーダルなどの UI を構成する部品であり、これらのみ、またはこれらを組み合わせて再利用がしやすいように切り出した TSX を返す TypeScript の関数。