27Angular2でModalつくってみたはじめまして!11月よりビザスクにジョインした渡部と申します。現在UXチームに所属して、Visasqの使い勝手の向上に日々奮闘しております。本投稿ではAngular2の簡単なTIPsをご紹介します。こちらの画像は今回の内容を元に実際のサービスに組み込んだものになります。私自身Angular2を使うのは初めてで、勉強しながら覚えたことを記載しています。拙い部分もあるかと思いますがご容赦くださいませ。ビザスクでのAngular2実はビザスクでのAngular2の利用はまだ一部に留まっています。AngularJS(いわゆる1.x系)をfrontendのフレームワークとして採用していて、ある機能をリニューアルするにあたり新規実装部分をAngular2で実装した、というのが経緯のようです。1.x系ではなく2.x系を採用した理由や、移行について考えたことなど、興味深い話はおそらく後ほどエントリーがあると思いますのでご期待下さい!最近ジョインした私の素朴な感想としては、ビザスクは最新技術の感度も高いし採用も積極的ですね。Angular2は最近正式リリースされたものですしその最たるものです。いちエンジニアとしては仕事で最新の技術を触れるのは有り難いです。Modalの設計と実装さて前置きが長くなりましたがここからが本題です。UIでダイアログ表現が必要になったのですが、Angular2でのModalの実装がなかったので作ることになりました。先々のことも見据えつつ、実装する前に以下のことを考えました。開くや閉じるなどの共通で利用する部分は再利用できるようにしたい(が、中身の内容やボタンの数などは個別の要件で異なる想定)Modalを開くボタンなどを持つ、親となる要素が存在する親となる要素からModalの中身の内容を指定したい共通化しつつも、開いた時・閉じた時の振る舞いは、親となる要素から指定したいさらに、Modalを使うのが最初のケースということもあって、行き過ぎた汎用化をしないように、シンプルになるように注意しました。それでは、Angular2で上記をどうやって実現したか記します。再利用部分の共通化あとで再利用できるように共通化するために、シンプルに親クラスをつくって継承するようにしました。Modalのopen/closeAngular2ではComponentの親子関係をつくれるので、Modalを開くボタンを持つものを親Component、Modalを子コンポーネントとしました。親Componentから子Componentの開閉をするために、@ViewChildで親Componentから子Componentを取得します。親Componentからの値の受け渡し例えば親ComponentのTextareaに入力された文字列を、子CompoentのModalで確認できるようにする、ということを実現するために@Inputを使いました。プロパティバインディングを使って、親Componentのプロパティの変更が子コンポーネントに反映されるようにしています。Modalのイベント受け取り子Componentのイベントにbindできれば良い、ということで@OutputとEventEmitterを使いました。まとめ私としては結果的にAngular2の基本的なところを抑えることができたのでよい題材でした。私のようにAngular2を勉強中、といった方のお役に立てますと幸いです。