『ネコミミでもわかるフロントエンド環境構築』を読む - 角谷鵜技術五十三次

『ネコミミでもわかるフロントエンド環境構築』を読む

https://gyazo.com/17b8f0adb1eba49da14e1592c968bec3

タイトル

ネコミミでもわかるフロントエンド環境構築

著者

年

2018

リソース

サークル詳細 | Monochrome | 技術書典

/icons/github.icon mo-no-chrome/nekomimi-frontend: 🐾ネコミミでもわかるフロントエンド環境構築

写経用リポジトリ

/icons/github.icon kadoyau/necomimi-frontend-wakaru: 🐾わかる（清楚）

実行環境

node v10.5.0

yarn 1.7.0

読む前の注意

頭から写経していくことが想定されているのでリポジトリは最終的な完成物がおいてあるので、コピペすると序盤はビルドが通りません

Babelの流れが早いので、deprecatedなものがあるかもしれない。インストールに関して詰まったら最新のドキュメントを眺めるのが鉄則

本の内容

第一章まずは準備から

yarnの利用が推奨されている

EditorConfigの設定

Visual Studio Codeのプラグインを入れた

第二章 JavaScriptを動かす

解説していること

JSをトランスパイルしてブラウザで読むまで

IE10以降なら基本的に動くES5をサポートすることを目指す

babel-preset-envの設定

Babelに取り込まれたようなので今やるなら yarn add --dev @babel/preset-env

babel-preset-env · Babel

READMEのyarnのコマンドに--saveオプションがついてるが、現時点でそのオプションは存在しない

yarn add | Yarn

ブラウザの指定が柔軟にできる。例えば

現行ブラウザのn世代前までサポート

Safariの7以降をサポート

Babel公式ではターゲットブラウザの指定はbrowserslistを利用することを推奨している

If you want to specify target browsers, we recommend using a .browserslistrc config, which is also used by many tools including Autoprefixer.

https://babeljs.io/docs/en/next/babel-preset-env.html

もし本書の方法と違って@babel/preset-envを入れた場合インストールコマンドはつぎのようにしないとバージョン違いでビルドできません

yarn add --dev "babel-loader@^8.0.0-beta" @babel/core webpack

詳しくは：https://github.com/babel/babel-loader#install

本書のとおりに進めるのがよさそう（自分は最新の@babel/preset-envを使った）kadoyau.icon

Webpackはv.3からconfigが不要でCLIからビルドなどできるようになったが、CSSを変換などしようとすると辛いので設定ファイルをつくる

関連：Webpackのコンフィギュレーション

kadoyau.icon

enforce.preの優先度をつけたいものが複数あったときに、その実行順序はどうなる？

useを使ってarrayをつっこめばよい（後ろから適用される）

yarn build:devでHello, Wolrdをビルドできるようになった

ブラウザで動作確認する

webpack-dev-serverとhtml-webpack-pluginを使う

webpack/webpack-dev-server: Serves a webpack app. Updates the browser on changes.

jantimon/html-webpack-plugin: Simplifies creation of HTML files to serve your webpack bundles

ホットリロード（再起動なしにモジュールを追加/削除する）を有効にするためにHMRプラグインを設定する

HotModuleReplacementPlugin

第三章 JavaScriptのためのパワフルなツール

ルールセットはeslint-config-airbnbを使う

airbnb/javascript: JavaScript Style Guide

eslintのpluginもいくつかいれている

BabelでトランスパイルをしているとESLintのパーサで対応できないことがあるのでBabel用のESLintのパーサをつかう

You only need to use babel-eslint if you are using types (Flow) or experimental features not supported in ESLint itself yet.

babel/babel-eslint: A wrapper for Babel's parser used for ESLint

.eslintrcを書く

手動でeslintを毎回かけたくないので、eslint-loaderを使って自動的にeslintがかかるようにする

webpack-contrib/eslint-loader: eslint loader (for webpack)

JSXやCSSにも対応しているコードフォーマッタ

eslint --fixを使わないのはCSSとかもコードフォーマットをかけたいから？kadoyau.icon

--writeはeslint --fixと同じようなもの

CLI · Prettier

型チェックツール

BabelでFlowのアノテーションを外すために babel-preset-flowを入れて設定を書く

本が書かれたあと？に変わっているらしく本家のdocだとインストールコマンドはkadoyau.icon

yarn add --dev @babel/preset-flow

babel-preset-flow · Babel

FlowをESLintでチェックするためにeslint-plugin-flowtypeを入れて設定を書く

gajus/eslint-plugin-flowtype: Flow type linting rules for ESLint.

.eslintrcの設定方法

除外対象等の設定を書く

Flow#5b373a3c3f442500001a917d

JS側にも設定が必要

第4章 Reactをはじめる

Reactの導入

BabelでReactのトランスコンパイルを行うためにbabel-preset-reactを導入する

babel-preset-react · Babel

本が書かれたあと？に変わっているらしく本家のdocだとインストールコマンドはkadoyau.icon

yarn add --save @babel/preset-react

serveでビルドしようとするとエラー

code:zsh

ERROR in ./src/js/index.js

Module build failed (from ./node_modules/babel-loader/lib/index.js):

Error: Plugin/Preset files are not allowed to export objects, only functions. In /Users/kadoyau/dev/necomimi-frontend-wakaru/node_modules/babel-preset-flow/lib/index.js

babel-preset-frowだけ@babel/preset-flowを利用しておらず旧バージョンを利用していたので差し替えたら動いた。本書の通りにすすめていればおきないはずkadoyau.icon

Reactコンポーネントを書く

HTMLのidにHeadingをアタッチする

https://gyazo.com/7292c98f899813a9716d1d4af1d7fa0a

第5章爆速でテストを書く

書籍の通りにやっていないと、yarn jestでコケる

code:zsh

Requires Babel "^7.0.0-0", but was loaded with "6.26.3". If you are sure you have a compatible version of @babel/core, it is likely that something in your build process is loading the wrong version. Inspect the stack trace of this error to look for the first entry that doesn't mention "@babel/core" or "babel-core" to see what is calling Babel.

yarn add --dev babel-jest 'babel-core@^7.0.0-0' @babel/core regenerator-runtimeをしたら通るようになった

参考：Getting Started · Jest

default importと named import

import - JavaScript | MDN

Reactコンポーネントのテストを書く

問題：大量のDOMがあったらDOMごとにassertionを書くことになってしまう

対応：スナップショットを使って前回実行時との差分をテストする

react/packages/react-test-renderer at master · facebook/react

yarn jest初回実行時にスナップショットが生成される。そのDOMと比較するテストを書く

このDOMが想定通り生成されていないと誤ったテストになるので、スナップショット自体の正しさの確認はしないとだめkadoyau.icon

もとのDOM生成を変更したらどうするの？

yarn jest -uでスナップショットをアップデートできる

kadoyau.iconがはまったこと

shellのブレース展開にひっかかって途中からエディタのeslintでは指摘されるのにyarn lint:jsでは指摘されず、おかしいな？となっていた

code:zsh

$ echo {js,jsx}

js jsx

$ echo {js, jsx}

zsh: parse error near `}'

code:bash

bash-3.2$ echo {js,jsx}

js jsx

bash-3.2$ echo {js, jsx}

{js, jsx}

空白を開けてはだめ🙅

#読書 #技術書典