Meteor 次期バージョン1.3の新機能・変更点について

はじめに

J-hack開発部の大城です。

先日、3/6にギークオフィス恵比寿で開催されましたJavaScriptフレームワークMeteor勉強会「Meteor 1.3について」 - connpassにて、Meteor の次期バージョンである1.3のテスト周りについて発表する機会をいただきました。

その時の発表資料をはこちら↓

この記事では、Meteor 次期バージョン1.3について、テスト周りも含めて1.3の新機能・変更点を紹介していきたいと思います。

Meteor 1.3の新機能・変更点

現在ベータ版が公開されている、Meteor の次期バージョン1.3では、次の3つが大きなトピックとしてあげられています。

• モジュール (Modules)
• テスト (Testing)
• モバイル (Mobile)

それぞれ簡単に見ていきましょう。

モジュール (Modules)

まず、モジュール機能に関して。

モジュールは ECMAScript 2015^1 で導入された、他スクリプトの読み込みを制御しモジュール機構を実現するための機能です。

• 16. Modules - exploringjs
• (Babel 5における)ES6のモジュールを解説してみた - uehaj's blog

Meteor 1.2 で ECMAScript 2015 が採用され^2、class 構文や const と let の変数ブロックスコープの導入、アロー関数といった機能が使用できるようになりました。

ですが、ECMAScript 2015 で導入されたモジュール機能に関しては、対応が見送られていました。

そのモジュール機能が Meteor 次期バージョン1.3で利用可能になります。

• meteor/README.md at release-1.3 · meteor/meteor
• Meteor 1.3でJavaScriptのmodulesを使う - Meteor Fan (日本語情報)

モジュール機能を使うことで、グローバル変数の利用を最小限に抑えたり、コードの依存関係や読み込み順番を制御できるようになります。

モジュール機能例

// exporter.js
export var a = ...;
export let b = ...;
export const c = ...;
export function d() {...}
export function* e() {...}
export class F {...}

// importer.js
import {a, c, F, h} from "./exporter";
new F(a, c).method(h);

Meteor 1.3 ではモジュール機能は modules パッケージによって実現されています。ecmascript パッケージを読み込むことでもモジュール機能が使用できます(modulesパッケージを内包しているため)。

meteor add ecmascript
# or
meteor add modules

Meteor 1.3 では meteor create コマンドでアプリを作成すると、標準で ecmascript パッケージが追加されますので、 特別なことをすること無くモジュール機能を使用することができます。

$ meteor create app --release 1.3-beta.12
$ cd app
$ grep modules .meteor/versions
modules@0.5.0-beta.12
modules-runtime@0.5.0-beta.12

大きな変更点として、Meteor 1.3 以前ではアプリの実行時に自動的に全てのファイルが読み込みまれていましたが、Meteor 1.3 からは imports/ ディレクトリ内に置いたファイルは自動読み込みの対象から外れるようになりました。 imports/ ディレクトリ内のファイルに関しては、モジュール機能で import したファイルのみが遅延読み込みされるようになります。

不必要なファイルを読み込まなくなるため、パフォーマンスの向上が見込めますね。

また、node.js の node_modules に対応しました。

これにより、node.js 用に作成されたモジュールが Meteor からダイレクトに使用することができるようになります。

npm install moment

でモジュールをインストールして、

import moment from "moment";

console.log(moment().calendar());

のように記述することで、簡単に呼び出せます。便利ですね。

テスト (Testing)

続いて、テストに関する変更点です。

Meteor 1.3 ではデフォルトでテストランナーの Mocha と、アサーションライブラリの Chai が使用可能になります。

• Mocha - https://mochajs.org/
• Chai - http://chaijs.com/

Mocha は node.js 用のテストランナーと呼ばれるもので、TDD (テスト駆動開発) もしくは BDD (振る舞い駆動開発)スタイルのテスト記法を提供します。

Chai は node.js 用のアサーションライブラリと呼ばれるもので、期待される値のチェックを行い、期待する値でない場合はエラーを出力する機能を提供します。

Meteor 1.3 では practicalmeteor:mocha パッケージが追加されており、上記 Mocha と Chai がデフォルトで使用できます。

前述したモジュール機能と合わせることで、特定のモジュールのみをテストする単体テスト、複数のモジュールの連携部分をテストする結合テストなどがしやすくなります。

// app.js
export const name = "app";

// tests.js
import assert from "assert";
import {name as appName} from "./app.js";

describe("app", () => {
  it("should export its name", () => {
    assert.strictEqual(appName, "app");
  });
});

テストを実行する時は meteor test コマンドを使用します。

# 単体テスト
meteor test --driver-package practicalmeteor:mocha --port 3100 ./

# 結合テスト
meteor test --full-app --driver-package practicalmeteor:mocha --port 3100 ./

簡単ですね。

モバイルアプリ (Mobile App)

最後に、モバイルアプリについての変更点について紹介します。

• cordova-lib が 6.0.0 にアップグレード
  • cordova-ios 4.0.1, cordova-android 5.1.0 にそれぞれアップグレード
• iOS アプリが iOS 8 とそれ以上のみの対応
• Android アプリ開発が Windows 環境でできるようになった
• Hot code push の安定化
• iOS で WKWebView を採用、パフォーマンスの向上

詳細は https://github.com/meteor/meteor/blob/release-1.3/History.md#cordova に載っております。

Meteor 1.3 で開発した iOS アプリは iOS 8 以上のみ対応となりますので、注意が必要です。

代わりに、WKWebView が iOS アプリの内部で使用されることでパフォーマンスの向上が見込めます。

また、Meteor を使った Android アプリ開発が Windows 環境でもできるようになるようです。

注意点

Meteor 1.3 は3/8現在でまだベータ版のため、正式リリース時にはこの記事で紹介している内容と異なる場合があります。予めご了承下さい。

おわりに

Meteor 1.3 ではモジュール機能が新たに導入され、テストやモバイルアプリに関して多数変更が入ります。

モジュール機能が導入されることで、ファイルの依存関係や読み込み制御などが容易になり、 IDE等のツールの支援も受けやすくなることで開発効率がアップすることが期待できます。

今後も Meteor の動向に注目です！

それではよい Meteor ライフを！