[TASK]React 1-2. 開発環境とツール: webpack, Babel, ESLint, prettier

Wikiの項目

[TASK]React 1-2. 開発環境とツール: webpack, Babel, ESLint, prettier #35 https://github.com/darwin-education/training/issues/35

構成

用語解説
手順
- Webpack
  - Webpackの概要
  - Webpackの設定
  - Webpackの例
- Babel
- ESLint
- prettier

用語確認

webpack Webpackとは、 CSSや JavaScript、画像などWeb コンテンツを構成するあらゆるファイル(アセット)を「モジュール」という単位で取り扱い、「バンドル」という１つのファイルに最適な形で変換するためのツール。(引用：https://ferret-plus.com/6337) npm npmは無料で使える世界最大のソフトウェアレジストリであり、Node.jsのパッケージ管理システムである。Node.jsは、サーバ上で動作するJavaScriptであるが、Node.jsを使ったツールが開発されるようになると、これらを管理するバージョン管理システムの必要性が生まれた。(Wiki) npmはこれらの管理を簡易化するためのものであり、レジストリには80万以上のコードパッケージが含まれている。 Node.js Node.jsは、非同期型のイベント駆動のサーバサイドJavaScript 環境である。私自身よく理解できてないが、ウェブアプリケーションを高速・充実させるための仕組みを備えたスーパーjavascriptってところでしょうか。 Babel 次世代のJavaScriptの標準機能を、ブラウザのサポートを待たずに使えるようにするNode.js製のツール。 ESLint JavaScript のための静的検証ツール。 prettier コードフォーマッター。

手順

1. Webpack

i. Webpackの概要 基本的にJavascriptで長いコードを書くと、可読性が悪くなったり、バグが生まれやすくなったり、複数人でコードを書くことが難しくなる。しかし、Webpackの概念では、「必要な挙動ごと」に「コードを描き」、それを「最終的にまとめる（バンドル）」することで、先述の難点を補うことができる。さらには、JavaScriptモジュールをブラウザで扱える形に簡単に変換することができます。例えば、 JavaScriptだけでなく CSS、画像、Web フォント、音声、動画など、モジュール（アセット）として扱うことができる。最終的にこれらを１つの「バンドル」として出力することができる。

ii. Webpackの設定

Webpackを使うには、npm経由でダウンロード・インストールを行う。 Macではターミナル、Windowsならコマンドプロンプトに下記のコマンドを入力するだけでOＫ。

npm install -g webpack

次に、npmを初期化する。

npm init

すると、「package.json」というファイルが生成される。ここには、これから制作に必要とするパッケージ名とそのバージョンが記載される。バージョンを管理するメリットは、「パッケージAがバージョンアップした時」に発生するバグを回避することができる点である。自分が最初からアプリケーションを作成する場合は、ここに使用するパッケージを都度記載する。一方、既存するアプリケーションを応用して何か新しいものを作る場合は、このpackage.jsonから必要なモジュールを一括で閲覧、インポートすることができる（npm install）。

なお、Webpack本体をプロジェクトフォルダにもインストールする必要がある。

npm install --save-dev webpack

ちなみに、「 --save」は、モジュールをpackage.jsonに自動で書き込むときに使う。「-dev」は、開発用のモジュールの時に使用する。つまり、実際に公開する時には「--save-dev」で書かれたモジュールは閲覧者のもとには届かない。開発をスムーズにしたいためのモジュールである。

iii. Webpackの例

{
  "name": "resium-sample2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "types": "./src/types.d.ts",
  "scripts": {
    "start": "webpack-dev-server --progress",
    "test": "eslint .",
    "build": "webpack --mode production",
    "format:css": "prettier-stylelint --write '**/*.css'",
    "lint:css": "stylelint 'src/**/*.css'"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/sumakokima2/resium-sample2.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/sumakokima2/resium-sample2/issues"
  },
  "homepage": "https://github.com/sumakokima2/resium-sample2#readme",
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.3.1",
    "@babel/preset-react": "^7.0.0",
    "@types/cesium": "^1.47.3",
    "@types/react": "^16.8.3",
    "@types/react-dom": "^16.8.1",
    "@types/webpack-env": "^1.13.7",
    "babel-loader": "^8.0.5",
    "copy-webpack-plugin": "^4.6.0",
    "eslint": "^5.13.0",
    "eslint-plugin-react": "^7.12.4",
    "html-webpack-include-assets-plugin": "^1.0.7",
    "html-webpack-plugin": "^3.2.0",
    "ts-loader": "^5.3.3",
    "tslint": "^5.12.1",
    "tslint-config-prettier": "^1.18.0",
    "tslint-plugin-prettier": "^2.0.1",
    "tslint-react": "^3.6.0",
    "typescript": "^3.3.3",
    "webpack": "^4.29.3",
    "webpack-cli": "^3.2.3",
    "webpack-dev-server": "^3.1.14"
  },
  "dependencies": {
    "@types/styled-components": "^4.1.11",
    "cesium": "^1.54.0",
    "react": "^16.8.2",
    "react-dom": "^16.8.2",
    "react-hot-loader": "^4.6.5",
    "resium": "^1.2.1",
    "styled-components": "^4.1.3"
  }
}

2. Babel 従来のjavascriptの仕組みで考えると、「ブラウザがその挙動を許可していない場合」、「表示に不具合がでる」可能性がある。これらを回避するために、「対応外のブラウザでも動作できる」ように、製作者が書いた新しいjavascriptを「古い形式/サポートされている形式」に書き換えてくれる。つまり、製作者が書く「シンプルに簡素化されたハイスペックコード」を、「最も親切な、長いコード」に自動変換してくれるものと言い換えることができる。

npm install --save-dev babel

3. ESlint チームメンバー間で統一された美しいコードを生成することができる。私の場合、「);」を書き忘れてエラーが発生し、その発見に5分かかる　のような手間を格段に減らしてくれる便利ツールである。以下で利用可能になる。

npm install --save-dev eslint

開発用なので、「-dev」になる。

4. prettier コードフォーマッターであり、ソースコードを綺麗に整形してくれるツールである。 ESlintでも同様なことができるが、ESlintでは網羅していないもののフォローであったり、その確実性に評価がある。

npm install --save-dev prettier

詰まったところ

私の場合、理解に相当苦しみました。が、時間が理解を助けてくれました。たぶん、完全に理解できなくても、その先に進めると思います。

sumakokima2 / resium-sample2