1. Reactとは？

ReactとはJavaScriptのライブラリで複雑な画面(UI)の挙動を以下に効率よく開発するかという観点で開発された技術です。

1-1. 従来技術の課題

React誕生前では以下のような問題が発生していました。

1. 複雑なUIでのパフォーマンス低下 動的な操作が多いWebサイトでは、画面の描画速度が遅くなることがありました。

2. DOM操作のコスト DOM（Document Object Model）とは、HTMLの構造をプログラムから操作するための仕組みです。

従来のJavaScriptでは、このDOMの操作に多くのリソースが必要であり、特に大規模なアプリケーションではパフォーマンスが悪化しがちでした。

複雑な操作例として入力フォームを例に挙げます。

例) 会員登録の入力フォーム

• 構成
  • 名前、郵便番号、年齢などの情報入力フォーム
  • 郵便番号から住所を自動取得するフォーム

従来の方法では、フォームの各項目に対応する処理を個別に実装する必要がありました。

そのためフォームの数が増えるほどコードも複雑になり、処理速度が低下しました。

1-2. Reactの強み

上記の問題をReactは「仮想DOM」により解決しました。

仮想DOMにより、現在の入力のみを操作し続けることでこの挙動の重さを改善できます。

具体的には以下のような仕組みです。

1. DOM操作の前に、Reactサーバーによる仮想DOMを生成します。
2. 仮想DOMで変更箇所のみ変更して、変更の前後でDOMの差分を取ります。
3. 差分のみだけDOMに反映することでDOM全体の操作をせず画面挙動の実現をします。

1-3. Reactを学ぶメリット

Reactを習得することで、以下のような利点があります

1. モダンなフロントエンド開発が可能

• 複雑なUIの構築やパフォーマンスの最適化が容易になります。

2. 技術者としての市場価値向上

• Reactは世界中で広く使われており、企業の採用条件にも頻繁に登場します。

3. エコシステムの活用

• Reactは豊富なライブラリやツールと連携可能で、拡張性が高いです

2. React環境構築

この章では、Reactの環境構築について説明します。

JavaScriptはブラウザがあれば動作しますが、Reactはnode.jsやnpmといったJavaScriptの実行環境が必要です。

2-1. 必要なもの

1. Node.js ReactはNode.jsというJavaScriptの実行環境を使って動作します。
2. npm npmは、JavaScriptのパッケージを管理するツールです。

nodeやnpmのバージョン管理ツールに関してが「Volta」を推奨しています。

Voltaにより複数のバージョンを管理し、プロジェクトに応じたバージョンでのアプリケーション開発ができます。これは発展的内容なのでVoltaでnpmバージョン管理についてで解説します。

Node.jsをインストールするとnpmも一緒にインストールされます。

• Node.jsのインストール

1. Node.jsの公式サイトにアクセスして、最新の安定版（LTS）をダウンロードします。
2. ダウンロードが完了したら、インストーラの指示に従いインストールを進めます。

2-2. Reactアプリのスタート

上記でNode.jsおよびnpmのインストールが環境したら実際にReactでアプリケーションを開発します。

1. ターミナル（コマンドプロンプト）を開く MacやLinuxでは「Terminal」、Windowsでは「コマンドプロンプト」や「PowerShell」を開いてください。

2. Node.jsおよびnpmのバージョン確認

# Node.jsのバージョン確認
$ node -v

# npmのバージョン確認
$ npm -v

上記コマンドでインストールしたバージョンであることを確認します。

3. Reactプロジェクトを作成する ターミナルで以下のコマンドを入力してください。

# 現在のディレクトリ確認(アプリを作りたい階層か)
$ pwd

# Reactアプリ作成
$ npx create-react-app <任意のアプリケーション名> .
# Reactアプリの確認
$ ls

4. アプリの起動 以下のコマンドでアプリケーションサーバーの起動をしてください。

$ npm start

成功すれば自動で「http://localhost:3000」でブラウザ起動します。

これでReactの基本的な環境構築は完了です。