０からReact/typescript環境構築してみる。

はじめに

当方、Vueをメインに使ってきたエンジニアです。
はじめての備忘録記事投稿なので、いろいろと至らない点申し訳ございません。

いつもvue-cliに頼りっぱなしで、まともに環境構築をしたことがなかったためやってみました。
細かく書いていきます。駆け出しの備忘録なので優しい気持ちで見守ってください。
なお、typescriptは初めて触ります、あしからず。
ひとまず目標はハロー、ハッピーワールドということで!!!

前提

• 当方Macです
• VScode（codeコマンドが使える状態
• Node　v12.1.0
• yarn 1.16.0

0からと言っておきながらNodeは前提ですごめんなさい……。

まずとりあえずプロジェクトを作る

このあたりはやり方いろいろあるので、わかってるよという方は読み飛ばしてください。

とりあえずgithubに空リポジトリを作る。（省略
次に手元の良さげな場所でプロジェクトを作る。

$ mkdir sample-react-ts
$ cd sample-react-ts
$ yarn init

いろいろと聞かれますがとりあえずエンター連打で。
そうしたら、gitリポジトリとして初期化します。

$ git init

このままだと、いろいろと無駄なファイルがgit管理下に置かれてしまうのでgitignoreを書いていきます。何が最適解なのかは場合によって変わると思いますので、とりあえずnode_modulesを管理下から外します。必要があれば後々追加していきます。

$ echo node_modules > .gitignore

次にREADMEを書きます。

$ echo "# sample-react-ts" > README.md

これらが終わったら、githubにプロジェクトを登録します。

$ git add .
$ git commit -m "init commit"
$ git remote add origin （自分のリポジトリ)
$ git push -u origin master

これで、githubに以下のように表示されたらおっけーです。

いろいろ入れていく

今回はReact/Typescriptの環境構築なので、最低限必要なものを入れていきます。
まずはwebpack。ついでにwebpack-dev-serverとhtml-webpack-pluginも入れておきます。
$ yarn add --dev webpack webpack-dev-server webpack-cli html-webpack-plugin

当然、Reactを使うのでReactも入れていきます。
$ yarn add react react-dom

次にTypescript関連のものを入れていきます。
今回はwebpackのts-loaderを使います。

$ yarn add --dev typescript ts-loader @types/react @types/react-dom

これで今回入れるものは全てです。この時点でpackage.jsonが以下のようになっています。

package.json

{
  "name": "sample-react-ts",
  "version": "1.0.0",
  "main": "index.js",
  "author": "sabacan",
  "license": "MIT",
  "devDependencies": {
    "@types/react": "^16.8.19",
    "@types/react-dom": "^16.8.4",
    "html-webpack-plugin": "^3.2.0",
    "ts-loader": "^6.0.2",
    "typescript": "^3.5.1",
    "webpack": "^4.33.0",
    "webpack-cli": "^3.3.3",
    "webpack-dev-server": "^3.7.1"
  },
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  }
}

ディレクトリとファイルの準備

使うライブラリの準備は出来たので、ディレクトリとファイルを用意していきます。
コードを書いていくsrcディレクトリとビルド後のファイルを吐き出すdistディレクトリを作ります。
$ mkdir src
$ mkdir dist

今回はビルドしたファイルをgitの管理下に置く必要がないので、.gitignoreに追記しておきましょう。
$ echo dist >> .gitignore

次にwebpackの設定ファイルとtypescriptの設定ファイルを作っておきましょう。
$ touch webpack.config.js
$ touch tsconfig.json

それでは準備完了です。VScodeを開いて設定していきます。
$ code .

tsconfigの設定

初めてのtypescriptでどう設定すればいいのやら……という感じですが、公式ドキュメントを読みひとまず適当に書いています。後々変わっていくと思います。

tsconfig.json

{
    "compilerOptions": {
        "strict": true,
        "noUnusedLocals": true,
        "outDir": "./dist",
        "sourceMap": true,
        "lib": [
            "dom",
            "es2018"
        ],
        "module": "ES2015",
        "target": "es5",
        "jsx": "react",
        "typeRoots": [
            "node_modules/@types"
        ]
    },
    "include": [
        "src/**/*"
    ],
    "exclude": [
        "node_modules"
    ],
}

ひとまず厳し目（？）のルールで書いてみることにします。
まだしっかりとオプションがわかっているわけではないので、都度調べながら進めます。

webpackの設定

ts-loaderを使う設定、dev-serverの設定を入れていきます。
今回は簡単にハローワールドをすることが目的なのでhtml-webpack-pluginで、htmlを吐き出してもらいます。

webpack.config.js

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

module.exports = {  
    mode: process.env.NODE_ENV || "development",
    entry: ["./src/index.tsx"],
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
  
    devtool: 'source-map',
    
    plugins: [
        new HtmlWebpackPlugin({
            title: "sample-react-ts",
            filename: "index.html",
            template: "src/index.html"
        })
    ],

    resolve: {
      extensions: ['.ts', '.tsx', '.js']
    },
  
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          use: [
            {loader: 'ts-loader'}
          ]
        }
      ]
    },
    devServer: {
        open: true,
        contentBase: path.resolve(__dirname, 'dist'),
        port: '8001'
    }
  };

ここでmodeの設定につまずいたのは秘密です。

Reactの中身とhtmlテンプレートを書く

src下にindex.tsxとindex.htmlを作成しましょう。

index.tsx

import * as React from 'react';
import { render } from 'react-dom';

const Main: React.FC = () => (
    <div>Hello, Happy World!</div>
);

render(<Main />, document.getElementById('root'));

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
      <div id="root"></div>
  </body>
</html>

FCにしたことに特に意味はありません。

最後に起動スクリプトを設定しましょう

ここまで来たらあと少しです。
package.jsonに以下のscriptsを追加します。

package.json

{
  "scripts": {
    "dev": "webpack-dev-server --hot --inline",
    "build": "webpack"
  }
}

これで起動できるはずです。

yarn dev

デフォルト設定しているブラウザで以下のように表示されたら成功です。お疲れ様でした。

ここまでうまくいったら最後にpushしておきましょう。
$ git add .
$ git push

おわりに

冗長に書きすぎた感、かつ細かいところ書いてない感がすごいです。
はじめての技術備忘録投稿なのでおおめに見ていただけると……
なにげにwebpackの設定で詰まったり、tsconfigでつまずいたりと時間かかりました。
やっぱりスターター的なものは便利ですが、こういった経験は必要だなぁと身にしみました。

動かねぇぞ！　間違えてるぞ！！　という指摘お待ちしてます。

ひとまず以下リポジトリ公開してます。
https://github.com/savacan/sample-react-ts

次はrouter導入やredux導入、またはstyle系ライブラリの導入ができればいいかなぁと思っています。

ps. 僕はこころ派です。