Go to Qiita Advent Calendar 2024 Top
LoginSignup
3
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@kztmk_media_pep

React18がリリースされたので、開発環境をゼロから構築してみる。【後編】

Last updated at Posted at 2022-04-15

からの続きです。

Babel.jsのインストール

Babel.js とは、Babel.js のトップページの例にあるように、モダン JS(ES2015 移行のJavaScript) を未対応の古いブラウザでも解釈できるような JavaScript に変換してくれるトランスコンパイラ (変換器) です。

古いブラウザに未対応やElectron向けの場合は不要です。

インストール方法は、Babel.jsのSetupで、[Webpack]を選択すると表示されます。

  1. Webpackを選択
  2. npm install --save-dev babel-loader @babel/core
  3. webpack.config.common.jsへ追加するコード
  4. babel.config.jsonファイルの作成
  5. npm install @babel/preset-env --save-dev
  6. babel.config.jsonファイルへコードの追加

で、完了します。

[webpack.config.common.js]

// Generated using webpack-cli https://github.com/webpack/webpack-cli

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

module.export = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "public"),
    assetModuleFilename: 'image/[name][ext][query]',
    clean: true,
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "src/index.html",
    }),
  ],
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.(ts|tsx)$/i,
        loader: "ts-loader",
        exclude: ["/node_modules/"],
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
        type: "asset",
      },

      // Add your rules for custom modules here
      // Learn more about loaders from https://webpack.js.org/loaders/
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
  },
};

[babel.config.json]

{
  "presets": ["@babel/preset-env"]
}

babelの動作確認

webpackでHtmlWebpackPluginを導入しましたので、テンプレートになる「src/index.html」を作成します。

webpackがindex.htmlを出力フォルダに自動で書き出すため、出力先フォルダにあるファイルを編集することがなくなります。

webpack設定ファイル作成時にプロジェクトフォルダに作成された「index.html」をsrcフォルダに移動するだけでも良いです。

[src/index.html]

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Webpack App</title>
    </head>
    <body>
        <h1>Hello world!</h1>
        <h2>Tip: Check your console</h2>
    </body>
    
</html>

[src/index.js]の編集
JavaScriptのテンプレートリテラル (テンプレート文字列) - JavaScript | MDNを使って確認します。

import _ from 'lodash';

function component() {
  const element = document.createElement('div');
  // Lodash, now imported by this script
  const myName = 'やる夫';
  const words = 'こまけぇこたぁいいんだよ〜';
  const message = `<br />${myName}の口グセなのか？<br />${words}`;
  element.innerHTML = _.join(['webpack', '動いてるお〜'], ' ') + message;
  return element;
}

document.body.appendChild(component());

npm run start

webpack01.png

と表示され、以下のように古いブラウザが理解できるように変換されています。

webpack02.png

ここまでの内容は、以下で取得できます。

git clone -b 05_babel-install https://github.com/yaruo-react-redux/yaruo-start-template-react18.git

React18のインストール

Reactは古いブラウザでは動作しないため、babelで変換する必要があります。(古いブラウザを切り捨てる場合は不要)

babel/preset-reactのインストール

babel/preset-reactにあるように

npm install --save-dev @babel/preset-react

で、インストールします。

[babel.config.json]の編集

{
  "presets":  [["@babel/preset-env"], ["@babel/preset-react"]]
}

React18のインストール

React を使うためにインストールするパッケージは、

  • react(react 本体)
  • react-dom(DOM へのエントリポイント、React の描画を提供)
    の 2 つです。
npm install react react-dom

[package.json]

  "dependencies": {
    "lodash": "^4.17.21",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }

のように、React18がインストールできました。

Reactの動作確認

Reactのエントリーポイントを「src/index.html」へ追加します。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Webpack App</title>
    </head>
    <body>
        <h1>Hello world!</h1>
        <h2>Tip: Check your console</h2>
        <div id="root"></div>
    </body>
    
</html>

[webpack.config.common.js]
変更点は、

  • babel-loaderで、拡張子を(js,jsx)が読み込まれるようにする
  • resolveの拡張子に「jsx」を追加する。

[index.js]

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

ReactDOM.render(
  <div>
    <App />
  </div>,
  document.getElementById('root')
);

[App.jsx]

import React from 'react';
import _ from 'lodash';


const App = () => {
  const myName = 'やる夫';
  const words = 'こまけぇこたぁいいんだよ〜';
  return (
    <div>
      {_.join(['webpack', '動いてるお〜'], ' ')}
      <br />
      {myName}の口グセなのか？
      <br />
      {words}
    </div>
  );
};

export default App;

npm run start

これで問題無く表示されました。

ここまでの内容は、以下で取得できます。

git clone -b 06_react-install https://github.com/yaruo-react-redux/yaruo-start-template-react18.git

Typescriptのインストール

TypeScriptの導入手順は、本家にあるよう以下の手順で行います。

  • TypeScript をプロジェクトの dependency に入れる。
  • TypeScript のコンパイラの設定を行う。
  • TypeScript 用のファイル拡張子を使用する。
  • 使用するライブラリの型定義をインストールする。

TypeScriptをプロジェクトのdependencyに入れる。

npm install -D typescript

で、インストールできます。

記事執筆時点の2022年4月15日では、4.6.3がインストールされました。

TypeScriptのコンパイラの設定

TypeScriptのコンパイラ設定ファイル「tsconfig.json」を作成します。webpack-cliが作成した「tsconfig.json」がある場合は削除してください。

npx tcx --init

Created a new tsconfig.json with:                                                                                       
                                                                                                                     TS 
  target: es2016
  module: commonjs
  strict: true
  esModuleInterop: true
  skipLibCheck: true
  forceConsistentCasingInFileNames: true


You can learn more at https://aka.ms/tsconfig.json

で、「tsconfig.json」が作成されました。

コメントアウトされているものは、既定です。

コンパイラのオプションを確認することもできます。

TypeScript開発元のMicrosoft社のReactのお勧めは、こちらになります。

[tsconfig.json]お勧めを考慮して

{
  "compilerOptions": {
    "target": "es2016",        
    "lib": ["es6", "dom"],
    "jsx": "react",
    "module": "commonjs",
    "rootDir": "src",
    "outDir": "public",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  },
  "exclude": [
    "node_modules",
    "build",
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "src/setupTests.ts"
  ],
}

[webpack.config.common.js]
entryポイントを「index.tsx」へ変更し、ts-loaderが先に読み込まれるように変更します。

// Generated using webpack-cli https://github.com/webpack/webpack-cli

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

module.exports= {
  entry: "./src/index.tsx",
  output: {
    path: path.resolve(__dirname, "public"),
    assetModuleFilename: 'image/[name][ext][query]',
    clean: true,
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "src/index.html",
    }),
  ],
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/i,
        loader: "ts-loader",
        exclude: ["/node_modules/"],
      },
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
        type: "asset",
      },

      // Add your rules for custom modules here
      // Learn more about loaders from https://webpack.js.org/loaders/
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js", "jsx"],
  },
};

TypeScript 用のファイル拡張子を使用する

  • index.js ---> index.jsx
  • App.jsx ---> index.tsx

使用するライブラリの型定義をインストールする

package.jsonのdependenciesを確認すると、「lodash」,
「React」、「React-dom」パッケージがインストールされていますので、「node.js」の型定義を追加してインストールします。

npm install -D @types/lodash @types/node @types/react @types/react-dom

これでTypeScriptのインストールが完了しました。

npm run start

で、動作確認します。

ここまでの内容は、以下で取得できます。

git clone -b  07_typescript https://github.com/yaruo-react-redux/yaruo-start-template-react18.git

eslint、prettireのインストールと設定

eslint

eslintは、決められたルールから外れたコードを指摘、修正してくれる優れものです。

prettier

prettierは、コードをフォーマットしてくれる優れものです。

これらも導入すると開発環境が完成したと言えるでしょう。

「eslint」「prettier」のインストール方法や詳しい設定方法は、以下の書籍にあります。

←中編　　　　　　　終編→

3
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
3
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?