MonacaアプリをECMAScript6で書いてみよう
今、JavaScriptの主流はECMAScript5となっています。色々と書きづらい点も多く、そのためにCoffeeScriptやTypeScriptのような代替言語が生み出されています。書き方の他、クラスや定数などの機能が不足している感も否めません。
それを解決してくれるのがECMAScript6になります。いち早く体験するにはBabelが良いのは以前も書きましたが、今回はMonacaアプ リでBabelを利用する方法を紹介します。なお、利用に際してはMonaca Localkitを前提としています。また、Node.jsは予めインストールされていることとします。
LocalKitでプロジェクトを作成する
まず最初にMonaca LocalKitを使ってプロジェクトを作成します。今回はHello World Appを使っています。作成するとこのようなファイル構成になっているかと思います。
Gulpなどをインストールする
Babelを使う際にはGulpを使ってECMAScript6から通常のJavaScriptへの変換を自動化するのがお勧めです。そこでGulpなど必要なライブラリをインストールします。まず最初にnpm initを実行しておきます。
npm init
ではライブラリをインストールします。
npm install --save-dev gulp gulp-babel \
babel-preset-es2015 gulp-sourcemaps \
gulp-concat
インストールしているライブラリを解説します。
- gulp : Node.js用のタスクランナーです
- gulp-babel : BabelのGulp用プラグインです
- babel-preset-es2015 : Babelを使うことを指定します
- gulp-sourcemaps : ECMAScript6のソースマップを生成しています
- gulp-concat : 変換されたJavaScriptファイルを連結しています
Gulpファイルを記述する
Babelを使うための設定を行います。今回はGulpの設定もECMAScript6で書きたいと思います。そこでまず package.json に下記の設定を追加します。
"babel": {
"presets": ["es2015"]
}
この指定があることでGulpがデフォルトでECMAScript6の記法を理解してくれます。Babelを使う場合、ファイル名は gulpfile.babel.js になりますので注意してください。例えば次のような内容になります。
import gulp from 'gulp'
import sourcemaps from 'gulp-sourcemaps';
import babel from 'gulp-babel';
import concat from 'gulp-concat';
const file_path ='./www/src/**/*.js';
gulp.task('js', () => {
return gulp.src(file_path)
.pipe(sourcemaps.init())
.pipe(babel({
presets: ['es2015']
}))
.pipe(concat('all.js'))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('www/js'));
});
gulp.task('watch', () => {
gulp.watch(file_path, ['js'])
});
gulp.task('build', ['js']);
gulp.task('default', ['build', 'watch']);
importが使えること、functionという記述が省略できるのがECMAScript6らしいところでしょうか。
試してみる
今回の設定の場合、www以下にsrcというフォルダを作成し、そこにJavaScriptを記述していきます。例えば次のようになります。functionの省略は先ほど同じで、クラスやテンプレートも使っています。
var onDeviceReady = () => {
const hello = new Hello({name: "MOONGIFT"})
hello.say();
};
class Hello {
constructor(options) {
this.options = options;
}
say() {
console.log(`Hello World, ${this.options.name}`);
}
}
var event = typeof cordova === 'undefined' ? 'DOMContentLoaded' : 'deviceready';
document.addEventListener(event, onDeviceReady, false);
そしてgulpコマンドを打つとwww/js/all.jsというファイルが生成されます。今後はファイルの追加、変更をウォッチしていますので気にせずプログラミングが続けられます。
後はこの生成されたファイルをHTMLから読むようにします。複数のJavaScriptファイルであっても連結されますので、この1ファイルだけ読み込めばOKです。
<script src="js/all.js"></script>
実際にアプリをプレビューで開くと、コンソールに次のように表示されるはずです。ECMAScript6がJavaScriptに変換され、テンプレートメッセージも使われています。
ソースマップファイルも出力しているので、ECMAScript6側のコードでブレークポイントの挿入が可能です。
Babelを使うことでよりモダンなJavaScriptの書き方できるようになりま す。これまで感じていた機能不足感、書きづらさも解消されてくるでしょう。ぜひMonacaアプリでも使ってみてください。
