パステル色な日々

気ままに綴るブログ

What's new in Angular 4

お久しぶりですpatelIncです
Angular 4のリリースが迫ってきました🎉
今日は調べたことをまとめようと思います

pastelinc.github.io

先日開催された ng-kyoto meetup #5 にてオーガナイザーとして登壇してきた内容の振り返りとなります
スライドは文字少なめの構成にしたのでスライドと合わせてこの記事でAngular 4のことについて振り返っていただければと思います

Angular 4リリースに際してAngularプロジェクトがより安定したリリースを続けていくための方法として取り入れた3つのポリシーについてまずお話します
後からAngular 4の新しいところをCHANGELOG.mdにかかれていた内容に沿ってお伝えしようと思います

SemVerポリシーの導入

一つ目にAngularは2016年9月にSemantic Versioningポリシーを採用しました
SemVerについてはスライドにリンクがありますので御覧ください

  • すべてバージョン番号に意味を追加すること
  • アップグレードの理由がわかる
  • 安全にバージョンを上げることができる

SemVerポリシーの導入は以上のような方法で安定を提供します

Time-based Release Cycles

二つ目に図の通りパッチバージョンを週に1回、マイナーバージョンをメジャーバージョンのリリース後3ヶ月間、それに下位互換性のあるメジャーバージョンをリリースします
メジャーバージョンは6ヶ月に1回リリースされます。早い!!!

Deprecation Policy

最後にAPIの廃止ポリシーが定められました
AngularJSからAngular 2のバージョンアップのときに苦労された方も多いかもしれません
Breaking Changesは大きな混乱を招きますが必要なことです
Angular 4からはこれを前もって非推奨であることを開発者に知らせることである程度備えることができるように配慮してくれます

  • リリースノートで廃止予定を発表
  • 推奨されていないAPIを引き続きサポートしてくれて、更新には6か月以上の猶予があります

peer dependencies なライブラリ (バージョンを決め打ちで使っているもの) TypeScriptやRxJSやZone.jsなどの更新もSemVerのポリシー対象として扱われます
Angularアプリケーションに対するBreaking Changesでないのであればマイナーチェンジで更新もありえます

以上がAngular 4からの安定したリリース体制です
次に新しいところについてお伝えします

New View Engine

この変更がAngular 4のメインの変更だと思います
この変更は前提知識としてAOTコンパイラやTree Shakingの知識が必要です
これらの事情を省いて説明すると新しいView Engineになったのでよりファイルサイズを小さくできるようになりましたということです
AOTコンパイルについて知らない方は一度スライドでも最後に紹介している @Quramy さんの資料をご覧ください

qiita.com

docs.google.com

ここからは少し詳しく説明してみます
AngularはAOT (Ahead of time) コンパイラを提供することでbootstrap時のコンパイルの手間を大きく軽減してくれました
さらにGoogleではClosure Compilerを使うことで大幅にテンプレートサイズを小さくできていました
しかし問題としてClosure Compilerを使うことはお手軽ではなくGoogle外のユーザーにとって大きなハードルがありました
しかも最近の新しいフレームワーク (inferno.js) はAngularと同様もしくはそれ以上のパフォーマンスを発揮してテンプレートのサイズがもっと小さいものになりました
そこでAngularチームはView Engineを見直すことにしました

AngularはView Engineを定義することでDOMノードとディレクティブインスタンスを何度も反復して作成しています
AOTコンパイラはたくさんのView Engineのコードを生成します (ngfactoryファイル)
今回のチューニングではこのView Engineとして生成されるコードがより小さくなるように見直されました

驚くべきはClosure Compiler無しでおよそ3分の一までテンプレートサイズを削減できたことです
しかし131,040のバインディングのChange Detectionを計測すると従来よりも1.5倍の時間がかかり20倍のメモリを消費します
これに関してはOnPushコンポーネントを使って一部をダーティチェックレンダリングするのが良さそうです
今後OnPushをより簡単に扱える仕組みを用意することを課題に挙げていました

*ngIf 構文の拡張

<ng-template #loading>Loading...</ng-template>
<div *ngIf="userObservable | async; else loading; let user">
  {{ user.name }}
</div>

ng-japan代表の@laco0416さんがブログですでに解説されているので御覧ください

blog.lacolaco.net

  • ngIfによる条件付けと、その条件により制御されるテンプレートを分離
  • これまでは真の場合と偽の場合にそれぞれ逆の条件のngIfが必要
  • ngIfに渡された式の評価結果をローカル変数にアサインできる

@angular/animations 爆誕

@angular/animations がコアモジュールから分離しました
必要な場合だけ利用するようにしましょう
アニメーションが必要なライブラリをインストールすると自動でインストールされるようになるはずです (e.g. Material)

TypeScript 2.1に更新

AngularのベースラインのTypeScriptバージョンが1.8から2.1にバージョンアップしました
これによりngcコマンドの実行が早くなりました
加えてTypeScript compilerの最適化とより良いエラーの恩恵が受けられるようになりました

StrictNullChecks

TypeScript 2.1 が利用できるようになったことでTypeScriptのStrictNullChecksに準拠しました
つまり、必要に応じて、プロジェクトでStrictNullChecksを有効にすることができます

let foo = undefined;
foo = null; // NOT Okay
interface Member {
  name: string,
  age?: number
}

getMember()
  .then(member: Member => {
    const stringifyAge = member.age.toString() // Object is possibly 'undefined'
  })

undefinedを割り当てるのかNullを割り当てるのかが厳密になります

Angular Universal

Universalの数カ月分の作業成果がコミットされています
ドキュメントが出るようなので寝て待ちましょう
先行して確認したい方には次のリポジトリをおすすめいたします

github.com

Flat ES Modules (Flat ESM / FESM)

FESMは、パブリックAPIのみをエクスポートするESMです (example file)
これはTree Shaking時に生成されるファイルのサイズを小さくしてくれます
今のところRollupもしくはClosure Compilerが対応していてWebpackは未対応です

WebpackはTree Shakingに対応したのでは?と思っていたのですが実は他のツールと比較するとまだ完全ではなさそうです
これはAngularの開発者でもあるIgorさん (@IgorMinar) が言及していました

要するにファイルに7つのシンボルが含まれ、1つだけがインポートされると、Tree Shakingの時に7つのシンボルがすべて取り込まれるからです
おそらく他のツールは本当に必要なものしかビルドしないようになっているのだと思います

ES2015 Builds

試験的な取り組みとしてFESMをES2015の形式で提供します
試したい方はpackage.jsonの “es2015"プロパティを解決するように設定してください

調べている最中に知ったこと

NG-BEのIgorさんの公演を見て

  • Googleのサービス(Google Map…etc.)上で一度テストされてから提供される
  • WebpackやSystemJSは最高のソリューションではないと思っている
  • だからGoogleでは独自のカスタムローダーを使ってビルドしている
  • SystemJSはデモアプリに最適
  • Angular Dartとはすでに開発路線が別れており別物と思ったほうが良い
  • APIを統一しようとかそういう思想はない

Tsickle/Clutz

TsickleはTypeScriptのClosure annotated JavaScriptを生成し、ClutzはClosure annotated JavaScriptからTypeScript定義ファイルを生成します。 一緒に使用すると、クロージャ互換のコードベースでTypeScriptを使用することができ、その逆も可能らしいです

まとめ

  • Angularは安定したバージョンアップができるように環境を整備した
  • Angular 2からAngular 4のバージョンアップならお手軽にできそう
  • New View Engineをはじめとする努力でより高速にアプリケーションを提供できるようになった

スライドにあるようにこの2つが所感です
リリースサイクルについては見守るしかできませんがAngular界隈が活気づきそうですね

Windows上でAnsibleを使えるまで試行錯誤

皆様あけましておめでとうございます。
当ブログ2017年最初の記事いってみましょう!!!

WindowsでAnsibleを使うにはどうするか

一番ラクなのはWindows上のターミナルからansibleコマンドを実行する方法でしょうか。
ここを目指して試行錯誤したのですがどうにもうまくいきませんでした。
結局DockerやVagrantを用途ごとに利用する方法が一番ラクだということがわかりました。
以下は試行錯誤した結果をまとめてみます。
最後にWindows上でDockerを使ったAnsibleのRole再利用方法について書き留めます。

MSYS2上でじゃれ合う

Bashの導入にMSYS2を利用しています。

  • ConEmu (Terminal)
  • Bash (Shell)

まずAnsibleをwindowsネイティブのプログラムとしてインストールしてみたいと思います。
MSYS2はMSYSTEM=mingw64としてシェルを起動します。
インストールはpip経由で行いました。
Python2とpipはmingw64リポジトリで公開されているものを利用しました。
途中pycryptoやcryptographyのビルド時にライブラリが足りないことがあります。
そんなときにはCFLAGSをセットしておけばgccコンパイル時にincludeのパスを矯正できます。

結果インストールまではこぎつけました。Windowsネイティブのバイナリが生成できました。
しかし実行してみると ImportError: No module named fcntl となり失敗になりました。

次にMSYSTEM=msysとしてシェルを起動します。
Python2とpipはmsysリポジトリで公開されているものを利用しました。
しかし実行してみると ImportError: No module named fcntl となりまた失敗になりました。

コマンドプロンプト上でじゃれ合う

Python2をwindowsインストーラーからインストールしてAnsibleのインストールをやってみました。
Python2がビルドに利用するWindowsコンパイラはありがたいことにMicrosoftから提供されていました。

Download Microsoft Visual C++ Compiler for Python 2.7 from Official Microsoft Download Center

そして見事Ansibleをインストールできます。
しかし実行してみると ImportError: No module named fcntl となりまたまた失敗になりました。

$ /c/Python27/Scripts/ansible --version
Traceback (most recent call last):
  File "C:/Python27/Scripts/ansible", line 45, in <module>
    from ansible.utils.display import Display
  File "C:\python27\lib\site-packages\ansible\utils\display.py", line 21, in <module>
    import fcntl
ImportError: No module named fcntl

このあたりの理由はこちらに書かれてあることを参考に納得しました。

stackoverflow.com

その後Anaconda2を利用してみましたがこちらも同様のエラーで無理でした。

VagrantVirtualBoxでじゃれ合う

Ansibleの利用シーンとしてプロビジョニングがあると思います。
Vagrantはプロビジョニングの方法としてAnsibleのプロビジョナーを提供してくれています。

www.vagrantup.com

Windows上でAnsibleはインストールできていないのでAnsible Localを利用します。
いい感じです。見事Ansibleでプロビジョニングできました。

Roleの再利用とRoleの作成を考える

Ansibleにはansible-galaxyコマンドがあります。
Roleの再利用を目的として提供されているので、Roleを作成してみたいと思います。
しかし、Windows上ではプロビジョニングのシーン以外ではAnsibleを利用できません。

Dockerを利用してじゃれ合う

最後にDockerを利用して、Roleの再利用をする方法を試します。
Docker Machineを使いdockerコマンド利用の準備をします。

$ docker run --rm -v "//c/Users/<username>/ansible/roles:/etc/ansible/roles" ansible/ansible-container-builder:0.3 ansible-galaxy install geerlingguy.apache

後は上記のような感じでRole再利用のためにansible-galaxyコマンドを利用できます。
プロビジョニング以外のシーンではDocker利用が一番捗りそうです。

以上、Windows上でAnsibleとじゃれ合う方法についてでした。
Cygwinについては書いておりませんが以下のサイトに書かれてありました。

Running Ansible within Windows | Jeff Geerling

MSYS2あたりの知識が不足しており誤っている場合があるのでその際にはご教授くださいませ。
どうにもこうにも色々躓くことが多いWindows上での開発ですが誰かの助けになれば幸いです。
では、御年もよろしくお願いいたします!!!

いろいろ話す機会がありましたので

いろいろ発表の機会があったのですがスライド公開してなかったので公開しておきます。

ng-kyoto Angular Meetup #4

4月にObservableについて話してきました。
この発表ではObservableがなぜ必要になるのかについて話しました。

ng-kyoto.connpass.com

pastelinc.github.io

Observableについて調べているうちに、何を解決するものなのか疑問が駆け巡ってきました。
そしてそれを自分の中で考え、おそらくこういう思想のもとだろうという推測を加えてスライドを作りました。
もちろんObservableそのものの仕様については以前の記事でもあった通りの事実しか話していません。

その推測のヒントとなったのがStructure and interpretation of computer programs - 2nd EditionのStreamの項でした。
僕はそれを読んでオブジェクトデータ構造と対をなすストリームデータ構造がこのObservableの考えのもとじゃないかと推測したうえでスライドを作成しました。
推測から発表をしてしまうエンジニアらしからぬ発表をしましたがきっとObservableが解決したいことの本質はここじゃないかと考えています。

フロントエンドの人がWeb APIを語る会

6月にNetflixが開発したFalcorについて話してきました。
Falcorの紹介となぜFalcorが何を目的に作られたのかについての発表でした。

kfug.connpass.com

pastelinc.github.io

Falcorを学ぶ上でGraphQLについても少し公式サイトをかじって読んでいたのですが
そこでそもそもREST APIとは同じ組織内で構築されたクライアントアプリケーションにサービスを提供するAPIの要件ではないとその発明者が述べているとの記述がありました。
これはすごく衝撃でした。REST APIがとにかくプッシュされてきていたイメージでしたがなぜREST APIを使うのか明確な根拠を僕は持っていないことに気付かされたのです。

そして昨今、SPAに代表されるサーバクライアントモデルのアプリケーションがなぜもてはやされているのかについても明確な回答を僕は見いだせていませんでした。
このFalcorの発表と通してこの辺りの疑問に自分なりの回答を得られたことがこの発表の一番の収穫だったように感じます。

こんな感じでいろいろ話させてもらえる機会に恵まれていました。
それではまた!

Potmumが素敵だったのでomniauth-identityを組み込んでみた

おはこんばんちはpastelIncです。
政治的理由により技術ノウハウ共有のために巷のパプリックサービスが使えなかったところ
ドワンゴ新人エンジニア研修の記事でちらっと見かけたPotmumという単語から素敵なQiitaライクなサービスを知ったので動かしてみました。
見たところものすごくおしゃれな見た目です。Qiitaっぽいです。素敵です!

torigoya.hatenadiary.jp

拝見した限り自分用のサービスっぽいのでチーム向けではなさそうです。
利用してみたところOAuth2による認可を使ったログインのみの実装のようでした。
そもそもGitHubやSlack使ってはいけないのでどうしたもんかと考えていました。

github.com

最初は認可サーバを立ててomniauthのstrategyを自前で作っていましたがよくよくstrategyリストを見ているとシンプルなパスワード認証できるモジュールを見かけたので実装してみました。

github.com

これを使って実装を試してみたものがfeat/identityブランチにあります。

github.com

pumaの設定ファイルです。

environment ENV['RAILS_ENV']
daemonize true
pidfile "#{Dir.pwd}/tmp/pids/puma.pid"
state_path "#{Dir.pwd}/tmp/pids/puma.state"
bind 'tcp://0.0.0.0:7272'

見かけただけの勢いでomniauth-identityモジュールを使いましたが、これ随分メンテされてないのでまずいかもしれません。
CSRF対策をかわしてさらにSesionsController#callbackを利用していますが、こういうのは別のメソッド生やすべきなんでしょうかね。
Dockerで動かしているので、次はDockerfileやdocker-compose.ymlを書いてみたいと思っています。
こんな感じでrubyrailsについて詳しくないので怪しいところあると思いますがパブリックなサービスを使えない方でPotmumを利用したい方がいる時の参考になれば幸いです。

追伸

Dockerfile書きました。githubリポジトリを御覧ください。

ARIA × あまんちゅ!合同イベントが素敵だった

ARIA × あまんちゅ!合同イベントに行ってきました!
今その帰りの新幹線の車内でこれを書いています。
今はちょうど夜の部が行われている頃ですかね。 とにかくとても素敵ングなイベントでした。

あまんちゅ!第1話先行上映会

イベントが始まり、ARIAから葉月さんと西村さん、大原さん(この辺りは曖昧です間違ってたらごめんなさい)がご登壇されました。
軽い挨拶があり、まずはあまんちゅ!第1話の先行上映会が行われました。

感想ですが言わせてください「素敵」でした。
もともと原作からARIAを通じてのファンなので期待度は高かったです。
正直期待以上でした。
だって見終わった後に真っ先にこうして記事を書きたくなっちゃったんですもの。

漫画とアニメは表現の差において異なるところがあると思っています。
それは作品内で流れる時間の受け取り方です。
見ている最中に感じた最初の印象でした。
第1話に限って言えば終始非常に「日常そのものの時間の流れ方」を感じました。
なので変わっていく場面はそう多くありません。
でもそれが非常に心地よかったです。

更に忘れてはいけないのが「水」の表現です。
上映会後佐藤監督もおっしゃっておりましたがネオベネチアと伊豆では水の表現が違います。
伊豆にはベネチアのような水路が張り巡らされていません。
水の表現には普段の倍以上の時間をかけて制作されているそうです。

第1話の話の内容については是非原作を買って読んでみてください。
あまりここでは多くを語らないようにしようと思います。
ただ僕がどうしても印象に残ってたシーンを見た瞬間、思わず泣いてしまいました。
それも2回です。第1話からですよ。僕は涙もろいんです。
ただただほんとうに「素敵」でした。

フリートーク

第1話の上映会が終わって、溢れんばかりの拍手が巻き起こりました。
その後ARIAあまんちゅ!のキャストと佐藤監督が登場して、挨拶とフリートークが行われました。
あまんちゅ!のてこ役でもありARIAでもアリスの後輩アーニャを演じておられる茅野さんは大のファンらしくイベントの最初から最後まで楽しそうだったのが印象的でした。
ARIAキャストの方も原作は読まれている方が多いらしく特に水の表現について賞賛されていました。
後は皆川さん(晃役)の「久しぶりだな。元気にしていたか?」が聞けただけで最高でした。

教えて!サット・シー

ケット・シーならぬサット・シーにみんなから現在、過去、未来に関する質問をしちゃおうというコーナー。

  • みんなイタリアいきたいと口をそろえていっていた
  • 佐藤監督のお気に入りのARIAのシーンは原作(おそらくAQUA)にて夜寝静まった社長たちを見る灯里
  • 佐藤監督はB型、来ていたあまんちゅ!キャストはみんなO型
  • 佐藤監督と大原さんは動物占いで羊
  • 夜の部では佐藤監督ツインテールにするかも
  • 佐藤監督にとってARIAとは「奇跡」
  • みんなあまんちゅ!ARIAが大好き
  • 佐藤監督はアリア社長とふたりきりならもちもちぽんぽんを触りたい
  • ARIAチームもあまんちゅ!に出たい
  • 大原さんはピーター役で出たい

佐藤監督への質問なので必然的に佐藤監督のことのことばかりに関する情報ばかりですね。
まあ皆さん会話が弾まれて最後の方は時間が押していたのかかなり駆け足でした(笑)。

ARIA朗読劇

なんとARIAチームの朗読劇ははじめてらしく生のアフレコをはじめて見せていただくことができました。
英気を養うために特訓とバーベキューをしに来た面々がARIAに存在する蒼に思いを馳せて
マンホームの頃から連綿と人々が願った蒼の素敵を未来に伝えていきたいという話でした。
途中目を閉ざして見るとすぐそこでARIAのメンバーが楽しそうにしている様子がわかるようで生の素敵な空気に触れた気がしました。

エンディング

最後にあまんちゅ!チームから代表してぴかり役の鈴木さんから一言とARIAキャスト全員からそれぞれ一人一言づつ挨拶がありました。 鈴木絵理さんからはこれから始まるあまんちゅ!に期待していて欲しいことが語られました。
ARIAキャストからはみなさん感極まったみたいに途中涙しながらもこれからもARIAを愛してほしいこととあまんちゅ!を楽しみにして欲しいことが語られました。

イベントを通してあまんちゅ!ARIAとは違うものですが確かに「何か」がつながっている感じがしました。
それはきちんとARIAチームからあまんちゅ!チームへ伝わっているのがわかりました。  

最後に佐藤監督は天野先生が手がけられた描きおろしポスターから作品をこういう形でリレーできるのはとても幸せだとおっしゃられていました。

ARIAあまんちゅ!の蒼の世界が引き継がれていて幸せでした。
これからの放送に期待しましょう!ではまた!

Observableってなんなんね?

ついにRCのリリースも間近となったAngular2ですが、私はこの間のハンズオン以来全然触れてません。
少しづつ触っていきたいものですが、ここ最近の勉強会の経験からAngular2を学ぶならWebの最新技術を学ぶことが大切なのだとわかったので、まずは、Observableを調べてみようと思います。

学習教材を探す

Observableについて学ぶぞ!と意気込んでみたもののどうやって学べばいいのでしょう。
どこかにObservableの正体について書かれた資料はないでしょうか。

github.com

ここにObservableがリストアップされています。
TC39、ECMAScriptを策定してる組織です。ECMAScriptJavaScriptの仕様だと前に教えてもらったことがあります。

  • どういう人達なのか
  • 何が目的なのか
  • そのために何をしているのか

思うことはいろいろありますが、とりあえずこの辺りはおいておきます。ecma262、これはなんでしょう。

www.ecma-international.org

なるほどECMAは組織でした。そのECMAが管理する仕様には管理番号が割り振ってあります。

Ecma Standards - list

つまり、ecma262はECMAが管理する仕様の一つということになりますね。
(ということはTC39のメンバーはECMAの人たちで構成されているのでしょうか?)

話を戻します。例のリポジトリにリストアップされたObservableのリンクを辿ってみます。
ありました。Observableの仕様を見つけることができました。以降はこの仕様を元に学習しました。

github.com

Observableの提案の概要がまとめれています。

Observableとはなんだろう

ObservableはDOMイベント、timer intervals、 そしてsocketsのようなpush-basedデータソースをモデル化するのに使われます

  • Compositional: Observablesは、higher-order combinators(?)で組み立てられる
  • Lazy: Observerがsubscribeするまで、Observablesはデータを発信し始めません

粗末な翻訳は許して下さい。英語苦手なんですよー。typeを型と訳すならObservableはどうやら型のようです。
JavaScriptにはECMAScriptで定められたプリミティブな型がすでにあります。

  • Boolean
  • Null
  • Undefined
  • Number
  • String
  • Symbol (ECMAScript 6で登場)

プリミティブではないものとしてObjectもありますね。

お、DOMのキーイベントを使った例があります!例示は理解の試金石です。早速見てみましょう。

github.com

この例を見る限りどうやらObservableは標準のビルトインオブジェクトとしても実装することを想定しているのでしょうか。
listenはObservableインスタンスを返し、Observableコンストラクタは関数を受け取っています。
関数はキーイベントにhandlerをアタッチして...っとhandlerの詳細がわかりません。

// observerとは何なのか
let handler = event => observer.next(event);

このドキュメントにはObservableやobserverのインターフェイスについても書かれています
それによるとこのobserver.nextはシークエンスの次の値を送り出すらしいですが...。

うーん、むずかしいです。何より何がしたいのか想像できません。
一旦この例を離れてObservableの実装例として、このドキュメントに挙がっているRxJSとzen-observableについて調べてみることにしました。

どのように動き、何がしたいのか知りたかったのでいろいろ調べていると、Observableをスクラッチで作ってみる動画を見てピンときました。

egghead.io

この時点でObservableとは非同期のデータの流れの手続きのことだとわかりました。
他にも以下のことがわかりました。

  • Observableはsubscribeすることでデータが流れ始めること
  • subscribeする際にnext, error, completeに対応した処理を記述できること
  • completeしたあとではデータが流れないこと
  • データを流したあとキャンセル可能なこと
  • キャンセルしたあとはデータが流れなくなること

この動画に沿っての実装はとてもわかりやすいのでおすすめです。

この動画を踏まえたうえで、先ほどのObservableの仕様書の例に戻ってみます。
ここで定義されているデータの流れはHTML要素から発せられるキーイベントです。

ストリーム中のイベントを配列を扱う時のようにfilterやmapする標準のcombinatorを使うことができる。

ここで以前わからなかった翻訳の意味が何となくわかりました。
higher-order combinatorsというのはこのfilterやmapのことをいってるはずです。
まるで配列を扱う時のようにObservableにはfilterやmapが実装されているそうです。

"filter" と "map" メソッドは提案に含まれてません。この仕様の将来のバージョンで追加されるかもしれません。

ですが、今のところ提案に含まれてないようです。今後の続報に期待しましょう。
さらにsubscribeメソッドの代わりとしてforEachメソッドがあり、これは一つの関数を受け付け、Promiseを返すそうです。

その後のMotivationの項目を見ていろいろわかったので、少し整理してみます。

  • Observableとは非同期のデータの流れを扱うプロトコル
  • Observableは型になるかもしれない
  • ObservableはDOMイベント、timer intervals、そしてsockets、UIに起因するような(アプリ内で起こる)データの流れをモデル化するのに使われる
  • Observableはfilterやmapのようなcombinatorで組み立てることができる
  • filterとmapは提案に含まれてない
  • Observableはsubscribeするまで、データを発信し始めない
  • Observableはビルトインオブジェクトになるかもしれない
  • Observableはsubscribeしたあとunsubscribeすることでデータの流れを止めることができる
  • (Observableはpush-basedのプロトコルをアプリやプラットフォームで扱えるようにするもの?)

push-basedプロトコルというのが何なのかイマイチですが、Observableがどういったものかわかりました。

JS Bin - Collaborative JavaScript Debugging

Angular2とタイプした時にconsole上でReceived key command: Angular2と出力するだけのサンプルです。
RxJSは使わず、zen-observableで実装してあります。ほとんどこの仕様書通りの実装です。よろしければこねこねしてやってください。

Observableについて理解できましたが、その強力さや凄さについては未だ疑問が残ります。
そのあたりのことは次回か、今週のng-kyotoのmeetupで話せたらいいと思っています。

ng-kyoto.connpass.com

興味のある方はぜひお越しください!ではではまたね!

Angular2ハンズオンに挑むふらいんぐうぃっち

ng-japanとng-kyotoとGDG神戸合同開催のAngular2ハンズオンに行ってきました。
そして実はこのハンズオン、先週東京でも行われたんです!東西で同じネタを扱う勉強会って珍しくないですかね?

connpass.com

gdgkobe.doorkeeper.jp

会場のサイボウズ株式会社様には、25名ほどの方が来ていました。
会場がとても過ごしやすく広さ的にはどことなく学校の教室を思わせる感じでしたね。

で、肝心のハンズオンの教材はAngular2サイトのチュートリアルを題材としており、
手を動かし、解説を交えながらAngular2のことをたくさん教えていただけました。
ハンズオンの教材は口頭による解説がなくてもドキュメントが整備されているのでおうちで取り組むこともできます。
Angular2について少しでも気になっている読者の方がいればトライしてくださいね。

github.com

ハンズオンの前には @shin_v1 さんと @laco0416 さん(東京から来ていただきました!)からAngular2に関する
紹介とAngular2とECMAScriptについての発表がありました。

speakerdeck.com

laco0416.github.io

まとめるとこんな感じ

  • Angular2はAngularJSより高速に変更を検知してViewに反映できる
  • Angular2はフロントエンドフレームワークの概念に収まらない
  • Angular2にさえ乗っかれば大抵のことはできる
  • ドキュメントの整備も進んでいる
  • Angular2は5月ごろにRCリリースかも!?
  • Angular2学ぶなら今
  • Angular2を学ぶことは書き方よりもまずECMAScriptを学ぶことである
  • Angular2でECMAScript2015は当たり前、知らないとかは許されないくらいしっかり利用されている
  • ECMAScriptは今後1年刻みで勧告されるので6年分をまとめたECMAScript2015はしっかり押さえておこう
  • Webを理解して学び続けましょう

うん、まずはWebについての理解を深めようかな...。

ハンズオンは用意された教材をテキパキと片付け先へ先へ行ってしまう人や質問を交えながらじっくり取り組む人など様々でした。

個人的な感想ですが、AngularJSのころと比べると書きやすくなったなあと実感しました。
それは @laco0416 さんがおっしゃっていたようにECMAScriptの最新の仕様をどかっと盛り込んでるからこそだと思うんですよね。
もはや知らなかったでは通用しない世界が来てもおかしくはないと思うので今後も必要な情報を見極めてキャッチアップし続けていきましょう。