2/4 熊本にある「ビジネスブレイン太田昭和熊本開発センター」でAngular2ハンズオンをやった。熊本でのAngular勉強会は２回目で、「モダンなWebとはどのようなものか」に興味をもつ基本的にはJavaScriptではなく他の言語をメインに開発をしている方が集まっておこなってます。こちらとしては他言語の方からのお話はとても有意義。

Angular2(5 minutes)ですがTypeScript, JavaScript, Dartで書かれています。今回の勉強会ではES5から開始し、TypeScriptで出てくるキーワードの背景（意味）を理解するということをしました。勉強会での結果ですが、Angular2を書くならやはりTypeScriptかなという意識になりました。

やったこと

ハンズオンの内容は次の通り

ES5でAngular2を実装
ディレクティブの利用
ルーターの実装
ダイナミックモジュールローダーの利用
TypeScriptの実装(5 minutes)

コードはこちら。話のポイントをまとめます。

デコレータ

下記のようにAngular Classに対してデコレータできる。

  AppComponent = ng.core
      .Class({
        constructor: function() {}
      });

  AppComponent = ng.core
      .Component({
        selector: 'my-app',
        template: '<h1>My First Angular 2 App</h1>'
      })(AppComponent);

Angularのローディング

ng-appは無くなり下記メソッドで実行します。Angular1でもangular.bootstrapというのはありました。

ng.platform.browser.bootstrap(app.AppComponent);

ディレクティブ

Angular1ではng-として実装されていたものが

[(...)]
*xxx
(...)

など、他言語の方から見たら少し引くような書き方をするようになった。

モジュールローダー

SystemJSを使ってモジュールローディングする。例えば次のように書く。JavaScriptを日常的に使っている人間にとっては「そうだね」というところだが、他言語からするとちょっと白目のよう。。

System.register(['angular2/platform/browser', '../components/home/home'], function(exports) {
  var browser, app;
  return {
    setters:[
      function (args) {
        browser = args;
      },
      function (args) {
        app = args;
      }],
    execute: function() {
      browser.bootstrap(app.AppComponent);
    }
  }
});

TypeScriptを利用する

SystemJSで書いたものをTypeScriptで書くと綺麗に書け、これは全員ブラボーという感じでした。

import {bootstrap}    from 'angular2/platform/browser'
import {AppComponent} from '../components/home/home'

bootstrap(AppComponent);

他言語マスターから見たAngular2の特徴（まとめ）

あまりJavaScriptを扱ったことが無いが他の言語としてはハイレベルの方たちの意見として

ディレクティブ醜い
デコレータ？？
他の言語からすると依存性注入微妙
モジュールローダーに白目
TypeScript偉い！

ちょっと大げさな表現を使ってますが、それだけモダンWeb開発をおこなう技術要素が多くなってきたという意味にも取れるかと思います。勉強会の最後の評価としては「Angular2をやるならTypeScript」という結論でした。

albatrosary's blog

UI/UXとエンタープライズシステム

他言語マスターはAngular2に白目 -「Angularハンズオン#8@熊本」でAngular2(5 minutes)をやった