Angular2 – HTML5Experts.jp

モバイルUIフレームワークのド本命、Onsen UI 2正式リリース！──React, Angular 2両対応！

又川尚樹 — Wed, 05 Oct 2016 00:19:13 +0000

先日、本サイトにて公開された React/Angular2時代のUIフレームワーク考──Ionic2、Onsen UI2を語るという記事を受けて、本記事ではOnsen UI 2の具体的な使い方をご紹介していきたいと思います。

Onsen UI 2 の概要

Onsen UIはアシアル株式会社が2013年から公開しているオープンソースのHTML5 UIライブラリです。 HTML5モバイルアプリでの利用に特化した高速な動作性が特徴です。

2016/09/15（日本時間）に次期バージョン「Onsen UI 2」の正式版をリリースしました。 AngularJSのロードが必要だったOnsen UI 1と異なり、Onsen UI 2は単体で動作 します（Web 標準の Custom Elements を利用しています）。

また、Android向けの画面とiOS向けの画面をワンソースで構築できるAutomatic Stylingなどの新機能を備えています。

Hello, World

空ディレクトリを作成し、以下のコマンドでonsenuiパッケージをインストールします。

npm init --yes
npm install onsenui@2.0.0 --save

次に、index.htmlを以下の内容で作成します。




    
    
    
    
    
    


    
        
            Onsen UI
        

        
            Hello World!
            Click Me!

head要素内で読み込まれているonsenui.css, onsen-css-components.css, onsenui.min.jsがOnsen UI 2の実体です。

上記3つのファイルの読み込みが完了すると、ons-page や ons-toolbarといった要素がブラウザに登録され、元々ブラウザに組み込まれているinput要素などと同じ感覚で使えるようになります。

最終的なディレクトリ構成は以下のようになります。

├── index.html
├── node_modules
│   └── onsenui
└── package.json

ブラウザでindex.htmlを開くと以下のような画面が表示されているはずです。ボタンをクリックするとOnsen UI製のダイアログ（ons-alert-dialog 要素）が表示されます。

このようにOnsen UI 2は、特殊な知識を必要とすることなく、少しの準備ですぐに使い始めることができます。

なお、今回使用したons-page, ons-toolbar, ons-button, ons-alert-dialog以外にも、Onsen UI 2はモバイルアプリに不可欠なコンポーネントを数多く揃えています（以下はその例です）。

使用可能なコンポーネントの一覧は Onsen UI 2 Docs にあります。Onsen UI 2を使った開発では、使用可能なコンポーネントとその使い方を公式ドキュメントから探しながら画面を実装していくことになります。

アプリケーションフレームワークと併用する

発展的な内容として、Onsen UI 2をアプリケーションフレームワークと併用する方法について解説します。

Onsen UI 2の特徴は任意のアプリケーションフレームワークと併用できる点です。実際、React, AngularJS, Angular2, Vue.js, Meteorと一緒に動作させても問題なく動作することを確認しています。

しかし Onsen UI 2のコンポーネントは input 要素などと同じく、DOM要素自体にメソッドが紐づけられているため、Onsen UI 2単体ではコンポーネントを操作する際にDOM要素への直接アクセスが必要になってしまいます。DOM要素への直接アクセスは、ReactやAngular2などといったDOM要素への直接アクセスを忌避するアプリケーションフレームワークにおいて問題となります。

その問題の解決策として、Onsen UI 2は一部のアプリケーションフレームワークに対してバインディングを用意しています。

バインディングを利用すると、DOM要素への直接アクセスを回避し、各アプリケーションフレームワークの流儀に則って Onsen UI 2のコンポーネントを操作することができます。

2016/09現在、Onsen UI 2は React, AngularJS, Angular 2, Vue.js の4種類のアプリケーションフレームワークに対してバインディングを提供しています。

React と併用する

Onsen UI 2をReactと併用する場合は react-onsenui パッケージ（React バインディング）を使用します。

空ディレクトリを作成し、以下のコマンドで必要なパッケージをインストールします。

npm init --yes

# Onsen UI本体
npm install onsenui@2.0.0 --save

# アプリケーションフレームワーク （React）
npm install react react-dom --save

# Onsen UIのReactバインディング
npm install react-onsenui@1.0.0 --save

# トランスパイラ （Babel）
npm install babel-core@^5 --save

次に、index.html を以下の内容で作成します。

最終的なディレクトリ構成は以下のようになります。

├── index.html
├── node_modules
│   ├── babel-core
│   ├── onsenui
│   ├── react
│   ├── react-dom
│   └── react-onsenui
└── package.json

ブラウザで index.html を開くと先ほどと同様の画面が表示されているはずです。

Angular 2と併用する

Angular 2をReactと併用する場合はangular2-onsenuiパッケージ（Angular 2 バインディング）を使用します。

空ディレクトリを作成し、以下のコマンドで必要なパッケージ・型定義ファイルをインストールします。

npm init --yes

# Onsen UI本体
npm install onsenui@2.0.0 --save

# Angular 2 アプリのビルドに使用するツール
npm install --global typescript
npm install --global typings
npm install --global webpack

# Angular 2の動作に必要なライブラリ （polyfill）
npm install core-js --save
npm install reflect-metadata --save
npm install zone.js --save
npm install rxjs --save

# Angular 2本体
npm install @angular/core@2.0.0 --save
npm install @angular/common@2.0.0 --save
npm install @angular/compiler@2.0.0 --save
npm install @angular/platform-browser@2.0.0 --save
npm install @angular/platform-browser-dynamic@2.0.0 --save

# Onsen UIのAngular 2バインディング
npm install angular2-onsenui@1.0.0-rc.1 --save

# Angular 2アプリのビルドに必要な型定義ファイル
typings install --global dt~core-js#0.0.0+20160725163759

次にmain.tsを以下の内容で作成します。

import { NgModule, CUSTOM_ELEMENTS_SCHEMA, Component } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { OnsenModule, onsNotification } from 'angular2-onsenui';

@Component({
    selector: 'app-root',
    template: `
        
            
                Onsen UI
            

            
                Hello World!
                Click Me!
            
        
    `,
})
export class AppComponent {
    alertPopup() {
        onsNotification.alert('Onsen UI alert');
    }
}

@NgModule({
  imports:      [ OnsenModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ],
  schemas:      [ CUSTOM_ELEMENTS_SCHEMA ],
})
export class AppModule {
}

platformBrowserDynamic().bootstrapModule(AppModule);

次に以下のコマンドを実行します。

tsc --init

生成された tsconfig.json を以下の内容に書き換えます。

{
    "compilerOptions": {
        "moduleResolution": "node",
        "module": "commonjs",
        "target": "es5",
        "noImplicitAny": false,
        "sourceMap": false,
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true
    },
    "exclude": [
        "node_modules"
    ]
}

次に以下のコマンドで main.bundle.js を生成します。

# トランスパイル
tsc

# バンドル
webpack main.js main.bundle.js

最後に index.html を以下の内容で作成します。

最終的なディレクトリ構成は以下のようになります。

├── index.html
├── tsconfig.json
├── main.ts
├── main.js
├── main.bundle.js
├── node_modules
│   ├── @angular
│   │   ├── common
│   │   ├── compiler
│   │   ├── core
│   │   ├── platform-browser
│   │   └── platform-browser-dynamic
│   ├── angular2-onsenui
│   ├── core-js
│   ├── onsenui
│   ├── reflect-metadata
│   ├── rxjs
│   └── zone.js
├── package.json
└── typings
    ├── globals
    │   └── core-js
    └── index.d.ts

ブラウザでindex.htmlを開くと先ほどと同様の画面が表示されているはずです。

まとめ

本記事ではOnsen UI 2の具体的な使い方を紹介しました。また、発展的な内容として、Onsen UI 2をReact, Angular 2と併用する方法について解説しました。

アプリケーションフレームワークの進化やUIライブラリの充実により、HTML5によるモバイルアプリの実装の敷居は下がり続けています。

ハイブリッドアプリに続いてProgressive Web Appsが話題となる中、そこで必要となるモバイルアプリライクな UI/UX の実装に対する一つの解として、是非Onsen UI 2を活用していただければと思います。

（追伸: 先日Twitterに@Onsen_UI_jaを開設しました。日本語での技術的な質問はこちらまでどうぞ）

キミはNativeScriptを知っているか？Angular2でネイティブモバイルアプリが書けるぞ！

佐川夫美雄 — Fri, 09 Sep 2016 02:42:17 +0000

連載： Web技術でアプリ開発2016 (4)

Web技術でアプリ開発2016特集・第4弾は、JavaScript（およびTypeScript）によるクロスプラットフォーム開発が可能ながらネイティブと同様の実行速度を得られる、Telerik社のNativeScriptを取り上げたいと思います。

NativeScriptは、Angular2とも組み合わせて使うことができる、現在注目のフレームワークです。本記事では、XMLによるUI定義を行う従来の開発手法だけではなく、Angular2（ただし、RC4という少し古いバージョン）と組み合わせてモバイルアプリを開発する方法まで網羅してご紹介します。

NativeScriptの概要

NativeScript 2.0は、JavaScriptとCSSを使用し、ネイティブのiOSとAndroidのアプリを構築するためのフレームワークです。ネイティブで実行されるパフォーマンスとUXを提供し、その結果、ネイティブプラットフォームのレンダリングエンジンを使ってUIを構築します。WebViewsでのUIレンダリングはしていません。

NativeScriptにはtns-core-modulesというコアモジュールがあり、上記に述べたJavaScriptからネイティブへの変換を行っています。NativeScriptのgithubリポジトリを見ると「0.9.0」のリリースが「5 Mar 2015」なので、約1年とちょっとの歳月が経過していることになります。現時点での最新バージョンは「2.2.1」です。

NativeScriptでAngular2を利用する場合には、まず、Angular2のテンプレート（@Component.template）に、NativeScriptで提供しているディレクティブを記述します。そして、上記で説明したtns-core-modulesとnativescript-angularを利用してNativeScriptがビルドを行い、iOSやAndroidのネイティブコードを生成します。

「NativeScript with Angular2」の最初の「v0.3.0」がリリースされたのが今年8月初旬で、最新は「v0.3.1」です。

この記事では、macOS上での開発を前提に解説をしています。

インストール

インストール手順はquick-setupにも書かれている通り、あまり複雑なところはありません。しかし、もしAndroid SDKをはじめて利用する場合には少し戸惑うと思います（私もNativeScriptのあまりやさしいとはいえないエラーメッセージにちょっと苦しみました）ので、順を追って説明します。

ステップ1: Rubyのインストール
ステップ2: Node.jsのインストール
ステップ3: NativeScript CLIのインストール
ステップ4: iOSとAndroid開発に必要なもののインストール

ステップ1: Rubyのインストール

NativeScriptをビルドするとき、Rubyを利用します。Rubyのバージョンは2.2以降が必要ですが、macOSにデフォルトでインストールされているRubyは古いため、Homebrewを使って最新バージョンをインストールします。最新のRubyが入っている方は読み飛ばして下さい。

Homebrewのインストール

HomebrewはRubyを使いインストールし、インストール後環境変数を定義します。

$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
$ brew update
$ echo 'export PATH=/usr/local/bin:$PATH' >> .bash_profile
$ source .bash_profile

rbenvとruby-buildのインストール

brewを使ってrbenvとruby-buildをインストールします。rbenvを使ってRubyのバージョン管理を行います。ruby-buildはrbenvのプラグインで、異なるバージョンのRubyをコンパイルし、インストールするためのものです。

$ brew install rbenv ruby-build
$ echo 'eval "$(rbenv init -)"' >> ~/.bash_profile
$ source ~/.bash_profile
$ rbenv --version
$ rbenv install -l
$ rbenv install 2.2.3
$ rbrnv version
$ rbenv global 2.2.3
$ ruby -v
ruby 2.2.3p173 (2015-08-18 revision 51636) [x86_64-darwin15]
$

ステップ2: Node.jsのインストール

Node.jsはv4.0.0以降を利用する必要があります。rbenvと同様にバージョン管理システムをインストールします。Node.jsのバージョン管理システムにはnodebrew, nodist, nvm, nvm-windowsなどいくつかありますが、筆者はnodebrewを好んで利用しています。

nodebrew のインストール

curlを使ってインストールを行います。インストールが完了するとパスを追加するようにメッセージが表示されますので、.bash_profile に登録してください。

$ curl -L git.io/nodebrew | perl - setup
$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> .bash_profile
$ source .bash_profile

Node.jsのインストール

続いて、Node.jsをインストールします。nodebrew ls-remoteコマンドを使ってバージョンを確認し、nodebrew install-binaryコマンドを使ってNode.jsのインストールを行います。利用するバージョンを動かす場合にはnodebrew useコマンドを実行します。

今回、Node.jsのバージョンとしてはv5.12.0を利用しました。

$ nodebrew ls-remote
$ nodebrew install-binary v5.12.0
$ nodebrew use v5.12.0
$ node -v
v5.12.0
$

ステップ3: NativeScript CLIのインストール

いよいよNativeScriptのインストールです。npmコマンドを使ってnativescriptをグローバルインストールします。nativescriptはスカッフォールディング（コード雛形の自動生成）を提供するモジュールで、tnsコマンドによって実行されます。

tnsコマンドを実行して、インストールが正しく行われているか確認しましょう。参考までにtnsコマンドで出力される内容はtns --helpと同じ内容です。tnsコマンドでは主に

テンプレートからプロジェクトの生成
プロジェクトへの生成プラットフォーム(iOS, Android)の追加
JavaScriptからネイティブへのビルド
エミュレータの実行

を行います

$ npm install nativescript -g
$ tns
# NativeScript
┌─────────┬─────────────────────────────────────────────────────────────────────┐
│ Usage   │ Synopsis                                                            │
│ General │ $ tns  [Command Parameters] [--command ]                            │
│ Alias   │ $ nativescript  [Command Parameters] [--command ]                   │
└─────────┴─────────────────────────────────────────────────────────────────────┘

・・・

$

ステップ4: iOSとAndroid開発に必要なもののインストール

JDKのインストール

JDKはバージョンが8以降のものをインストールしてください。インストールが完了したら、.bash_profileに設定を登録してください。

$ echo 'export JAVA_HOME=$(/usr/libexec/java_home)' >> .bash_profile
$ source .bash_profile

Android開発環境のインストール

Android SDKをHomebrewからインストールし、変数ANDROID_HOMEを定義します.

$ brew install android-sdk
$ echo 'export ANDROID_HOME=/usr/local/Cellar/android-sdk/24.4' >> .bash_profile
$ echo 'export PATH=$PATH:$ANDROID_HOME/platform-tools:$ANDROID_HOME/tools' >> .bash_profile
$ source .bash_profile

Androidエミュレータのインストール

android-sdkのインストールが終わったら、実際に利用するエミュレータを定義します。android-sdkがインストールされているディレクトリへ移動し、andorid avdを実行することで設定を行います。android-sdk以下のディレクトリ構成は次の通りです。

$ cd /usr/local/Cellar/android-sdk/24.4
$ tree -L 1
.
├── INSTALL_RECEIPT.json
├── README
├── add-ons -> ../../../var/lib/android-sdk/add-ons
├── bin
├── build-tools
├── etc
├── extras -> ../../../var/lib/android-sdk/extras
├── platform-tools
├── platforms -> ../../../var/lib/android-sdk/platforms
├── samples -> ../../../var/lib/android-sdk/samples
├── sources -> ../../../var/lib/android-sdk/sources
├── system-images -> ../../../var/lib/android-sdk/system-images
├── temp -> ../../../var/lib/android-sdk/temp
└── tools

Androidエミュレータを高速化するためのハードウェア支援環境「Intel Hardware Accelerated Execution Manager (Intel® HAXM) 」を事前にインストールします。次のスクリプトを実行してください。

$ cd /usr/local/Cellar/android-sdk/24.4/extras/intel/Hardware_Accelerated_Execution_Manager
$ sudo ./silent_install.sh

完了したら、android avdを起動し、事前にエミュレータ定義を登録します。

$ cd /usr/local/Cellar/android-sdk/24.4/tools
$ ./android avd

この設定を忘れると「Cannot read property ‘targetNum’ of undefined」というエラーが出ます。

参考までに、今回利用しているエミュレータは次のように定義しています。

よくあるトラブルとしては、Dockerを起動しているようなら終了させておくのが無難です。Dockerが利用しているポートとエミュレータが利用するポートがぶつかり、実行できないことがあります。

iOS開発環境のインストール

macOSを利用されていれば、iOSのエミュレータを利用するのは容易だと思います。

Command Line Tools for Xcode

$ sudo gem install xcodeproj
$ sudo gem install cocoapods
$ brew install xcproj

だいぶ長くなりましたが、これで開発環境の設定は完了です。尚、tnsコマンドにはtns doctorというコマンドがあります。環境設定などうまくできているかのチェックができますので、一通り終わった後に実行し、漏れがないかを確認します。

$ tns doctor
Verifying CocoaPods. This may take more than a minute, please be patient.
  ◡ Installing iOS runtime.tns-ios@2.2.1 ../../../../../../var/folders/ts/n268b_qx2j7g3ykzkqlj3jt00000gn/T/nativescript-check-cocoapods11686-1391-akcqo6/node_modules/tns-ios
  ◝ Verifying CocoaPods. This may take some time, please be patient..
Your components are up-to-date.

No issues were detected.
$

NativeScriptで作るHello World

ここではNativeScriptを使ってHello World的なアプリケーションを作成します。手順は

プロジェクトの作成
プラットフォームのインストール
エミュレータの実行

です。NativeScriptでのアプリケーション作成にはtnsコマンドを使います。

今、プロジェクトをMyFirstNativeScriptAppとしますので、iOSとAndroidアプリケションの両方を作成する場合にはiOSとAndroidのプラットフォーム用ライブラリをインストールしエミュレートを起動します。

$ cd ~
$ tns create MyFirstNativeScriptApp
$ cd MyFirstNativeScriptApp
$ tns platform add android
$ tns platform add ios
$ tns run android --emulator
$ tns run ios --emulator

Androidエミュレータでの実行結果

iOSエミュレータでの実行結果

tns create MyFirstNativeScriptAppで作成されたファイルを確認します。

$ tree -L 2
.
├── app
│   ├── App_Resources
│   ├── app.css
│   ├── app.js
│   ├── main-page.js
│   ├── main-page.xml
│   ├── main-view-model.js
│   ├── package.json
│   └── references.d.ts
├── node_modules
│   ├── babel-traverse
│   ├── babel-types
│   ├── babylon
│   ├── lazy
│   ├── tns-core-modules
│   └── tns-core-modules-widgets
├── package.json
└── platforms
    ├── android
    └── ios

このアプリケーションで特に重要なファイルがありますので、簡単に説明します。

app.js
main-page.xml
main-page.js
main-view-model.js

app.jsはアプリケーションが一番最初にロードするエントリーポイントで、このファイルからアプリケーションmain-page.jsの呼び出しを行っています。

// app.js
var application = require("application");
application.start({ moduleName: "main-page" });

// main-page.js
var createViewModel = require("./main-view-model").createViewModel;

function onNavigatingTo(args) {
  var page = args.object;
  page.bindingContext = createViewModel();
}
exports.onNavigatingTo = onNavigatingTo;

main-page.xmlは画面をXMLで定義し、関連する処理をmain-view-model.jsに定義してます。

// main-view-model.js
var Observable = require("data/observable").Observable;

function getMessage(counter) {
  if (counter <= 0) {
    return "Hoorraaay! You unlocked the NativeScript clicker achievement!";
  } else {
    return counter + " taps left";
  }
}

function createViewModel() {
  var viewModel = new Observable();
  viewModel.counter = 42;
  viewModel.message = getMessage(viewModel.counter);

  viewModel.onTap = function() {
    this.counter--;
    this.set("message", getMessage(this.counter));
  }

  return viewModel;
}

exports.createViewModel = createViewModel;

テンプレートを使って簡単なアプリケーションを作成する

NativeScriptには、テンプレートを使ってプロジェクトを生成する機能があります。

$ tns create [Project Name] --template [Template Name]

繰り返しになりますが、テンプレートを作成した後「プラットフォームのインストール」「エミュレータの実行」を行うとエミュレートで実行確認ができます。

このテンプレートはnpmに登録されています。が、まだあまり多くのテンプレートは定義されていないようです。その中から開発時に利用できそうなものを幾つかピックアップしました。具体的なコードは各テンプレートを使ってコードを生成し確認していただけると幸いです。

タブを使ったアプリケーション

$ tns create MyNextGreatApp --template tns-template-tab-navigation

タブ切り替えのテンプレート部分はTabViewタグを使い、各タブで表示する内容はTabViewItemで定義しています。

Androidエミュレータでの実行結果

iOSエミュレータでの実行結果

一覧と詳細を表示するアプリケーション

$ tns create MyMasterDetailApp --template tns-template-master-detail

一覧と明細はGridLayoutを使って表示する場所を定義し、一覧部分を表示するテンプレートはListViewを使っています。

明細部分はdetails-page.xmlでレイアウトを定義していて、具体的な内容の表示にはdetails-view.xmlを使っています。

Androidエミュレータでの実行結果

iOSエミュレータでの実行結果

サイドメニュー付きアプリケーション

$ tns create MyDrawerApp --template nativescript-template-drawer

サイドメニュー付きアプリケーションを作成する場合には、サイドメニューdrawer-content.xmlを定義し、メニューをクリックしたときの画面をそれぞれ定義しています。

Androidエミュレータでの実行結果

iOSエミュレータでの実行結果

NativeScriptとAngular2を組み合わせる

ここからが本記事の一番のポイント、「Angular2を使ったNativeScriptアプリケーション」に入ります。準備が長くて申し訳ありません！

npmにはいくつかのAngular2を利用したNativeScriptのテンプレートがありますが、今回はNativeScriptのチュートリアルを参考に、githubリポジトリーからテンプレートをcloneしたものを利用します。

NativeScript with Angular2で作るHello World

まずはリポジトリhttps://github.com/NativeScript/sample-Groceriesをcloneします。clone後、angular-startをcheckoutすると、NativeScript with Angular2で開発するための最も基本的な構成を得ることができます。

$ git clone https://github.com/NativeScript/sample-Groceries.git
$ cd sample-Groceries
$ git checkout angular-start
$ tree -L 2
├── app
│   ├── App_Resources
│   ├── app.component.ts
│   ├── app.css
│   ├── app.routes.ts
│   ├── main.ts
│   ├── package.json
│   ├── pages
│   ├── platform.android.css
│   ├── platform.ios.css
│   ├── shared
│   └── utils
├── package.json
├── platforms
│   └── ios
├── references.d.ts
└── tsconfig.json
$ tns platform add ios
$ tns platform add android
$ tns run ios --emulator
$ tns run android --emulator

Androidエミュレータでの実行結果

iOSエミュレータでの実行結果

NativeScriptではBootstrapに特別なメソッドnativeScriptBootstrapを利用します。具体的にエントリーポイントmain.tsは次のように記述されます。

// main.ts
import {nativeScriptBootstrap} from "nativescript-angular/application";
import {AppComponent} from "./app.component";

nativeScriptBootstrap(AppComponent);

Angular2では、NativeScriptのXMLを@Component.templateにディレクティブとして定義します。ただ@Component.templateではXMLをそのまま利用できないので、少し書き換える必要があります。具体的にはをに書き換えるといった作業です。

具体的にこのサンプルの場合、XML定義では

ですが、Angular2ではコンポーネントとして定義します。

// app.component.ts
import {Component} from "@angular/core";

@Component({
  selector: "my-app",
  template: ""
})
export class AppComponent {}

LabelはHTMLタグではなくNativeScriptで定義されたディレクティブです。NativeScriptでは幾つかのUIコンポーネントを定義していますので一覧にまとめます。

UIコンポーネントのマッピング

NativeScriptのUIコンポーネントは、iOSやAndroidのウィジェットにマッピングさせています。ビルドするとNativeScript with Angular2で定義したコンポーネントがマッピングされたiOSやAndroidのウィジェット変換されます。具体的な利用方法に関しては、Native Script UI Componentsを見ていただきたいと思います。

NativeScript with Angular2	Android	iOS
Button	android.widget.Button	UIButton
Label	android.widget.TextView	UILabel
TextField	android.widget.EditText	UITextField
TextView	android.widget.EditText	UITextView
SearchBar	android.widget.SearchView	UISearchBar
Switch	android.widget.Switch	UISwitch
Slider	android.widget.SeekBar	UISlider
Progress	android.widget.ProgressBar	UIProgressView
ActivityIndicator	android.widget.ProgressBar	UIActivityIndicatorView
Image	android.widget.ImageView	UIImageView
ListView	android.widget.ListView	UITableView
HtmlView	android.widget.TextView	UILabel
WebView	android.webkit.WebView	UIWebView
TabView	android.support.v4.view.ViewPager	UITabBarController
SegmentedBar	android.widget.TabHost	UISegmentedControl
DatePicker	android.widget.DatePicker	UIDatePicker
TimePicker	android.widget.TimePicker	UIDatePicker
ListPicker	android.widget.NumberPicker	UIPickerView

NativeScript + Angular2でHello World

はじめに作成した「NativeScriptで作るHello World」のAngular2版のテンプレートがあります。アプリケーションの動きはまったく同じですがAngular2で書かれています。

$ tns create MyNgNativeScriptApp --template tns-template-hello-world-ng 
$ cd MyNgNativeScriptApp
$ tns platform add android
$ tns platform add ios
$ tns run android --emulator
$ tns run ios --emulator

テンプレート部分を見比べると、XMLで書かれていたテンプレートコードがAngular2スタイルで記載されていることが理解でき、結果見通しのよいコードになっています。

// app.component.ts
import {Component} from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "app.component.html",
})
export class AppComponent {
  public counter: number = 16;

  public get message(): string {
    if (this.counter > 0) {
      return this.counter + " taps left";
    } else {
      return "Hoorraaay! \nYou are ready to start building!";
    }
  }
    
  public onTap() {
    this.counter--;
  }
}

Todosアプリケーション

NativeScriptのサイトには、より多く機能が実装されたチュートリアルBuilding Apps with NativeScript and Angular 2を提供しています。完成したアプリケーションは先ほどと同じリポジトリhttps://github.com/NativeScript/sample-Groceriesにありますので、是非見て下さい。

$ git clone https://github.com/NativeScript/sample-Groceries.git NgTodosNative
$ cd NgTodosNative
$ tns platform add ios
$ tns platform add android
$ tns run ios --emulator
$ tns run android --emulator

Androidエミュレータでの実行結果

iOSエミュレータでの実行結果

サンプルコードを読むと、NativeScriptで利用するnativeScriptBootstrapの使い方やNativeScript用のルーティング設定が記載されていたりとAngular2の特徴を活かした実装になっています。

今回は、環境設定からはじまり、NativeScriptを使ったもの、NativeScript wit Angular2へと進め、Hello World的なアプリケーションを動かすところまでをテンプレートを使いながら簡単に説明させていただきました。

最後に

NativeScriptの事例がないかと探してみましたがNativeScript Showcasesにいくつかありました。このアプリケーションがAngular2をベースにしたものかはわかりませんが、NativeScriptを使ったものです。

NativeScriptのXMLで定義したUIコンポーネントが、コンパイル時にiOS、Androidのウィジェットにそれぞれマッピングされネイティブアプリにコンパイルされます（ちょっと古いですがXSLTを思い出しました）。Angular2の@Component.templateを利用することでNativeScriptがUIコンポーネントの定義を解釈し、ネイティブコードの生成を行っています。

ただし、NativeScript with Angular2用に作成したコンポーネントとNativeScriptを使わない通常のAngular2のコンポーネントとの相互再利用性は低いです。ですが、慣れたAngular2の構造を利用しTypeScript(もしくはJavaScript)で書けるというのは非常に興味が湧くところです。

編集部よりお詫び
2016/9/9 18:30 編集部が付けた以前のタイトルは、一部の方を不快にさせる可能性があるとの判断のもと、記事タイトルを変更いたしました。執筆者の佐川さん、及び以前のタイトルを不快に感じた多くの方々に、深くお詫び申し上げます。

React/Angular2時代のUIフレームワーク考──Ionic2、Onsen UI2を語る

白石俊平 — Fri, 02 Sep 2016 00:00:21 +0000

連載： React/Angular2時代のWeb開発 (2)

読者の皆様こんにちは、編集長の白石です。

先日ふとしたきっかけで、本サイトの認定エキスパートでありアシアル株式会社の社長でもある田中正裕さんと、Web技術について語り合う機会がありました。

ReactやAngular2といった次世代のアプリケーションフレームワークが存在感を増す中で、UIを構築するためのフレームワークはどう進化するのか？

これらのアプリケーションフレームワークをベースとしたIonic2やOnsen UI2と言ったUIフレームワークについて、それぞれの立場から語り合ってみました。（田中さんはOnsen UI2の開発者、白石はIonic2をかなりヘビーに使い倒しています）

Progressive Web Apps (PWApps)というキーワードが認知を広げる中で、ハイブリッドアプリやモバイルサイトを構築する手段として、これらのフレームワークは存在感を増しています。PWApps、React、Angular2、Cordovaといったキーワードに関心のある方は必読です！

では、本編をお楽しみください。

対談参加者のプロフィール

田中正裕(アシアル株式会社代表取締役社長)

ユーザーインタフェース設計からインフラストラクチャー構築まで、最先端の技術を駆使したシステム構築を手がける。特にPHPをはじめとするOSSや、HTML5やJavaScriptといったオープンなアーキテクチャーを用いたシステムの構築に尽力している。モバイルアプリ開発プラットフォーム「Monaca」のプロダクトマネジャーを兼務。

白石俊平(HTML5 Experts.jp編集長)

株式会社オープンウェブ・テクノロジーCEO。2015年12月、「最先端は、ここにある。」を謳うテクノロジー情報キュレーションサービスTechFeedをリリース。Web技術者向け情報メディア「HTML5 Experts.jp」編集長。日本最大（6,500名超）のHTML5開発者コミュニティ「html5j」ファウンダー。Google社公認Developer Expert (HTML5)、Microsoft社公認Most Valuable Professional (IE) などを歴任。著書に「HTML5&API入門」（2010, 日経BP）、「Google Gearsスタートガイド」（2007, 技術評論社）など。監訳に「実践jQuery Mobile」（2013, オライリー）など。

Ionic2とOnsen UI2

白石: 本日はよろしくお願いします。今回はReact/Angular2時代のUIフレームワークということで、最先端のUIフレームワークについて語る場にしたいと思っています。

田中: はい、よろしくお願いします！

白石: まずは、Ionic2やOnsen UI2について馴染みのない読者も多いと思うので、それぞれのフレームワークとぼくらの関わりについて話しましょうか。まずは、両フレームワークの共通点としては、以下の様な点が挙げられるかと思います。

どちらもコンポーネント指向のUIフレームワーク。独自のタグを元に、HTMLっぽいテンプレートを記述することでUIを構築していける。
どちらも最初から数多くのUIコンポーネントを備えており、モバイルネイティブに近い見た目のアプリを作れる。
どちらも、Cordovaをベースとしたモバイルアプリ開発（ハイブリッドアプリ）を前提としている。そのため、以下に示すようなCordovaの特徴を備えることになる。
- ほぼ完全なクロスプラットフォーム性を備える
- プラグインを通じて、ネイティブの機能を呼び出すことができる
- WebView上で動作するので、ネイティブアプリに比べて動作が遅い

白石: で、こうした認識をベースとして、それぞれのフレームワークの違いなどに踏み込んでいければと思います。まずは田中さんとOnsen UIの関係ですが、田中さんはOnsen UIのメイン開発者ということでいいんでしょうか？

田中: 正確に言うと、開発のリードをしている立場ですね。

白石: では、開発の優先順位なども田中さんが決定してらっしゃるということですね。チームは何人くらいいるんですか？

田中: 以前弊社に所属していた久保田光則さんも含めると、4〜5人くらいがフルコミットしている感じですね。

そもそもOnsen UIとは何かというと、バージョン1の時はAngular1をベースとしたUIフレームワークでした。現在開発を続けているOnsen UI2の大きな特徴は「アプリケーションフレームワーク非依存」ということです。



  
  Click Me!

Onsen UI2自体はWeb Componentsに則って作られていて、それをReactやAngular2、Angular1、さらにはjQueryなどと組み合わせて利用できます。最近だとVue.jsとか今はMeteorとかいうバインディングも増えていますね。

白石: そこがIonicとの大きな違いですね。

ぼくは、先日リリースしたTechFeedというアプリで、Ionic2を全面的に採用しました。TechFeedはエンジニア向けのニュースアプリなのですが、Web/メール/モバイルアプリと、様々なクライアントがあります。そのモバイルアプリを開発するにあたって、プラットフォームごとにコードベースを分けたくなかったので、Cordova上で動作するモバイルアプリ用UIフレームワークを探していたんですね。

その際、まだβ版が出たばかりだったAngular2が割とアーキテクチャ的に美しくまとまっていたのと、Ionic2が既にAngular2に対応していたので、採用することにしました。なので、Ionic2はAngular2をベースにしたUIフレームワークです。Angular2以外では動きません。

この、UIフレームワークとアプリケーションフレームワークが密結合（Ionic2）なのか、それとも疎結合（Onsen UI2）なのかというところが、今日の対談のポイントになりそうですね。

ただこのまま、UIフレームワークありきの議論に入っていく前に、ぼくは一つ確認したいことがありまして。そもそもUIフレームワークって必要とされているんでしょうか？

UIフレームワークは必要か？

白石: 「いらないだろう」という前提で話すわけではなくて、Webの世界にとってコンポーネント指向のUIフレームワークというのはまだ新しい存在なので、そもそも「なぜ必要なのか？」を確認したいのです。とりあえず、フレームワークが必要か不要かで言うと、Webデザイナーさんの中には、フレームワークを嫌がる方も多い気がするのですが。

田中: 確かにそういう方もいらっしゃるとは思います。が、（Bootstrapなどのような）CSSフレームワークと、JavaScriptも含めたUIフレームワークは別に考えるべきじゃないかと思います。

白石: 確かにそうですね。CSSフレームワークは、デフォルトでそれなりの見た目になるとか、コーディングスタイルが統一されるなどの利点はあると思いますが、フレームワークのスタイルを変更しようとすると途端に面倒だったりしますしね。フレームワーク独自のルールを覚えなくちゃいけないし、最終的には全部リセットしたくなったり（笑）。

田中: その通りです。それに、ことモバイルアプリやサイトをWeb技術で作る場合に大事なのって、単なるCSSのプリセットがあることではありません。実際に操作してみた時のスムーズさだったり、アプリ全体から受ける印象だったりと、振る舞いも含めたもっと包括的なUXです。

そういう面で、アプリ全体のUXを統一して、なおかつプラットフォームに馴染んだものにするためには、やはり一貫した枠組みが必要です。それは実際に私がMonacaを運営する上で、お客様からご要望をいただいてきたところでもありますし、だからこそOnsen UIを作ることにも繋がりました。ということで、私はUIフレームワークは確実に必要だと思いますね。

白石: なるほど。ただ、UIフレームワークって、寿命が短くないですか？昔はjQuery MobileやKendo UIなんてのもありましたが、今ではあまり使っているという話を聞きません。

UIフレームワークとアプリケーションフレームワーク

田中: それは、それらのフレームワークがUI的に古びてしまったというわけではなく、アーキテクチャ的に古いと見なされたから使われなくなってしまったんだと思うんです。JavaScriptアプリケーションのアーキテクチャは、ここ数年目まぐるしく移り変わってきました。jQueryのあとAngular1、React、Angular2, 他にもRiot.jsとかVue.jsなども出てきている。

ですがそれはアーキテクチャの進化であって、UIが進化したわけではありません。例えばUIの進化って、iOS7からフラットデザインになりましたとか、マテリアルデザインが出てきましたとか、そういうことです。こうした進化がすごく早いかと言われると、正直そうは思いません。UIフレームワークが、アプリケーションアーキテクチャの進化に引きずられちゃってたんじゃないか、というのがぼくの思うところです。

白石: なるほど、だからOnsen UI2はアプリケーション・フレームワークに依存しない形で設計されているわけですね。ぼくはTechFeedをIonic2で作りましたが、それはAngular2の採用を先に決めていたから、というのもあります。というか、その時はまだOnsen UI2が今ほど開発が進んでいなかったので、モバイルアプリを包括的に作れるUIフレームワークと、コンポーネント指向のアプリケーションフレームワークの組み合わせが、Ionic2 + Angular2しかなかったんですよね。

田中: Ionic2はAngular2に強く依存しているわけですが、Ionic2を学ぶには先にAngular2を学ばなくてはならないわけですよね。私はそこを少しもったいないな、と思います。元々私がUIフレームワークで実現したかったことって、「JavaScriptのフレームワークを学ばなくても簡単に使える」ということだったので。

白石: 確かに、Onsen UIはそういうところの配慮が行き届いている気がします。ぼくもOnsen UI1の時に使わせていただいていましたが、Webサイト上のサンプルコードが良くできていて、コピペするだけでUIが作れてしまうのが、とても楽ちんでした。

それぞれのフレームワークが目指すもの

田中: あと、Ionic2はどことなくUIフレームワークというよりは「プラットフォーム」を目指している気がします。

白石: 確かに。Ionicはモバイルアプリを作る際はCordovaを使用するのですが、CordovaもあくまでIonicが規定するプラットフォームの一部というつもりなのか、cordovaコマンドをラップしたionicコマンドを提供していますね。また、CordovaプラグインのAPIをラップした ionic-native というモジュールも提供しています。これは、各種プラグインをTypeScriptから使えるようにしてくれているので、結構ありがたくはあるんですが。

田中: UIフレームワークを入り口として、プラットフォームに入ってきてください、というスタンスな気がしますよね。 Onsen UIはあくまでUIフレームワークであり、アプリケーションスタックの一部という位置付けなので、そこは思想の違いが現れている気がします。

白石: Ionic2はアプリケーションプラットフォームを限定していて、プラットフォームを志向している。Onsen UI2はアプリケーションプラットフォーム非依存で、ライブラリを指向している。こういう対比になりますね。こうして並べると、個人的にはOnsen UI2の方が設計面で魅力を感じます。

田中: ありがとうございます(笑)。

白石: ただ、まだ結論を出すのは早い気もしますね。どちらも正式リリース前ですし(笑)。

TechFeedがAngular2とIonic2を採用しているからというわけではないですが、アプリケーションプラットフォームを限定しているからこその強みもあるかもしれません。ぼくはまだOnsen UI2を実際に触ってみたことがないので比較ができないのですが、Ionic2のほうがAngular2との相性とかはさすがにいいでしょうし。先ほど出てきたionic-nativeパッケージとかもなかなか便利です。

またぼくらがIonicを採用した理由の一つには、コミュニティの大きさがIonicのほうが大きそうだった、という理由もあります。GitHubのStarの数が、Ionicは25,000、Onsen UIは3,000という違いがあったので。コミュニティの大きさは、Web上の情報量の差にもなって表れてくるので、困ったときに情報を得やすいと思ったのです。

このようにいろんな観点での比較ができそうなので、一概にどちらが優れているとここでは結論付けられなそうですが、こうした議論が読者の皆さんにとって判断の助けになるといいですね。

（編集部: 参考までに、ここまでに出てきた論点や、Web上で得られる内容を比較した表を掲載しておきます）

項目	Ionic2	Onsen UI2
依存するアプリケーションプラットフォーム	Angular2	非依存（現時点ではAngular1/2, Reactなど）
フレームワークの実装言語	TypeScript	ES2015とTypeScript
目指す地点	プラットフォーム？	ライブラリ
GitHub上でのStar数 (2016/8/25時点)	25,370	3,216

（UIコンポーネントは現在のところほぼ同数ですが、どちらかにしか実装されていないコンポーネントもいくつかありますし、今後大きく増えていく部分だと思われるため、表からは除外しています）

今後のWeb技術の展望を語る

白石: 最後にお聞きしたいんですが、Onsen UIに限らず、今後のWeb技術って、どういう方向に進んでいくとお考えですか？

田中: Web技術って、今どんどん開発のバリエーションが増えている状態だと思っています。それはフラグメンテーションと呼べるかもしれない。例えば、Angular2がTypeScriptを、ReactがJSXを使用しているように、です。これらが収束して一つの太い流れができていくのか、このまま個別の進化を続けていくのかは、まだ何ともいえません。

白石: テクノロジーのスタックが積み上がっていくにつれ、それぞれの開発手法の間の差異が広がっているというわけですね。こうした状況は、なぜ起きていると考えられますか？

田中: 私はMonacaを通じて「ハイブリッドアプリ」、つまりWeb技術でモバイルアプリを作るというところをずっとやってきました。その経験から言うと、モバイルアプリは大きく2パターンあります。一つは長期間のメンテナンスが必要なアプリ。もう一つはキャンペーンなどのワンタイムなアプリケーションですね。前者には強固な基盤が求められるので、Angular2のようなものが求められます。後者はそうではないですね。逆にさくっと作れるようなものが求められます。

こうしたニーズの二分化も理由の一つじゃないかなあとは思っています。

白石: なるほど、ニーズが分かれていると。そういう意味でいうと、静的な文書中心の「Webサイト」と、Single Page Application化が進む「Webアプリ」の違いも、フロントエンド技術のフラグメンテーションに一役買っていそうです。「Webサイト」の制作においては、まだまだjQueryは現役ですし、無理にそこを変える必要もなさそうですし。

あと、Web技術の適用範囲が増えてきているというのもあるかもしれませんね。WebVRとか、JavaScriptで動かせる組み込み基板とか。ウェアラブルやロボティクスという分野にも、Web技術が広まっていくとは思います。実際にそれがどれくらい使われるかは未知数ですけども。

田中: とはいえWeb技術って、情報技術全体から見るとエッジの技術ではありませんよね。かなりコモディティ化の進んだ、汎用的でメインストリームな技術。

白石: 確かに。これだけ技術が進んでも、結局のところHTML/CSS/JavaScriptという基本的な部分はあまり変わっていません。

田中: こうしたWeb技術の適用範囲をいかに広げていくか…というのは、個人的な興味として強くあります。いちエンジニアとして、Webのスキルセットをいろんなプラットフォームで使えるよう後支えしたいというのは、私の目指すところです。

白石: それは、HTML5 Experts.jpでもぜひ進めていきたいところです。ではそろそろお時間ですね。本日はお付き合いいただき、どうもありがとうございました！

FirebaseとAngular2を使ってリアルタイムでデータのやり取り【導入編】

林優一 — Mon, 27 Jun 2016 00:00:18 +0000

連載： Angular2で学ぶFirebase入門 (1)

Firebaseはリアルタイム同期なデータベースを中心に、Auth認証やPushNotificationやユーザーの行動分析といったアプリケーションに最適な機能を提供するBasSです。先月行われたGoogle IOにて、PushNotificationや行動分析機能が追加されるなど話題となりました。

今回はFirebaseのリアルタイムベースとAngular2を用いて、リアルタイムにデータをやり取りする方法について解説します。

Firebaseのリアルタイムデータベース

Firebaseのリアルタイムデータベースはクラウドホスト型のNoSQLデータベースです。JSONの形式でデータは保存されます。 APIはもちろん、iOS/Android/Web用のSDKが提供されているので、非常に簡単に導入することができます。

また、ネットワークが途中で切れた場合は自動的に再接続を行い、復帰後に改めてデータが同期されます。同時100コネクション、1GBのデータ、10GBの転送量までは無料で使うことができるので、まず試してみるといったことができます。

今回はこの無料プランとAngular2を使って進めていきます。

Angular CLIで環境構築

Angular2の環境構築が初めての方でも簡単に導入できるように、Angular2ではCLIが公開されています。これを利用して環境を構築していきます。（※別途、Node.jsのインストールが必要です）

angular-cli

まずはnpmを使って、angular-cliをインストールします。

npm install -g angular-cli

インストールが成功していれば、ng versionでバージョンが表示されます。

angular-cli: 1.0.0-beta.5
node: 5.6.0
os: darwin x64

続いて、ng newコマンドを用いてプロジェクトを作成します。newの後には任意のプロジェクト名を入力してください。（angularやfirebaseという名称を用いるとパッケージ名が重複してしまうため、関連ライブラリのインストールに失敗するのでご注意ください）

ng new sample
cd sample

今回はng new sampleでプロジェクトを作成します。

sampleというフォルダができるのでcd sampleで移動し、この状態で ng serve コマンドを実行するとサンプルのアプリケーションがビルドされ、http://localhost:4200/にブラウザでアクセスするとsample works!と表示されます。

これで開発環境の準備が整いました。

AngularFire導入

本題のAngularFireを導入していきます。

angularfire2

npm install angularfire2 firebase@2.4.2 --save

※ 6月14日現在の最新版は、firebase 2.4.2に対応しています。

続いて、firebase用の型定義ファイルをインストールします。 typingsがインストールされていない場合は npm i -g typingsを実行してインストールをしてください。

typings install dt~firebase --save --global

※ 注意

typings 1系と0系では、コマンドやインストールされるファイルの構成が異なります。現在のバージョンのangular-cliでは0系でインストールされますが、npmでインストールされる最新版は1系になります。本稿では1系がインストールされている状態で解説を行います。0系の場合は以下のtypingsに追記する作業は必要ありません。

src/typings.d.tsにインストールされたfirebaseの型定義ファイル群を追記します。

/// 
/// 
declare var module: { id: string };

angular-cli-build.jsを開き、vendorNpmFilesに'angularfire2/**/*.js' 'firebase/lib/*.js' を追記します。

var Angular2App = require('angular-cli/lib/broccoli/angular2-app');

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      'systemjs/dist/system-polyfills.js',
      'systemjs/dist/system.src.js',
      'zone.js/dist/**/*.+(js|js.map)',
      'es6-shim/es6-shim.js',
      'reflect-metadata/**/*.+(js|js.map)',
      'rxjs/**/*.+(js|js.map)',
      '@angular/**/*.+(js|js.map)',
      'angularfire2/**/*.js', // <- 追加
      'firebase/lib/*.js'      // <- 追加
    ]
  });
};

続いて、/src/system-config.tsに以下のようにfirebase,angularfire2の記述を追記します。

/** Map relative paths to URLs. */
const map: any = {
  'firebase': 'vendor/firebase/lib/firebase-web.js',
  'angularfire2': 'vendor/angularfire2'
};

/** User packages configuration. */
const packages: any = {
  angularfire2: {
    defaultExtension: 'js',
    main: 'angularfire2.js'
  }
}

これでAngular2でFirebaseを使う準備が整いました。

Firebaseの登録

続いて、Firebaseの登録と設定を行っていきましょう。

firebase

FirebaseはGoogleアカウントで登録することができます。登録が完了すると、プロジェクトを作るためのボタンが表示されます。

「新規プロジェクトを作成」ボタンをクリックして、アプリケーションを作成しましょう。

アプリケーションが作成できたら「Database」ページを開きます。以下のように、まだデータベースには何も入っていません。まずはこの画面から初期データを登録してみましょう。

このようにデータを作成しました。

{
  items: {
    0: {
      value: 'item0001'
    },
    2: {
      value: 'item0002'
    },
    2: {
      value: 'item0003'
    }
  }
}

Firebase上では、すべてオブジェクトの形式でデータが構成されるようにしておきます。

続いて、「ルール」のタブをクリックしてルールを設定します。ルールはデータベースへの値に対してのアクセス権の設定を行うことができます。JSONの形式でデータを定義していきます。

詳しいルールの記載は、以下のページに説明があります。 https://html5exp-sample.firebaseio.com/

ここではサンプルということで、読み書きともに誰からでもできるように設定しておきましょう。

{
  "rules": {
    "items": {
      ".read": "true",
      ".write": "true"
    }
  }
}

これによってデータベースのitems以下は、読み書きともに誰でも許可されるようになりました。では、これで登録したデータが読み取れるか試してみましょう。/src/main.tsを開きます。

import { bootstrap } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { SampleAppComponent, environment } from './app/';
import { FIREBASE_PROVIDERS, defaultFirebase } from 'angularfire2'; // <- add

if (environment.production) {
  enableProdMode();
}

bootstrap(SampleAppComponent,[
  FIREBASE_PROVIDERS, // <- add
  defaultFirebase('https://.firebaseio.com/') // <- add
]);

main.ts にangularfire2のファイルをimportし、bootstrap関数の第２引数にFIREBASE_PROVIDERSと defaultFirebase('https://.firebaseio.com/') を配列で渡しておきます。

こうすることによって、今後Angular2のコンポーネント内でFirebaseに必要な設定とプロバイダが提供されるようになります。

続いて、画面にデータを表示するためのコンポーネントに変更を加えます。

import { Component } from '@angular/core';
import { AngularFire, FirebaseListObservable } from 'angularfire2'; //<- add

@Component({
  moduleId: module.id,
  selector: 'sample-app',
  templateUrl: 'sample.component.html',
  styleUrls: ['sample.component.css']
})
export class SampleAppComponent {
  title = 'sample works!';
  items: FirebaseListObservable;
  constructor(af: AngularFire) {
		this.items = af.database.list('/items');
  }
}

{{title}}

  
    {{item.value}}

*ngFor="let item of items | async" のasyncはAsyncPipeと呼ばれるAngular2にはじめから組み込まれているPipeのひとつです。これはitemsのObservableをsubscribeしたときの引数を自動的に取得して表示してくれるPipeです。詳しい使い方や解説は以下のページにありますので、こちらをご一読ください。

Async Pipe

ng serve コマンドを改めて実行すると、Firebaseで登録されたデータが表示されるようになります。

データの追加

次にブラウザからデータを追加する処理を実装していきましょう。

export class SampleAppComponent {
  title = 'sample works!';
  items: FirebaseListObservable;
  constructor(af: AngularFire) {
    this.items = af.database.list('/items');
  }
  addItem(value:string) {
    this.items.push({value:value});
  }
}

{{title}}

  
    {{item.value}}

FirebaseListObservableにデータをpushするだけで配列データにデータを追加することができます。

データの更新

今度はリストのデータを更新してみましょう。

export class SampleAppComponent {
  title = 'sample works!';
  items: FirebaseListObservable;
  constructor(af: AngularFire) {
    this.items = af.database.list('/items');
  }
  addItem(value:string) {
    this.items.push({value:value});
  }
  updateItem(key:string,value:string) {
	  this.items.update(key,{value:value});
  }
}

{{title}}

  
    {{item.value}}

this.items.update(key,{value:value});のように更新したいデータの$keyと値を渡すことで更新ができます。 Firebaseのオブジェクトには$keyというプロパティがあり、各データのKey名を取得することができます。 pushで追加されたデータは、一意なKeyが自動で振られるようになっています。

データの削除

続いて、リストのデータを削除してみましょう。

export class SampleAppComponent {
  title = 'sample works!';
  items: FirebaseListObservable;
  constructor(af: AngularFire) {
    this.items = af.database.list('/items');
  }
  addItem(value:string) {
    this.items.push({value:value});
  }
  updateItem(key:string,value:string) {
	  this.items.update(key,{value:value});
  }
  deleteItem(key:string) {
	  this.items.remove(key);
  }
  deleteAll() {
	  this.items.remove();
  }
}

{{title}}

  
    {{item.value}}

更新と同様にthis.items.remove(key);と削除したいデータのKeyを渡すことで、そのデータのみを削除することができます。

this.items.remove();とKeyを渡さずにremoveするとリスト全体が削除されるので注意してください。

このように非常に簡単にデータの読み書きが実装できてしまいます。

オブジェクトデータの取り扱い

続いて、今度はリストデータでなく単一のオブジェクトのデータを扱ってみましょう。Firebaseの管理画面でDatabaseのデータに以下のようなconstantsを追加しました。

{
  constants: {
    title: "My first firebase app"
  },
  items: {
    ...
  }
}

ルール設定ページにいき、constantsは読み込み専用に設定しておきます。

{
  "rules": {
    "constants": {
      ".read": "true",
      ".write": "false"
    },
    "items": {
      ".read": "true",
      ".write": "true"
    }
  }
}

src/app/sample.component.tsを、以下のように修正します。

import { Component } from '@angular/core';
import { AngularFire, FirebaseListObservable, FirebaseObjectObservable } from 'angularfire2'; //<- add

@Component({
  moduleId: module.id,
  selector: 'sample-app',
  templateUrl: 'sample.component.html',
  styleUrls: ['sample.component.css']
})
export class SampleAppComponent {
  constants: FirebaseObjectObservable;
  items: FirebaseListObservable;
  constructor(af: AngularFire) {
    this.constants = af.database.object('/constants');
    this.items = af.database.list('/items');
  }
  addItem(value:string) {
    this.items.push({value:value});
  }
  updateItem(key:string,value:string) {
    this.items.update(key,{value:value});
  }
  deleteItem(key:string) {
    this.items.remove(key);
  }
  deleteAll() {
    this.items.remove();
  }
}

そして、ビューのタイトル部分をconstantsから取得して表示させるようにします。

{{(constants | async)?.title}}

こうすることで、オブジェクトのデータを読み込んで画面に表示させることができました。

オブジェクトの更新

オブジェクトの更新をする際は、リストと同様にupdate関数を用いて変更を行うことができます。その時にはルールで書き込みが許可されている必要があります。

this.constants.update({title:"new title"});

オブジェクトの削除

オブジェクトの削除を行う際にはremove関数を用いますが、以下のようにremoveするとconstantsごと削除されます。

this.constants.remove(); // constantsごと削除

１つのプロパティのみを削除したい場合は、以下のように削除したいプロパティまで取得した上でremove関数を実行します。

af.database.object('/constants/title').remove(); //titleだけ削除

まとめ

このようにAngular2とFirebaseを使うことで、簡単にリアルタイムにデータのやり取りを行うことができるようになります。

今回はサンプルということで誰でも読み書きできる形にしていますが、ユーザー認証をFirebaseで作ったり、既にあるログイン情報を利用して認証させたりできるので、新規でも追加でも導入しやすくなっています。

次回はその認証機能を用いてログインすると書き込みができるようにしていきたいと思います。

Angular2を書くためのAngularJSの書き方

吉田徹生 — Fri, 27 May 2016 06:00:05 +0000

Angular2のリリースが刻一刻と近づいてきました。しかし世の中のプロダクトは、まだまだ大半がAngular1.xで開発されています。Angular2はコンポーネント指向が徹底されていたり、TypeScriptが推奨の開発言語であるなど、Angular1から大きく変わっており、一見すると移行は容易ではありません。

しかしAngular1.xの最新バージョンである1.5では、Angular1から2への移行をスムーズに行うために、Angular2を見据えたコーディングが行えるようになっています。この記事ではAngular2への移行をスムーズにするための、Angular1の書き方を紹介していきます。

【編集部注】
※この記事は、2016年3月21日に開催された「ng-japan 2016」のセッション「Angular2を書くためのAngularJSの書き方」についての、講演者自身によるレポートです。講演内容に加えて、講演者自身による解説や追記によって、よりわかりやすく詳細な記事に仕上げていただきました。
※本記事では、AngularJSをAngular1、 AngularJSの2系をAngularと表記しています。

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

講演資料

講演動画（2:03:46付近から始まります）

Angular1の歴史と背景

Angular1は、今から4年前の2012年6月に、バージョン1.0.0がリリースされました。この4年間に、Windowsなら8->10、Macで10.8->10.11、Androidで4->6、iOSで6->9という変化がありました。バージョンアップが比較的遅いとされるOSでも、4年の間にこれほど大きなバージョンアップが行われているのです。

現在のIT業界では、4年とはこれほど長い期間です。また4年前のWebを振り返ってみますと、当時はBackbone.jsなどのMVCフレームワークが全盛期でした。Angularはリリースされてから大きな人気を博し、世界中の数多くのプロジェクトで採用されました。

しかし月日は流れ、2014年にReactが発表されてからは、Angular1の人気にも陰りが訪れます。コンポーネント指向を採用したReactの優れた設計が広く支持されたこと、Angular1はパフォーマンスがあまりよくないということもあり、Reactを採用するプロジェクトも増えてきました。

そこでパフォーマンスを大きく改善し、アーキテクチャが刷新されたAngular2が今年中にリリースが予定されています。しかしAngular2は変更点が多く、普及には時間がかかることが予想されます。そのため、Angular1.xは当分サポートされることが決定しています。

Angular1とAngular2の違い

Angular1とAngular2の違いは多岐にわたります。その中でも代表的な違いを以下に挙げます。

主な開発言語がJavaScriptからTypeScriptへ
Two-wayデータバインディングを廃し、One-wayデータバインディングへ
従来のスコープに代わり、コンポーネントがUIの状態を保持する（コンポーネント指向）
テンプレートの文法が変更
従来のng-routerからコンポーネントルーターに
従来の文字列ベースのDI (Dependency Injection)から、型によるDIに

対象ブラウザに関して

Angular1.5は、残念ながらIE8以前では動作しません。IE8以前を対象とする場合は、Angular1.2を利用する必要があります。もしIE8を対象にしなくてよいのであれば、Angular1.5へのアップデートが強く推奨されます。

JavaScriptからTypeScriptへ

Angular2では、メインの開発言語がTypeScriptに変更されました。

簡単に経緯を説明しますと、もともとAngular2を開発する際、JavaScriptのスーパーセットであるAtScriptという言語を同時に開発していました。

AtScriptの実体は、アノテーション付きのTypeScriptと言ってよいものでしたが、開発は難航。2015年3月にTypeScriptが（アノテーションに近い機能である）デコレーターの実装を表明すると、Angular2はTypeScriptへと移行したという流れがあります。

実際には、Angular2にとってTypeScriptは必須ではなく、JavaScriptやDartでも開発は可能です。しかしTypeScriptを利用すると多くのメリットがあるので、TypeScriptの使用が推奨されています。

ちなみに、TypeScriptというのは以下のような特徴を持った言語です。

TypeScriptの特徴

型がある
インターフェースがある
モジュールインポートがある
仕様がしっかりしている
JavaScriptのスーパーセットである
TypeScriptはそのままではブラウザでは利用できないのでコンパイル（JavaScriptへの変換）が必要

BrowserifyやWebpackを使おう

皆さん、GruntやGulpと言ったタスクランナーを既に使われている方は多いと思います。Angular1.5 / 2の開発では、TypeScriptのimport文を使用してモジュール間の依存性を記述していくため、こうした依存関係を解決して実行可能なプログラムを生成できるツールが必要です。

そうしたツールにはBrowserifyやWebpack、System.jsなどがあり、import文やCommonJSのrequire()関数などを解釈し、依存関係を解決した上で、ファイルを一つにまとめる機能を持ちます。

TypeScriptからのコンパイルなどもプラグインとして提供されており、今後のAngular開発には必須のツールとなっています。

Angular1.5のコードを眺める

Angular2とAngular1の違いや開発に必要な情報が一通り揃ったところで、実際にAngular1.5のコードを眺めてみましょう。以下は、画面に「Hello」と表示するだけのプログラムです。

import * as angular from 'angular';

angular.module('app')
.component('app', {
  template: `Hello {{ $ctrl.text }}`,
  controller: class App {
    public text: string;
    constructor() {}
  },
  bindings: {
    text: '@'
  }
});




  
    Loading...

Angular1のコードには違いないように見えますが、これまでとは何かが違いますね。

実際上のコードはTypeScriptで書かれており、importやclass、publicなどのアクセス指定子など、素のJavaScriptでは使えない文法が多く使われています。

DirectiveからComponentへ

Angular2から、コンポーネントという概念が登場します。それに合わせて、Angular1.5でもコンポーネントが利用できるようになりました。Angular1のディレクティブに比べて、簡単に作ることができます。

DirectiveとComponentでの設定値の違い

Directiveには先述したComponentと呼ばれるDOMの生成と他にAttributeに設定する処理ng-repeatやng-showなども同じ方法で作成しています。

そのため、Componentを作るには設定が過多気味であり、Angular2へ移行する場合に必要なものと不必要なものをより分けた作成メソッドを新たに追加されました。

以下の表が元々のDirectiveメソッドと追加されたComponentメソッドとの設定の違いとなります。

	Directive	Component
bindings	No	Yes (binds to controller)
bindToController	Yes (default: false)	No (use bindings instead)
compile function	Yes	No
controller	Yes	Yes (default function() {})
controllerAs	Yes (default: false)	Yes (default: $ctrl)
link functions	Yes	No
multiElement	Yes	No
priority	Yes	No
require	Yes	Yes
restrict	Yes	No (restricted to elements only)
scope	Yes (default: false)	No (scope is always isolate)
template	Yes	Yes, injectable
templateNamespace	Yes	No
templateUrl	Yes	Yes, injectable
terminal	Yes	No
transclude	Yes (default: false)	Yes (default: false)

引用：https://docs.angularjs.org/guide/component

Angular1のパフォーマンス問題

Angular1のパフォーマンスが良くない理由ですが、その原因を挙げてみましょう。

Two-wayデータバインディングが重い
状態の監視に伴うオーバーヘッド
dirty check
$digest loop

では、どうしたらよいのでしょうか？以下の様なアーキテクチャが推奨されていますが、Fluxアーキテクチャによく似ています。

では、このアーキテクチャに従ったコードのサンプルを紹介します。

まずはアプリケーションのエントリーポイントとなるHTML（index.html）です。これは、angular.bootstrap()を呼び出しているだけで、特に変わったことはしていません。ただし、list-cmpというタグを使用していることは覚えておいてください。




  
    Loading...

以下がサービスのコードです。このサービスは、アプリケーションのデータを保持しており、データの操作を行うことが可能です。

import * as angular from 'angular';

angular.module('app')
.service('StoreService', class Store{
  private datas: Array = [];
  constructor(){
    this.datas = ['angular', 'javascript', 'typescript', 'angular2'];
  }
  getList() {
    return this.datas;
  }
  addData(data:string) {
    this.datas.push(data);
  }
  changeData(index:number, data:string){
    this.datas[index] = data;
  }
  deleteData(index:number){
    this.datas.splice(index, 1);
  }
})

以下は、index.htmlで使用されていたlist-cmpタグ（コンポーネント）の実装です。内部で、さらにlang-cmpというタグ（コンポーネント）を使用しています。

また、Angular1で多用されていた$scopeはもう使われておらず、代わりにコンポーネントのコントローラーの参照である$ctrlが使用されています。基本的には、$scopeはもう使用してはならないものとして考えましょう。

import * as angular from 'angular';

angular.module('app')
.component('listCmp', {
  template: `
    
  `,
  controller: class List {
    private store;
    private datas: Array = [];
    constructor(StoreService) {
      this.store = StoreService;
      this.datas = StoreService.getList();
    }
    change(index: number, data: string) {
      this.store.changeData(index, data);
    }
    delete(index: number){
      this.store.deleteData(index);
    }
  }
});

最後に、lang-cmpタグの実装です。上のコードで指定されていたlang-changeやlang-deleteと言った属性が、langChangeやlangDeleteといったプロパティに対応しています。

import * as angular from 'angular';

angular.module('app')
.component('langCmp', {
  template: `
  
  `,
  controller: class Data {
    private langData:string;
    private index:number;
    private langChange;
    private langDelete;
    constructor() {}
    change() {
      console.log(this.index, this.langData);
      console.log(this.langChange);
      this.langChange({index: this.index, data: this.langData});
    }
    delete() {
      this.langDelete({index: this.index});
    }
  },
  bindings: {
    'langData': '<',
    'index': '<',
    'langChange': '&',
    'langDelete': '&'
  }
})

コンポーネント指向のディレクトリ構造

コンポーネント指向になったことから、コンポーネント単位にまとめると見通しがよくなります。

├─about
│  └─components
│          about.component.e2e.ts
│          about.component.html
│          about.component.scss
│          about.component.spec.ts
│          about.component.ts
│
├─app
│  └─components
│          app.component.e2e.ts
│          app.component.html
│          app.component.spec.ts
│          app.component.ts
│          navbar.component.html
│          navbar.component.scss
│          navbar.component.ts
│          toolbar.component.html
│          toolbar.component.scss
│          toolbar.component.ts
│
├─assets
│  │  main.scss
│  │  _colors.scss
│  │  _variables.scss
│  │
│  └─svg
│          more.svg
│
├─home
│  └─components
│          home.component.e2e.ts
│          home.component.html
│          home.component.scss
│          home.component.spec.ts
│          home.component.ts
│
└─shared
    └─services
            name-list.service.spec.ts
            name-list.service.ts

テストについて

Angular2ではテストの基本セットがJasmineとなっていますので、Jasmineだと学習コストは少なくなります。

ルーティング

Angular1ではngRouteよりもui-routerがよく使われていると思いますが、Angular2では性能と管理が簡単なComponentRouterが登場します。 Angular1.5用のComponent Routerが用意されています。

まとめ

このセッションで学んだことを最後にまとめます。

Angular1のプロジェクトでもTypeScriptを使おう
タスクランナーを利用しましょう
Webpackやbrowserifyを利用しましょう
DirectiveからComponentに変更しよう
controllerの廃止
Scopeは原則利用しないように
Two-way data-bindingよりOne-way data-binding
コンポーネント単位でファイルを整理しよう

Angular2は「モダンJavaScriptの学習セット」！エキスパートによるディスカッションが熱かった（詳細な注釈付き！）

白石俊平 — Mon, 04 Apr 2016 00:15:30 +0000

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

去る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という変数で参照できるようにする」と言った場合、といった具合である。

※ テンプレートをデコレーターに直接書く／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にアジャストするという点では、とても良いフレームワークだなと思っています。

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

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

Angular2の失敗しない始め方〜「ng-japan 2016」セッションレポート〜

仲裕介 — Fri, 01 Apr 2016 00:52:57 +0000

この記事は、「ng-japan 2016」のセッションレポートです。講演内容を再現していますが、ニュアンス等伝えきれない場合があるので、気になるところは、記事末尾に掲載の講演資料やYoutube動画でご確認ください。

Angular2の失敗しない始め方 / 稲富駿氏

株式会社トップゲートの稲富駿氏によるセッションです。セッション資料や配信動画は記事末尾でご確認ください。このセッションでは、大きく3つの点について触れられました。それぞれのポイントを書き起こします。

Angular2に関するよくある質問や誤解について
Angular2を構成する基礎技術について
Angular2を学ぶために必要なこと

1. Angular2に関するよくある質問や誤解について

Angular2について正しい知識を知ってもらうために、よくある質問とその回答について幾つか取り上げる。

Q1. AngularJS2なのか？Angular2なのか？

Angular2が正しい名称。ここが大事。Angularはただ単にJSフレームワークライブラリではない。JSフレームワークであると同時に、 ElectronやNativeアプリで動くライブラリでもあり、Serverサイドで動くためのライブラリでもある。つまり、Angularはアプリケーション開発のためのプラットフォームと認識するのが正しい。

Q2. Angular2を学ぶためにTypeScriptを勉強する必要があるのか？

必ず必要というわけではないが、勉強すべきである。Angular2はコードベースがTypeScriptベースになっている。勉強すべき理由はそれだけではなく、TypeScriptを利用することで、次の大きく3つのメリットを享受でき、安全で開発自体の生産性向上を図ることが可能になる。特にTypeScriptを採用できない理由がない場合は、TypeScriptで書くべきである。

メリット１：静的型チェックが利用可能

TSの一番大きな特徴である静的型チェック。静的型付けされたコードは常に正しいAPIドキュメントだと言える。型が付いている限り、常に正しいコードが書けるし、コンパイラでエラーを事前にチェックできる等のメリットがある。また、型があることで、エディタやIDEで入力補完の恩恵をうけることができる。

メリット２：Decoratorsが利用可能

デコレーター（＠Decorators）は次世代のWeb標準（ESnext）として提案されている機能。TypeScriptでもオプションを付けることで利用可能。Angular2ではこれを推奨している。デコレーターを利用することで、コンポーネント作成にあたっての属性設定はデコレーターで、コンポーネントの実装はclassでというふうに分けて書くことができる。それによってコードの視認性も向上する。

@Component({
    selector: "app-profile",
    template: "Name: {{ name }}"
})
class ProfileComponent {
    name: string;
    constructor() {
        this.name = "laco";
    }
}

メリット３：Type-Base DIが利用可能

Type-Base DI（Type-Safe DI）を利用すると、DIを型ベースで行うことが可能。例えば、コンストラクタに渡す変数名が間違っていたとしても、型を指定するため、エラーを未然に防ぐことが可能。誤字（typo）に強いDIができる。DIについての詳しい説明は省略する。

import {Http} from "angular2/http";

@Injectable()
class MyService {
    constructor(private anyNameForHttp: Http) {
    }
}

Q3. Angular１系はサポート終了になるのか？

Angular1系は、1.4系と1.5系が今後もサポートされ続ける。これがステーブルとなり、基本的には破壊的変更は入らない。もし、破壊的変更が入る場合は、1.6、1.7とバージョンが上がっていく予定で、遅れてバックポートしたものが1.5にもマージされることになる。

Angular1.5ではComponent Helperが追加された。これは、Angular2への移行をサポートするためのもので、将来的に移行を検討している場合は、使っておくと良い。また、Angular2のRouterについては、Angular1用のライブラリが出ており、利用することでAngular2とほぼ同じAPI、書き方で実装することができる。

Q4. 双方向バインディングはなくなったのか？

存在する。しかし、Angular2は原則単方向バインディングを利用することになっている。双方向バインディングを実装したい場合は、二重カッコ[()]で記載する必要が出てくる。

このように記載すると実行時に、以下のように単方向バインディング＋イベントハンドラが自動生成される。

Q5. Dirty checkはなくなったのか？

存在する。しかし、Angular1に比べて爆速で動作するようになった。理由は、Angular２は実行時に変更検知を行うためのコード生成を行う。具体的には、Angular2の各コンポーネントは、自分自身の変更検知のために、専用のChange Detectorという変更検知器を生成する。それぞれのコンポーネントに最適化された変更検知器のおかげで、Dirty checkのパフォーマンスが改善（10msで100000チェックが可能）された。watchの個数は基本的に気にしなくて良くなる。

Q6. サーバサイドレンダリングはできるようになるのか？

Angular Universalというnodejs上で実行されるAngular2が存在する。コアのコードはAngular2とまったく同じ。また、nodejsにかぎらず、今後は、Java/php/.net/python等の環境でも利用できるようになる予定。

Q7. WebComponentを利用しているのか？

利用していない。しかし、Angular2はWebComponentと併用可能である。例えば、ShadowDom。Angular２は独自の機能でShadowDomをエミュレート（CSSのスコーピング）を行うことが出来る。

@Component({
    selector: "my-component",
    encapsulation: ViewEncapsulation.Native
})
class MyComponent{}

ディフォルトはViewEncapsulation.Emulatedである。もしブラウザにShadowDomの機能がついていれば、 ViewEncapsulation.Nativeを指定することで利用可能。パフォーマンス面では、ブラウザのShardDomを使うほうが早い。現時点ではChromeでしか動作しないが、対応ブラウザがChromeの場合や、Electron上で動作させる場合は、こちらを活用してパフォーマンス向上を狙ってほしい。

2. Angular2を構成する基礎技術について

次に、Angular２を構成する基礎技術について解説する。Angular２は様々な技術を利用して作られているので、個別の技術について理解すると、より効果的にAngular2を習得することが出来る。

SystemJS

SystemJSは動的なモジュールローダー（NodeJSのrequireと同じような役割をもつ）である。SystemJSはES.nextのimport、exportに対応するのが特徴で、将来ブラウザに実装されるモジュールローダーのポリフィル的存在。これを活用すると、遅延ローディングが可能になる。必要なコンポーネントのみを都度読み込む事が可能になり、よりパフォーマンスが向上する。

しかし、利用は必須ではない。JavaScriptのライブラリを静的に読み込みたい場合（npmなどでダウンロードしてくる場合）は、今までどおりBrowserifyやWebpackなどが利用可能。動的ロードしたい場合のみ、SystemJSを使えば良い。

RxJS

Angular2を利用するにあたって必須の機能。Observableのポリフィルとして利用されている。Observableはリアクティブプログラミングに基づいた考え方であり、Promise同様に非同期処理を実現する。Angular1はPromiseで、Angular2はObservableで非同期処理がそれぞれ実装されている。両者には様々な違いがあるが、Webの非同期処理についてObservableの利点を幾つか挙げる。

onkeyup等のDOM Eventに関しては、連続して発生した場合に、Promiseではその発生順序を知るすべはないが、Observableではイベントの順序どおりに処理が可能になる。DOMのAnimationについては、Promiseでは一度始まるとそれが完了するまで値は取れないが、Observableでは途中で処理をキャンセルすることが可能。WebSocketの通信についても、ストリームとして順序どおりに扱うことが可能になり、Ajaxに関しては処理途中でキャンセルが可能になる。

このように、Webにおける非同期ではObservableの方が適しているシーンが多々ある。そのため、Angular2では非同期処理の根幹はObservableで実装されている。そのため、RxJSとObservableの修得は、Angular2を学ぶためには必須とい言える。

Zone.js

ZonesというES.nextに提案されている機能のポリフィル。これを利用すると、非同期処理のコンテキストを開発者が自由に設定可能になる。具体的には、setTimeout等あらゆる非同期処理の前後にフック可能なポイントを挟むことができる。

Webにおける非同期処理の後にはかなりの確率で何らかの変更が行われる可能性がある。例えば、Ajaxでレスポンスを受け取った後はそれを受けてModelが変更されるなど。そのため、Angular２では、Zone.jsを利用し、全ての非同期処理の後に変更検知処理を行っている。処理速度も早い。

reflect-metadata

リフレクションのためのAPIを追加するためのポリフィル。reflect-metadataの機能もES.nextに提案されている。Angular2は内部的にTypeScriptのコンパイルに利用している。インストールは必要だが、開発者は覚えなくても問題はない。

3. Angular2を学ぶうえで必要なもの

次に、Angular2を学ぶ上で理解しておくことを幾つか取り上げる。

Angular2はAngular１よりシンプルになった

Angular1はAPIが多すぎたため、Angular２ではかなりシンプルになった。データバインディングと双方向バインディングの設定方法、イベントハンドラの設定方法はかなりシンプルになった。また、APIについても基本的には’@Component’を覚えれば良い。

Angular2はパフォーマンスが改善されている

Angular1はdirty-checking、two-way bindings、$digest loopが遅いと言われてきたが、Angular2でChange Detection（変更検知）が革命的に変わり、パフォーマンスが改善された。

Change Detection

Change Detectionは、例えば、Modelのここが変更になったらViewに描画するなどの処理を行う際に必要になる。重要なのは、どこでどんな変更が起きたかを素早く検知して、それを反映すること。Angular2の変更検知メカニズムはよく考えられている。全てのコンポーネントには個別のChange Detecter（変更検知メカニズム）が存在する。そして、Angular2の全てのコンポーネントはツリー構造になっており、変更検知が必ず一方向（親から子へ）に行われるようになっている。そして、各コンポーネントでは変更検知を行うかどうかを個別に設定可能になっており、親のレベルで変更検知を停止したり、子のレベルで変更検知を停止したり、非常に柔軟で戦略的な変更検知の設定が可能になっている。

Angular2では静的解析ツールが利用可能

Angular1では静的解析ツールが利用できなかった。例えば、バインディングの記述に[]を利用するようになったため、機械的にバインディングかどうかのチェックが可能になっている。

まとめ

Angular2を学ぶためには、ES.next、Decorators、Observables、Zones等、最新のWeb標準技術について学ぶことが大前提である。Angular1の登場（2009年）から、Angular2の登場までの間に、Web標準の世界は大きく変わった。最新のAngular2がAngular1とまったく異なっているのは必然であり、この世界で生きていくには、勉強し続ける必要がある。枯れた技術にしがみついてはダメ。何もかも最新のものを使う必要はないが、最新の技術に常に目を向けて置く必要はある。

最後に、Angular2を使うのは素晴らしいことだが、まだベータ版であることを忘れてはならない。今後BREAKING CHANGES（破壊的変更）が発生する可能性が十分にある。そのために、チェンジログは必ず読むようにする。どうにもならなければコミットログも読む。そして、それ以上深く関わりたければ、issueを出したりPullRequestを送りましょう。それがハードルが高いと考える方は、カンファレンスに参加したり記事を書いたりしよう。開発者にTwitterで質問するのも効果的。

セッションをもっと詳しく知りたい方は？

以上で、セッションの書き起こしは終了です。
稲富駿氏のセッション資料はこちらで公開されています。

Angular2の失敗しない始め方

セッション動画もYoutubeで公開されているので、ぜひご覧ください！

Angular2実践入門〜ng-japan 2016 セッションレポート〜

仲裕介 — Tue, 22 Mar 2016 02:00:01 +0000

この記事は、「ng-japan 2016」のセッションレポート（速報）です。講演内容を忠実に再現していますが、ニュアンス等伝えきれない場合があるので、気になるところは、記事末尾に掲載の講演資料やYoutube動画でご確認ください。

Angular2実践入門 / 白石俊平氏

当メディアの編集長であり、TechFeedの開発者でもある白石俊平氏によるセッション。スライド40枚以上の大作でライブコーディングもあります。

ライブコーディングで学ぶAngular2

今日のライブコーディングを追体験できるスターターキットを作った。是非活用してほしい。 https://github.com/shumpei/angular2-webpack-starter-minimum
– Angular2をwebpackを利用してミニマムスタートできるプロジェクト
– 教育用途、もしくは開発環境を自作したい人向け

Angular2の特徴（かなり主観）

特徴その１：TypeScriptを推奨

TypeScriptを一言で言えば、ES.next全部＋型である。また、実験的なサポート扱いである「デコレーター」は、Angular2を使う上では必須となる。

特徴その２：コンポーネント指向

実際のコードは以下のとおり。JavaScriptとは大分変わった見た目になるのが第一印象。

import {Component} from 'angular2/core';

@Component({
  selector: 'my-app',
  templateUrl: '/src/components/app.component.html'
})
export class AppComponent {
}

importはモジュールをインポートする仕組み。@Componentはデコレーターであり、これを取り付けたクラスがUIコンポーネントとなる。上記サンプルはAngular2における、UIコンポーネントの例である。UIコンポーネントは簡単にいえば、自作のタグだ。上記サンプルだと、タグをHTMLに埋め込めるようになる。また、templateUrlは実際に出力するテンプレートを指定する。

次に、my-alert-buttonコンポーネントをライブコーディングする。

import {Component} from 'angular2/core';

@Component({
  selector: 'my-alert-button',
  templateUrl: '/src/components/alert-button.component.html',
})
export class AlertButtonComponent {
}

作成したコンポーネントdirectivesに指定し、実際に利用する。

import {Component} from 'angular2/core';
import {AlertButtonComponent} from './alert-button.component';

@Component({
  selector: 'my-app',
  templateUrl: '/src/components/app.component.html',
  directives: [AlertButtonComponent],
})
export class AppComponent {
}

My first Angular2 app!

これは、ボタンを押すとアラートを発生させる処理をコンポーネントとして実装した例である。

特徴その３：ちょっとキモい

テンプレートのシンタックスがキモい。例えば、クリックイベントを補足する処理は、以下のように、(click)="onClick()"と記載し、対応するイベントハンドラはonClick()としてコンポーネント内に記述する。

import {Component} from 'angular2/core';

@Component({
  selector: 'my-alert-button',
  templateUrl: '/src/components/alert-button.component.html'
})
export class AlertButtonComponent {
  onClick(): void {
    window.alert('Hello!');
  }
}

特徴その４：Angularっぽさ

Angular2とAngular1はかなり違うが、似通っているところもある。例えば、サービス/DI/ディレクティブなど用語や概念を引き継いでいる。例として、loadData()というstring型の配列を返すサービスを作る。

import {Injectable} from 'angular2/core';

@Injectable()
export class MyService {
  loadData(): string[] {
    return ['a', 'b', 'c'];
  }
}

サービスをDIする場合は、事前準備としてprovidersでサービスを指定する。実際にDIするためには、AppComponentクラスのコンストラクタに指定する必要がある。

import {Component} from 'angular2/core';
import {AlertButtonComponent} from './alert-button.component';
import {MyService} from '../services/my.service';

@Component({
  selector: 'my-app',
  templateUrl: '/src/components/app.component.html',
  directives: [AlertButtonComponent],
  providers: [MyService]
})
export class AppComponent {
  private data: string[];

  constructor(private myService: MyService) {
    this.data = myService.loadData();
  }
}

特徴その５：やっぱりキモい

テンプレートでは、以下の様な記法を要素内に記述していく。

(),[],[()],#,*

全力を出すとこんな感じだ。だいぶキモい。

例として、テンプレート内でループ処理を実装してみる。

My first Angular2 app!



  {{item}}

テンプレートは外部ファイル指定するのではなく、バッククォートで囲み、Component定義内に直接HTMLやCSSを記載することも可能。また、コンポーネントはCSSをカプセル化（そのコンポーネント内に閉じる）するので、コンポーネントのスタイルは外部に影響を与えない。

Angular2を始めたらあなたが出会うであろう１１のこと

TechFeedのモバイルアプリ版を現在開発していて、その開発でAngular2を使っている。その開発経験を基に感じたことを時系列で取り上げる。

TechFeed -テクノロジー情報に特化した情報キュレーションサービス-

その1:ハードル高くない？

使うにあたっての前提技術が多い（TypeScriptやモジュールバンドラー、RxJS）ので、当初ハードルが高そうだと感じた。前提技術が多すぎるように感じるからだ。

TypeScript
モジュールバンドラー
RxJS
もちろんAngular2

でも、意外とそうでもなかった。なぜか？

Angular1の文脈を引き継いでいる（1系やったことがある人は学習コスト低め）
TypeScriptはJavaっぽい（もともとJava屋の人は親しみやすい）
RxJSは最初から詳しく知っている必要なし
Webpackの調整が一番時間がかかった（でも、だれか一人がやればいいのであまり気にしない）

その2:言語はどれを選ぶ？

個人的には、TypeScript一択ではないかと考える。ドキュメントが完備されていて、型があり、デコレーターが使えるのが嬉しい。JavaScriptやBabelも止めはしないが、きっとTypeScriptで書くほうが楽だ。

その3:モジュールバンドラーは何にする？

TypeScriptを選ぶとモジュールバンドラーが必須。TechFeedでは、実績豊富等の理由からWebpackを選択した。Angular2の公式ではSystem.jsというものが使われているが、後発であり情報が少なめだったため、採用しなかった。

その4:エディタは何にする？

TypeScript対応のエディタやIDEは、AtomやSublime、WebStormなどいくつかある。白石は今のところAtomを使っている。

その5:テンプレートをどこに書く？

@Componentに直接埋め込む方法、URLで外部ファイルにする方法のほか、Webpackを使えばrequireでHTMLファイルを埋めこむこともできる。３つの方法を比較するとWebpack利用が一番柔軟性があるが、個人的には、コンポーネントとテンプレートファイルがひとまとまりになるので、埋め込み方式もわかりやすいと思う。

その6:テンプレートがキモい

これは慣れるしかない。ただ、慣れるには順序がある。以下のように、Angular2が指定する新しいメンタルモデルを理解すれば、少しは楽になる。

こいつはHTMLじゃない。HTML Plusだ
タグの属性とプロパティはそもそも似て非なるもの
[]は属性ではなくプロパティを指している
属性ってやつは、プロパティの初期化にすぎない

その7:Sassを使いたい

モジュールバンドラーの機能を駆使すれば、Sass/Less等もコンポーネントで利用することができる。Webpack側でSassのコンパイル設定を行っておけば、scssファイルをコンポーネントでrequireするだけで利用可能。

その8:RxJSとのつきあい方

RxJSはリアクティブプログラミング用ライブラリである。Angular2はHTTPやEventEmitterなどの頻出APIがRxJS前提（Observable利用前提）である。ObservableはES7にも提案されているため、この機会に勉強するのは良いかもしれない。なお、Angular2はRxJS５（beta）を利用している。

その9:ページネーションしたい

よくあるユースケースだが世界中が現在実装方法を模索中。TechFeedでは、Observableの簡単なラッパーを作った。もう少し使い勝手を良くしてOSSで公開したいと考えている。

その10:UIフレームワークを使いたい

TechFeedでは、Ionic2を採用した。Ionic2はAngular2で完全にリライトされているので、Angular2開発の参考にもなる。その他にも、Angular2対応のUIフレームワークとして、Onsen UI2.0や、angular-material2、ng2-bootstrap等がある。

その11:コンポーネント設計

コンポーネントの粒度や振る舞い、状態をどこに配置するかは、現在熱い話題。Presentational and Container Componentという議論の土台があるが、これがあるからといって全て解決するわけではないので、やはり悩ましい。（全て外部に移譲するのか？面倒くさくない？…等）個人的に唯一の正解は、「必要になるまで分割するな」だと考えている。

セッションをもっと詳しく知りたい方は？

以上で、セッションの書き起こしは終了です。
白石俊平氏のセッション資料はこちらで公開されています。

Angular2実践入門 from Shumpei Shiraishi

セッション動画もYoutubeで公開されているので、ぜひご覧ください！

※白石俊平氏の講演開始時間から再生されます

【βリリース記念】5分でわかる！Angular2のススメ

金井健一 — Fri, 25 Dec 2015 02:00:26 +0000

2015年12月15日に、Angular v2.0.0-beta.0がリリースされました。Angular2の発表から実に1年です。まだβ版ではありますが、1つの区切りとして現状のAngular2についてお伝えしていきます。

何が変わったのか

以前から言われているとおり、かなり大きく変わっています。これまでのJavaScriptフレームワークではMVCやMVVMと呼ばれるデザインパターンが多く採用されてきました。

しかし、Web Componentsの仕様策定が進んでいる今、この仕様と共存できるようなコンポーネント指向のフレームワークが求められてきています。そういった背景から、MVW(hatever)という思想で開発されていたAngular1に対し、Angular2はコンポーネント指向で設計されています。

Angular2は、以下のような特徴をもっています。

処理速度・パフォーマンスの向上
よりシンプルに、わかりやすく
クロスプラットフォーム
Angular1からのシームレスなアップグレード
柔軟な開発
網羅的なルーティング
Dependency Injection（DI）
レガシーブラウザのサポート
アニメーション（開発中）
国際化 (Internationalization:I18N) とアクセシビリティ（開発中）

angular.io – FEATURES & BENEFITS より

これだけだと伝わりにくいので要約すると、

Angular1での課題の解決
ES2015/ESNextへの対応
TypeScriptなどのトランスパイラとの連携
Web ComponentsやPolymerとの連携
AndroidやiOS対応
デスクトップアプリ対応
サーバサイドレンダリング対応

などが挙げられます。

Angular1の良いところはそのままに、課題については改善していこうという姿勢です。その結果もあり、Angular1で問題となっていたDirty Checkingを解決したことや、サーバサイドレンダリングをおこなえるようになったことで、パフォーマンスが飛躍的にアップしました。Angular2開発当初にパフォーマンスの問題で一時取り止めになっていた双方向バインディングも現在では実装されています。

それに加えて、Angular2では、モバイルやデスクトップアプリでも快適に動作するよう考慮されています。すでにIonicや NativeScriptで、ハイブリッドアプリやネイティブUIモバイルアプリを開発する際も、Angular2を利用することができるようになりました。

これらを見れば、多岐にわたる変更があるだろうことが想像できるでしょう。

Angular2が提供するAPIは一新されていて、Angular1との互換性はありません。しかし、Angular1のディレクティブの設定に似ているため、多少経験がある方であれば理解するのはさほど難しくはありません。

// コンポーネントを作成するサンプル
(function(app) {
  app.AppComponent = ng.core
    .Component({
      selector: 'my-app',
      template: 'My First Angular 2 App'
    })
    .Class({
      constructor: function() {}
    });
})(window.app || (window.app = {}));

弱点がなくなった Angular2

他のフレームワークと比較すると、Angular1は入力フォームの多い、管理画面などの開発において圧倒的な強みがありました。双方向バインディングや強力なフォームバリデーション機能が備わっていたためです。

Angular2は、それらの機能を備えたままさらに強力になったといえます。管理画面だけでなく、モバイル環境やデスクトップアプリでも問題なく利用できるので、活躍する場が広がっていくでしょう。

サーバサイドレンダリングを利用すれば、SEOが必要なWEBサイトのフロントですら利用することができるようになります。このように、苦手としていたことの改善によるパフォーマンスが向上したことで、今後は限定的なケースではなく、さまざまなケースで利用されることが期待できます。

他にも、開発する際の自由度があがったことも大きなメリットです。ES5で実装することもできますし、ES2015で実装することもできます。またTypeScriptやBabelなどのトランスパイラも組み合わせて開発することも可能になりました。特に、Angular2自身がTypeScriptで実装されていることもあり、tsdファイルを作成する必要がなくなったことは、TypeScriptユーザにとって嬉しいことではないでしょうか。

Angular2 のこれから

現在、β版にはなり多少は落ち着いたのかなといった印象ですが、今後はAngularユーザやコミュニティによってさらにブラッシュアップされていくことと思います。まだまだドキュメントが少ないことが懸念されますが、これらはAngularの開発チームでも課題になっているので、時間とともに解決されていくでしょう。

最後に気になるv2.0.0のリリース時期について、あくまでも予想ではありますが、 2016/5/4〜6にかけて開催される ng-confでv2.0.0をお披露目したいのではないかと推測しています。（もしかしたら間に合わないかも、ということもありますが…）