paiza times

paizaがお届けする、テック・キャリア・マネジメント領域における「今必要な情報」を届けるWebメディア

logo

paizaがお届けする、テック・キャリア・マネジメント領域の「今必要な情報」を届けるWebメディア

トップ > Tech > 姿を現した！次世代JSフレームワークAngularJS2.0アルファ版を試してみた！

姿を現した！次世代JSフレームワークAngularJS2.0アルファ版を試してみた！

Tech Tech-フレームワーク

f:id:paiza:20150309172234p:plain f:id:paiza:20140712194904j:plainこんにちは、吉岡([twitter:@yoshiokatsuneo])です。

AngularJSは、最も有名なフルスタックJavaScriptフレームワークで、『paiza.IO』でも使っていますが、現在次期バージョンAngularJS Ver2.0の開発が進められています。

そして、先日アメリカで開かれたAngularJSカンファレンスng-confで、待望のAngularJS2.0のアルファ版についての発表と、AngularJS2.0専用サイト http://angular.io/ の発表がありました。

AngularJS2.0公式サイト

AngularJS2.0では、Angular1.0と比べて以下のような大きな変更が加えられています。

  • 次世代JavaScript規格、ECMAScript6(ES6)の取り込み。(ポリフィルを用いることで現状のES5でも動作)
  • JavaScriptをベースとし、アノテーション等を追加したAtScriptを利用
  • 双方向バインディングを廃止し、明示的な値の指定と、イベントの記載
  • ng-xxx記法を廃止し、"[]"、"()"、"#"により式・イベント表記・参照を分離。
  • WebComopmentsを利用した、より厳密に独立したコンポーネント化を推進

ここでは、実際にAngularJS2.0を試してみましたので、実際に動かしながら、機能と合わせて紹介します。

■AngularJS2.0の実行方法と機能

◆1. プロジェクトテンプレートのダウンロード

Angular.IOからテンプレートプロジェクトをダウンロードします。

mkdir angular2_quickstart
cd angular2_quickstart
git clone https://github.com/angular/quickstart.git

◆2. HTMLファイルの作成

以下のような、ウェブページ全体のテンプレートとなるindex.htmlファイルを作成します。

<html>
  <head>
    <title>Angular 2 Quickstart</title>
    <script src="/quickstart/dist/es6-shim.js"></script>
  </head>
  <body>
  
    <!-- The app component created in app.es6 -->
    <my-app></my-app>
    <script>
     // Rewrite the paths to load the files
     System.paths = {
       'angular2/*':'/quickstart/angular2/*.js', // Angular
       'rtts_assert/*': '/quickstart/rtts_assert/*.js', //Runtime assertions
       'app': 'app.es6' // The my-app component
     };
     
     // Kick off the application
     System.import('app');
   </script>    
    </body>

</html>

最初に読み込んでいるes6-shimは、ポリフィルと呼ばれるライブラリで、ES6の機能をES6に対応していない現在のブラウザでも動くようにするためのライブラリです。

ここで、my-app の中に実際のページの内容が埋め込まれる形になります。AngularJS1.xのng-appと同様の役割になります。

System.pathsの中でパス設定を行い、System.import()で読み込みを行います。

◆3. JavaScriptファイルの作成

<my-app>タグの動作を、AtScript(JavaScriptの変形)で以下のように書いていきます。 @Component/@Template/class定義の後にはセミコロンは入れないようにしてください。

(app.es6)

import {Component, Template, bootstrap} from 'angular2/angular2';

// Annotation section
@Component({
  selector: 'my-app'
})
@Template({
  inline: '<h1>Hello {{ name }}</h1>'
})
// Component controller
class MyAppComponent {
  constructor() {
    this.name = 'Alice';
  }
}


bootstrap(MyAppComponent);

"import"で必要なAngularJS2.0の機能を読み込みます。

@で始まる、@Component, @TemplateはAtScriptのアノテーション記法で、対応するタグ(<my-app>)や、HTMLテンプレートを指定します。

テンプレートは"inline"の代わりに"url"を用いることで外部ファイルを指定できます。(例: url: 'app.html'、ただし一度ロードした内容はキャッシュに残るようなので変更後はキャッシュを破棄する必要があります。)

タグ名に対応するclassでmy-appコンポーネントの動作を書いていきます。

ここでのthisの変数が、HTMLテンプレート上で{{name}}として参照できます。AngularJS1.0のようなscopeとControler-As記法をあわせたような形で、JavaScript classのthisの変数を直接記述できます。WebComponentsを用いることで、コンポーネントは独立しており、他のコンポーネントの変数と干渉することもありません。

◆4.実行

サーバを実行し、http://localhost:8080/で接続します。

なお、Chromeでは動作しましたが、Safari/Firefoxではエラーが出て動作しませんでした。

◆5. 入力フォームの追加。

もう少し変更を加えてみましょう。

INPUTタグで名前を入れれるように、以下のように変更します。

(app.es6)

import {Component, Template, bootstrap} from 'angular2/angular2';

// Annotation section
@Component({
  selector: 'my-app'
})
@Template({
  inline:
    '<h1>Hello {{ name }}</h1>' + 
    'Name: <input type=text [value]="name" #el (keyup)="changed($event, el)"><br/>'
})
// Component controller
class MyAppComponent {
  constructor() {
    this.name = 'Alice';
  }
  changed($event, el){
    this.name = el.value;
  }
}


bootstrap(MyAppComponent);

AngularJS2.0では、データバインディングは双方向ではなく、一方方向です。HTML上で「[属性名]="変数名"」と書くことで、JavaScript上の変数をHTML上に反映させます。HTML上の変更は「(イベント名)="関数()"」としてJavaScriptの関数を呼び出すことで行います。HTML上のエレメントへの参照は、タグ中に「#変数名」として参照を作ることができます。

双方向バインディングではないので、AngularJS1.xのように自動的に連携しなくなりますが、より明示的な記述が可能になり、パフォーマンスに影響があったダイジェストサイクルも繰り返しが無くなり単純なダイジェストフェーズとなります。

■まとめ

AngularJS2.0は、AngularJS1.xと一見別物と考えられるような変更が加えらています。

ただ、ウェブアプリケーション開発に必要な機能を含むフルスタックフレームワークとしての立場は同じ位置になります。

まだアルファ版であり、正式リリースまで１年程度はかかると思いますが、今最も期待が集まっている今後のJavaScriptフレームワークの一つです。

最近のJavaScriptの流れを取り入れており、ES6やコンポーネント化の考え方は、どのフレームワークでも通用するものですので、ぜひ試しみてみてください。

■参照

paizaは、技術を追い続けることが仕事につながり、スキルのある人がきちんと評価される場を作ることで、日本のITエンジニアの地位向上を目指したいと考えています。

自分のスキルを磨いていきたいと考えている方におすすめなのが「paizaラーニング」。オンラインでプログラミングしながらスキルアップできる入門学習コンテンツです。初心者でも楽しくプログラミングの基本を学ぶことができます。

paizaラーニング

そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

paizaのスキルチェック

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

さらに、paizaが運営する無料オンラインプログラミング実行環境サービス「paiza.IO (パイザ・アイオー)」では、JavaScriptはもちろん、多数プログラミング言語のプログラミングが面倒な環境構築なしに無料でできますのでぜひご利用ください！

paizaのおすすめコンテンツ

CGC codemonster プログラミングゲーム「初恋プログラミング研究会 ～海に行こうよ～」 CGC codemonster プログラミングゲーム「コードモンスター大図鑑 プログラミングでゲットだぜ！」 paiza転職 paiza新卒 EN:TRY paizaラーニング 記事内に記載している情報は、記事公開時点でのものとなります。 Copyright Paiza, Inc, All rights reserved.