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
で良いと思います。

2018-07-13

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

JavaScript webpack

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

本記事の内容です。

webpackって何？
webpackを使用する準備
webpackのインストール
webpackの設定ファイル作成
JavaScriptソースコードの準備
ビルド
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")})}]);

2018-07-12

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

JavaScript

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

本記事の内容です。

JavaScriptのソースコードに一文加える
ブラウザの開発者ツールを開く

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

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

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

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

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

2018-07-11

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

Eclipse Tomcat

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

本記事の内容です。

Tomcatのタイムゾーン設定

Tomcatのタイムゾーン設定

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

-Duser.timezone=Etc/UTC

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

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

2018-07-10

Tomcatのログ出力設定(Eclipse)

Eclipse Tomcat

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

本記事の内容です。

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フォルダにログが出力されるようになります。

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

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

Visual Studio CodeでHTML+CSS+JavaScriptの開発を行うためにインストールしているプラグイン

HTML関係

HTML Snippets

HTML Hint

CSS関係

IntelliSense for CSS class names in HTML

JavaScript関係

ES Lint

その他

Open in browser

Windows10(Build1803)でGoogle Chromeが正常に動作しない件

何が起こったのか？

どうしたらいいのか？

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

本番用ビルド設定

開発用ビルド設定

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

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

webpackって何？

webpackを使用する準備

webpackのインストール

webpackの設定ファイル作成

JavaScript ソースコードの準備

ビルド

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

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

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

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

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

Tomcatのタイムゾーン設定

Tomcatのログ出力設定(Eclipse)

Tomcatのログ出力設定

HTML関係

HTML Snippets

HTML Hint

CSS関係

IntelliSense for CSS class names in HTML

JavaScript関係

ES Lint

その他

Open in browser

何が起こったのか？

どうしたらいいのか？

本番用ビルド設定

開発用ビルド設定

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

webpackって何？

webpackを使用する準備

webpackのインストール

webpackの設定ファイル作成

JavaScriptソースコードの準備

ビルド

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

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

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

Tomcatのタイムゾーン設定

Tomcatのログ出力設定

JavaScript ソースコードの準備