Javascriptの基本

アロー関数と普通の関数の違い

new キーワードで呼び出すことはできません。

• アロー関数には Construct メソッドがなく、コンストラクタとして使用することはできません。
• newキーワードで関数を呼び出すことはできませんし、プロトタイプを構築する必要もないので、prototype属性はarrow関数の内部には存在せず、arrow関数はプロトタイプを持ちません。
• ES6の新しいnew.targetもないので、当然ながらsuper経由でプロトタイプ・プロパティにアクセスすることはできません。

  // アロー関数と通常の関数の違いの例
  var Foo = () => {};
  console.log(Foo.prototype); // undefined
  

thisバインディングを変更することはできません。thisバインディングは外側の非arrow関数によって決定されるため、call, apply, bindを使用しても影響しません。

• 関数 function
  1. 関数を new キーワードで呼び出すと、関数内の this は完全に新しいオブジェクトになります。
  2. applyメソッド、callメソッド、bindメソッドを使用して関数を呼び出し、作成する場合、関数内のthisはこれらのメソッドの引数として渡されるオブジェクトになります。
  3. 関数がオブジェクト内のメソッドとして呼び出される場合、関数内の this は関数を呼び出したオブジェクトです。
  4. 上記の規則に従わない方法で関数が呼び出された場合、thisの値はグローバルオブジェクトを指します。
  5. ブラウザ環境ではthisはウィンドウオブジェクトを指しますが、'use strict'モードではthisは未定義です。""" は未定義です。

は引数をサポートしていないので、スコープチェーンによっては外側の関数の引数を取得します。

• 正規関数
  • 関数のすべての引数を含む、クラス引数の配列オブジェクト。
  • 引数が明確に定義されていない場合によく使用されます。
• アロー関数
  • アロー関数は引数をサポートしない配列のようなオブジェクトです。
  • アロー関数の内部で引数を使用する場合、スコープチェイニングのルールに従って、常に最も近いアロー関数でない関数を探し、アロー関数でない関数の内部で実際に引数を使用します。
  • このため、ES6では不定形の引数の場合にも、このような引数の操作を行うことができます。

  // ...args 不確定パラメータを配列に変換する。
  // ただし、これは一度しか使用できず、すべてのパラメーターの最後にしか使えないので注意が必要だ。
  const add = (...args) => {
   return args.reduce((cur, i) => cur + i, 0)
  }
  add(5, 10, 15) // 30
  

名前付きパラメータの重複はサポートされていません。

• アロー関数は厳密モードでも非厳密モードでも名前付き引数の重複をサポートしませんが、従来の関数は厳密モードでのみ名前付き引数の重複をサポートします。

var a = (b, b)=>{
 b = 100
 console.log(this)
 console.log(b)
} // Uncaught SyntaxError: Duplicate parameter name not allowed in this context

暗黙のリターン

1. 関数の内部には常に戻り値が隠されており、何も定義されていない状態で関数を使用すると、実際にはデフォルトでundefinedが返されます。

function noReturn() {
 console.log('aaa')
 return // 手動で記述する必要はない。記述しない場合、デフォルトは次のようになる。
 // リターンが必要な関数がない場合、自動的に
}

1. アロー関数はreturnを保存します。これは、関数本体に1行しかコードがなくても、複数行書く必要があるような場合に便利です。
   • returnが値であれば、{}は必要ありません。
   • returnがリテラルの場合は、()を追加する必要があります。

     const add = (a, b) => a + b
     const obj = () => ({ a: 1 })
     

アレイの方法論

配列の浅いコピーメソッド

ウェブパック

webpackのパフォーマンス最適化 - ビルド速度

バベルローダーの最適化

module: {
	rules: [
 {
 test: /\.js$/,
 use: ['babel-loader?cacheDirectory'], // キャッシュを有効にする
 include: path.resolve(__dirname, 'src') // 範囲を定義する
 // // スコープを除外、インクルードとエクスクルードのどちらかを選ぶだけ
 // exclude: path.resolve(__direname, 'node_modeles')
 }
 ]
}

IgnorePlugin 無用なファイルを無視します。

// を無視する /locale 
new webpack.IgnorePlugin(/\.\/locale/, /moment/)
// ビジネスコードへの言語パックの動的導入
import 'moment/locale/ja-JP'

noParse はリパッケージを回避します。

• noParse はリパッケージを回避します。

module: {
 noParse: [/react\.min\.js$/]
}

• IgnorePlugin、noParseの違い：
  • IgnorePluginは直接導入されていません。
  • noParse（vue.min.jsのモジュール処理に似ています）は導入されていますが、パッケージ化されていません。

ハッピーパック多工程包装ツール

• JSシングルスレッド、マルチプロセス・パッケージングを実現
• ビルドスピードの向上

 const HappyPack = require('happypack')
 
 //  1 module.rules - .jsHappyPackインスタンスにidラベルを付与する
 {
 test: /\.js$/,
 use: ['happypack/loader?id=babel']
 }
 
 // ステップ2 happyPackでマルチプロセスパッキングを有効にする
 new HappyPack({
 // 現在のHappyPackは、idという一意の識別子で表され、特定のクラスのファイルを処理するために使用される。
 id: 'babel',
 // 何をすべきか.js ファイル、ローダーコンフィギュレーションと同じ
 loaders: ['babel-loader?cacheDirectory']
 })

ParalleUglifyPlugin によるマルチプロセスコード圧縮

• JSを圧縮するwebpack組み込みのUglifyツール
• JSシングルスレッド、オープンマルチプロセスコンプレッションの高速化
• happyPack と同じ。 マルチプロセス。

 // ParallelUglifyPluginを使って出力JSコードを並列に圧縮する。
 const ParallelUglifyPlugin = require('ParallelUglifyPlugin')
 
 new ParallelUglifyPlugin({
 // UglifyJSに渡されるパラメータ
 // 
 uglifyJS: {
 output: {
 beautify: false, // 最もコンパクトな出力
 comments: false // すべてのコメントを削除する
 },
 compress: {
 // すべてを削除する `console` ステートメント、IEブラウザと互換性がある
 drop_console: true,
 // 定義されているが一度しか使われない変数を含める。
 collapse_vars: true,
 // 複数回出現するが、参照される変数として定義されていない静的な値を抽出する。
 reduce_vars: true
 }
 }
 })

自動リフレッシュ

• 自動更新：ウェブページ全体が更新されます。
• 自動更新：ステータスは失われます

ホットアップデート

• ホットアップデート：ページを更新することなく、ステータスを失うことなく新しいコードが反映されます。
• HotModuleReplacementPlugin webpack/lib

// コンフィギュレーション インデックス イン エントリー
 index: [
 'webpack-dev-server/client?http://:80/',
 'webpack/hot/dev-server',
 path.join(srcPath, 'index.js')
 ]
 
 //  2
プラグインnew HotModuleReplacementPlugin()
//  3
追加するhot: true
//  4
追加するmodule.hotホットアップデートのトリガーが必要なスコープを決定する

DllPluginダイナミックリンクライブラリプラグイン

• 使用理由
  1. フロントエンドフレームワーク Vue, React サイズが大きい ビルドに時間がかかる
  2. 安定性が高く、バージョンアップが少ない
  3. 同じバージョンを一度だけビルド、毎回リビルドする必要なし
• webpackは組み込みのDllPluginをサポートしています！
  • DllPlugin - dllファイルをパッケージ化します。
  • DllReferencePlugin - dllファイルの使用
• 使用方法

//  webpack.dll.js  
const path = require('path')
const DllPlugin = require('webpack/lib/DllPlugin')
const { srcPath, distPath } = require('./paths')
module.exports = {
 mode: 'development',
 // JS エントリーファイルを実行する
 entry: {
 // React関連のモジュールを別のDLLに入れる。
 react: ['react', 'react-dom']
 },
 output: {
 // 出力DLLのファイル名。[name] は現在のダイナミック・リンク・ライブラリーの名前を表す。
 // つまり、リアクトと polyfill
 filename: '[name].dll.js',
 // すべての出力ファイルをdistディレクトリに置く
 path: distPath,
 // DLLを保持するグローバル変数の名前を格納する。 _dll_react
 // 接頭辞をつける理由 _dll_ グローバル変数の衝突を防ぐ
 library: '_dll_[name]',
 },
 plugins: [
 //   DllPlugin
 new DllPlugin({
 // ダイナミック・リンク・ライブラリのグローバル変数名は、ダイナミック・リンク・ライブラリのグローバル変数名と同じにする必要がある。 output.library の一貫性
 // このフィールドの値は出力の値でもある manifest.json ファイルの名前フィールドの値
 //   react.manifest.json   "name": "_dll_react"
 name: '_dll_[name]',
 // ダイナミックリンクライブラリの manifest.json(インデックスファイル) ファイル出力時のファイル名
 path: path.join(distPath, '[name].manifest.json'),
 }),
 ],
}

• DllReferencePlugin

 	plugins: [
 new webpack.DefinePlugin({
 // window.ENV = 'production'
 ENV: JSON.stringify('development')
 }),
 // 第三に、どのDLLを使うかをWebpackに指示する。
 new DllReferencePlugin({
 // リアクトDLLファイルの内容を記述する
 manifest: require(path.join(distPath, 'react.manifest.json')),
 }),
 ],

webpackのパフォーマンス最適化 - 出力コード

は英語の -ity、-ism、-ization に対応します。

1. 小さく梱包
2. ダブルローディングのない合理的な下請け
3. 高速化とメモリ使用量の削減

最適化手法