Webの勉強はじめてみた その31 〜クライアントのフレームワーク〜

N予備校「プログラミング入門Webアプリ」を受講しています。
今回は第4章7,8節です。

モジュールバンドラー

複数ファイルのJavaScriptを1つにまとめられる
Node.jsのコアモジュールをブラウザでも利用できる

webpack

モジュールバンドラーとしてwebpack を使用。
babel-loaderも同時にインストール。

yarn add webpack@4.26.1 webpack-cli@3.1.2 @babel/core@7.1.6 @babel/preset-env@7.1.6 babel-loader@8.0.4 --dev

babel-loader

• 最新のJavaScriptで書かれたコードをブラウザが実行できるバージョンにコンパイルするモジュール

webpackの設定ファイル

webpack.config.js

module.exports = {
  context: __dirname + '/app',
  entry: './entry',
  output: {
    path: __dirname + '/public/javascripts',
    filename: 'bundle.js'
  },
  mode: 'none',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
};

__dirname

• 現在の場所を示す既に用意された変数(定数？)
  mode
• bundle.jsの圧縮の方法
  test
• 正規表現を使うときの決まり文句
  exclude
• 外部ファイル。今回はnode_modulesから引っ張ってくる

entry.js

'use strict';
import dc from 'damage-calc';
import crypto from 'crypto';

const root = document.getElementById('root');
root.innerHTML = 
  `<p>
    攻撃力 100, 防御 50, 防御貫通 30 のダメージは 
    ${dc.effectiveDamage(100, 50, 30)}
  </p>
  <p>
    ${crypto.randomBytes(8).toString('hex')}
  </p>
  `;

importで書かれたモジュールがbundle.jsに書き込まれる。

npx webpack

webpack.configの内容をもとに、bundle.jsに出力。

expressで作られたlayout.pugを変更

layout.pug

script(defer, src='/javascripts/bundle.js')

defer属性

• スクリプトを文書の解析完了後に JavaScript を実行することをブラウザに示す属性。ページ表示速度が向上する。

jQuery

HTML の文章の横断や操作、イベントハンドリング、アニメーションなどを 行うための簡単な API を提供するライブラリ

インストール。

yarn add jquery@3.4.1

entry.js

import $ from 'jquery';

const block = $('#block');
const scalingButton = $('#scaling-button');

scalingButton.click(() => {
  block.animate({ width: '200pt', height: '200pt' }, 2000);
  block.animate({ width: '100pt', height: '100pt' }, 2000);
});

clickは古いらしい。

entry.js

scalingButton.on('click', () => {
  block.animate({ width: '200pt', height: '200pt' }, 2000);
  block.animate({ width: '100pt', height: '100pt' }, 2000);
});

まとめ

この辺り、ちょっとサーバーとクライアントの境が自分の中で曖昧になってきてる。整理しないと。