paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」(https://paiza.jp ギノ株式会社)の開発者が開発の事、プログラミングネタ、ITエンジニアの転職などについて書いています。

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

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

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, @TemplateAtScriptアノテーション記法で、対応するタグ(<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と一見別物と考えられるような変更が加えらています。

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

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

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

■参照

paizaでプログラミング問題を解くと、結果によりS・A・B・C・D・Eの6段階で自分のスキルのランクが分かります。問題はレベルごとに分かれており、初心者から上級者の方まで挑戦していただけますので、自分のプログラミングスキルを客観的に知りたいという方は是非チャレンジしてみてください!!

プログラミング問題による学習コンテンツ(paiza Learning)もございますので、「まったくのプログラミング未経験者なのでプログラミング学習から始めたいな」という方もぜひご利用ください。

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


paizaではスキルのあるエンジニアがきちんと評価されるようにし、技術を追い続ける事が仕事につながるようにする事で、日本のITエンジニアの地位向上を図っていければと考えています。特にpaizaではWebサービス提供企業などでもとめられる、システム開発力や、テストケースを想定できるかの力(テストコードを書く力)などが問われる問題を出題しています。

テストの結果によりS,A,B,C,D,Eの6段階でランクが分かります。自分のプログラミングスキルを客観的に知りたいという方は是非チャレンジしてみてください。

また数多くの自社サービス提供企業、webサービス提供企業の求人を掲載しています。

http://paiza.jp