Angular2で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/close

Angular2ではComponentの親子関係をつくれるので、Modalを開くボタンを持つものを親Component、Modalを子コンポーネントとしました。
親Componentから子Componentの開閉をするために、@ViewChildで親Componentから子Componentを取得します。

親Componentからの値の受け渡し

例えば親ComponentのTextareaに入力された文字列を、子CompoentのModalで確認できるようにする、ということを実現するために@Inputを使いました。
プロパティバインディングを使って、親Componentのプロパティの変更が子コンポーネントに反映されるようにしています。

Modalのイベント受け取り

子Componentのイベントにbindできれば良い、ということで@OutputとEventEmitterを使いました。

まとめ

私としては結果的にAngular2の基本的なところを抑えることができたのでよい題材でした。
私のようにAngular2を勉強中、といった方のお役に立てますと幸いです。

おもてなしの心をUX/Angular2で一緒に吹き込んでくださるメンバー,お待ちしております!

エンジニアを募集しています

ビザスクでは、エンジニアとして働きたい方を募集しています。
ご興味のある方は下記よりお気軽にご連絡ください。