AngularDartを始めよう

Flutterが日本でも人気が出てきた事で、Flutterの言語であるDartでWebアプリも書いてみようかなと思っている人向けにAngularDartで開発を始めるにあたって必要な手順やライブラリーを紹介出来ればなと思って書いてみます。なるべく丁寧にわかりやすく書いたので文章はちょっと長いですが。ステップとしてはSDK、webdev、stagehand、angular_cliをインストールしてpubspec.yaml内のバージョンを最新にするという単純なものです。

AngularDartについて

　Angularと言えばTypeScript版のフレームワークが一般的ですが、その思想等はほぼ同じだけれども書かれている言語がDartなのがAngularDartです。TS版AngularもAngularDartもGoogleが深く関わっているプロダクトなのになぜ2つあるのか疑問に思う人は多いと思います。その経緯を簡潔に書くと下記になります。

1. AngularJSにインスパイアされたDart版Angularを開発（2014年くらい）
2. AngularJSの2系（現Angular）の開発はTSにて開発し、Dart版もTSからトランスパイルする事が決定
3. 頑張って2系の開発をしていたが、Angular自体の開発者は3つの言語（TypeScript、JavaScript、Dart）に精通していなければならないため、なかなか開発が思うように進まない（Bridge用のクラスとかも大量に用意しないといけなかった）
4. TS版とDart版は別々の道を進み、それぞれの言語の特性に合わせて開発を進める事が決定（2017年）。これによりTS版およびDart版それぞれで不要なクラスを削除したり、適切なパフォーマンスチューニングが可能になり開発スピードは格段にアップし現在に至る。

Hummingbird

　Hummingbirdが話題になっています。その影響でAngularDartは捨てられるのでは？？と思う人もいるかと思うのですが、最近またAngularDartの開発が活発になってきています。AngularDart5.0がリリースされて以降開発があまり進まなくなってた印象があったのですが、おそらくHummingbirdとSDKの開発の方にリソースを割いていたのではないでしょうか。そのあたりに一区切りついたのかどうか不明ですが、ここ数週間前からかなり開発が活発になっています。このあたりのリソースの投下状況から考えるとGoogleが急にAngularDartを切り捨てるとは考えにくいかなぁと思っています。
　テスタビリティを重要視する自分としてはcanvasでのレンダリングを前提とするHummingbirdをあまり好きになれそうにないです・・・。まぁFlutterのアーキテクチャを考えるとそのまますんなりWebに持っていくにはcanvasを使うというのはある意味自然なんですけどね。Flutterでモバイルアプリ作っていて、サクっとモバイル版Webも作りたいというニーズには上手くフィットするのではと考えています。

　ちょっと話が脇にそれてしまいましたがAngularDartに関する小話はここまでにして、さっそくAngularDartの開発環境を整える手順を進めて行きましょう。

開発環境を整える

　必須は下記です。

• Dart SDK
• webdev

　上記に加えて下記を使えるようにしておくと開発が何かと捗ります。

• stagehand
• Intellij IDEA(WebStorm)のDartプラグイン
• angular_cli
• angular analyzer plugin

Dart SDK

　これが無いと始まらないやつですね。このSDKには pub などのDartパッケージマネージャーも入っています。

Dart SDKのインストール

　こちらから各OSのパッケージマネージャーにてSDKの最新版（2.2.1-dev.4.0）をインストールしましょう。
自分はここからzipをダウンロードしてPATHに通してます。

注）今回は後述するwebdevの最新版を使うので現時点（2019/04/14）の最新版である2.2.1-dev.4.0をインストールして下さい。

下記コマンドにてバージョン情報が表示されればOKです。

$ dart --version
Dart VM version: 2.2.1-dev.4.0 (Wed Apr 10 21:16:14 2019 +0200) on "linux_x64"

webdev

　webdevを使うとlive reloadやhot reload等が可能になります。また、release用のビルドもwebdevを使います。

webdevのインストール

　DartSDKの所でも書いたpubコマンドを使ってインストールします。

pub global activate webdev

本来は一番最後のバージョン指定は必要ない（指定しない場合は最新のStableバージョンになる）のですが、今回はStableではない最新版を使うため最後に2.0.0-alpha.2を指定します。 （2.0のstableが公開されました。 2019/04/24）
global activateの詳細は省略しますが、簡単にいうとDartのソースコードをコマンドラインから起動出来るようになります。ただし、そのためにはglobal activateにてインストールされるディレクトリにPATHを通す必要があります。インストールされるディレクトリはホームディレクトリ直下の.pub-cache/binというディレクトリになります。なのでLinuxだと下記のような感じでPATHを通します。

PATH=＄HOME/.pub-cache/bin:$PATH

下記コマンドにてバージョン情報が表示されればPATHの設定はOKです。

$ webdev --version
2.0.0

これでAngularDartプロジェクトのディレクトリ直下にてwebdev serve --auto=restartと実行するとlive reload状態にて開発を進めることが出来ます。webdevではいろいろな事が出来るのですが、詳細はまた別途記事にしたいと思います。

AngularDartで開発するために必要最低限の事はここまでなんですが、さすがにこれだけだと最初はいろいろ大変なので下記の環境を整えるのをおすすめします。

stagehand

　コマンドラインにてDartの様々な雛形を生成してくれます。

stagehandのインストール

　
　webdevと同様にpubコマンドにてインストールします。

pub global activate stagehand

　上記にてインストール後に任意のプロジェクトディレクトリを作成し、その直下にて下記コマンドを実行するとAngularDartの雛形が生成されます。

stagehand web-angular

上記にて雛形は生成されるのですが、各種バージョンがちょっと古いのでpubspec.yamlの中身を現時点の最新バージョンにしましょう。

name: qiita_sample01
description: A web app that uses AngularDart Components

environment:
  sdk: '>=2.1.0 <3.0.0'

dependencies:
  angular: ^5.3.0
  angular_components: ^0.12.0

dev_dependencies:
  angular_test: ^2.3.0
  build_runner: ^1.3.1
  build_test: ^0.10.7
  build_web_compilers: ^1.2.0
  pedantic: ^1.5.0
  test: ^1.6.2

この状態でターミナルにてpub getを実行して依存ライブラリーを取得し、webdev serve --auto=restartを実行すれば生成されたサンプルアプリがlive reloadモードで実行されます。

angular_cli

　コマンドラインにてAngularDartのコンポーネント（dart、html）を生成してくれます。AngularDartのコンポーネントを作る時は大体Componentクラス（Dart）とそれに対応するHTMLファイル、そしてそのHTMLのスタイルを定義するcssファイルを作るのですが、毎回手作業で3つを作成するのは面倒なのでangular_cliを使ってサクっと雛形を作るといろいろ捗ります（現時点ではcssファイルは作ってくれないです）

angular_cliのインストール

　webdev、stagehandと同様にpubコマンドにてインストールします。

pub global activate angular_cli

下記のようなコマンドを実行するとカレントディレクトリにsample_component.dartとsample_component.htmlを生成してくれます。-pにてディレクトリを指定します。

ngdart generate component SampleComponent -p .

Dartプラグイン（Intellij）

　VS Code等の各エディタにてプラグインは存在するのですが、現時点でもっとも強力に開発をサポートしてくれるのはIntellij IDEAだと思います。コード補完はもちろんの事、多少のリファクタリングやコードの自動生成、静的チェック等をやってくれます。自分はDartを書く時は常にIntellijを使っています。後述するangular analyzer pluginも非常に強力です。

Dartプラグインのインストール

　
　他のIntellijのプラグインと同じ要領でDartプラグインをインストールして下さい。pluginsのMarketplaceタブにてDartと検索すればすぐに出てきます。

angular analyzer plugin

　htmlファイルにてコンポーネントが存在するかどうかの静的チェック、selector（コンポーネント）の補完、コンポーネントの属性やアクションの補完等もやってくれます。以前は動作が不安定だったのですが、最近は非常に安定していて動作も快適です。

angular analyzer pluginの設定

　これを有効にするにはプロジェクト直下のanalysis_option.yamlファイルにてangular analyzer pluginを有効にします（stagehandで雛形を作成している場合はコメントアウトを削除する形になります）

analyzer:
  plugins:
    - angular

　うまく動かない場合はIDEを再起動してみて下さい。

だいたいこんな感じでしょうか。本格的にアプリを作るには各種ライブラリ（json_serializable、json_annotation、http、collection、quiver）の使い方も必要になるかと思いますが、そこらへんの説明はまた別途記事にしたいと思います（ライブラリーに関してはすでにいろんな人が解説してくれているのでググればすぐに出てくるかと）

最後に

　現在AngularDartは実際に使う開発者の生産性を意識して、各種リファクタリングや周辺ツール類の整備に力を入れているとの事です。自分はAngularDart2.0の頃から使っているのでそのあたりの改善は目を見張るものがあります。特にエラー時の情報なんかは素晴らしく改善しています（昔が酷かったとも言えますが・・・）
　Flutterで初めてDartに触れてみた人等は是非一度AngularDartを試してみてはいかがでしょうか。