年末にリリース予定！？Angularの最新バージョンAngular2とは

最初に登壇したのは、html5j・Web先端技術味見部部長であり、AngularJS Japanユーザーグループ管理人を務めている金井健一氏。

セッションタイトルは「Angular2」。「旬なフレームワークという紹介があったが、Angular2はまだリリースされていないフレームワーク。仕様に関してはまだFIXしていることではない。ただAngular2とはどんなものか、雰囲気を感じてほしい」と冒頭で語り、金井氏のセッションは始まった。

最近、話題となっているシングルページアプリケーション。その必須の機能として次のキーワードが挙げられた。

• (Two-way) Data Binding
• Template Engine
• Ajax Support
• Routing
• Test
• Security

これらのキーワードはAngularのコンセプトと同じ。Angularはこれらの機能をフルスタックしており、一通りこなすことができるという。

では、これからのWebアプリはどうなるか。ここでも5つのキーワードが挙げられた。

• ES6
• Components based
• Shadow DOM
• Object.observe (ES7)
• Like Virtual DOM

第1のキーワードは「ES6」。これは次世代のJavaScriptの仕様である。これによって、クラスベースでJavaScriptが書けるようになる。

次のキーワードは「Components based」。つまり、Web ComponentsというHTML5の新しい仕様により、WebアプリはWeb Componentsを組み合わせて構築していくことになる。

第3のキーワードは「Shadow DOM」。これはWeb Componentsの一つの仕様で、簡単にいうとCSSをカプセル化し、外部のCSSの影響を受けないように作ることができるということ。

どのように書くか、実際のソースコードを披露した。

第4はObject.observeである。これはES7の仕様で、すでにChromeが実装しているため、各ブラウザも足並みを揃えるよう待っている状態だという。

第5がVirtual DOM。「Angularの話でVirtual DOMというとビックリされるかもしれないが、AngularでもVirtual DOM的なものを採用しようとしている。これからのWebアプリのフレームワークを検討する際、これらのキーワードで対応の有無をチェックすると自ずと選択肢が見えてくると思う」と、金井氏。

Angular1系から変わることは何か。「2015.5.18時点の話だが」と前置きし、金井氏は説明を続けた。

まずは「Webサイトが変わること」と金井氏は言う。すでに新しいサイトが立ち上がっている。そして名前もこれまでのAngularJSからAngularに変更された。

次にタスクランナーが1系ではGruntだったのが、2系ではGulpになっていること。

「つい先日聞いた話では、gulpからbroccoliにタスクランナーを変更したようです」（金井氏）。
　▲※参考：https://github.com/broccolijs/broccoli

Angular1系ではパフォーマンスが遅いと言われてきたが、パフォーマンスも改善される。1系では8.58倍遅かったのが、Angular2では3.1倍までにパフォーマンス改善がなされている。

さらにView Cacheという機能を使うと、「ほぼネイティブと変わらない速度が出るというベンチマーク結果がある」という。

そして構文が変わり、これまでのようにControllerやDirective Definition Object、＄Scope、module、jqLiteという書き方はすべてなくなる。

Syntaxは独自属性やng-**というような属性を与えるとAngularが振る舞ってくれたのが、今後はDOMのプロパティになる。

HTML Attribute -> DOM Property

Syntax bindingの書き方は次のようになる。

Syntax event-bindingは以下の通り。

さらに、Syntax JavaScript。

ルーティングに関しては、1系ではAngularのng Routerではなく、UIRouterが使われていた。そこで現在、Angularチームは1.4から2系に向けて、New Routerを作っている。

これはUI Routerと同じように使えるというもの。実際の開発者のスライドによると、ビューの左右が反転するようなこともできるようにしたいと書かれているが、「実装できているかはわからない」と金井氏。

またNew Routerが差し込まれるng-vieportの名前もng-outletに変わった。

TypeScriptに関しては、「TypeScript自体がAnnotationsをサポートしていこうという動きがあり、AtScriptが不要になった。結果的にAngularJSはTypeScriptを採用し、Googleとマイクロソフトが協力してモノを作るというような形になっている。

Angular2とTypeScriptでコードを書いてみたいと言う人は、こちらのサイトをチェックしてほしい。

最後はAngular2でやりたいことについて語られた。まずはサーバサイドレンダリング。これはユーザーの体感速度を上げたり、SEO、リンクプレビューなどのためというのが主な理由だ。

次はCLI for NPM。CLIの充実を図っている。

Shadow DOMはWebComponentsがブラウザに実装されないと使えないため、まだオプショナルな状態だ。第四は2Wayデータバインディング。これはまだ良い実装方法が見つかっていないため、2ではやらないと言われている。

i18nやアニメーションの改善、そしてVirtual DOMのような差分を変更してDOMを更新する仕組みも検討している。さらにマイグレーションできるような道筋を立てているという。

Angular2は早くて今年の年末に出ると言われている。2016年の初頭に目にするのを楽しみに待ちたい。

コーディングまでの準備を短縮するテンプレートも充実の「WinJS」

次に登壇したのは日本マイクロソフトのウェブプラットフォーム部副部長を務める日本マイクロソフトの物江修氏。「ほとんど誰も知らないWinJSの話をする」と語り、セッションを始めた。

WinJSはWebブラウザからアプリケーションを作るためのフレームワーク。GitHubで公開されており、「SPA（シングルページアプリケーション）作るのに向いている」と物江氏は説明する。

WinJSが提供する機能は大きく2つ。第一はリストビューやスクリプトビュー、フリップビューなど、自分で作るとちょっと困るようなリッチなコントロール。

第二に非同期のPromiseモデルやスケジューラー、XHR（HHTPリクエスト）、データバインド、ナビゲーションなどのアプリケーションを作るときに必要な内部処理機能である。

歴史は浅く、バージョン1はWindows8と同時に登場。実はWinJSはWindowsストアアプリを作るための専用のライブラリだった。

この頃にはWeb標準とはいえ、ブラウザで動くことは想像していなかった。しかし2.1で趣旨替えをして、HTML5ライブラリになった。Windows ランタイムとの依存関係を解消。Webブラウザで動作可能になったが、クロスブラウザで使うには問題があったという。

しかしGitHubに公開することでさまざまなコミュニティが立ち上がり、クロスブラウザが実現。3.0ではデスクトップとモバイルブラウザで動くようになったり、モジュール化により自分が必要とする部分だけをビューとして使ったりすることができるようになった。

現在プレビュー版で提供されている4.0は「年末に正式にリリースされる予定だ」と物江氏は言う。4.0はユニバーサルエクスペリエンスを謳っている。

「Windows10になると1バイナリーでスマートフォンからタブレット、PC、Xboxまですべて動くというエクスペリエンスを持っている。WinJSは『レスポンシブなコントロール』『さまざまな入力デバイスに対応』『AngularJS用のラッパー』という特徴を持つ、フレームワークだ」

WinJSは4.0プレビュー版を含め、「Try WinJS」というサイトで入手できる。パッケージ構成を見ればわかるとおり、アプリケーションを作るための基本的なテンプレートが用意されているので、一度触ってほしいと物江氏は言う。

使い方も容易だ。JSとCSSの2つを参照してコードを書くだけだ。コードの記述としてはおまじないがある。

WinJSのコントロールはマークアップで書くことができるが、マークアップで書くだけでは動かない。winControlオブジェクトを介してアクセスするからだ。

processAllで生成されたコントロールのプロパティにアクセスするには、コントロールが描画されていなければならない。processAllの後ろにthenと書かれているところがプロミスモデルで、そこの処理が終わるとthenの中の関数が呼ばれる。

プロパティにアクセスする書き方は図の通り

ここまで解説し、実際にどのように書いていくか、物江氏はVisual Studioを使ってデモを実施。フォントやリストビュー、フリップビュー、レイティングなどいろいろあるが、普通のDOMと変わらないかんじでアクセスして使っていくことができると、WinJSの使い勝手を説明した。

また、ライブラリを参照して書く方法だけではなく、WinJSはコーディングまでの準備を短縮するテンプレートも用意されている。

Cordvaを使うテンプレートやAngularとCordovaを使うためのテンプレート、AngularとWinJSを使うためのテンプレートもある。このように、相互運用のためのテンプレートが充実しているのもWinJSの特徴だ。

「用途に合ったテンプレートを入手してから始めるのがお勧め」だそう。最後に物江氏は次のように語り、セッションを締めた。

「WinJSはもともと、Windowsストアアプリを作るためのものだったので、アプリケーションを作るのに必要な機能がすべて揃っている。先述したようにさまざまなフレームワークと組み合わせることもできる。クロスプラットフォーム、クロスデバイスにも対応している。ぜひ使ってほしいしい」

HTML5ハイブリッドアプリ用のUIフレームワーク「Onsen UI」最新事情

3番目に登壇したのはアシアルの田中正裕氏。セッションタイトルは「Onsen UIが目指すモノ」。田中氏はmonacaプロダクト責任者であり、Cordovaユーザー会の発起人も務めている。

Onsen UIはHTML5ハイブリッドアプリ用のUIフレームワーク。Angularをベースにしていており、iOSやAngularをサポートしている。「一番の売りは高速なUI」と田中氏は説明する。

なぜOnsen（温泉）かというネーミングの由来についても紹介。Onsen UI=>温泉=＞SPA=＞Single Page Appというところから名付けられたそうだ。

ハイブリッドアプリ開発から見た現在のHTML5の課題について。一つはネイティブアプリのようなUIを作りたいとと思っても、アプリケーションアーキテクチャの構築方法が不在であること。

そしてもう一つが、チューニングされて高速に動作するUIライブラリがないことだ。これまではPCを中心に作られているので、モバイルだと速さが出ない。

iOSやAndroidネイティブアプリを開発したことのある人なら分かると思うが、例えばボタンを自分で描画することはしない。iOSならUIキット、AndroidならComponentというように必要なUIが揃っており、それを使いながらUIを組み立てるのが一般的だからだ。

ボタンやタブを置こうと思ったら、既存のUIを使い回せばよい。開発者はUIフレームワークが裏で何をやっているかを気にすることなく、すぐにアプリを開発し始められる。

一方、HTML5ハイブリッドアプリの世界はどうか。「MVCフレームワークには何を使おう」「リストビューはどうやって実装すれば」「アプリが遅いけどチューニングはどうやるの？」など、アプリ開発者が何もかも考えなければならない。

つまり使うだけで高速に描画されるUIキット、アプリケーションアーキテクチャを形作るモノがなかった。「それを解決するために2年前から私たちが開発しているのがOnsen UI」と田中氏は力強く語る。

Onsen UIのコンセプトは「アプリの開発者が、アプリの開発そのものにフォーカスできるようにすること」。Onsen UIはAngularをベースとして構築されている。

Angularを採用した理由は、「HTMLを拡張してアプリも記述可能にしてくれること。DIコンテナやサービス、コントローラ、フィルタなど、大規模なアプリ開発でも耐えられるフルスタックで用意していること」。

Onsen UIの第一の特徴はCustom Elementsのような使い方できること。これは「Angularの恩恵」と田中氏は言う。例えばページを定義したい場合はons-page、ツールバーを起きたい場合は、ons-toolbarという形ですべてのComponentがタグとなっている。これはOnsen UIの一つの大きな特徴でもある。

第二の特徴はCSSによるテーマ。CSSによるテーマはAdobeの超高速CSSフレームワークtopcoatをベースに構築。そのためCSSメタ言語にStylusを利用している。また設計規約はBEMを採用している。

第三はCSSをカスタマイズするテーマローラを完備していること。色を変えるのはもちろん、パターンの一覧からOnsen UIを使って実装したHTMLが出てきたり、そこからComponentを取り出したりできる。ダウンロードしたらそのCSSができ上がるという機能もある。

これは先述したようにOnsen UIが「エンジニアがやるのが面倒くさいところを支援したい」というの発想から開発されたからだ。

第四の特徴はクロスプラットフォームであること。iOS、Androidに対応。さらにWindowsの対応も進めており、一部動かない機能もあるが8.1以上のデスクトップのIE11、Windows Phone 8.1に対応している。

第五はモバイルのUIとして必要なモノを揃えていること。チューニングにより高速に動作するようになるという。どんなComponentがあるか、田中氏はその一部を紹介した。

ons-navigator

画面の遷移と背にアニメーションを管理する。ページをスタックで管理でき、画面遷移や画面の切り替えを行うComponentだ

ons-pull-hook

いわゆるpull-to-refrechを実装できるComponent。引っ張ったら更新するようなUIを一から実装することなく、作れる。

ons-lazy-repeat

無限リストが簡単に実装できる。数千万のDOM要素のライフサイクルを管理する。これにより画面に必要な分だけ表示することができるため高速になる。AngularやiOSのリストビューと同等なことが可能になる。

ons-sliding-menu要素

スライディングメニュー、ドロワーメニューを表現。

ons-alert-dialog要素

HTMLで表現されたアラートダイアログ。

「紹介していたら切りがないので、HPを見てほしい。もし足りないモノがあれば、教えてくれれば対応します」と田中氏。

その他の特徴としては、日本語ドキュメントが揃っていることやTypeScriptをサポートしていること、Visual Studio用Extensionを提供していることなどを挙げた。最新のVisual Studio 2015だとOnsen UIを簡単に作ることができるという。

ここまで解説したところで、Visual Studioを使いデモを実施。Visual StudioギャラリーからOnsen UIを追加することで、使えるようになる。Visual Studioのインテリセンス機能も効くので、便利に開発できる。アシアルではMonacaという開発環境している。もちろんそれを使って開発も可能だ。

Onsen UIが目指すモノとは何か。それは「誰でもHTML5で高速に動作するモバイルアプリを作ることができる世界」にすること。

つまりUIをどのようにチューニングするかではなく、アプリの本質的機能の開発にフォーカスするための基盤を作るのである。できるだけチューニングに労力をかけないよう、開発者が手軽にHTML5のモバイルアプリを作れるようにすることを目指しているのだ。

既にOnsen UI2.0は開発が進められている。今回のバージョンでは「Angularから独立しようと思っている」と田中氏。ピュアなWeb Componentsベースのライブラリにするという。

中のアーキテクチャも刷新され、Angular1.4系とAngular2、そしてReactにも対応していく。「いわばカスタムエレメンツの集まりというスタンスのフレームワークにしていく」と田中氏は解説する。さらにプラットフォーム特有のUIへの対応も進めているそうだ。

Webアプリケーションの開発の難しい部分を簡単にしてくれるReact

最後に登壇したのは、トレタCTOの増井雄一郎氏。増井氏はReactに至るまで、さまざまなフレームワークを使ってきたという。例えばトレタが開発しているレストランの予約、顧客管理をするアプリの場合、お客さまが使うフロントエンドのレストラン予約はBackbone.jsで書かれている。

一方、店舗側が使う管理画面はAngularJSを使っている。このようにトレタでもいろいろなフレームワークを使っていたが、どれもなじめなかったのだそうだ。

昨年の年末年始にReact.jsを試したところ、これはすごく良くできている、と実感。そこからReact.jsを使うようなったと増井氏はReactとの出会いを振り返る。

Reactが目標としているのは、「Webアプリケーションの開発の難しい部分を非常に的確に簡単にすること」だという。その代表例がDOM操作だ。特にシングルページアプリケーションのようにアプリが複雑になればなるほど、DOM操作が難しくなる。

なぜDOM操作が難しいのか。それを説明するため増井氏は簡単なコード例を提示した。

つまりDOMの操作が難しい理由は次の3つ。

• DOMがどこからでも変更可能であること
• DOMが状態を持っていること
• DOMとコードが離れすぎていること

それをもっと簡単にしようという考え方が持っているのがReactだ。DOMを書き換えないで、HTML全体を生成。add-EventListenerという方法を辞め、onclickやonsubmitというonXxxプロパティを使う方法にする。

「HTML5以前の書き方に戻すということ」と増井氏。DOMとJSが遠いという問題の解消は、HTMLの中にJSを書けばできる。つまりHTMLとJavaScriptを一つにまとめるというのだ。

2000年代前半（Ajax以前の）までのサーバサイドのコードはどのような形だったか、思い出してほしい。図を見れば分かるとおり、ブラウザがページをリクエストすると、サーバのロジックが動き、ロジックがテンプレート変数（画面を表示するための状態）を編集。

そのテンプレートがHTMLを生成してブラウザに渡すという形になっている。つまりブラウザはリクエストをするだけで、サーバに変更を依頼することはできない。またサーバも直接、ブラウザに通信する方法は無い。画面を一部変更したいときは、必ずこのループを通すしかない。

「React.jsはまさにこの考えを踏襲している」と増井氏は説明する。少し図は変わるが、その構成は先と同様だ。

リクエストをクライアントロジックで受けて、WebAPIを使ってデータ通信し、それをSetStateというテンプレート変数のようなものに入れ、renderでHTMLを生成。そしてブラウザの表面を書き換える。

このループは同じ方向にしか廻らない。ブラウザの方から一部分だけ変更することもできなければ、ロジックの方から直接、一部分を取り替えたりはできない。

では実際どうやって書くか。書き方の説明へと移った。お題はToDoリスト。

コードは次のようになる。

まず配列のアイテムを表示するコードを書く。上半分で変数を設定し、下半分でHTMLを生成するというコードになっている。このように書くとこの変数が画面に現れる。次にアイテムを追加するコードを書く。

現れた画面に文字を作りたいと言う場合は、変数定義の部分はそのままに、onClickとonChangeを追加する。文字を入力するとOnchangeが呼ばれ、テンプレート変数が変更される。

そうすると必ずrenderが呼ばれ、一文字入力するたびに、画面を更新し直す。入力するたびにnewTextのところに文字が入り、それをHTMLで描画し直す。onSubmitで追加ボタンを押すと、itemsという変数に新しく入力した結果がrenderで表示される。

イベントをハンドリングしてそのまま実行し、画面に描画する。画面は一切状態を持たない。画面が状態を持たないため、件数を画面に表示させるようにすることも、たった1行を追加するだけでできる。

<div>{this.state.items.length}件</div>

「このように画面の内容を常にロジックから状態変数（テンプレート変数）にして、テンプレート変数をビューにするというルールを守ることによって、ビューとロジックの部分がきれいに分離でき、すごくシンプルな流れになる」と増井氏は説明する。

とはいえ、本当にこれですべての問題が解決するのか。増井氏は、次のような疑問を投げかけた。

• HTML全体を書き換えると遅くない？
• CSSアニメーションが使えないよね？
• 実は日本語入力できないよね。

この疑問を解決するのがVirtual DOMだ。Virtual DOMは「こういう変更をしたときには、差分の分だけ変更する」という仕組みがある。

全部更新すると重くなるため、Reactには差分更新がうまくできるように、以下のような仕組みがあるという。「詳しくは自分で調べてください」と増井氏。

• key
• component
• proparty
• dangerouslySetInnerHTML

さらにReactの特徴としては、AngularのようなComponentの仕組みも持っている（Componentで再利用可能な部品化）。

そのほか、サーバサイドレンダリングも可能だ。またより大きなアプリを開発するときは、同じくFacebookが開発しているFluxというフレームークという考え方を利用できるという。

「今年、発表されたReactNativeなら、JavaScriptでネイティブアプリが書ける」と増井氏。現在はiPhoneだけだが、Androidにも対応する予定だ。

画面はJSX（XML）で記述し、CSSっぽいデザイン記述言語も持っている。「Learn once,Write evrywhare」というように、1度Reactを覚えればどこでも書ける。

Fluxとよく似た特徴を持つフレームワークがある。それは以前、増井氏がエバンジェリストを務めていたTitanium Mobileだ。「この2つを比べるとほとんど変わらない。すごく共通点が多い」と増井氏は語る。

共通点

• JavaScriptで書ける
• 画面をXML・CSSで定義
• 直接ネイティブの機能は呼べない
• 専用の方法でラッピングしたモノだけ使える
• 一本のソースで複数プラットフォーム対応しない

相違点

• Reactという考え方を使っているかどうか
• 次期Titaniumではネイティブの機能が呼べる（Hyperloop）ようになる
• ビジネスモデルが違う

画面が狭いアプリケーション、今までスマホの画面はすごく小さかったので、画面の中に複数の遷移状態を持たなかった。ただモバイルとといってもiPhone6plusやiPadなど画面が大きい、情報量が大きく、みんなぎゅうぎゅう詰め込むようになっている。

画面が複数の状態を持ったときに、正しく画面、この場合もやっぱりネイティブアプリケーションの画面はグローバル変数になって、全体で共有しているので、破綻無く画面を書き換えることが難しいところにReactは非常に有効。

Titaniumは自社のビジネスだが、Facebookは自社で使っている技術をもっとみんなに使ってもらいたいと公開しているのでビジネスではない。

共通の問題点

• NativeのComponentが使えないので、ラッピングする必要がある
• ライブラリやOSが上がるたびに調整が必要。
• Nativeの知識が必要
• 両対応のComponentを書くためには両方の知識が必要

Titaniumも向くケース、向かないケースがある

「いずれもオープンソースで開発されているので、比較的ライブラリやOSのバージョンが上がっても素早い対応が可能。オープンソースいいところは、誰かが作ってくれて共有できるところ」と増井氏。

とはいえそれですべてが解決できるわけではないという。Componentを書くためにはNativeの深い知識が必要になるが、Nativeに深い知識のある人はTitaniumもReactは使わないからだ。

つまり実際に使いたい人はComponentが作れず、Componentを作れる人はReactやTitaniumを使わないということ。両対応のComponentを書くには両方の知識が必要だが、人材はあまりいない。つまり使う人と作る人の乖離が最大の懸念だというのである。

ではなぜ、FacebookはReactを作ったのか。FacebookではすでにReactを使ってアプリを作っており、社内でComponentを共有し、すでに1万を超えるReact.js Componentを持っているという。

つまりアプリの共通基盤としてReactNativeを使う。そして開発者をComponent開発に配置できる環境がある。そういうメリットがあるから、FacebookはReactを作ったというわけだ。

とはいえ、以下の条件を満たさないと、なかなかReactNativeは導入できないという。JavaScriptが書けるだけではダメ。Nativeの知識を持っていること。こういう条件を満たしているのであれば、ReactNativeの導入をお勧めするそうだ。

最新のJSフレームワークの最新事情について語られた2時間。今後、どのような方向に進むかはおおよそ把握できたのではないだろうか。

2時間に渡る勉強会の様子は動画でも公開されている。ぜひ合わせて見てもらえるとさらに理解が深まるので、おすすめしたい。

＜関連レポート＞

【AngularJS vs React.js】どっちがどう使える？JavaScriptフレームワークの最新事情

【PR】Webのお祭りイベント＜htmlday 2015＞が6/13(土) 開催！

2015.6.13(土) 日本全国で開催されるhtmldayは、日本全国でWeb制作者／開発者向けのイベントを同日に開催することで、日本のWebを一層盛り上げようという「お祭り」です。

＜htmlday＞のイベントは誰でも開催することができ、誰でも参加することができます。「Webについて考えよう！」（Think the HTML!）という想いがあれば、どんなイベントでも構いません。

例えば、勉強会やハッカソン、はたまた単なる飲み会でもOK！

とにかくWebに関するものであれば何でも大歓迎のイベントです。

賛同してくださったイベントには、＜htmlday＞の限定グッズを差し上げます。

詳細は、＜htmlday＞のWebサイト（http://www.htmlday.jp）でご確認ください。

自分の書いたコードを誰かに評価されたいエンジニアは、けっこう多い？

ITエンジニアのための実務スキル評価サービス『CodeIQ』で出題されている「コード銀行」問題に挑戦すると、あなたのコードが評価されます。

評価(1)出題者からの評価　　⇒評価フィードバック例を見る

• 企業ではたらくという観点からあなたのコードをチェックします
• フィードバックされた観点をふまえてコードを書くと世の中の企業にとって「いいコード」が書けるようになります

評価(2)企業からの評価　　⇒評価フィードバック例を見る

• 「あなたと一緒にはたらきたい」という企業からスカウトが届きます
• あなたのコードが社会でどこまで通用するか、リアルな評価が得られます

興味を持った方はこちらからチャレンジを！