Reactの基礎【環境構築編】

Reactの基礎【環境構築編】

フロントエンド絶賛勉強中でReactを始めました。
初めての方でもわかるように、Reactについての記事を書いていこうと思います。
最初は環境構築編です！

Reactとは...?

• Reactの特徴
  • JavaScriptのフロントエンドのフレームワークである。
  • Facebookによって開発されたオープンソースである。
  • リアクティブ・プログラミングに特化している(図１)。
    • リアクティブ・プログラミング：何か値が変わると、それがすぐに画面などに反映する仕組みのこと。

図１

仮想DOM

JavaScriptでは、DOMを用いてHTMLの操作を行いました。これはJavaScriptで画面表示の操作を簡単に実現するため便利なものなのですが、表示に負荷がかかってしまい、とても遅いようです。Reactでは、仮想DOMといって、プログラムで仮のDOMを構築し、それに対して操作し、DOMに反映する仕組みがあります。そうすることで通常のDOM操作するよりも高速になるようになりました(図２)。

図２

環境構築

基本的にReactを使う際に、最低限必須なのはHTMLファイルだけです。他には何も要りません。しかし、少しでも便利に開発していきたいので、以下の環境構築をしていきます。

npm/Node.jsのインストール

• Node.js:JavaScriptの実行環境で、サーバーサイドまで含めたアプリケーションの開発が可能となる。
• npm：JavaScriptのパッケージ管理ツールのこと。
  • 参考記事

インストール手順

1. https://nodejs.org/ja/download/　から自分のPCのOSにあったインストーラーを選択する。
2. ようこそNode.jsインストーラーへ →　続ける
3. 使用許諾契約　→ 続ける　→ 同意する
4. インストール先の選択　→　続ける
5. "XXXXX"に標準インストール　→ インストール
6. インストールが完了しました　→ 閉じる

動作確認

Terminalを開いて、以下のコマンドを叩きます。

$ node --version

正常にインストールされていれば、以下のようにバージョンが表示されます。

v14.17.2

開発プロジェクトの作成

npm/Node.jsが正常にインストールできたら、開発プロジェクトを作成します。
Terminalで、プロジェクトを作りたい場所に移動して、以下のコマンドを叩きます。

$ npx create-react-app react_app

実行すると、その場所にreact_appというフォルダができ、その中に様々なファイルが作成されます。コマンドで指定したreact_appがReactプロジェクトフォルダ名となり、その中に開発に必要なファイルが置かれます。

上記のnpx create-react-app react_appは以下のコマンドでも同様のことができます。どちらか好きな方を覚えておけば大丈夫です。

$ npm init react-app <プロジェクト名>

プロジェクト操作コマンド

正常にプロジェクトフォルダを作成された場合、Terminalに以下のような表示がされています。

Success! Created react_app at /XXXX/YYYY/ZZZZ/react_app
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

上記のyarn XXXXコマンドはプロジェクト操作コマンドといい、プロジェクトに対して操作を行うことができます。

• yarn start
  • 開発サーバプログラムを用いて、プロジェクトを実行します。Webブラウザで動作確認できます。
• yarn build
  • プロジェクトのビルドを行います。実際にWebサーバにアップロードするファイルを生成します。
• yarn test
  • テストプログラムを実行し、アプリのテストを実行します。
• yarn eject
  • プロジェクトの依存関係をプロジェクト内に移動させ、完全に独立させた形で扱えるようにします。当分使用しません。

プロジェクトの実行

先ほど作成したreact_appに移動して、以下のコマンドを叩きます。

$ yarn start

ブラウザに以下の画面が出れば成功です。

プロジェクトフォルダ/ファイル

react_appのフォルダ、ファイルがどういうものかをいくつか抜粋して説明します。

• フォルダ
  • node_modules
    • npmで管理されるモージュール(プログラム)が集まっています。
  • public
    • 公開するフォルダで、HTMLやCSSなどのファイルが置かれます。
  • src
    • Reactで作成されたファイルがまとめられます。
• ファイル
  • package.json
    • npmでパッケージ管理するための設定ファイルです。
  • yarn.lock
    • yarnに関する設定ファイルです。

基本的に開発で頻繁に使用するものは、「src」、「public」くらいです。

developer tool

Reactのdeveloper toolとして、React Developer Toolsがあります。入れといて損はないです。以下のURLからインストールしてみてください。

• https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=ja

まとめ

この記事では、Reactについての大まかな説明と環境構築からプロジェクトフォルダ作成までの手順などを紹介しました。次の記事から本格的にReactのコーディングについて説明していきます。