Django+Reactで学ぶプログラミング基礎(3): 開発環境構築(React)

[前回] Django+Reactで学ぶプログラミング基礎(2): 開発環境構築(Django/VS Code)

はじめに

前回に続き、開発環境を整えます。
今回は、React開発環境です。

開発環境情報(Windows)

• 前回までインストール済み
  • Python 3.10
  • VS Code(Visual Studio Code) 1.67
  • Django 4.0
• 今回は、React開発に必要なもの
  • Node.js(ノード・ジェイエス)
    • サーバーサイドJavaScript環境で、イベント化された入出力を操作
    • Webサーバーなどスケーラブルなネットワークプログラムの記述を可能に
    • V8 JavaScriptエンジン上に構築されたJavaScript実行環境の1つ
      • V8は、Googleが開発するオープンソースのJIT(Just In Time) Virtual Machine型のJavaScriptエンジン
  • npm(Node Package Manager)
    • Node.jsに同梱される
    • Node.jsのパッケージ管理システムで、V8 JavaScriptエンジンで動作
    • Node.jsのツールやパッケージ(モジュール)をインストール/管理
    • パッケージを扱うためのインターフェイスを備える
    • リポジトリ機能
      • パッケージ(モジュール)を、検索/ダウンロード/インストール/アップデート/公開
  • npx
    • npmに同梱される
    • npmパッケージを簡単に実行できるコマンド
      • 一回だけ実行したいパッケージを、グローバルインストールせず実行可能
      • パッケージを自動的に探しインストール/実行/削除してくれる、放置せず環境をきれいに
    • 対して、npmを使ってスクリプトを実行するには
      • プロジェクトを作成
        • npm init <project-name>
        • npmを使ってプロジェクト管理するためのpackage.jsonが生成される
      • package.jsonのscriptsへ予めスクリプトを定義
  • Create React Appジェネレータ(generator)
    • Reactで新しいSPA(シングルページアプリケーション)を自動生成
    • Reactを学習するための快適な環境

React開発環境構築

Node.js(npm同梱)をインストール

• https://nodejs.org/ja/download/からLTS版(64-bit)をインストール
• VS Codeを起動し、ターミナルで、Node.jsとnpmのバージョン確認

>node --version
v16.15.1

>npm --version
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` 
instead.
8.4.1

※ npm WARN ...警告は無視

Reactアプリを作成(テスト用)

>npx create-react-app my-app
... ...
Success! Created my-app at C:\kanban\my-app
... ...

• Webサーバーを起動

>cd my-app
>npm start

• ブラウザが開かれる、Reactアプリを確認できる
  

VS CodeでReactアプリを開く

• もう一つターミナルを開く
  

>C:\kanban>cd my-app
>C:\kanban\my-app>code .

新しいVS Code画面が開かれ、Reactアプリが表示される。
上述package.jsonも生成されている。

おわりに

Windows環境にReact開発に必要なものをインストールしました。
次回も続きます。お楽しみに。

[次回] Django+Reactで学ぶプログラミング基礎(4): 開発環境構築(Redux)