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に移動します。

    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