AngularJSはもう古い？未来志向フレームワークAurelia.JSを試してみた！

2015-03-02

 開発ネタ フレームワーク
f:id:paiza:20150227145558p:plain
f:id:paiza:20140712194904j:plainこんにちは、吉岡(@yoshiokatsuneo)です。

最近のJavaScriptフレームワークといえばAngular.JSやReact.JSがホットですが、今年来ると思われるフレームワークAurelia.JSが2015年1月末リリースされました。

Home | Aurelia

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に対応していなブラウザでも動作します！

f:id:paiza:20150227161917p:plain

階層化メニューの下に、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ではITエンジニアとしてのスキルレベル測定(9言語に対応)や、プログラミング問題による学習コンテンツ(paiza Learning)を提供(こちらは21言語に対応)しています。テストの結果によりS・A・B・C・D・Eの６段階でランクが分かります。自分のプログラミングスキルを客観的に知りたいという方は是非チャレンジしてみてください。

また、paizaのオンラインでプログラミング学習ができるパイザ・ラーニングに、この度動画で学習できるレッスンが追加されました。動画を見たり補足テキストを読んだりしながら、自由にコーディングをして実行結果まで確認することができます！レッスンは今後どんどん追加されていく予定ですので、ぜひプログラミング学習に、教育に、お気軽にご活用いただければと思います！


http://paiza.jp



paiza 252日前
Add Starponyoponyokunponyoponyokunponyoponyokunpgmypgmynomeshinomeshinomeshinomeshitotododo
   
コメントを書く
初心者でもほぼ無料でJavaScriptを勉強できるコンテ…
アプリ連携で作業が超捗る！神サービスIFTTT使ってみ…
プロフィール
 id:paiza
id:paiza
paiza(http://paiza.jp)の開発者が開発の事、プログラミングネタ、ITエンジニアの転職などについて書いています。
検索

注目記事
 【2016新卒】まだない内定の就活生が、今からでも挽回できる理由
2015-10-07
【2016新卒】まだない内定の就活生が、今からでも挽回できる理由
 初心者でもほぼ無料でPythonを勉強できるコンテンツ10選
2015-04-09
初心者でもほぼ無料でPythonを勉強できるコンテンツ10選
 【実際に社長・役員に聞いてみた】最終面接対策と面接官が考えてること
2015-05-25
【実際に社長・役員に聞いてみた】最終面接対策と面接官が考えてること
 転職活動、書類選考で落とされる書き方の共通点【こんな書類はダメだ】
2014-11-13
転職活動、書類選考で落とされる書き方の共通点【こんな書類はダメだ】
 【2016新卒】最終面接で落とされる率がぐっと下がる3つの対策
2015-08-11
【2016新卒】最終面接で落とされる率がぐっと下がる3つの対策

はてなブログ開発ブログ
週刊はてなブログ
はてなブログトップ
 上へ
paiza開発日誌
Powered by Hatena Blog.
 ダッシュボード  PC版