Wijmoクイックスタート with npm！

※2020年2月時点における最新の技術と弊社製品で更新した内容はこちらです。

3月28日、弊社はJavaScriptライブラリ「Wijmo」の最新バージョン「2018J v1」をリリースしました。今回はこの「2018 v1」で追加された機能の中から、JavaScript開発者には馴染みが深いと思われる「npm対応」をピックアップし、ご紹介したいと思います。

ご存知ない方のため、はじめに簡単なご説明をすると「npm」はNode.jsのパッケージ管理ツールです。

通常、フロントエンド開発でJavaScriptライブラリを使用する場合、配布元からライブラリを取得し開発環境に配置する必要がありますが、Node.jsを使った開発でnpmを利用するとそのような手間がなくなり、CLI（コマンドラインインターフェイス）からのコマンド実行ひとつで、ライブラリのダウンロードと配置ができるようになります。

Wijmoは「2017J v3」までnpmに未対応だったため、Node.jsを使ったプロジェクト構築においてWijmoを使用する場合は、製品モジュールを開発環境に手動配置する作業が必要でした。新しくnpm対応を行なったWijmo「2018J v1」を使用すると、この作業をどのくらい簡略化できるでしょうか？

Wijmoの「2018 v1」とnpmを利用し、以前に当ブログでご紹介した「Wijmoクイックスタート」を再度、実践してみたいと思います。

プロジェクトの作成

コマンドプロンプト／ターミナルでプロジェクトのフォルダを作成して、フォルダに移動します。

mkdir sample
cd sample

npm initコマンドを実行して、package.jsonファイルを作成します。途中、プロジェクトの設定についていくつか質問されますが、Enterを押してすべて既定値を選択して構いません。

npm init

webpackとwebpack-cliをインストールします。また、cssファイルをwebpackでバンドルできるようにするために、style-loaderとcss-loaderもインストールします。なお、以前ご紹介した「Wijmoクイックスタート」でwebpack-cliのインストールは必要ありませんでしたが、2018/2にリリースされたwebpack 4の利用では、新たにwebpack-cliのインストールも必要となります。

npm install --save-dev webpack webpack-cli style-loader css-loader

webpackの設定ファイル（webpack.config.js）を作成して、下記のコードを追加します。

module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
},
]
}
};

package.jsonファイルのscriptに、webpackのバンドル処理とindex.htmlのコピー処理を追加します。コマンドプロンプト（Windows）とターミナル（Mac）では、ファイルコピーに利用できるコマンドが異なるので、環境に応じ以下のように書き分けます。

Windows コマンドプロンプトで実行する場合

"scripts": {
"build": "webpack && copy index.html dist\\index.html"
},

macOS ターミナルで実行する場合

"scripts": {
"build": "webpack && cp index.html dist/index.html"
},

index.htmlファイルとsrc/index.jsファイルを作成します。

ここまではnpmとwebpackによる一般的なJSアプリの作成手順で「Wijmoクイックスタート」の内容と同様です。ここからnpmによるWijmoのインストールとその後の利用手順を解説します。

Wijmoのインストールと利用

npmでWijmoをインストールします。

npm install --save wijmo

index.htmlファイルに、Wijmoコントロールを表示するためのdiv要素と、webpackバンドルファイルの参照を追加します。

<head>
<meta charset="utf-8">
<title>
Wijmo with npmサンプル
</title>
</head>
<body>
<div id="inputDate"></div>
<script src="main.js"></script>
</body>

index.jsファイルに下記のコードを追加します。

import 'wijmo/styles/wijmo.css';
import 'wijmo/cultures/wijmo.culture.ja';
import * as wijmoInput from 'wijmo/wijmo.input';
var inputDate = new wijmoInput.InputDate('#inputDate');

下記のコマンドを実行してwebpackのバンドル処理を実行すると、distフォルダにファイルが生成されます。

npm run build

dist/index.htmlファイルを開くと、Wijmoコントロールを表示できることと、index.htmlとmain.jsの2つのファイルだけ読み込まれていることが確認できます。

さいごに

今回のプロジェクト作成では、以前にはあった以下のような作業・設定が不要になっています。

手動によるWijmoの本体モジュール配置
手動によるWijmoのスタイルファイル、カルチャーファイルの配置
script-loaderの利用設定

npm対応によって手動によるモジュールやファイル配置の必要がなくなり、またプロジェクトを作成する際に必要な設定の量も少なくなりました。

Wijmoがnpmに対応したことにより、Node.jsを使った開発において開発環境がスムーズに構築できるようになったことがお分かりいただけたかと思います。

製品サイトでは、Wijmoの機能を手軽に体験できるデモアプリケーションやトライアル版も公開しておりますので、こちらもご確認ください。

また、ご導入前の製品に関するご相談、ご導入後の各種サービスに関するご質問など、お気軽にお問合せください。

＼この記事をシェアする／