Asial Blog

Recruit! Asialで一緒に働きませんか?

Monacaアプリのライブラリをnpmで管理しよう

カテゴリ :
Monaca
タグ :
JavaScript
npm

JavaScriptのライブラリ管理としてはBowerがよく使われてきましたが、最近ではnpmを使ってパッケージ管理することが増えています。数多くのライブラリがnpmにも対応しており、Node.jsがあればデフォルトでnpmが入ってくれるので使うのも容易です。



そこで今回はMonacaアプリ開発においてパッケージ管理をnpmで行う方法を紹介します。なお、利用に際してはMonaca Localkitを前提としています。また、Node.jsは予めインストールされていることとします。



LocalKitでプロジェクトを作成する



まず最初にMonaca LocalKitを使ってプロジェクトを作成します。今回はHello World Appを使っています。作成するとこのようなファイル構成になっているかと思います。





jQueryを使ってみる



今回は試しとしてjQueryをインストールしてみましょう。最初にMonacaアプリのルートディレクトリでnpm initを実行します。



  1. npm init

色々聞かれますが、ウィザード方式に沿って進めていってください。ではjQueryをインストールします。



  1. npm install jquery --save

インストールが終わったら、JavaScriptを作成します。 www/src/hello.js とします。



  1. var $ = require('jquery');
  2.  
  3. var onDeviceReady = function() {1
  4.   console.log($);
  5.   console.log("Hello World");
  6. }
  7.  
  8. event = (typeof cordova == 'undefined') ? 'DOMContentLoaded' : 'deviceready';
  9.  
  10. document.addEventListener(event, onDeviceReady, false);

ここで注意が必要なのは、require('jquery')となっている点です。もちろん、通常のJavaScriptのままではこれは実行できません。



Browserifyを使う



そこでパッケージの解決に使うのがBrowserifyです。こちらもnpmを使ってインストールします。



  1. npm install -g browserify

これで準備できました。先ほど作成したJavaScriptを指定してコマンドを実行します。



  1. browserify www/src/hello.js -o www/js/app.js

このように実行すると、www/js/app.jsというファイルが生成されます。このファイルは先ほどのrequireを解決した状態になっています。



実行してみる



ではこのapp.jsをHTMLから読み込んで、Monaca Localkitでプレビューを実行してみましょう。



  1. <script src="js/app.js"></script>

プレビューを開いた時、以下の画像のようにjQueryオブジェクトが表示されるはずです。ちゃんとライブラリが読み込めているのが分かります。








今はBowerも使えますが、npmでパッケージを提供し、Node.jsとブラウザ両方で動作するライブラリも増えています。BowerはMonaca IDEでも使えますが、npmは使えません。もしnpmを使いたい場合はMonaca Localkitを使ってみてください。



Monaca Localkit - ローカル型HTML5ハイブリッドアプリ開発ツール