create-react-appを使わないReact+TS構築法

Reactを学ぶとき、特別なことが無い限り恐らく誰もが通った 「react-create-app」を使ってHello Worldをしたと思います。

何番煎じかはわかりませんがcreate-react-appを使わずに、 React+TypeScript環境を構築した備忘録として残しておきます。

まずはシンプルにReactをTypeScriptで組めるようにします。

最終的な構成は以下のようになります。

  • react
  • react-dom
  • typescript3
  • ts-loader
  • post-css
  • webpack4

タスクランナーもGulpを使わずnpm-scriptsで管理します。

当記事は前提条件として以下のような方が対象になります。

  • crete-react-appでHelloWorldをしたことがある
  • create-react-appを使わない構築方法が知りたい
  • cssフレームワークを使わずCSSを自分で構築したい
  • node.js(npm or yarn含む)を導入済み
  • node.jsを使う最低限の知識(npm install等)

当記事はnpmではなくyarnでやっていきます。

npmでも問題なくできると思います。

yarnとnpmのコマンドの差異にはお気を付けください。

第１回目ということでまずはシンプルにReactをTypeScriptで動かしてみましょう。

  1. 構築準備
  2. Reactのインストール
  3. webpackの導入
  4. TypeScriptの導入
  5. Reactのソースファイルを作る
  6. 起動コマンドの作成
  7. 最後にhtmlを作成して仮想サーバーを立ち上げる
  8. TS+Reactの最小構成の完成

構築準備

mkdir pure-react
cd pure-react
yarn init -y

新規ディレクトリを作成してその中でinitしてpackage.jsonを作りましょう。

Reactのインストール

早速Reactをインストールしてみましょう。

yarn add react react-dom

webpackの導入

このままでは使えませんので、webpackを導入しましょう。

yarn add -D webpack webpack-cli webpack-dev-server

webpack導入に伴い「webpack.config.js」をルートに作成しましょう。

// pathモジュールの読み込み
const path = require("path");

module.exports = {
  // モードを開発モードにする
  mode: "development",
  // 入力ファイル設定
  entry: [path.resolve(__dirname, "./src/index.tsx")],
  // 出力ファイル設定
  output: {
    // 出力されるファイル名
    filename: "bundle.js",
    // 出力先ディレクトリ
    path: path.resolve(__dirname, "dist")
  },

  // モジュール設定
  module: {
    rules: [
      {
        // ts-loaderの設定
        test: /\.(js|ts|tsx)?$/,
        use: "ts-loader",
        exclude: /node_modules/
      },
    ]
  },
  // モジュール解決
  resolve: {
    extensions: [".ts", ".tsx", ".js", ".json"]
  },

  // 開発モード設定
  devtool: "source-map",
  devServer: {
    contentBase: "./dist"
  }
};

TypeScriptの導入

TypeScript(以下TS)を使わないのであればbabelでいいと思いますが、 TSであればts-loaderで良いかと思います。

早速インストールしましょう。

yarn add -D typescript ts-loader

ついでにTSの型情報も入れておきましょう。

yarn add -D @types/react @types/react-dom @types/node

次にTSの設定ファイルを作ります。

ルートに「tsconfig.json」を作成してください。

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "types":["node"],
    "lib": [
      "es2019",
      "dom"
    ],
    "allowJs": true, // jsコンパイル用
    "checkJs": true,  // js簡易型チェック
    "sourceMap": true,
    "inlineSources": true,
    "outDir": "./dist/",
    "noImplicitAny": true,
    "jsx": "react",
    "allowSyntheticDefaultImports": true,
    "moduleResolution": "node"
  }
}

tsconfigについては深くは語りません。

詳しくはtsconfig.jsonでググったら全ての詳細が出てきます。

Reactのソースファイルを作る

これでReactを使う準備ができましたので、早速コードを組んでいきましょう。

まずは最初に読み込まれる「index.tsx」を作ります。

ディレクトリは「src」をルートに作成して、その中に「index.tsx」を格納します。

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

// コンポーネント読み込み
import App from "./components/App";


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

これはreactでおなじみの書き方ですね。

Appコンポーネントを読み込んでるので中身を作っていきましょう。

とりあえず定番のHello Worldですね。

「components」ディレクトリを作成してその中に格納していきます。

名前は「App.tsx」

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <>
        <h1>Hello TS-React!</h1>
      </>
    )
  }
}

export default App;

シンプルですね。

最近のReactは

で囲まなくても空タグで囲めばいい感じにやってくれるみたいです。

元コーダーとしては無駄なタグが増えなくて最高です。

それでは早速動かしてみましょう。

起動コマンドの作成

package.jsonに起動するためのコマンドを記述しましょう。

webpack-dev-serverを使うので以下のように「package.json」改編してください。

{
  "name": "pure_react",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "start": "webpack-dev-server --open",
    "build": "webpack",
    "build-prod": "webpack --mode=production"
  },
  "dependencies": {
    "react": "^16.12.0",
    "react-dom": "^16.12.0"
  },
  "devDependencies": {
    "@types/node": "^13.1.4",
    "@types/react": "^16.9.17",
    "@types/react-dom": "^16.9.4",
    "ts-loader": "^6.2.1",
    "typescript": "^3.7.4",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.10.1"
  }
}

追加したのはscriptsの部分です。

最後にhtmlを作成して仮想サーバーを立ち上げる

最後にルートに「dist」というディレクトリを作成して「index.html」を作成しましょう。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>pure-react</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="bundle.js"></script>
  </body>
</html>

出力されたbundle.jsを読み込むのと、 Reactが描写しようとするid=Rootを持つタグを入れています。

後は

yarn start

で仮想サーバーが立ち上がります

「Hello TS-React!」

と出ていれば完成です！

TS+Reactの最小構成の完成

たぶんこれが一番だと思います。

正直この状態ではTypeScriptの意味は成してないと思いますが、 脱babelに成功しているので良しとしましょう。

jsの場合はbabelでtsの場合はts-loaderを使う感じですね。

そしてなんだかんだやってたらbabelが無いとダメという状況になって 結局babel使ってんじゃねーか！ってなることもあります。

今では何度も構築したのである程度理解しましたが、node.jsは設定するものが多すぎて面倒ですよね。

正直webpackだけで全部やってほしいぐらいです。

次回はpost-cssを使って個別にコンパイルしてみましょう。

それが終わったらnpm-scriptsで順番に自動コンパイルするようにすれば、 Reactアプリの土台作りは完璧です。

cssフレームワークに関してはSASS(scss)でもいいのですが、脱Gulpしたことでpost-cssに移り変わったので、 基本はpost-cssで進めます。

気が向いたらSASSの導入も書いていきます。

それでは！