Angular – HTML5Experts.jp

Angular 2を使うならUIはコレで！Ionic 2ことはじめ（正式リリース版対応）

榊原昌彦 — Thu, 16 Feb 2017 00:14:20 +0000

Web制作してると、また新技術が出たのかと思うと、気づいたら「新常識」が増えてたということに頻繁に出会います。

タスクランナー、SCSS、LiveReload、SPA、PWA、ハイブリッドアプリ。そういった近年のキーワードを一気に体験できるUIフレームワーク「Ionic 2」が先日リリースされましたので、ご紹介します。

編集部注: Angular 2の正式名称は「Angular」ですが、現状だと「AngularJS 1.x」のことを呼称していると誤解される可能性が高いと判断し、本稿では「Angular 2」で統一させていただきます

記事の内容が古くなってたので、2017年8月11日に更新しました

Ionic 2の概要

Ionic2は、アメリカのIonic社が中心となって開発しているオープンソースのモバイルフレームワークです。 Angular 1上に構築されたIonic 1の後継プロダクトとなり、当時の経験が反映され、とても完成度が高く仕上がっています。つい先日の2017年1月29日に正式リリースされました。

Drifty Coがデモアプリとして、Ionic 2 Conference Applicationを公開していますので、ぜひアクセスしてみてください。モバイルアプリのデモですので、スマホからアクセスするのがいいかと思います。Ionic 2の世界観とデフォルトデザインの完成度の高さがよくわかるデモとなっています。

このデモでわかる操作性・UI以外にも、Ionic2には

ターミナルにコマンドを4行入れるだけで開発をはじめることができる
Webはもちろんのこと、iOS/Android/WindowsPhoneアプリとしてもリリースできる
ブラウザにPush通知を送ったり、オフライン対応することも可能
Angular 2上に構築されているので高速

という特徴があります。 Web最前線の現場で使われてる技術を体験するために、ぜひとも一度使ってみてください！　

4行で高速開発環境構築

Ionic 2でどのような体験ができるかをご紹介するために、実際にプロジェクトを立ち上げてみます。以下は、Node.js(6以上)をインストールされている環境を前提にしていますので、未インストールの場合は https://nodejs.org/ja/ からインストールください。

最初に、ターミナル（Windowsの場合はコマンドプロンプト）を立ち上げ、以下のコマンドを入力します。これで、Ionic 2を構築するためのIonic CLIというパッケージをインストールします。

npm install -g ionic cordova

次に、プロジェクトを作るフォルダに移動して、以下のコマンドを入力します。するとProjectNameという名前のフォルダが作成され、2-3分でプロジェクトが作成されます。

ionic start ProjectName --v2

最後に、ProjectNameというフォルダに移動し、ionic serveという開発を開始するためのコマンドを入力します。

cd ProjectName
ionic serve

すると、自動的にブラウザが立ち上がり、画面が表示されます。URLがhttp://localhost:8100/になっていると思いますが、これはIonic CLIが自動的に開発用サーバを立ち上げてくれたためです。（実際にアクセスしているのは、www/フォルダの中です）

4行のコマンドで開発の準備が完了しました！

5分でIonic 2の開発を体験！

早速開発してみましょう。Ionic 2は、様々な機能が実装されているためにいろいろな設定ファイルやフォルダが用意されていますが、最初はsrc/とwww/の中をさわれば事足ります。

ProjectName/
├── src/
　　├── app/
　　├── assets/
　　├── pages/
　　　　├── about/
　　　　├── contact/
　　　　├── home/
　　　　└── tabs/
　　├── theme/
　　└── index.html
└── www/

では、まずsrc/pages/の中を見てみましょう。

4つのフォルダが、画面のそれぞれのComponentに対応しています。例えば、Home画面だと以下の通りです。メインコンテンツはhome/home.htmlが、タブのエリアはtabs/tabs.htmlがテンプレートになっています。

試しに、home/home.htmlをログインフォームにしてみましょう。home/home.htmlの中身を以下に差し替えて見てください。


  
    Home
  



  
    
      Username
      
    

    
      Password

そして保存すると、自動的にブラウザが更新されて、ログインフォームが表示されます。 LiveReloadという機能で、一回いっかい更新ボタンを自分で押す必要がないので、複数ディスプレイで作業してる時とても捗ります。

見慣れないタグ。これって何？

home/home.htmlのタグをみると、ion-headerやion-contentと見覚えのないタグが使われていることに気づくと思います。これは、Directiveを使って定義づけているカスタムタグで、Ionic 2オリジナルのものです。例えば、だと、これをJavaScriptが以下のように展開します。

複雑なHTMLであったり、多くのclass名であったりをいちいち書かなくてもいいようにIonic 2が処理してくれますので、開発コードがとても可読性の高いものとなります。 Ionic 2が用意しているComponentsは、公式のサイトから一覧で確認できます。

Ionic 2を使っていると、最初は「ドキュメントにあるコンポーネントをコピペしていく」だけで大部分のUIデザインが完了します。ですので、ワイヤーフレーム段階からがしがし作っては捨てるタイプの小さく回す開発が可能です。

Ionic 2のUI

Themeを書き換える

Ionic 2は、CSSを拡張したSCSSを採用しています。変数などが使えるので、!importantを使わずにThemeの変更をすることが可能です。実際に、SCSSの変数機能を利用して、Themeを自作してみましょう。

src/theme/variables.scssを開いてみてください。現在設定されているThemeの変数を入れ替えたり、上書きするための設定ファイルです。

この$colorsで設定されているprimaryがdefaultの色となります。試しにこの色をredに変更して保存してみてください。正常にLiveReloadが動作していれば、自動的に以下のようにThemeが変更されます。

他にも、様々な設定変数がIonic2には用意されています。試しにツールバーの背景色を変更してみましょう。 $colorsの下に、以下の値を入力してください。

$toolbar-background : yellow;

そしてリロードすると、ツールバーの背景色が黄色になるのを確認できます。これらの設定変数はOverriding Ionic Sass Variablesに書いてありますので、ここを見ながら変数を作っていくと、簡単にオリジナルThemeを作ることができます。

プラットフォームチェック

Ionic 2は、それぞれのモバイルOSの文化に寄り添ったデザインで表示されるようになっています。上記はChromeで表示しているのでマテリアルデザインとなっていますが、iOS SafariでみるとiOSのデザインに自動的に変更されます。

それぞれのモバイルブラウザでどのように表示されるかを見比べる機能があるので使ってみましょう。http://localhost:8100/ionic-labにアクセスしてみてください。先程の表示画面がそれぞれのモバイルプラットフォーム毎にどのように表示されるのか見比べることができます。

UI,UXを考える上で、それぞれのユーザのプラットフォームの文化に寄り添うのはとても重要な要素ですので、とても重宝する機能です。

Ionic 2をコンパイルする

iPhoneアプリとしてコンパイルする

作ったWebアプリを、iOS/Android/Windows Phoneのアプリとしてコンパイルすることができ、それぞれのプラットフォーム上でのアプリストアで販売できます（このように作られたアプリをハイブリッドアプリといいます）

コンパイルは、とても簡単です。例えば、Xcodeをインストール済みのMacでしたら、以下のコマンドを入力するだけでコンパイルが行われ、iOSアプリとしてのプレビューが行われます。

ionic cordova emulate ios

Webがオフラインでも表示できるようにする

Ionic 2は、Googleが提唱しているService WorkerというWebサイトをアプリとして使うための技術を積極的にキャッチアップしています。Service Workerには様々な機能がありますが、Ionic 2はデフォルトでオフライン対応が実装されています。

オフライン対応を有効するのはとても簡単で、src/index.htmlの17-24行目のコメントアウトを外すだけです。

ただ注意事項が2点ありまして、1つはServiceWorkerはSSLでしか動かないです。もうひとつは、現行ではiOS非対応ですので、iPhoneでの確認をすることはできません。ご注意ください。

リリース版をコンパイルする

Ionic 2のコンパイルは、serve/cordova emulateとnpm run build --prodのに分かれます。簡単に違いをいうと、前者はLiveReloadをストレスなく行うために実環境のパフォーマンスを落としていて（Just in Time Compile）、後者はコンパイル時に時間こそがかかるものの、それ以降はとても高速に動作します（Ahead of Time Compile）。ですので、開発環境では前者を、本番環境では後者を使います。 Ahead of Time Compileのコマンドは以下ですので、お気をつけください。

npm run build --prod

ionic cordova build ios --prod

ionic cordova build android --prod --release

なお、Compileの違いの詳細に興味がある方は、Angular AoTガイドをご覧ください。

終わりに

ここまでは、入門的HowToをご紹介してきました。冒頭でもふれたとおり、近年のフロントエンドのキーワードをまとめてさわるにはとても優れたモバイルフレームワークです。しかしながら、実案件に入るとAngular 2ベースのComponents開発であったり、SPA文化であったり、開発に入る前にもっと触れておいた方がいい知識があります。そこで、次の入り口として、3つをご案内して結びにかえさせていただきます。

公式のチュートリアルでもっと学ぶ

Ionic 2では、初心者向けのチュートリアルを用意しています。英語なので少し大変かもしれませんが、大変わかりやすく書かれてありますのでおすすめです。Ionic 2を使う前提でしたら、Angular 2のチュートリアルをする前にぜひこちらを試してみてください。

Ionic 2 Tutorial

日本語コミュニティあります

今では随分改善されましたが、Ionic 2はリリース前（特にβ版時代）はとても日本語情報が少なかったので、知見を共有するためにslackのオープンチャンネルを開設しました。分かる方がいれば有志が回答する形ですのでレスポンス速度はあまり高くありませんが、ご活用いただけましたら幸いです。

Ionic 2 slackチーム

Angular 2で10万行書いた人にナマの声を聞く─奥野賢太郎×白石俊平

白石俊平 — Fri, 16 Dec 2016 04:14:01 +0000

2016年9月のAngular 2リリースは、2016年のWeb業界で、最も重要なトピックの一つだったと言っても過言ではないでしょう。本稿では、Angular 2を正式リリース以前から仕事で使い倒していた奥野賢太郎さん（armorik83）と、不肖白石が、Angular 2開発を実際にやってみている同士で語り合ってみました。 実際にAngular 2開発で苦労してきた二人のナマ声です。今後Angular 2を仕事で採用しようと考えている方々には必見の内容です（って、自分が出ている記事を紹介するのも微妙ですが…）。

Angular 2のコードを10万行書いた

白石奥野さん、今日はよろしくお願いします。奥野さんの、Angularとの関わりを教えていただけますか？

奥野私はもともと関西で音楽の専門学校を出て、音楽関係の仕事をしていたんですが、それだけじゃ食っていけなくて、Web制作のバイトをしていたんです。それでそのうちAngularJS 1を触るようになり、関西にAngular専門のコミュニティがなかったので、ng-kyotoってコミュニティを立ち上げて…っていうのが馴れ初めです。

白石最初は音楽の仕事をされてたんですか！むしろその話に興味があります(笑)。でもまあ、この場ではそこを聞くのは我慢して、Angularとの関わりの話を続けてください。

奥野で、東京に出てきて就職した企業で、そこは大規模なWebサービスを運営しているのですが、AngularJSを採り入れてみるというプロジェクト開発を行っていたんです。ただ、サービスが巨大すぎたためパフォーマンスが全然出なくて困っていたところに、Angular 2がβバージョンに到達したというニュースが舞い込みまして。もともとAngular 2も個人的には触っていたので、Angular 2でやってみたらどうかと提案したら通りまして、そこからAngular 2を仕事で書きまくる日々が始まりました。

白石βになったタイミングが良かったんですね。ちなみにぼくのAngularとの関わりを言うと、実はAngularJS 1.xはあまり触っていないんです。あんまり好きになれなくて。でも、TechFeedというエンジニア向けニュースアプリを自社開発している中で、次はモバイルアプリをWeb技術で使いたいと思った時に、Angular 2が選択肢に挙がりまして。

ぼくらはモバイルアプリのUXを重視したかったので、そのタイミングで「モバイルを想定して、パフォーマンスを重視した」というAngular 2が出てきたのは、タイミングが良かったんですね。モバイルアプリ向けのUIフレームワークであるIonicもAngular 2をベースに書き直され始めていましたし、AngularJS 1.xのちょっとごちゃごちゃした感じが綺麗に整理されてもいたので、当時βバージョンではありましたが、全面的に採用することにしました。

白石ちなみに奥野さん、Angular 2関連のコードはどれくらい書かれたんですか？

奥野そうですね、GitHub上のコードカウントから大雑把に言うと、だいたい10万行くらいです。

白石10万行！？すごいですね！

奥野はい、書きまくりました(笑)。私一人が書いたコードがそれくらい。最終的には6名くらいのチームで、かなりの量のコードを書きましたね。

実際に使ってみて感じたAngular 2のメリット

白石じゃあそろそろ、Angular 2開発をやってみたナマの声を読書の方々に届けるという、本題に入りますか。奥野さんは、Angular 2のメリットと言われてぱっと思いつくのはなんですか？

奥野そうですね、さっきも言いましたけど、やはりパフォーマンスの良さですね。

白石ぼくは1をほとんど使っていないのですが、そこまで違いますか、やっぱり。

奥野はい、1に比べると段違いです。 コンポーネントの状態が変更されたことを検知する、ChangeDetector という仕組みがやはり素晴らしい。非同期処理や、ブラウザ上のイベントを検知して、ChangeDetectorが状態をチェックします。Angular JS 1.xだと、($scopeの)変更検知はループ処理で行っていたのですが、ずいぶん効率が良くなりました。

（筆者注: 「非同期処理や、ブラウザ上のイベントを検知」する処理は、Zone.jsというライブラリで行う。AngularはZoneのイベントを受けて、ChangeDetectorがコンポーネントの変更検知を行う）

白石ChangeDetectorのコードを動的に生成するというのも、Angular 2のパフォーマンスを向上させていますよね。VMフレンドリーと言われている。

（筆者注: Angular 2は、コンポーネントの変更検知処理をライブラリとして一括で行うのではなく、コンポーネントごとに専用のChangeDetectorを自動的にコード生成する。生成されたChangeDetectorはほぼ静的なコードとなるため、JavaScript VMにとって最適化しやすいと言われている）

あと、先ほど「6名くらいのチームで」とおっしゃってましたが、TypeScriptはよく言われているように、チーム開発に向いていましたか？

奥野 はい、それは間違いなく。ミスも減らせますし、複数人で書いたコードの統合もしやすいです。また、一つの大きな機能を複数人で作る時に、インターフェースだけ先に決めておき、モックを活用して並行開発するというのもやりやすかったです。こういう開発は、型がないJavaScriptよりもずっとうまくやれると思います。

白石「インターフェースに対してプログラミングする」というやつですね。

奥野 Angular 2のほかの大きなメリットとしては、やはりコンポーネント指向であることが挙げられるかと思います。私のときは、コンポーネントのHTMLとコード（TypeScript）はエンジニアが、CSSはデザイナーがメンテナンスするという役割分担を行ったのですが、これもうまくいきました。 Angular 2が、コンポーネント同士だけではなく、コンポーネントのマークアップ、プログラミング、スタイリングを自然に分割できるよう設計されているおかげだと思います。

白石確かに、コンポーネント指向は一番のメリットですよね。再利用性も上がるし、何より「UIを分割して設計しよう」という空気が自然と生まれるのもいい点だと思います。特にぼくは、コンポーネントごとにCSSがカプセル化されて、他のコンポーネントに影響を及ぼさない点が特に気に入ってます。BEMとかの、長ったらしいクラス名が実は好きじゃないもので…

奥野わかります。ただ、私たちの場合はAngularJS 1.xからの移行からプロジェクトが始まってしまったので、Scoped CSSはうまく活かせなかったんですよね。そこはしょうがなくBEMを使い続けていました。

Angular 2アプリ開発で苦労した／している点

白石では、今回の目玉（？）である、Angular 2の「しんどい点」について話しましょうか(笑)。

奥野はい、ぜひ。ただ…実は私、Angular 2は結構気に入ってまして、すぐには欠点が思いつかないんですよね…白石さん、なんかあります？

白石確かに、ぼくも気に入っちゃってるので、あんまり思いつかないですね。

奥野ただ思い返してみると、AngularJS 1.xからAngular 2に移行するのはしんどかったですね。

白石そうか、それはぼくがわからない苦労だ。それは大変そう(笑) 規模が大きいと特に。

奥野移行するときは、3〜4万行くらい(のAngularJS 1.xのコード)だったと思います。コンポーネント数とかはよく覚えていて180コンポーネント、90サービスです。 これを移行するのにだいたい3〜4人月かかったかな、という感じです。しかももともと私たちはTypeScriptでAngularJS 1.xを使っていたので、元がJavaScriptの場合は、もっと移行に時間がかかると思います。

白石それはしんどい。

奥野でも移行したときに最初に思ったのは、「あ、ほんとにできるんだ」っていう驚きでしたけどね(笑)。その時の移行パスについては、ng-japanのカンファレンスで発表しました。Angular 2.0.0がリリースされるより前の資料なので少し古いですが、考え方は変わっていません。あと、苦労した点で思い出したのですが、最初の学習コストが高いという問題はありますね。TypeScriptに慣れていない、JavaScriptしか触ったことのないエンジニアにとっては、型がある言語って最初は扱いにくかったみたいです。

白石学習コストの面はよく言われてますよね。TypeScriptに加えて、Angular 2そのものの学習コストも高いですしね。

奥野付属しているRxJSとかも学習コストはかなり高いですね。

白石あ、それで思い出した。RxJSのドキュメントが腐ってるのはしんどい。

奥野腐ってる(笑)。

白石腐ってますよ！ナビゲーションしにくいし、不完全だし。ぼくなんかまだRxJS初心者なので、ドキュメント見ないとRxJSのコード書けないんですが、ドキュメントが使いにくくていつもつらい想いをしてます。ほかにも、Angular 2のツライ点で言うと、ビルドが遅いのにはいつも辟易してます。うちなんか、コードを直して、自動的にwebpack 2がビルドし直して、ブラウザが自動リロードして、結果が確認できるまでいつも10秒くらいかかってます。

奥野 10秒なんてまだ速い方です(笑) 私たちのチームなんて最初Browserify使ってたのですが、45秒かかってましたから(笑)。 この状況で、(ファイルの変更を) ウォッチ＆再ビルドしてたら、うかつにファイルをセーブすることもためらわれてしまうので、最後はウォッチを無効化して手動ビルドするようにしてました(笑)。

でもこれも、webpackに変えただけでビルド時間が20秒切るようになったんですよね。そういう、ビルド環境の進化とかにも追随していく必要がある。

白石そう、それもけっこう大変なんですよね。うちなんて、 angular-cliとかができる前に自前でビルドスクリプト作っちゃってたので、ずっとそれを自分たちでメンテナンスしてます。そのコストもバカにならない。

奥野そうそう。そういう、ぬか床をずっとメンテナンスするみたいな人が必要になっちゃいますよね。

白石 ぬか床キーパー(笑) 。ちなみに、angular-cliは使ったほうがいいですか、やっぱり。

奥野公式に推奨されてるので、使ったほうがいいでしょうね。

白石前に使おうかと思ったんですが、ビルドスクリプトがかなり複雑で、理解するのがしんどそうだな、と思って敬遠しちゃったんですよね。ブラックボックスとして扱えばいいんでしょうけど、うちはCordovaも使ったりしているのでビルド時に求められることがかなり複雑なんです。きっと手を入れないわけにいかない。

奥野プロジェクトを続けていくと、ビルドプロセスをいじりたくなることはきっとあるでしょうし、中身の理解は必要になってくるでしょうね。ただ、最初はブラックボックスとして簡単に使い始められるのと、ビルドツールの進化に追随していってくれるのはありがたいです。

白石確かに、ビルドツールの進化に付いていくのも一苦労だしなあ…移行、考えようかなあ…

Angular 2から探る、今後のWebアプリ開発の展望

白石では対談の締めに、Angular 2から今後のWebアプリ開発の展望を探ってみたいと思います。 Angular 2のリリースは、Web業界にとっては間違いなく大ニュース。そこから、今後のWeb開発のヒントが得られるのではないかと思って、こういうトピックを最後に持ってきてみました。まず、Angular 2は今後半年ごとにメジャーバージョンアップを行っていくそうですね？

奥野そうですね。次のリリースは2017年の3月で、バージョンは4になる予定です。 @angular/routerというパッケージだけ、バージョンが現在3になってしまっているので、次のバージョンアップでメジャーバージョン番号を合わせるために4になります。

白石しかし、メジャーバージョンアップが半年ごとというのは普通じゃないですよね。何らかのメッセージを感じる。

奥野それは、メジャーバージョンアップに伴って「後方互換性を壊すかもしれない変更も、ためらうことなく行っていく」というメッセージの表れです。

白石ほー、それ、ちょっと詳しく伺ってもいいですか？

奥野こういう方針になったのは、AngularJS 1.xの反省があるわけですね。 AngularJS 1.xは後方互換性を保ったまま、小幅な変更を繰り返しながら5年以上開発が続いていたわけですが、その間にWebの環境が大きく変わってしまい、追随できなくなってしまっていた。そうしたツケを払ったのが、今回のAngular 2へのバージョンアップです。全てを1から作り直さなくてはいけなかった。そのため、「後方互換性を損なってでも、Webの進化についていく」という方針を明確にしつつ、メジャーバージョン間の破壊的変更を最小化しようというわけです。

白石なるほど！そういう方針であれば、Webの進化に対して、フレームワークが置き去りにされることもなさそうですね。例えば今は、コンポーネントのカプセル化にはShadow DOMのエミュレーションがデフォルトですが、Shadow DOMに対応したブラウザが広まった暁には、Shadow DOMをデフォルトにするという変更も行える。普通はそういう変更は、かなり影響範囲が大きいのでフレームワークとしては慎重にならざるをえないですが、「メジャーバージョンアップだから」という理由で、そういう変更も大胆に行えるわけですね。

奥野そうですね。他にも例えばWeb Workersをデフォルトにするとかもあり得ますよね。それに実際には、ある機能が廃止されるとしても、まずは「非推奨」になってから、次のメジャーバージョンアップで削られる。メジャーバージョンアップ2回分、つまり1年間の猶予があるので、実際には破壊的変更に対しても追随はそこまで難しくないと思います。

白石Webの進化に合わせて、どこまでも進化していくフレームワークということですね。ならば、正式名称からバージョン番号を外して「Angular」にしたというのも頷けます。 Angularを開発しているGoogleは、Webの標準化においても影響力は大きいですし、Webの進化とAngularの進化が両輪で進んでいくというわけですね。Webはこれからもエキサイティングな場であり続けそうです。

Angular1から2への移行プロセス、詳しく語ります

林優一 — Thu, 28 Apr 2016 03:05:16 +0000

Angular2のリリースが近づいてきている今、Angular1で開発された資産を、どうやってAngular2に移行していけばよいのでしょうか？

この記事では、実際に移行を行う上でのプロセスを具体的に示していきます。

編集部注: この記事は、2016年3月21日に開催された「ng-japan 2016」のセッション「Angular1.4で作られた自社マイクロサービスを2へマイグレーション」についての、講演者自身によるレポートです。講演内容に加えて、講演者自身による解説や追記によって、よりわかりやすく詳細な記事に仕上げていただきました。

セッションの講演資料と動画はこちらになります。

講演資料

講演動画（4:19:52付近から始まります）

Angular1から2へ移行する前に

Angular2への移行を始める前に、Angular1の構成やソースコードを整理する必要があります。公式サイトに「UPGRADING FROM 1.X」という1からアップグレードする手順の解説があります。その手順に加え、実際のアプリケーションの構成を考慮すると以下のような流れになります。

事前準備
ng-upgrade
コンポーネント(ディレクティブ)の移植
サービスの移植
ページコンポーネントの移植
フィルターの移植
ルーターの移植
ng1ライブラリの置き換え
ng-upgradeの除去

※ セッションでは上記の「サービスの移植」までの前段のみを取り上げています。

事前準備

Angular2では1とは異なる点が多く、そのままではすぐにアップグレードすることはできません。そこでまずは1で近い構成にする事前準備が必要になります。

AngularJS Style Guideに従った構成になっていること

johnpapa/angular-styleguide Angular 1 Style Guide

上記スタイルガイドのRule of 1及びFolders-by-Feature Structure、Modularityの３点には最低限合わせておきましょう。

Angular2ではコンポーネントが中心になり、ファイルの構成もこのスタイルガイドと近い構成になっていきます。あらかじめコンポーネントごとにファイルを分けて置くことで、基本的な設計もコンポーネント指向に近づけておきます。

「その使い方はもう古いかも？AngularJS老化チェック」という記事の内容が現在のコードに当てはまらないかどうかをチェックしておきましょう。当てはまったものはスタイルガイドに沿ってリファクタリングを行いましょう。

モジュールローダー（モジュールバンドラー）（Browserify/Webpackなど）を使っていること

Angular2は必要なスクリプトを読み込んでいって作ることもできますが、モジュールローダー（モジュールバンドラー）前提で話が進んでいくことがあり、導入されていないと理解が難しい状況になります。何も導入していなければBrowserifyかWebpackをおすすめします。公式サイトではSystemJSを用いていますが、Browserify/Webpackを使う場合、必ずしもSystemJSを使う必要はありません。

TypeScriptへ移行

Angular2入門のページではBabelやTypeScriptなどの利用を、とありますが、マイグレーション時においてはTypeScriptへの移行を先にすることを強くお勧めします。

例えば先ほどの「UPGRADING FROM 1.X」のページですが、JavaScript用のドキュメントは準備中となっています（2016年4月現在）。

このような状況からみて、今後の新しい機能についてもTypeScript優先で情報提供されることがあることでしょう。また、既にAngular2に取り組んでいる先人たちのノウハウ（StackOverflowなど）もTypeScriptをベースにしているものが多いので、これを機にTypeScriptを使うと良いでしょう。型などを用いることで移行時の不具合を見つける手助けにもなります。

コンポーネントディレクティブの使用

Angular1.5からコンポーネント機能が提供されました。Angular2の基本はコンポーネントで構成されます。そのため、既存のアプリケーションをコンポーネント化していくことで移行がスムーズになります。対応ブラウザに問題がなければまずはAngular1.5にアップグレードし、ディレクティブや共通部分をコンポーネント化しましょう。

Angular Developer Guide / Component

ここまでを一通り行い、Angular2への移行の準備が整います。

この時点で難しいと思われる方もいるかもしれません。しかしながら、Angular2でも準備と同様の環境が求められます。Angular2はパフォーマンス改善やコンポーネント指向など魅力的な変更があるのでぜひとも移行していきたいところなのです。いずれにしても、今後も大きなフロントエンド開発においてはこのようなモダン構成が求められることでしょうから、そうした練習としてAngular2を採用するのも良いでしょう。

Angular2の導入

Angular2の方へ入っていきたいと思います。最低限必要なものとして以下のものが必要になります。（2016/4/24時点）

angular2@2.0.0-beta.15
systemjs@0.19.26
refrect-metadata@0.1.2
rxjs@5.0.0-beta.2
zone.js@0.6.10
es6-shim@0.35.0

npm installでまとめて導入できます。

npm install angular2@2.0.0-beta.15 systemjs@0.19.26 refrect-metadata@0.1.2 rxjs@5.0.0-beta.2 zone.js@0.6.10 es6-shim@0.35.0

まずAngularの起動方法を変更します。

...

これは以下のようにangular.bootstrap関数を用いて定義するようにします。この際HTMLにng-appは不要です。

angular.bootstrap(document.body,['app'],{strictDi:true});

さらにこの部分をng-upgradeと呼ばれているangular2/upgradeのUpgradeAdapterというものを用いてAngularを起動していきます。

import {UpgradeAdapter} from 'angular2/upgrade';
export const Adapter = new UpgradeAdapter();

import {Adapter} from './adapter.ts';
Adapter.bootstrap(document.body,['app'],{strictDi:true});

このようにupgradeの中にあるUpgradeAdapterを経由して実行をします。今後1と2を混在させた状態でアプリケーションを動かすためのハブのような役割をこのAdapterが行ってくれます。今後いろいろな場面でAdapterを呼び出して使うことになるので、あらかじめ別のファイルにしておいて外部から参照できるようにしておきましょう。

続いてangular2-polyfill.jsを読み込みます。後々Observableを使う時に必要になるので、忘れないように入れておきましょう。

import 'angular2/bundles/angular2-polyfills';

// for old browsers
import 'es6-shim/es6-shim.min.js';
import 'angular2/es6/dev/src/testing/shims_for_IE';

ここでユニットテストなどでPhantomJSなどで実行しているとエラーが出ます。es6-shimを入れることで回避することができます。

karma-es6-shim

TypeScriptにもes6の型定義ファイルが必要になるので、es6-shimの型定義ファイルを入れておきましょう。

typings install es6-shim --save --ambient

以上で移行の前段はできました。ここからはAngular1で作ったものを徐々に2へと置き換えて行く作業になります。

コンポーネントを置き換え

まずは他にあまり依存しない、Directiveのrestrict:’E’で実装されていたものをAngular2へ移行していきます。大きなところからやりたくなりますが、移行は末端から順番にやるようにしましょう。

以下はAngular1のコンポーネントを使って書かれたローディングの例です。

const template = require('./loading.html');
class LoadingCtrl {
    constructor(private LoadingService) {}
}
angular.module(‘app')
    .component('globalLoading',{
        controller: LoadingCtrl,
        transclude: true,
        template: template
    });
export default LoadingCtrl;

class LoadingService {
    count:number = 0;
    loading:boolean = false;
    constructor() {}
    start() {
        ++this.count;
        this.loading = true;
    }
    stop() {
        --this.count;
        if (this.count === 0) {
            this.loading = false;
        }
    }
}
angular.module(‘app')
    .service('LoadingService',LoadingService);

このローディングコンポーネントをAngular2に置き換えていきます。まずはコンポーネント部分を置き換えていきましょう。

import {Adapter} from '../../core/adapter';
import {Component} from 'angular2/core';
import {LoadingService} from './LoadingService';
const template = require('./loading.html');

@Component({
    selector: 'global-loading',
    template: template
})
export class LoadingCtrl {
    constructor(private LoadingService:LoadingService) {}
}
angular.module('app').directive('globalLoading',Adapter.downgradeNg2Component(LoadingCtrl));

Angular2の基本はコンポーネントになっているので、出来る限りコンポーネントに置き換えておきましょう。

Angular2で書かれたコンポーネントは1環境では呼び出すことができません。そこでディレクティブにAdapter.downgradeNg2Component()を用いて登録することで、Angular1環境下においても使うことができるようになります。

続いて、サービス部分の移植です。

import {Adapter} from '../../core/adapter';
import {Injectable} from 'angular2/core';

@Injectable()
export class LoadingService {
    count:number = 0;
    loading:boolean = false;
    constructor() {}
    start() {
        ++this.count;
        this.loading = true;
    }
    stop() {
        --this.count;
        if (this.count === 0) {
            this.loading = false;
        }
    }
}
angular.module('app').factory('LoadingService',Adapter.downgradeNg2Provider(LoadingService));
Adapter.addProvider(LoadingService);

@Injectable()をつけてInject(DI)可能であることを示します。コンポーネント同様に、Angular2記法のServiceをAngular1からもDIできるようにAdapter.downgradeNg2Provider()を使ってダウングレードして登録しておきます。

加えて、Adapter.addProvider()で作ったサービスをProviderに登録する必要があります。これはUpgradeAdapterを使っている場合で、Angular2のコンポーネントからDIさせるために必要になります。

これを行わないと以下のようなエラーとなります。

EXCEPTION: Error: [$injector:unpr] Unknown provider: LoadingServiceProvider <- LoadingService <- LoadingInterceptor <- $http <- $templateFactory <- $view <- $state

同様にHTMLもAngular2記法に置き換えを行います。

ディレクティブではng-transcludeを使っていましたが、Angular2ではng-contentになっているのは注意が必要です。

また、細かいところですが、angular.constantsもなくなっているので、constでオブジェクトを作っておき、それをimportして使うように置き換えましょう。

ServiceのAngular2移行

さて次に、ServiceをAngular2化していきます。基本はLoadingのときと同じですが、通信周りには変更があります。

Ajax通信を行う際は$httpを使って通信を行っていました。Angular2ではHttpでAjax通信を行うことができます。$httpはPromiseを返していましたが、HttpはObservableを返すという違いがあります。

以下はAngular2記法に置き換えたいわゆるモデルです。作りは先程のローディングの場合と殆ど変わりませんが、HttpはObservableを返すので、処理の変更箇所を減らすためにPromiseで返すようにしています。

import {Adapter} from '../../core/adapter';
import {Injectable} from 'angular2/core';
import {CONSTANTS} from '../../core/constants';
import {Http, Response} from 'angular2/http';
@Injectable()
export class AccountModel {
    constructor(protected http:Http) {}
    get() {
        return this.http.get(`${CONSTANTS.API_PATH}account`).toPromise();
    }    
}
angular.module('app').factory('AccountModel', Adapter.downgradeNg2Provider(AccountModel));
Adapter.addProvider(AccountModel);

Httpの返すObservableについてはRxJSのドキュメントを参照してください。

Reactive-Extensions/RxJS

最後にあらかじめコンポーネントにしておいたページでフォームの部分を移植してみます。まずテンプレートをAngular2記法に置き換えます。

テンプレートの記法は以下の参考リンクを上から順番に見ていくと良いでしょう。

*ngIfのようなシンタックスについて – TemplateSyntax
Angular1ではこう書いてたけど2だとどうなるの？というとき – ANGULAR 1 TO 2 QUICK REFERENCE
慣れてきて一覧でみたい時 – ANGULAR CHEAT SHEET

formの移植

続いてformの制御部分を移植します。メールアドレスの入力フォームで、バリデーションが通らないと更新ボタンが押せない（disabled）になるというよくあるものです。


    メールアドレス変更     
        
            
            
                メールアドレスを正しく入力してください
                必ず入力してください

formの制御のために[ngFormModel]="name"を使います。（これ以外にも複数方法があります）また、inputタグにはngControl="name"を使って名前を付けます。

下記のように書きかえます。


	
		
		
			
				セイは必須項目です
				全角カタカナで入力してください

フォームのエラー状況によって振り分けしたい部分は[ngFormModel]でつけた名前.controls.inputにつけたngCotrol名.errors.エラー名でエラーが発生しているかどうかを確認することができるようになりますが、スクリプトも修正が必要です。

import {FORM_DIRECTIVES,Control,ControlGroup,Validators} from 'angular2/common';

@Component({
    selector: 'profile-form',
    templateUrl: 'webroot/components/profile/profile.html',
    directives: [FORM_DIRECTIVES]
})

this.form = new ControlGroup({
	lastphonetic: new Control('',Validators.compose([
		Validators.required,
		ValidateService.phonetic
	]))
});

コンポーネント内でform関連のディレクティブを使うときには@Componentのdirectivesに配列で使うディレクティブを指定します。

先ほどngModelFormにつけた名前と同じ名称にnew ControlGroup()します。そしてngControlにつけた名前と同じ名称でnew Control()します。第一引数がデフォルトの値、第二引数にバリデーション関数を指定します。複数指定する場合はValidators.componse([])を１つの場合はValidators.requiredなどを指定します。

Validatorsにはあらかじめ定義されているバリデーターがあります。

static required(control: modelModule.Control): {
	[key: string]: boolean;
};
static minLength(minLength: number): Function;
static maxLength(maxLength: number): Function;
static pattern(pattern: string): Function;
static nullValidator(c: any): {
	[key: string]: boolean;
};

Angular1ではtype=”email”でメールアドレスのチェックが行われていましたが、Angular2では上記のチェック以外は行われない点は注意してください。

今回はメールアドレスなので、カスタムバリデータを作成します。

export const ValidateService = {
	email(control:Control) {
		if (!/^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/i.test(control.value)) {
			return {email: true};
		}
	}
}

returnする名称はエラーが発生した時に form.controls.lastphonetic.errors.emailで取得することができる値です。

バリデーションの正規表現についてはAngular1で使用されていたものと同じです。

Angular directive/input.js

セッションでは時間の関係で移行手順の途中までしかお話できませんでした。移行作業は作られたアプリケーションによって異なりますが、公式サイトの手順だけではハマりどころも発生することでしょう。

今後移行手順に関してはさらに整理され情報も出てくると思いますので、事前準備をしっかりと行い、ng-upgradeを用いて少しずつ移行を進めていきましょう。