VSCodeでNode.js(npm)を使い最小構成のReactアプリケーションの作成とデバッグを行う方法

2022/1/2 HTML/CSS/JavaScript/TypeScript, Node.js, React, Tips, VSCode, プログラミング

この記事は公開から2年以上経過しています。

VSCodeでcreate-react-appを使わずにNode.js(npm)を使った最小構成のReactアプリケーションを作成し、VSCodeでクライアントサイドデバッグを行う方法。

予めNode.jsをインストールしておく必要があります。

本例はLinux環境での説明となります。MacやWindowsでも基本は同様ですが、シェルコマンドの動作やパスの指定などが変わるものもあるため、適宜読み替えが必要です。

Reactプロジェクトの作成手順

  1. ターミナルを開き、以下のコマンドでプロジェクトルートディレクトリreact_test_220102を作成してVSCodeで開く。

    mkdir react_test_220102 && code $_

    ※Windowsの場合は$_を使えないためcode react_test_220102のようにパスを明示。

  2. VSCodeのターミナルを開き、以下のコマンドでpackage.jsonを新規作成する。
    ※以降の手順のコマンドは全てVSCodeのターミナル上(カレントディレクトリはreact_test_220102)で実行します。

    npm init -y

  3. 以下のコマンドを実行して、reactのライブラリ群をインストール。

    npm i react react-dom

  4. 以下のコマンドを実行して、今回の開発に必要なwebpackやbabelのツール群をインストールする。

    npm i -D webpack webpack-cli html-webpack-plugin @babel/core @babel/preset-env @babel/preset-react babel-loader

    この時点のpackage.jsonの内容は、以下のとおり(パッケージバージョンは当時のもの)。

    {
  "name": "react_test_220102",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@babel/core": "^7.16.7",
    "@babel/preset-env": "^7.16.7",
    "@babel/preset-react": "^7.16.7",
    "babel-loader": "^8.2.3",
    "html-webpack-plugin": "^5.5.0",
    "webpack": "^5.65.0",
    "webpack-cli": "^4.9.1"
  }
}

  5. 以下のコマンドを実行してプロジェクトルートディレクトリ直下にsrcディレクトリを作成、その中に空のindex.html/index.jsファイルを作成する。

    mkdir src && cd $_
touch index.html
touch index.js

    ※Windowsの場合は$_を使えないためcd srcのようにパスを明示。
    ※Windowsの場合はtouchを使えないためcopy nul index.htmlのようにcopy nulで代替。

  6. VSCodeのエクスプローラツリーから手順5で作成したsrc/index.htmlを選択して、以下の内容で登録する。

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello React!</title>
</head>

<body>
    <div id="root"></div>
</body>

</html>

  7. VSCodeのエクスプローラツリーから手順5で作成したsrc/index.jsを選択して、以下の内容で登録する。

    import React from 'react';
import ReactDOM from 'react-dom';

class HelloReact extends React.Component {
  render() {
    return <h1>Hello React!</h1>;
  }
}
ReactDOM.render(<HelloReact />, document.getElementById('root'));

    ※react-create-appの動作に合わせてクラスコンポーネントを利用していますが、関数コンポーネントでも構いません。

  8. 以下のコマンドでプロジェクトルートディレクトリに空のwebpack.config.jsを作成する。

    cd ../
touch webpack.config.js

    ※Windowsの場合はtouchを使えないためcopy nul webpack.config.jsのようにcopy nulで代替。

  9. VSCodeのエクスプローラツリーから手順8で作成したwebpack.config.jsを選択して、以下の内容で登録する。

    const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist/'),
    publicPath: './',
    filename: 'index.js',
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env', '@babel/preset-react'],
            },
          },
        ],
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html',
    }),
  ],
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  devtool: 'source-map',
};

  10. VSCodeのエクスプローラツリーからpackage.jsonを選択して、scriptsエントリ部分を以下のように書き換える(testを削除してdevとbuildを追加)。

    {
  "name": "react_test_220102",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --progress --mode development --watch",
    "build": "webpack --progress --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@babel/core": "^7.16.7",
    "@babel/preset-env": "^7.16.7",
    "@babel/preset-react": "^7.16.7",
    "babel-loader": "^8.2.3",
    "html-webpack-plugin": "^5.5.0",
    "webpack": "^5.65.0",
    "webpack-cli": "^4.9.1"
  }
}

  11. 以下のコマンドでsrcディレクトリのHTMLファイルとJavaScriptファイルのコンパイルを行う。

    npm run dev

    実行結果は以下のとおり。

    > react_test_220102@1.0.0 dev
> webpack --progress --mode development --watch

asset index.js 982 KiB [compared for emit] (name: main) 1 related asset
asset index.html 331 bytes [compared for emit]
runtime modules 274 bytes 1 module
modules by path ./node_modules/ 974 KiB
  modules by path ./node_modules/scheduler/ 26.3 KiB
    modules by path ./node_modules/scheduler/*.js 412 bytes 2 modules
    modules by path ./node_modules/scheduler/cjs/*.js 25.9 KiB
      ./node_modules/scheduler/cjs/scheduler.development.js 17.2 KiB [built] [code generated]
      ./node_modules/scheduler/cjs/scheduler-tracing.development.js 8.79 KiB [built] [code generated]
  modules by path ./node_modules/react/ 70.6 KiB
    ./node_modules/react/index.js 190 bytes [built] [code generated]
    ./node_modules/react/cjs/react.development.js 70.5 KiB [built] [code generated]
  modules by path ./node_modules/react-dom/ 875 KiB
    ./node_modules/react-dom/index.js 1.33 KiB [built] [code generated]
    ./node_modules/react-dom/cjs/react-dom.development.js 874 KiB [built] [code generated]
  ./node_modules/object-assign/index.js 2.06 KiB [built] [code generated]
./src/index.js 3.69 KiB [built] [code generated]
webpack 5.65.0 compiled successfully in 1060 ms

    コンパイルが正常完了すると、プロジェクトルートディレクトリ直下のdistディレクトリ配下に、コンパイル後のindex.html、index.jsとソースマップファイルindex.js.mapが出力される。

以上でReactのプロジェクト作成は完了です。
dist/index.htmlを任意のブラウザで開くと、下図のようにReactでコンテンツ領域に動的に生成されたHello React!が表示されることが確認できます。

file

生のソース:
file

Reactで動的生成されたソース:
file

Reactアプリのローカルデバッグ手順

前項の手順で作成したReactアプリケーションのデバッグ方法です。

  1. VSCodeのサイドバーからRun and Debug(実行とデバッグ)を選択する。

    file

  2. create a launch.json file(launch.jsonファイルを作成します)をクリック、Select environment(環境の選択)からChromeを選択する。

    file

  3. VSCodeのエクスプローラツリーから.vscode/launch.jsonを選択して、configurationsエントリを以下のように設定する。
    ※runtimeExecutableには、デバッグで利用するChromiumベースのWEBブラウザの実行ファイルパスをフルパスで指定してください。macOSをお使いの場合はこちらのエントリが参考になるかもしれません。

    {
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-chrome",
            "request": "launch",
            "name": "Open index.html",
            "file": "./dist/index.html",
            "runtimeExecutable": "/usr/bin/chromium"
        }
    ]
}

  4. VSCodeのエクスプローラツリーからsrc/index.jsファイルを開き、以下のとおりブレークポイントを設定する。

    file

  5. VSCodeでF5キーを押下してデバッグを開始する。

    file

    上図のとおりブレークポイントでブレークし、VSCodeデバッガによるデバッグが行えることが確認できます。

以上です。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

Y.Sakamoto