こんにちは、編集長の白石です。

去る3月9日、AngularJSのエキスパートによる座談会におじゃまさせていただきました。この座談会はAngularJS Japan User Groupの佐川 夫美雄さんの呼びかけによるもので、お題はもちろん、現在β版として公開中のAngular2。﹁ハードル高い﹂﹁Angular1と違いすぎる﹂など、いろんな情報も飛び交う中で、Angular2の魅力と課題について存分に語っていただきました。


Angular2に関心のある方にはもちろんのこと、Angular1しか触ったことのない方、そもそもAngularJSは初めてという方にとっても貴重なご意見が満載！エキスパート同士の会話とあって、さすがにハイコンテキストだったので、注釈も多めに入れてみました。Angularを知り尽くしたエキスパートたちによる会話を、どうぞお楽しみください。

座談会メンバー紹介︵50音順︶

金井 健一
SIer、Web制作会社を経てフリーランスに。もともとはサーバサイドでJavaメインのエンジニアだったが、サーバサイドからフロントエンドに転向。html5j Web先端技術味見部部長。また、 AngularJS Japan User Group管理人も務め、主催するイベントを通して AngularJSの普及活動を行っている。

佐川 夫美雄
現在、Angularを使ったアプリケーション開発やSIerへのAngular教育など、Angular一色の生活を送っているエンタープライズ系Webエンジニア。COBOLでの生産管理システムの開発を経験後、Javaエンジニア/Oracleデータベースエンジニア/プロジェクトマネージャとしてJavaフレームワーク、品質管理・物流システムの構築を行ってきた。

林 優一
株式会社LIG CTO。ソーシャルゲーム開発会社にてUI/UX開発本部本部長としてフロントエンド設計・開発及びマネジメント業務に従事。その後、LIGに入社。フロントエンド開発・フロントエンドエンジニア育成を担当。デザインからサーバーサイドまで幅広く対応。AngularJSコミュニティに所属。ng-mtgやDevelopers Summitでのスピーカーを務める。得意言語はJavaScript。

吉田 徹生
株式会社トレタにてWebアプリケーションを開発。メインでAngularJSを利用し、どこかでAngular2が使えないかと虎視眈々と狙っている。

モデレーター白石俊平
HTML5 Experts.jp編集長。株式会社オープンウェブ・テクノロジー代表取締役として、Web標準技術に関するコンサルティングや開発に従事。Google社公認Developer Expert (HTML5)、Microsoft社公認Most Valuable Professional (IE) 。著書に﹁HTML5&API入門﹂﹁Google Gearsスタートガイド﹂など。

Angular2って、ざっくり言うと、なに？

白石 佐川さん、今日はこういう場にお誘いいただいてありがとうございました。今日はAngularJSのエキスパートの方々に、Angular2の魅力や導入にあたっての注意点など、詳しくお聞きしたいと思います。

ではまず最初の質問ですが、まず基本的な事柄から。AngularJS、そしてAngular2とは何ですか？

金井 AngularJSはそもそも、シングル・ページ・アプリケーション︵SPA︶を構築するためのフレームワークです。そしてその最新版であるAngular2をひと言で表すなら、Angular1のパワーアップ版 と言えるでしょう。Angular1でできたことがほぼ全てできるだけではなく、Angular1の欠点も改善しています。

吉田 Angular1から引き継いだ良い点としては、﹁フルスタック﹂であることが挙げられると思います。Protractorなどのテストフレームワークも含め、SPAを開発するために必要なものがだいたい入っている。Angular2になってもそれは変わらない。この﹁フルスタックである﹂という点は、他のフレームワーク︵例えばReact︶と比べても特徴的じゃないかと思いますね。


白石 Angular2になって改善した、Angular1の問題点というのは、具体的には何でしょうか？

金井 まずは処理速度が向上したことですね。一説には、8〜10倍も速度が向上したと言われています。

白石 そういえばこの間、Angular1、2、あとReactを比較したベンチマークなども話題になりました。

佐川 Angular2では、外部プロジェクトの活用も意欲的ですね。そこも改善点といえるんじゃないでしょうか。


金井 そこも大きな改善点ですね。Angular1は独自色が強く、﹁Angular Way﹂と揶揄されてきましたが、今回はTypeScriptやSystem.jsなど、外部プロジェクトの成果もうまく活用しています。

佐川 その他の改善点としては、ルーター(※)も大きな改善点だと思います。従来のng-routerや、公式ではないながらも広く使われてきたui-routerに代わり、Angular2ではコンポーネントルーター(※)が採用されました。Angular2は、全体的にコンポーネント指向になっていますので、ルーターもそれに合わせて進化しました。

林 コンポーネントルーターを使ってみると、ルーターがルーティングに専念できるようになったと感じました。今までは様々な処理をルーティングと混在させてしまいがちだったので。ルーターとコンポーネントの境目がきっちり分かれたという印象です。

金井 ちなみに、コンポーネントルーターは1.5でも使えます。1.5は、既存のAngularアプリケーションを2にアップグレードしやすくするため、2の設計の多くを持ち込んでいます。

佐川 この座談会のテーマはAngular2ですが、1.5もコンポーネント指向なので、1を触っている人は1.5にするといいんじゃないかな。2よりも手軽に触れるので。




※ ルーター…AngularJSなどのSPAフレームワークにおいて、UIの状態遷移を実現する仕組み。SPAの場合、UIの状態とURLをひも付けるのが重要な課題となるため、﹁URLのルーティング﹂を行うという意味から﹁ルーター﹂と呼ばれている。

※ コンポーネントルーター…従来のAngularJSでは、UI状態とテンプレート︵とそれに紐づくコントローラー︶が紐付いていたが、Angular2ではコンポーネントがUI状態に対応するようになった。  

TypeScriptはどうよ？

白石 Angular2では、TypeScript(※)がメインの開発言語になりましたね。

吉田 そうですね。JavaScript︵ECMAScript 5︶でも書けなくはないですが、ドキュメントが不完全だったりして、あまりよくサポートされているとは言えなそうです。

金井 TypeScriptに重きが置かれているのは、以前行われた開発者向けのアンケート結果を踏まえてのものだと思います。その時のアンケート結果では、TypeScriptの採用を望む声が一番大きかったように記憶しています︵編集部注: 1位はTypeScript (45%)、2位はBabel (33%)、ES5は3位 (9%)︶。

吉田 TypeScriptでコーディングすると、デコレーター (※)が使えるのはいいですね。コードの見通しが非常に良くなります。あと、型があるおかげで安心感があります。手軽さはなくなっちゃいましたけどね。

林 TypeScriptは型を強制はしないので、敷居はそこまで高くないんじゃないかな。JavaScriptのスーパーセットなので、JSのコードもそのまま動きますし。あと、Angular2のDependency Injection (※)が型をベースとしたものになっているのも、TypeScriptのおかげです。


佐川 import文で、利用しているモジュールだけが取り込まれるのもとてもいいですね。ただ、型がある言語になるとエンタープライズ業界で喜ばれるかと思ったら、今のところ意外とそうでもないんですよね…。

金井 変化が大きいからじゃない？

佐川 そうかも。基本的に、﹁変化しないとかバージョンアップしない︵できない︶ってことが正義﹂っていう雰囲気がなきにしもあらず…な業界ので (笑)。




※ TypeScript…マイクロソフトが開発した言語。厳密な型付けを持つことで大規模開発にも対応しやすくなっているだけではなく、ECMAScriptの先進的な機能を数多く取り込んでいるという特徴を持つ。コンパイルした結果JavaScriptのコードが得られるという、﹁JavaScriptトランスパイラ﹂︵もしくはaltJS︶と呼ばれる言語の一つである。

※ デコレーター…クラスやプロパティ、関数や仮引数などに付加的な情報を付与したり、前処理を行ったりすることができる仕組み。Java言語の﹁アノテーション﹂に近い記法を持つが、JavaScriptのデコレーターはシンプルなJavaScript関数に変換されるため、︵TypeScriptなどのトランスパイラが変換した結果は︶古いブラウザなどでも動作する。

※ Dependency Injection…和訳すると﹁依存性注入﹂。依存するクラスのインスタンスを得る手段として、手続き内でnewによって生成するのではなく、外部から﹁注入﹂されるように記述することで、クラス間の依存性を疎結合にし、テスタビリティを向上させることができる仕組み。Angular1から使えた仕組みではあるが、Angular2ではTypeScriptの型を利用して依存関係を指定できる。  

Angular2のテンプレートはキモい？

白石 TypeScriptについては、エキスパートの皆さんも概ね好意的ですね。では、Angular2で刷新されたHTMLテンプレートについてはいかがでしょうか？

金井 キモいです(笑) 。でも、慣れるしかない。

林 アスタリスクや括弧などの、記号の意味を把握するのに最初は少し苦労しますね (※)。

金井 前は、React︵のJSX︶のことをキモいと思ってたんですが、肩を並べちゃいました。﹁お互いキモいよね﹂という感じで、仲良くしていきたい (笑)。

白石 個人的には、テンプレートをデコレーターに直接書く(※)のも、最初は抵抗ありました。

金井 ぼくはtemplateUrlにテンプレートのURL書く派(※)ですね。

林 ぼくは小さいテンプレートはデコレータの中に、大きめのものは外部ファイルに出す、って感じで使い分けてます。

吉田 デコレータ内に書く場合でも、TypeScriptはES6のテンプレート文字列(※)を使えるのが嬉しいですね。式を埋め込んだり、改行できたりするのがいい。あと、コンポーネントのUIという話で言うと、CSSがコンポーネントごとにカプセル化される(※)のは最高です。

林 そうそう、コンポーネントのカプセル化は嬉しいところです。Angular1のような、スコープの干渉が少なくなったのもすごくいいところだと思います。まあ、1の時みたいな無茶はできなくなっちゃいましたけどね。スコープの親をどこまでも辿っていって…とか。

吉田 まあ、無茶をしたかったらRxJS (※) でやろうと思えば、結構できるんじゃないでしょうか (笑)。

佐川 そういえばRxJSといえば、rx.angular.jsを使うと、Angular1でもRxJSが使えるようになります。ただ、サンプルコードを見ていたら$scope.$applyが入ってなくてちゃんと動かなかったので、修正してプルリク送っときました (笑)。




※ アスタリスクや括弧など…Angular2では、コンポーネントのタグ内に様々な記号を記述していくことになる。例えば、﹁person.nameというモデルと双方向に紐付いたinput要素をpersonNameという変数で参照できるようにする﹂と言った場合、<input [(ngModel)]="person.name" #personName>といった具合である。

※ テンプレートをデコレーターに直接書く／templateUrlにテンプレートのURLを書く…コンポーネントのHTMLテンプレートは、@Component({template="文字列"})という形式で書くか、@Component({templateUrl="URL"})という形式で書くかを選択できる。

※ ES6のテンプレート文字列…ES6では、式の埋め込みや改行を行えるテンプレート文字列がサポートされている。詳しくはこちらの記事を参照のこと。

※ CSSがコンポーネントごとにカプセル化される…Angular2のコンポーネントは、@Component({styles=["CSS"]})や@Component({stylesUrl="URL"})といった形式でCSSを指定できるが、こうして指定したスタイルはコンポーネント外に影響しない︵カプセル化される︶。Shadow DOM︵もしくは属性を用いたエミュレート︶によって実現されている。

※ RxJS…リアクティブプログラミングを実現するライブラリ(GitHub)。Angular2では、HTTP通信を行うモジュールやイベント処理など、基礎的なAPIで広く採用されている。  

Angular1からの移行

白石 Angular1をこれまで使っていた方は、Angular2にアップグレードできると伺いました。

林 私がちょうど今、1.4のシステムを2に上げようと取り組んでいるところです。順序立てて取り組むのが重要ですね。

白石 どのような順序で取り組んでいるんでしょう？

林 私はまず、1.5にアップグレードしました。その後、Babel (※) からTypeScriptに移行しました。その後、ビュー周りとか、ディレクティブとかも全部コンポーネントに置き換えていきました。ここまでは割とすんなりいけます。

ただ、今取り組んでいるルーターの置き換えには少し苦労していますね。ui-routerからコンポーネントルーターに置き換えるところでは、明示的なアップグレードパスが用意されていないので。

でも、ここが終わればあとは2に合わせてテンプレートの記法を書き換えていくだけです。ng-upgradeっていうアップグレード用のモジュールも用意されている (※) ので、それを使って少しずつ置き換えていけます。

白石 ちなみに、どれくらいの期間取り組んでらっしゃるんですか？いつ頃終わりそうですか？

林 始めたのは3月に入ってからですから、まだ1週間くらいです︵インタビューしたのは3月9日︶。3月21日にng-japan (※) というイベントで発表があるので、なんとしてもそれまでには終わらせたいですね (笑)︵※︶。




※ Babel…ECMAScriptの先進的な機能を今すぐ利用できるようにしてくれるJavaScriptトランスパイラ。

※ ng-upgrade…Anguar1とAngular2の共存を実現し、2への移行を楽にしてくれるモジュール。Angular1/2どっちで書いても相互にやり取りできるよう仲介してくれる。具体的には、Angular1記法のserviceやcomponentをAngular2から呼び出したり、逆にAngular2のserviceやcomponentをAngular1から呼び出したりできるようにするもので、双方のダウングレード/アップグレード機能を提供する。

※ ng-japan…残念ながらもう終了しているが、HTML5 Experts.jpでは現在、﹁Angular2実践入門﹂に関するセッションレポートは公開済み。今後もレポートはいくつか掲載予定。

※ ﹁なんとしてもそれまでには終わらせたい﹂…﹁残念ながらng-japanまでには完了しませんでした！！！！﹂︵林︶  

Angular2の学習コスト

白石 そろそろこの座談会も時間的に終わりに近づいてきていますが、最後に一つ気になっていることを聞かせてください。Angular2の学習コストはかなり高いのではないかと思うのですが、いかがでしょうか？

金井 仰るとおりです。学習コストは跳ね上がっていると言っていいでしょう。

佐川 TypeScriptも込みなので、教育に時間がかかるようになっちゃいましたね。とはいえ、Angular2のクイックスタートとかは、余計なことを考えずに取り組めば割と簡単だと思いますが。

吉田 ただ、あのクイックスタート﹁5 minutes﹂とか書いてあるけど、絶対5分じゃ終わらないですけどね。

佐川 はい、あの内容で講義したら50分使いました(笑)

金井 Angular2を使いこなそうと思ったら、TypeScript︵もしくはBabel︶、System.js (※)やWebpack (※)などのモジュールバンドラー (※)、RxJSなどを一通り押さえる必要があります。でもまあ逆に考えれば、一旦覚えさえすればモダンなJavaScriptが書けるようになるわけで。

林 ですね。モダンJavaScriptの学習セット だと思えば、楽しく学べるんじゃないでしょうか。




※ モジュールバンドラー…JavaScriptでは、ECMAScriptのimport文やCommonJSのrequire()関数︵Node.jsが採用している︶などでモジュール間の依存関係を記述するのが主流になりつつあるが、そうした依存関係はブラウザが直接取り扱えるわけではないので、それらを解釈、処理するためのツールが必要になる。そうしたツールは、モジュールの依存グラフを最終的に一つのJavaScriptファイルにまとめ上げる︵バンドルする︶機能を備えていることも多いため、﹁バンドラー﹂と呼ばれる。

※ System.js…Angular2のチュートリアルなどで採用されているモジュールバンドラー。使いはじめるまでの障壁が低い。

※ Webpack…現在広く利用されているモジュールバンドラー。複雑だが多機能。

まとめ

白石 ではそろそろ、お時間も遅くなってまいりましたので、お開きにしたいと思います。皆様、一言ずつ頂いてもよろしいでしょうか？

佐川 まずはとにかく触って欲しいですね。気持ちよく触れるフレームワークになっているので、面白いのは間違いありません。

林 1と比べると、ソースが整理されて綺麗に書けるようになるので、特に大きいシステムの場合は嬉しいですね。フルスタックのフレームワークとして、正しい方向に向かっているんじゃないかと思っています。

吉田 1.0が登場した頃に比べると、完全に世界は変わってしまっています。それくらいWeb技術の流れは速いですが、Angular2にしておけば、あと2,3年は古びないシステムが作れるんじゃないでしょうか。ただ個人的には、﹁バージョンアップ﹂って感覚ではないですね。完全に別物。Perlが、Perl6になって完全に別物になってしまったような感覚と似てるかもしれません。

白石 Perlの事情は全く知らないのですが、そうなんですか？

吉田 はい。Perl6は、﹁Perl6っていう新しい言語﹂ですから (笑)。

金井 パフォーマンスや設計上の問題点など、1の悪かった部分がなくなりました。ハードルは確かに結構高いですが、モダンなJavaScriptにアジャストするという点では、とても良いフレームワークだなと思っています。

白石 皆さん、本日は貴重なお話をお聞かせいただきありがとうございました。とても勉強になりました。

　　　▲今回は、株式会社トレタさんに対談会場のご協力をいただきました。素敵なオフィスでした！