React入門その⑤ Webpackとbind(this)の撤廃

2020-01-032020-01-04

概要

• Reactの学習を続けていてWebpackを学習し、ようやく次のようなうっとおしいコードを書かなくてよい方法を試しました。

 export default class AddOption extends React.Component {
   constructor(props) {
     super(props);
     this.handleAddOption = this.handleAddOption.bind(this); // これが嫌！
     this.state = {
       error: undefined
     }; 

   handleAddOption(e) {
     ...
   }

結論

• 上記を次のようにすっきりと記述できました。 babel-plugin-transform-class-properties と下記に示す関連ツール及び設定により実現しています。

 export default class AddOption extends React.Component {
  state = {
    error: undefined
  };
  
  handleAddOption = (e) => { 
    ...
  }

• 上記の handleAddOption はアロー関数にしていますが、しなくてもエラーが出ない。なぜ？
• 以下、バージョンが最新でなかったりは、機会を見て更新したいと思います。

Webpackのインストール

• Webpackはモジュールバンドラ（多数のファイルを纏める）と呼ばれるツールの1種で、だいたい次のようなことがおこなえます。
  1. リソースを纏める
  2. 変更を関しし、タスクを再実行する
  3. Babelを用いたES5へのトランスパイル（変換）を実行できるため、ブラウザサポートを気にせず、最新のJavaScript機能を使用できる。
  4. インライン画像をデータURIに変換する（高速化）。
  5. JavaScriptからCSSを読み込むために、require()を使用できるようにする。
  6. 開発用Webサーバーを実行する。
  7. Hot Module Replacement (HMR, 稼働中のモジュール差し替え）
  8. 最初のページが巨大なJavaScriptファイルとならないよう出力ファイルを複数に分割する。
  9. Tree Shaking （使われるコードのみ残す）

インストール

> yarn add webpack webpack-cli --dev 
> yarn add webpack-dev-server
> yarn add babel-cli@6.24.1 // もっと新しい @bebel/cli がある。
> yarn add babel-core@6.25.0 // もっと新しい @babel/core がある。
> yarn add babel-loader@7.1.1
> yarn add babel-plugin-transform-class-properties

webpack.config.js

• 例えば、webpack.config.js で次のように設定。詳細はこちら参照。

 ：  
  devServer: {
    contentBase: path.join(__dirname, 'public')
  } 
： 

package.json

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

.babelrc

 {
    "presets": [
        "env",
        "react"
    ],
    "plugins": [
        "transform-class-properties"
    ]
}