MonacaアプリをCoffeeScriptで作ってみよう
Monaca Localkitを使うと、これまでにないほど開発環境の自由度が上がります。そこで今回はJavaScriptの代替言語にあたるCoffeeScriptを使ってみたいと思います。
要件
- Gulpを使ってCoffeeScriptからJavaScriptには自動変換する
- 複数のCoffeeScriptファイルを一つにまとめて処理するようにする（HTMLで都度ファイルを読み込まなくても良いように）
- 開発ツール用にSourceMapファイルを生成する
この作業を行うにあたって、Node.jsはインストール済みであることとします。
LocalKitでプロジェクトを作成する
まず最初にMonaca LocalKitを使ってプロジェクトを作成します。今回はHello World Appを使っています。作成するとこのようなファイル構成になっているかと思います。
Node.jsでライブラリをインストールする
まずはMonacaプロジェクトのトップディレクトリでnpm initを実行します。
npm init
ウィザードに沿って進めていってください。
次にライブラリをインストールします。
$ npm install gulp coffee-script \
gulp-coffee gulp-concat \
gulp-plumber gulp-sourcemaps --save-dev
インストールしたライブラリについて解説します。
- gulp : Node.js用のタスクランナーです。設定に沿って様々な処理を自動実行してくれます。
- coffee-script : CoffeeScriptをJavaScriptに変換するの使います。
- gulp-coffee : CoffeeScriptをGulpの中から使いやすくするライブラリです。
- gulp-concat : 複数のファイルを連結してくれるGulpプラグインです。
- gulp-plumber : Gulpの途中で処理がエラーを起こしても継続してくれるプラグインです。Watch（ファイル変更の監視）用です。
- gulp-sourcemaps : CoffeeScriptのSourceMapを生成するGulpプラグインです。
Gulpの設定ファイルを作成
今回はCoffeeScriptなので、Gulpの設定ファイルもgulp.coffeeとしてCoffeeScriptで記述したいと思います。
内容は次のようになります。 www/src/以下にあるcoffeeという拡張子のファイルを監視します。これらのファイルが更新されるとタスク名jsと書かれている処理が実行されます。
gulp = require 'gulp'
coffee = require 'gulp-coffee'
concat = require 'gulp-concat'
plumber = require 'gulp-plumber'
sourcemaps = require 'gulp-sourcemaps'
coffee_path ='./www/src/*.coffee'
gulp.task 'js', ->
gulp.src coffee_path
.pipe plumber()
.pipe sourcemaps.init
loadMaps: true
.pipe coffee
bare: true
.pipe concat 'js/app.js'
.pipe sourcemaps.write '.',
addComment: true
sourceRoot: '/src'
.pipe gulp.dest './www'
gulp.task 'watch', ['build'], ->
gulp.watch coffee_path, ['js']
gulp.task 'build', ['js']
gulp.task 'default', ['build']
SourceMapファイルの初期化やCoffeeScriptからJavaScriptへの変換を行った後、www/js/app.jsというファイルで書き出しています。
試してみる
では実際に試してみます。 www/src/hello.coffee というファイルを作成します。Monacaデバッガーの場合はdeviceready、Monaca Localkitのプレビューで確認する場合はDOMContentLoadedをイベント登録しておきます。
onDeviceReady = ->
console.log "Hello"
event = if typeof cordova == 'undefined' then 'DOMContentLoaded' else 'deviceready'
document.addEventListener event, onDeviceReady, false
www/index.html も修正して www/js/app.js を読み込むようにしておきます。
<script src="js/app.js"></script>
これで準備は完了です。Gulpを実行します。
$ node node_modules/gulp/bin/gulp.js watch
起動したら、Monaca Localkitのプレビューを押して、ブラウザで結果を確認します。DevToolsも立ち上がって、コンソールにHelloと出ればOKです。
Sourcesタブでsrc/hello.coffeeを開いて、ブレークポイントをチェックするとちゃんと止まるのが確認できるはずです。
CoffeeScriptを使うとJavaScriptの括弧の多さから解放されたり、ループ処理が楽に書けるようになります。特にRubyやPythonに慣れた人にとっては書きやすくなるでしょう。
TypeScriptはMonaca IDEでサポートしていますが、CoffeeScriptを使って生産性を上げたいという方はMonaca Localkitをぜひご利用ください！
