What's new in Angular 4
お久しぶりですpatelIncです
Angular 4のリリースが迫ってきました🎉
今日は調べたことをまとめようと思います
先日開催された 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 さんの資料をご覧ください
ここからは少し詳しく説明してみます
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さんがブログですでに解説されているので御覧ください
- 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の数カ月分の作業成果がコミットされています
ドキュメントが出るようなので寝て待ちましょう
先行して確認したい方には次のリポジトリをおすすめいたします
Flat ES Modules (Flat ESM / FESM)
FESMは、パブリックAPIのみをエクスポートするESMです (example file)
これはTree Shaking時に生成されるファイルのサイズを小さくしてくれます
今のところRollupもしくはClosure Compilerが対応していてWebpackは未対応です
WebpackはTree Shakingに対応したのでは?と思っていたのですが実は他のツールと比較するとまだ完全ではなさそうです
これはAngularの開発者でもあるIgorさん (@IgorMinar) が言及していました
@danbucholtz @TheLarkInn you'll need rollup or closure compiler for that. Hopefully webpack will support it in the future.
— Igor Minar (@IgorMinar) 2017年2月26日
@danbucholtz fixing this is what @TheLarkInn and friends are working on.
— Igor Minar (@IgorMinar) 2017年2月26日
要するにファイルに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
このあたりの理由はこちらに書かれてあることを参考に納得しました。
その後Anaconda2を利用してみましたがこちらも同様のエラーで無理でした。
VagrantとVirtualBoxでじゃれ合う
Ansibleの利用シーンとしてプロビジョニングがあると思います。
Vagrantはプロビジョニングの方法としてAnsibleのプロビジョナーを提供してくれています。
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がなぜ必要になるのかについて話しました。
Observableについて調べているうちに、何を解決するものなのか疑問が駆け巡ってきました。
そしてそれを自分の中で考え、おそらくこういう思想のもとだろうという推測を加えてスライドを作りました。
もちろんObservableそのものの仕様については以前の記事でもあった通りの事実しか話していません。
その推測のヒントとなったのがStructure and interpretation of computer programs - 2nd EditionのStreamの項でした。
僕はそれを読んでオブジェクトデータ構造と対をなすストリームデータ構造がこのObservableの考えのもとじゃないかと推測したうえでスライドを作成しました。
推測から発表をしてしまうエンジニアらしからぬ発表をしましたがきっとObservableが解決したいことの本質はここじゃないかと考えています。
フロントエンドの人がWeb APIを語る会
6月にNetflixが開発したFalcorについて話してきました。
Falcorの紹介となぜFalcorが何を目的に作られたのかについての発表でした。
Falcorを学ぶ上でGraphQLについても少し公式サイトをかじって読んでいたのですが
そこでそもそもREST APIとは同じ組織内で構築されたクライアントアプリケーションにサービスを提供するAPIの要件ではないとその発明者が述べているとの記述がありました。
これはすごく衝撃でした。REST APIがとにかくプッシュされてきていたイメージでしたがなぜREST APIを使うのか明確な根拠を僕は持っていないことに気付かされたのです。
そして昨今、SPAに代表されるサーバクライアントモデルのアプリケーションがなぜもてはやされているのかについても明確な回答を僕は見いだせていませんでした。
このFalcorの発表と通してこの辺りの疑問に自分なりの回答を得られたことがこの発表の一番の収穫だったように感じます。
こんな感じでいろいろ話させてもらえる機会に恵まれていました。
それではまた!
Potmumが素敵だったのでomniauth-identityを組み込んでみた
おはこんばんちはpastelIncです。
政治的理由により技術ノウハウ共有のために巷のパプリックサービスが使えなかったところ
ドワンゴ新人エンジニア研修の記事でちらっと見かけたPotmumという単語から素敵なQiitaライクなサービスを知ったので動かしてみました。
見たところものすごくおしゃれな見た目です。Qiitaっぽいです。素敵です!
拝見した限り自分用のサービスっぽいのでチーム向けではなさそうです。
利用してみたところOAuth2による認可を使ったログインのみの実装のようでした。
そもそもGitHubやSlack使ってはいけないのでどうしたもんかと考えていました。
最初は認可サーバを立ててomniauthのstrategyを自前で作っていましたがよくよくstrategyリストを見ているとシンプルなパスワード認証できるモジュールを見かけたので実装してみました。
これを使って実装を試してみたものがfeat/identityブランチにあります。
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を書いてみたいと思っています。
こんな感じでrubyとrailsについて詳しくないので怪しいところあると思いますがパブリックなサービスを使えない方でPotmumを利用したい方がいる時の参考になれば幸いです。
追伸
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チームからあまんちゅ!チームへ伝わっているのがわかりました。
最後に佐藤監督は天野先生が手がけられた描きおろしポスターから作品をこういう形でリレーできるのはとても幸せだとおっしゃられていました。
Observableってなんなんね?
ついにRCのリリースも間近となったAngular2ですが、私はこの間のハンズオン以来全然触れてません。
少しづつ触っていきたいものですが、ここ最近の勉強会の経験からAngular2を学ぶならWebの最新技術を学ぶことが大切なのだとわかったので、まずは、Observableを調べてみようと思います。
学習教材を探す
Observableについて学ぶぞ!と意気込んでみたもののどうやって学べばいいのでしょう。
どこかにObservableの正体について書かれた資料はないでしょうか。
ここにObservableがリストアップされています。
TC39、ECMAScriptを策定してる組織です。ECMAScriptはJavaScriptの仕様だと前に教えてもらったことがあります。
- どういう人達なのか
- 何が目的なのか
- そのために何をしているのか
思うことはいろいろありますが、とりあえずこの辺りはおいておきます。ecma262、これはなんでしょう。
なるほどECMAは組織でした。そのECMAが管理する仕様には管理番号が割り振ってあります。
つまり、ecma262はECMAが管理する仕様の一つということになりますね。
(ということはTC39のメンバーはECMAの人たちで構成されているのでしょうか?)
話を戻します。例のリポジトリにリストアップされたObservableのリンクを辿ってみます。
ありました。Observableの仕様を見つけることができました。以降はこの仕様を元に学習しました。
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のキーイベントを使った例があります!例示は理解の試金石です。早速見てみましょう。
この例を見る限りどうやらObservableは標準のビルトインオブジェクトとしても実装することを想定しているのでしょうか。
listenはObservableインスタンスを返し、Observableコンストラクタは関数を受け取っています。
関数はキーイベントにhandlerをアタッチして...っとhandlerの詳細がわかりません。
// observerとは何なのか let handler = event => observer.next(event);
このドキュメントにはObservableやobserverのインターフェイスについても書かれています。
それによるとこのobserver.next
はシークエンスの次の値を送り出すらしいですが...。
うーん、むずかしいです。何より何がしたいのか想像できません。
一旦この例を離れてObservableの実装例として、このドキュメントに挙がっているRxJSとzen-observableについて調べてみることにしました。
どのように動き、何がしたいのか知りたかったのでいろいろ調べていると、Observableをスクラッチで作ってみる動画を見てピンときました。
この時点で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で話せたらいいと思っています。
興味のある方はぜひお越しください!ではではまたね!
Angular2ハンズオンに挑むふらいんぐうぃっち
ng-japanとng-kyotoとGDG神戸合同開催のAngular2ハンズオンに行ってきました。
そして実はこのハンズオン、先週東京でも行われたんです!東西で同じネタを扱う勉強会って珍しくないですかね?
会場のサイボウズ株式会社様には、25名ほどの方が来ていました。
会場がとても過ごしやすく広さ的にはどことなく学校の教室を思わせる感じでしたね。
で、肝心のハンズオンの教材はAngular2サイトのチュートリアルを題材としており、
手を動かし、解説を交えながらAngular2のことをたくさん教えていただけました。
ハンズオンの教材は口頭による解説がなくてもドキュメントが整備されているのでおうちで取り組むこともできます。
Angular2について少しでも気になっている読者の方がいればトライしてくださいね。
ハンズオンの前には @shin_v1 さんと @laco0416 さん(東京から来ていただきました!)からAngular2に関する
紹介とAngular2とECMAScriptについての発表がありました。
まとめるとこんな感じ
- Angular2はAngularJSより高速に変更を検知してViewに反映できる
- Angular2はフロントエンドフレームワークの概念に収まらない
- Angular2にさえ乗っかれば大抵のことはできる
- ドキュメントの整備も進んでいる
- Angular2は5月ごろにRCリリースかも!?
- Angular2学ぶなら今
- Angular2を学ぶことは書き方よりもまずECMAScriptを学ぶことである
- Angular2でECMAScript2015は当たり前、知らないとかは許されないくらいしっかり利用されている
- ECMAScriptは今後1年刻みで勧告されるので6年分をまとめたECMAScript2015はしっかり押さえておこう
- Webを理解して学び続けましょう
うん、まずはWebについての理解を深めようかな...。
ハンズオンは用意された教材をテキパキと片付け先へ先へ行ってしまう人や質問を交えながらじっくり取り組む人など様々でした。
個人的な感想ですが、AngularJSのころと比べると書きやすくなったなあと実感しました。
それは @laco0416 さんがおっしゃっていたようにECMAScriptの最新の仕様をどかっと盛り込んでるからこそだと思うんですよね。
もはや知らなかったでは通用しない世界が来てもおかしくはないと思うので今後も必要な情報を見極めてキャッチアップし続けていきましょう。