favicon img logo img

React環境構築

devicon

react

devicon

typescript

環境

  • os: windows
  • node: 16.15.0
  • npm: 8.5.5

実行コマンド一覧

# プロジェクトの初期化(-y で質問をスキップ)
npm init -y

# reactインストール
npm i  react react-dom @types/react @types/react-dom --save

# webpack等インストール
# webpack webpack-cli => JavaScriptコードを単一にバンドルするためのライブラリとそのCLI
# webpack-dev-server => 開発時に使用するローカルWebサーバー
npm i --save-dev webpack webpack-cli webpack-dev-server

# webpackのプラグインをインストール
# html-webpack-plugin => dist/にHTMLファイルを出力するプラグイン
npm i --save-dev html-webpack-plugin mini-css-extract-plugin

# babel等インストール
# @babel/core => babel本体
npm i --save-dev @babel/core

# babelのloaderをインストール
# babel-loader => webpackでbabelを使用するのに必要なモジュール ※webpack用のbabel-loaderの先頭に@はつかない
# ts-loader => Typescriptをトランスパイルするために必要
# style-loader => バンドルされたcssをHTMLで読み込まれるようにするためのloader
# css-loader => cssをjavascriptにバンドルするためのloader
# sass-loader => sassをcssに変換するためのloader
npm i --save-dev babel-loader ts-loader style-loader css-loader sass-loader

# babelのpresetをインストール
# @babel/preset-env => ES6以上のコードをES5にトランスパイルするのに役立つプリセット
# @babel/preset-react => jsx形式のファイルをトランスパイルするのに必要なプリセット
# @babel/preset-typescript => typescriptをトランスパイルするのに必要なプリセット
npm i --save-dev @babel/preset-env @babel/preset-react @babel/preset-typescript

# typescriptインストール
npm i --save-dev typescript

# sassインストール
npm i --save-dev sass

npm scriptの設定

package.jsonのscriptsを以下のように編集する

  "scripts": {
    "start": "webpack-dev-server --mode development",
    "build": "webpack --mode production"
  },

webpackの設定

webpack.config.jsを作成する


// pathはNode.jsネイティブユーティリティーモジュール
// 絶対パスを参照するためのモジュール
const path = require("path");

// htmlファイルを自動生成するためのモジュール読み込み
const HtmlWebpackPlugin = require("html-webpack-plugin");

// バンドルしたjsファイルからCSSファイルを出力するためプラグイン読み込み
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  // バンドルファイルのentrypointを指定
  // path.resolve：OS毎にパスが異ならないようにするために使用
  // __dirnameはNode.jsで用意されているグローバル変数
  entry: path.resolve(__dirname, "./src/index.tsx"),
  // sourceMapの出力設定 出力しないときはfalse
  devtool: "hidden-source-map", // hidden-source-mapはコメントを除外したsourceMap
  // モジュールプロパティ
  module: {
    rules: [
      {
        // bandle対象のファイルの拡張を指定
        test: /\.(js|jsx|ts|tsx)$/,
        // bandle除外？
        exclude: /node_modules/,
        // 変換を行うために使用するローダーの指定
        use: ["babel-loader", "ts-loader"],
      },
      {
        test: /\.(sass|scss|css)$/,
        use: [
          // CSSファイルを書き出すオプションを有効にする
          {
            loader: MiniCssExtractPlugin.loader,
          },
          {
            loader: "css-loader",
            options: {
              url: true,
              sourceMap: true,
            },
          },
          {
            loader: "sass-loader",
            options: {
              sourceMap: true,
            },
          },
        ],
      },
      {
        test: /\.(gif|png|jpg|svg)$/,
        type: "asset/resource",
      },
    ],
  },
  // 出力設定
  output: {
    // 出力先を指定
    path: path.resolve(__dirname, "public"),
    // 生成されたindex.html内のリソースのプレフィックス(接頭辞)
    // build時にHTMLファイル内のURLを更新していく
    publicPath: "/",
    // ビルド後のファイル名を指定
    filename: "main.js",
  },
  // importの際に拡張子を省略できるようにする対象を指定
  resolve: {
    extensions: ["*", ".js", ".jsx", ".ts", ".tsx"],
  },

  // プラグインのインスタンスを作成 ※それぞれのプラグインで設定
  plugins: [
    new HtmlWebpackPlugin({
      // htmlのテンプレートのパスを指定
      template: "./src/index.html",
    }),
    new MiniCssExtractPlugin({
      // 出力先の設定
      filename: "./css/[name].css",
    }),
  ],
};

Babelの設定

.babelrcを作成する

{
    // webpack用のローダーを追加
    "presets": [
        "@babel/preset-env",
        "@babel/react", // jsxをサポート
        "@babel/preset-typescript"
    ]
}

HTMLの作成

src/index.htmlを作成する

<!DOCTYPE html>
<html lang="ja">
  <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</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

Typescript導入

tsconfig.json作成

npx tsc --init

tsconfig.jsonの一例

{
  "compilerOptions": { // コンパイルする際のオプション
    "target": "es5", // コンパイル後のjsの形式を指定
    "module": "commonjs", // 出力するjsのモジュールの仕組みとして何を使用するかを指定
    "rootDir": "./src", // 出力されるjsが指定したパスの構造で出力されるようにする
    "outDir": "./dist", // コンパイルしたjsの出力先
    "allowJs": true, // .jsと.jsxもコンパイル対象に含まれる ※部分的にjsなど書いている場合にtrueにする
    "strict": true, // おまかせでいくつかの設定がtrueになる ※詳細は別途記載予定
    "baseUrl": "./", // non-relativeなimportの際のカレントディレクトリを指定
    "moduleResolution": "node", // tscのモジュール解決の方法を指定 node | classic 一般的にはnodeを指定
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true, // CommonJS 形式のモジュールを、ES Modules でデフォルトインポート可能にする
    "forceConsistentCasingInFileNames": true, // importでファイル名の大文字・小文字を区別する
    "jsx": "react" // reactでjsxを使う場合はこの設定が必須
  },
  "include": ["src/**/*"] // コンパイルする対象ファイルを記述
}

tsconfig.jsonの詳細は以下のリンクを参照

tsconfig.jsonを設定する | TypeScript入門『サバイバルTypeScript』
Node.jsはそれ自身ではTypeScriptをサポートしているわけではないため、TypeScriptの導入をする時はTypeScriptの設定ファイルであるtsconfig.jsonが必要です。
tsconfig.jsonを設定する | TypeScript入門『サバイバルTypeScript』 favicon https://typescriptbook.jp/reference/tsconfig/tsconfig.json-settings
tsconfig.jsonを設定する | TypeScript入門『サバイバルTypeScript』
tsconfig.jsonの主要オプションを理解する - Qiita
概要社内勉強会の資料。TypeScriptのtsconfig.jsonにはオプションが色々とあるので、それらの意味や用途を理解する目的です。tscのバージョンは3.7.2を使用します。VSC…
tsconfig.jsonの主要オプションを理解する - Qiita favicon https://qiita.com/ryokkkke/items/390647a7c26933940470
tsconfig.jsonの主要オプションを理解する - Qiita

index.tsxの作成

src/index.tsxを作成する

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

App.tsxの作成

src/App.tsxの作成

import React from 'react';

const App = () => {
    return(
        <div><h1>My new React App</h1></div>
    )
}

export default App;

ディレクトリ構成

ここまでのディレクトリ構成は以下の通り

.
│─ src
│  ├ App.tsx
│  ├ index.html
│  └ index.tsx
├ .babelrc
├ package-lock.json
├ package.json
├ README.md
├ tsconfig.json
└ webpack.config.js

解説

webpack

webpackとはJSファイルをまとめる高機能なモジュールバンドラー。

モジュールの形式には、ESModuleとCommonJSが存在する

参考：https://ics.media/entry/12140/

babel

Babelは、次の世代のJavaScriptの標準機能をブラウザのサポートを待たずに使えるようにするNode.js製のツール

次の世代の標準機能を使って書かれたコードを、それらの機能をサポートしないブラウザでも動くコードに変換する

参考：https://reffect.co.jp/html/webpack-babel-loader-setting-for-beginner

loader

webpackはjavascriptしか扱うことができないためCSSや画像をjsのオブジェクトに変換してバンドルできるようにするもの