ゆるふわエンジニアのブログ

行ったこと、調べたこと等をつらつらと書いていくかもしれません。

webpackで本番用と開発用にビルド方法を切り替える

本記事では、webpackで本番用と開発用にビルド方法を
切替える方法を紹介していきます。

本記事の内容です。

本番用ビルド設定

webpack.config.jsに、mode行を追加します。
内容は、下記の通りです。

module.exports = {
 
    // メインとなるJavaScriptファイル(エントリーポイント)
    entry: `./js/index.js`,

    // 下記の1行を追加する。値は'production'。
    mode: 'production',

    // ファイルの出力設定
    output: {
      //  出力ファイルのディレクトリ名
      path: `${__dirname}/dist`,
      // 出力ファイル名
      filename: 'main.js'
    },
  };

上記の設定でビルドを行うと最適化された状態でjsファイルの出力が行われます。
また、mode行を省略した時も、上記と同じ設定でビルドされるようです。

開発用ビルド設定

webpack.config.jsに、mode行およびdevtool行を追加します。
内容は、下記の通りです。

module.exports = {
 
    // メインとなるJavaScriptファイル(エントリーポイント)
    entry: `./js/index.js`,

    // 下記の1行を追加する。値は'development'。
    mode: 'development',
   
    // 下記の1行を追加する。値はお好みで。
    devtool: 'cheap-module-eval-source-map',

    // ファイルの出力設定
    output: {
      //  出力ファイルのディレクトリ名
      path: `${__dirname}/dist`,
      // 出力ファイル名
      filename: 'main.js'
    },
  };

上記の設定でビルドを行うと、ブラウザの開発者ツール上でデバッグ可能な形で
jsファイルが出力されます。
ブラウザ上でソースコードを確認、デバッグ実行を行う際は、
webpack://
という場所にファイルが出力されますので、注意してください。(Chromeで確認。)
IE11の場合は、jsファイルを列挙した際にそのまま表示されるようです。

開発用ビルド設定のdevtoolについて

上記で説明したdevtoolの値には、下記サイトで説明されている値を設定することができます。
Devtool

特に好みが無ければ、上記と同じ
cheap-module-eval-source-map
で良いと思います。

webpackを使用してjsファイルをまとめる方法

本記事では、webpackを使用してjsファイルを
まとめる方法を紹介していきます。

本記事の内容です。

webpackって何?

簡単に説明しますと、複数のリソースファイル(jsファイル、cssファイル、画像ファイル等)を
まとめた配布物を生成するビルドツールです。
これを使用すると、複数のファイルを配布する必要が無くなり、
また、ブラウザでファイルを読み込む時に複数のファイルを読み込む必要が
無くなるため、パフォーマンス向上を図れます。

また、公式サイトは下記になります。
webpack.js.org

webpackを使用する準備

コマンドプロンプトを開き、webpackを使用する対象の
ソースコードが存在するフォルダへ移動します。
その後、下記のコマンドを実行して、package.jsonを生成します。

npm init -y

webpackのインストール

package.jsonの生成が終わったら、次は、下記のコマンドを実行して
webpackを使用するためにwebpack本体のインストールを行います。

npm i -D webpack webpack-cli

webpackの設定ファイル作成

webpackのインストールが終わったら、package.jsonが存在するフォルダに
webpackの設定ファイル(webpack.config.js)を作成します。
下記の内容は、index.jsをメインにdistフォルダへ、
main.jsという名前で複数のjsファイルをまとめた結果を出力するようになっています。

module.exports = {
 
    // メインとなるJavaScriptファイル(エントリーポイント)
    entry: `./js/index.js`,

    // ファイルの出力設定
    output: {
      //  出力ファイルのディレクトリ名
      path: `${__dirname}/dist`,
      // 出力ファイル名
      filename: 'main.js'
    },
  };

JavaScriptソースコードの準備

今回は、index.jsとindex2.jsという2つのファイルを用意し、1つにまとめてみます。
それぞれのファイルの内容は、下記の通りです。

index.js

import * as hogeFile from './index2';

$(function() {
    hogeFile.hoge();
    hogeFile.fuga();
});

index2.js

export function hoge() {
    alert('hoge');
}

export function fuga() {
    alert('fuga');
}

ビルド

下記のコマンドを実行し、ビルドを行います。

npx webpack

以上で、複数のjsファイルをまとめることができます。

jsファイルをまとめた結果

最後に、参考までに今回jsファイルをまとめた結果を下記に記載しておきます。

!function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=0)}([function(e,t,r){"use strict";r.r(t),$(function(){alert("hoge"),alert("fuga")})}]);

JavaScriptの処理をブラウザ上で止めてデバッグする方法

本記事では、JavaScriptの処理をブラウザ上で止めて、
デバッグする方法について紹介していきます。

本記事の内容です。

JavaScriptソースコードに一文加える

JavaScriptソースコード内に、
debugger;
という一文を加えます。
すると、後述するブラウザの開発者ツールを開いた状態で、
debugger; の所で処理を止めることができます。
(ブレークポイントを設定した時と同じ動きになります。)

$(function() {
    // 下記の debugger; という一文を加えると、
    debugger; // 処理がここで止まる
    alert('debug!');
});

ブラウザの開発者ツールを開く

ブラウザを開き、F12を押し、開発者ツールを開きます。
その後、該当するJavaScriptの処理を実行させると、
debugger; の所で処理が止まり、そこからステップ実行等行えるようになります。
後は状況に応じてF10でステップ実行するなり、
F11で関数内にステップインするなり、
F8で処理を実行するなり、ご自由にどうぞ。

Tomcatのタイムゾーン設定(Eclipse)

本記事では、EclipseでのTomcatタイムゾーン設定について紹介していきます。

本記事の内容です。

Tomcatタイムゾーン設定

Tomcatの「起動構成を開く」→
「構成の編集」ダイアログで「引数」タブを開く→
VM引数」に下記を貼付ける
(下記では、UTCに設定しています。)

-Duser.timezone=Etc/UTC

設定可能と思われるタイムゾーンの一覧は、下記ページに列挙されています。
(数が多かったので、リンクを貼るだけにしておきます。)
Java – Display list of TimeZone with GMT – Mkyong.com

これで、Tomcatタイムゾーンを設定することができます。

Tomcatのログ出力設定(Eclipse)

本記事では、EclipseでのTomcatのログ出力設定について紹介していきます。

本記事の内容です。

Tomcatのログ出力設定

Tomcatの「起動構成を開く」→
「構成の編集」ダイアログで「引数」タブを開く→
VM引数」に下記を貼付ける

-Djava.util.logging.manager=org.apache.juli.ClassLoaderLogManager -Djava.util.logging.config.file="%CATALINA_BASE%/conf/logging.properties"

これで、Tomcatの起動に失敗した時等、
Tomcatのlogsフォルダにログが出力されるようになります。

動的に後から追加したDOM要素にイベントを設定する(jQuery)

本記事では、動的に後から追加したDOM要素に
イベントを設定する方法を紹介します。

本記事の内容です。

何がしたいのか?

動的に後から追加したDOM要素にも動的にイベントを設定したい。
今回は、hoge-textの後ろに動的にfuga-textを追加し、
hoge-textとfuga-textに対し、同じイベントを設定してみます。

駄目なソースコード

HTML

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="js/jquery-3.3.1.min.js"></script>
        <script src="js/index.js"></script>
    </head>
    <body>
        <div id="container">
            <input type="text" id="hoge-text">
        </div>
    </body>
</html>

JavaScript

$(function() {
    // この時点で生成されているコントロールにはイベントが設定される
    $('input').on('input', function() {
        console.log(this.value);
    });

    // ここで追加したコントロールにはイベントが設定されない
    $('#container').after('<input type="text" id="fuga-text">');
});

うまくいくソースコード

HTML
駄目なソースコードの時と同じです。

JavaScript

$(function() {
    // ドキュメント上すべてのinput要素に対して
    // inputイベントを設定する
    // onの第1引数にイベント名を
    // 第2引数に設定対象のid等を記述する
    $(document).on('input', 'input', function() {
        console.log(this.value);
    });

    // ここで追加したコントロールにもイベントが設定される
    $('#container').after('<input type="text" id="fuga-text">');
});

JavaScriptのlinqで使用できる関数一覧

JavaScriptlinqで使用できる
関数の一覧を作成したので、載せておきます。

本記事の内容です。

使用できる関数一覧

関数名 引数
aggregate seed, func, resultSelector
all predicate
alternate alternateValueOrSequence
any predicate
asEnumerable
average selector
buffer count
cast
catchError handler
choose selector
concat
contains value, compareSelector
count predicate
defaultIfEmpty defaultValue
distinct compareSelector
distinctUntilChanged compareSelector
doAction action
elementAt index
elementAtOrDefault index, defaultValue
except second, compareSelector
finallyAction finallyAction
first predicate
firstOrDefault predicate, defaultValue
flatten
force
forEach action
groupBy keySelector, elementSelector, resultSelector, compareSelector
groupJoin inner, outerKeySelector, innerKeySelector, resultSelector, compareSelector
indexOf item
insert index, second
intersect second, compareSelector
isEmpty
join inner, outerKeySelector, innerKeySelector, resultSelector, compareSelector
last predicate
lastIndexOf item
lastOrDefault predicate, defaultValue
letBind func
log selector
max selector
maxBy keySelector
memoize
merge
min selector
minBy keySelector
ofType type
orderBy keySelector
orderByDescending keySelector
pairwise selector
partitionBy keySelector, elementSelector, resultSelector, compareSelector
reverse
scan seed, func
select selector
selectMany collectionSelector, resultSelector
sequenceEqual second, compareSelector
share
shuffle
single predicate
singleOrDefault predicate, defaultValue
skip count
skipWhile predicate
sum selector
take count
takeExceptLast count
takeFromLast count
takeWhile predicate
toArray
toDictionary keySelector, elementSelector, compareSelector
toJoinedString separator, selector
toJSONString replacer, space
toLookup keySelector, elementSelector, compareSelector
toObject keySelector, elementSelector
trace message, selector
traverseBreadthFirst func, resultSelector
traverseDepthFirst func, resultSelector
union second, compareSelector
weightedSample weightSelector
where predicate
write separator, selector
writeLine selector
zip


JavaScriptで使用可能な関数のリファレンスが欲しいですね。
まぁ、.NETのLINQを移植したものなので、そちらを
確認したらよいのかもしれませんが。