Zenn
❄

[React]ローカル環境にTypeScriptで動かす環境を構築

2023/07/18に公開
Node.js
React
TypeScript
tech

はじめに

社内の有志メンバー向けにローカル環境で React を動かす資料が必要だったので執筆します。
今回は、下記画像のようにローカル環境で React が実行できるように作業を行います。
React_step6

1. Node.js をローカル環境にインストールする

【Node.js とは】
JavaScript を使ってサーバーサイド（バックエンド）のアプリケーションを作成するためのプラットフォームです。
これにより、従来はクライアントサイドでしか使えなかった JavaScript を、サーバーサイドでも使えるようになります。

【なぜ、Node.js が必要なの？】
Node.js とそのパッケージマネージャーである npm（または Yarn）が非常に便利です。

  1. 下記サイトにアクセスする

  2. 推奨版の18.16.1をインストールします。(2023/07 時点)
    sandbooks-react-step01

  3. インストーラーがダウンロードされたことを確認する
    sandbooks-react-step02

  4. ダウンロードしたインストーラーを実行する
    sandbooks-react-step03

  5. Nextをクリックし事前設定を確認します。
    sandbooks-nodejs-step01

  6. ライセンスの同意に ✅ を付けて、Nextをクリックする
    sandbooks-nodejs-step02

  7. プログラムの保存先をデフォルトのままでNextをクリックする
    sandbooks-nodejs-step03

  8. 特に操作もせず、Nextをクリックする
    sandbooks-nodejs-step04

  9. 特に操作もせず、Nextをクリックする
    自動で必要なツールをインストールしますか？と聞かれていますが、余分なものを取り込みたくないので ✅ を付けません。
    sandbooks-nodejs-step05

  10. Installをクリックしインストールを開始します。
    sandbooks-nodejs-step06

  11. インストールが完了するまで待ちます。
    sandbooks-nodejs-step07

  12. インストールの完了を確認してFinishをクリックします。
    sandbooks-nodejs-step08

2. Node.js の version が18.16.1のか確認する

  1. Git Bash を起動する
    検索欄にgit bashと検索し、Git Bashアプリを起動する
    sandbooks-git-step01

  2. 作業する場所に移動する
    下記コマンドは、ホームディレクトリに一旦移動し、Work配下にあるクローンしたsandbooksに移動します。
    bash cd ~ cd Work/sandbooks

  3. 下記コマンドを実行し version を確認する

    node --version

  4. version が18.16.1である事を確認する

    $ node --version
v18.16.1

3. React アプリを作成し、起動する

  1. srcディレクトリを作成し、移動する
    ※既に作成済みなら、対応不要です。

    mkdir src
cd src

  2. yarnを利用できるようにインストール

    npm install -g yarn

    【yarn とは】
    Yarn は JavaScript のパッケージマネージャーで、プロジェクトで使用するコードやライブラリを管理するためのツールです。

    パッケージマネージャーは、他の人が作ったコードを使う際に必要なファイルや依存関係を管理し、効率的にインストールしたりアップデートしたりする役割を果たします。

    【yarn のメリットは？】
    1. パフォーマンス: Yarn はパッケージのインストールやアップデートを高速化します。依存関係の解決やダウンロードを並列で行い、パッケージをキャッシュして再利用することで時間を節約します。

    2. 信頼性: Yarn は厳密な依存関係の管理を行います。パッケージのバージョンが変更されないようにロックファイルを作成し、他の開発者が同じ環境で同じバージョンのパッケージを利用できるようにします。

    3. オフラインモード: インターネットに接続できない場合でも、Yarn は以前にダウンロードしたパッケージを利用することができます。これは、移動中やネットワークの遅い場所でも作業を続けることができます。

    4. セキュリティ: Yarn はパッケージのセキュリティを重視しています。依存関係のパッケージが信頼できるものであるかどうかをチェックし、既知のセキュリティの問題がある場合に警告を出すことができます。

  3. React のアプリを作成する

    yarn create react-app frontend --template typescript

    【上記のコマンドの意味について】
    yarn create react-app：yarn コマンドで React の Web アプリを作成する
    frontend：Web アプリの名前
    --template typescript：typescript で Web アプリを構築する

  4. 作成した React のアプリに移動します。

    cd frontend

  5. React を起動する
    下記コマンドを実行して React を起動します

    yarn start

  6. ローカルホストにアクセスする
    http://localhost:3000/をブラウザーの URL に入力して Enter キーを押します。
    React_step6

    【ローカルホスト（Localhost）とは】
    自分自身のコンピュータ上で実行されているネットワークサーバーを指す言葉です。

    例えば、ウェブ開発の場合、ローカルホストは自分のコンピュータ上で実行されるウェブサーバーを指します。ローカルホストを利用することで、ウェブサイトの動作をブラウザで確認したり、データベースとの連携をテストしたりすることができます。

さいごに

無事に React を動かす環境が整いました。
お疲れ様でした。

GitHubで編集を提案

Discussion