こんにちは、吉岡(@yoshiokatsuneo)です。
最近のJavaScriptフレームワークといえばAngular.JSやReact.JSがホットですが、今年来ると思われるフレームワークAurelia.JSが2015年1月末リリースされました。
Aurelia.JSはGoogleでAngularJSの開発に関わっていたRob Eisenbergさんが開発した次世代のJavaScriptフレームワークです。
特徴として、最新のJavaScript関連技術であるECMAScript6、WebComponents、Object.observeなどの機能を取り込むことで、シンプルで使い勝手のよいフレームワークになっていることが挙げられます。
オンラインコーディング環境paiza.IOでも利用しているAngularJSとの比較を中心にして紹介します。
■Aurelia.JSの特徴
- 未来志向
- 双方向バインディング
- ルーティング機能
- モジュール化
- HTML拡張
- 規約ベースのMV
- テストが容易
- ドキュメントが充実
◆1.未来志向
ES6/7(ECMAScript 6/7)の機能を取り込む未来志向のフレームワークです。
AngularJS等のフレームワークでは、Dependency Injectionを文字列を無理やり解析することで実現していましたが、標準化されるES6/ES7の機能を使うことでシンプルかつ将来性のある設計になっています。ES6/7の機能を使っていますが、ポリフィルという互換ライブラリを利用することで、現在のブラウザで動作します。未来志向且つ、今日時点で実際に動作する実用的なライブラリです。
◆2.双方向バインディング
AngularJSなどでも用いられている双方向バインディングを用いて、画面上の表示と、コード上の変数を コードを書くことなく同期させることが可能です。jQueryではいちいちbindさせて書いていたコードが必要になくなります。Object.observe等を利用することで高速に動作します。
◆3.ルーティング機能
階層化、構造化されたルーティング機能をサポートしています。
AngularJS同様、ページ遷移時に全部のファイルを読み込まずにスムーズなUIを実現するSPA(Single Page Application)を簡単に実現できます。
◆4.モジュール化
モジュール化された構造で、必要な機能のみ必要な時に利用できます。
◆5.HTML拡張
HTMLを拡張して、カスタム要素を作成して構造化されたアプリケーションがつくれます。AngularJSと同様の機能になります。
◆6.規約ベースのMV*
Ruby on Railsでも謳われている「設定より規約」(convention over configuration)で作らており、大量の設定を書かなくても大規模なアプリケーションをつくれます。
◆7.テストが容易
ES6のDI(依存性の注入)機能を使うことで、疎結合でテストしやすいコードをかけます。AngularJSと同様の方向性を、最新の機能を使うことでより洗練させています。
◆8.ドキュメントが充実
リリースされたばかりですが、最初からドキュメント(サンプル、動画、チュートリアル、リファレンス)が充実しています。
■Aurelia.JSを動かしてみる
Anreliaのサイトでサンプルが容易されていますので、手順に沿って試すことでAureliaの魅力が理解できます。
◆1. 環境設定
http://nodejs.org からnode.jsをダウンロード、インストールします。
自動ビルドツールのgulpをインストールします。
# sudo npm install -g gulp
パッケージ管理ツールのjspmをインストールします。
# sudo jspm install -y
以下のようなエラーが出た場合、**jspm endpoint config github**を実行します。
warn Error on getPackageConfig for github:aurelia/templating-resources, retrying (1).
GitHub rate limit reached. To increase the limit use GitHub authentication.
Run jspm endpoint config github to set this up.
◆2. サンプルプロジェクトをダウンロード
以下からダウンロードします。
https://github.com/aurelia/skeleton-navigation/releases
◆3. プロジェクト関連ファイルのインストール
ディレクトリの中で設定に必要なプラグインやライブラリをインストールします。
% npm install
% jspm install -y
% jspm install aurelia-http-client
◆4. テスト用のサーバを動かします
% gulp watch
ブラウザで http://localhost:9000/ に接続します。
ポリフィルがインストールされるので、ES6に対応していなブラウザでも動作します！
階層化メニューの下に、welcomeとflickrがあります。flickrを入れると写真一覧が見えます。
child-routerは無限に階層化されていて、どんどん階層を辿っていけます。
■Aurelia.JSの使い方
では、実際のコードを見てみましょう。
◆テンプレート、双方向バインディング
welcome.html
<template> <section> <h2>${heading}</h2> <form role="form" submit.delegate="welcome()"> <div class="form-group"> <label for="fn">First Name</label> <input type="text" value.bind="firstName" class="form-control" id="fn" placeholder="first name"> </div> <div class="form-group"> <label for="ln">Last Name</label> <input type="text" value.bind="lastName" class="form-control" id="ln" placeholder="last name"> </div> <div class="form-group"> <label>Full Name</label> <p class="help-block">${fullName | upper}</p> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </section> </template>
welcome.js
export class Welcome{ constructor(){ this.heading = 'Welcome to the Aurelia Navigation App!'; this.firstName = 'John'; this.lastName = 'Doe'; } get fullName(){ return `${this.firstName} ${this.lastName}`; } welcome(){ alert(`Welcome, ${this.fullName}!`); } } export class UpperValueConverter { toView(value){ return value && value.toUpperCase(); } }
AureliaのアプリケーションはMVVM(Model-View-ViewModel)アーキテクチャで書いていきます。ここでは、JSファイル(welcome.js)がview-modelに、HTMLがviewとして対応する形です。welcome.jsのJavaScriptは見慣れない書き方かもしれませんが、これがES6での書き方です。
HTML上では${式}と書くことで、JavaScriptの式を埋め込むことができます。JS上では”export class”の中でHTML表示に関連するコードを書いていきます。JS上の”this.変数名”で参照している変数を、HTML上の${変数名}と書くことでJS上で設定した変数が即時にHTML上に反映されます。
HTML上では”value.bind=変数”のように書くことで、フォーム等で入力された内容を即時にJavaScript変数に反映させることができます。この例の場合、苗字・名前を入力すると、対応するJavaScriptのfirstName/lastName変数がアップデートされ、さらにそれがHTML上のフルネームに反映される、というように双方向で変数が結びつきます。
◆ルーティング
app.js
import {Router} from 'aurelia-router'; export class App { static inject() { return [Router]; } constructor(router) { this.router = router; this.router.configure(config => { config.title = 'Aurelia'; config.map([ { route: ['','welcome'], moduleId: 'welcome', nav: true, title:'Welcome' }, { route: 'flickr', moduleId: 'flickr', nav: true }, { route: 'child-router', moduleId: 'child-router', nav: true, title:'Child Router' } ]); }); } }
JavaScriptの配列に名前とモジュールの対応を書くだけで、簡単に構造化された階層構造が実現できます。AngularJSでいう$routeProviderにあたります。ここではRouterモジュールがDIで注入されています。static inject()関数で返したモジュールの一覧が注入され、constructerの引数として渡されます。
◆カスタムタグ
app.html
<template> <import from='./nav-bar'></import> <nav-bar router.bind="router"></nav-bar> <div class="page-host"> <router-view></router-view> </div> </template>
nav-bar.js
import {Behavior} from 'aurelia-framework'; export class NavBar { static metadata(){ return Behavior.withProperty('router'); } }
nav-bar.html
<template> <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"> <i class="fa fa-home"></i> <span>${router.title}</span> </a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}"> <a href.bind="row.href">${row.title}</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li class="loader" if.bind="router.isNavigating"> <i class="fa fa-spinner fa-spin fa-2x"></i> </li> </ul> </div> </nav> </template>
カスタムタグは、exportしたclass(ここではNavBar)として作成します。また、カスタムタグの内部と外部での変数のマッピングについて指定も行えます。これはmetadata()関数でinject()のように外部の変数を注入することで行います、具体的にはBahavior.withProperty(‘router’)を返すことで、内部と外部のrouter変数が結合され、カスタムタグ用のテンプレート(nav-bar.html)内でrouter変数が使えるようになります。
■まとめ
今年は、ECMAScript6の正式リリースが6月に予定されています。様々なフレームワークがJavaScriptの問題を解決しようとしてきましたが、ES6が1つの方向性を示す形になります。
AngularJS2.0も同様にES6を取り込む方向性に向かっており、他にも様々なアイデアのES6ベースのフレームワークが出てきて面白くなると思いますが、Aureliaが取り込んでいるアイデアや方向性は、現時点で実際に動作するフレームワークとして大きな影響を与えると思われます。
まだ関連ライブラリやモジュールは限られていますが、今後のプロジェクトの選択肢の1つになると思いますので、ぜひ検討してみてください。
■参照
Aurelia公式サイト
http://aurelia.io/
DaillyJS | クライアント・フレームワーク Aurelia
http://panda.node.ws/?p=2086
Aurelia vs AngularJS – Round One: FIGHT!
http://ilikekillnerds.com/2015/01/aurelia-vs-angularjs-round-one-fight/
New frontend framework “Aurelia”: Web Components, 6to5, jspm, MVVM
http://www.2ality.com/2015/01/aurelia.html
Introducing Aurelia
http://blog.durandal.io/2015/01/26/introducing-aurelia/
New frontend framework “Aurelia”: Web Components, 6to5, jspm, MVVM
http://www.2ality.com/2015/01/aurelia.html
The ECMAScript 6 schedule changes
http://www.2ality.com/2014/06/es6-schedule.html
■paizaについて
paizaでは、プログラミングスキルチェック問題(9言語に対応)を多数ご用意いたしております。もちろんJavaScriptにも対応しておりますので、「JavaScriptでプログラミング問題を解いてみたい」「自分のスキルを試してみたい」という方にもピッタリです！
paizaでプログラミング問題を解くと、結果によりS・A・B・C・D・Eの６段階で自分のスキルのランクが分かります。問題はレベルごとに分かれており、初心者から上級者の方まで挑戦していただけますので、自分のプログラミングスキルを客観的に知りたいという方は是非チャレンジしてみてください！！
プログラミング問題による学習コンテンツ(paiza Learning)もございますので、「まったくのプログラミング未経験者なのでプログラミング学習から始めたいな」という方もぜひご利用ください。
さらに、paizaが運営する無料オンラインプログラミング実行環境サービス「paiza.IO (パイザ・アイオー)」では、JavaScriptはもちろん、多数プログラミング言語のプログラミングが面倒な環境構築なしに無料でできますのでぜひご利用ください！
paizaは、技術を追い続けることが仕事につながり、スキルのある人がきちんと評価される場を作ることで、日本のITエンジニアの地位向上を目指したいと考えています。
自分のスキルを磨いていきたいと考えている方におすすめなのが「paizaラーニング」。オンラインでプログラミングしながらスキルアップできる入門学習コンテンツです。初心者でも楽しくプログラミングの基本を学ぶことができます。
そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
