「いまから始めるWebフロントエンド開発」の感想・備忘録1

posted with ヨメレバ

Amazonで見る

Kindleで見る

kindle本「いまから始めるWebフロントエンド開発」のまとめ。

点数

83点

感想

babelによるトランスパイルやbrowserifyやwebpackによるバンドルの説明がとてもわかりやすかった。

第1章の「JavaScriptの歴史」は勉強になった。
第2章ではいきなりReactとReduxが出てくるので、初心者には難しい内容だと思う。

ReduxとViewのつなぎこみのためにContainerを定義する設計は、参考になった。

モダンな開発環境

トランスパイル=babel

1. インストール
   npm install --save-dev @babel/core core-js@3 @babel/cli @babel/preset-env
   ※ 書籍内ではbabel, babel-cli, babel-preset-es2015となっているが古い
2. .babelrcの作成
   ※書籍内ではpresets: ["es2015"]となっているが古い。

{
  "presets": [[
    "@babel/preset-env", {
      "useBuiltIns": "usage",
      "corejs": 3
    }
  ]]
}

1. トランスパイル

npx babel first.js -o first_es5.js npx
babel second.js -o second_es5.js

import hello from './second';
hello();

export default function() {
  const str = 'hello';
  console.log(`${str} world`);
};

依存関係の解決=Browserify, Webpack

1. インストール(Browserifyの場合)
   npm install --save-dev browserify
2. first_es5.jsのrequire('./second');をrequire('./second_es5');に書き換える
3. バンドル実行
   npx browserify first_es5.js -o bundle.js

ビルドフローの簡易化

バンドル時にトランスパイルも行う

BabelでトランスパイルしてからBrowserifyやWebpackでバンドルするという作業を毎回行うのは面倒なので、Browserifyの場合はbabelify, Webpackの場合はbabel-loaderを使ってバンドルと同時にトランスパイルも行うのが一般的である。

1. npm install --save-dev babelify
2. npx browserify first.js -t babelify --outfile bundle2.js

Common JS

サーバサイドのNode.jsでは、module.exports.xxx = yyy;でエクスポート、require('hoge');でインポートすることができる。
BrowserifyやWebpackはこれらを解析してバンドルしてくれる。

ES ModulesからCommon JSへの変換

babelはES ModulesをCommon JSに変換（importをrequire関数に変換）するが、多くのブラウザはrequire関数に対応していないため、BrouwserifyやWebpackは事実上必須となっている。

WebpackはES Modulesをバンドルすることができ、ES Modulesの場合はTree Shakingが有効になるので、babel-loaderではmodules: falseとするべき。