AngularでAtomicDesign的にコンポーネントを作ってみた12019-04-05AngularでAtomicDesign的にコンポーネントを作ってみた1Angularこんにちは、情報システム部の高野です。まとまって考える時間がとれたのでAngularでAtomicDesign的*1にコンポーネントを作るにはどのようにするのが良いのか考えてみました。AtomicDesignに関してはググっていただければと思います。Materialなども使わずにボタンからなにから自分で作ってみます。(と言ってもここで紹介するのはその一部ですが)バージョンなどAngularは7.2.0ブラウザはChromeのバージョン73を使用しています。IEでは利用できないCSSの機能があると思うので試す時はその他のブラウザをご利用ください。ボタンコンポーネントを作るまずはシンプルなボタンを作ってみるまずはシンプルなボタンを作ってみます。ちなみにこれは、AtomicDesignで言うAtomになります。ボタンの動作としてはクリックされたことを上位層に返せればよいのでそこはシンプルで、あまり考えることは無いと思います。あとはng-contentでボタンに表示する文字列を外から受け取るように作ります。<ng-content></ng-content></button>HTMLの中身をbuttonタグに変更して子要素にng-contentを追加します。HTMLファイル以外は、ngコマンドでcreateしたままの状態です。どこでも良いのですが今回はappコンポーネントを使います。}}AppComponentクラスにクリックされた時に呼ばれるメソッドを追加します。(click)="onButtonClick()">OK</app-button>HTMLに先程作ったボタンコンポーネントを追加します。これで実行すればなんの変哲もないボタンが表示されクリックすればアラートが表示されます。装飾してみる上記のままだと普通にHTMLのボタンを使えば良いだけなのでまったく価値がありません。CSSで装飾してオリジナリティ*2を出してみましょう。}}scssを使ってますがそこはlessでもcssでも良いです。上記CSSで下図のようなボタンになります。画像だと分からないですがクリックするとちゃんと押した感が出るようになっています。これでclass="btn"とか付けて回らなくても同じデザインのボタンを利用することができます。このCSSを変更すれば使っているところ全部にデザインの変更を行き渡らせることができます。良きかな外部からデザインを変更してみる一応オリジナルのボタンとしては成り立っていますが大きさも色も一定では、あまり使いみちがありません。それらを外部から指定できるようにします。ここで結構悩みました。外部からCSSを変更するにはどうしたら良いのだろう?パッと思いついたのは2つの方法CSSのプロパティ毎に入力プロパティ(@Input)を作成してStyleBindingするいくつかの大きさや色のCSSクラスを作成してそれを入力プロパティの値でClassBindingする1のやり方だと変更したいCSSプロパティが増えた時にTypeScript側も同じ数だけ増えてしまうしなによりも自由度が高すぎてデザインが破壊される可能性が高くなります。この2択であれば2の方を選択した方が良いだろうとなりました。下記は2の方の実装になります。50%);}色の方はカスタムプロパティを使っていますが普通にcolorとborder-colorに値を入れていっても同じです。これを一覧したのが下図になります。なんだかそれっぽい感じになりました。使う側はこのようになります。(click)="onButtonClick()">danger</app-button></div>本来は白抜きのボタンにも対応したいとか丸ボタンもほしいとかあるのでもうちょっと複雑なのですが、雰囲気はこのような感じです。外部からデザインを変更する例えばボタンをなにかの幅に合わせたいということがあると上記では対応できません。これもいくつかの方法があります。上記01の方法CSSのカスタムプロパティを使うボタンのwidthを100%にしてapp-buttonにwidthを与える1の方法でももちろん良いのですが、ここでは除外します。3の方法は、常にapp-buttonにwidthを入れなくてはいけなくなるので却下。いうことで2の方法でやってみます。省略}上位のコンポネントで--widthに値を入れるとその幅になります。300px;}これで下図のようになります。この方法の良いところは、CSSのことはCSS内だけで終わらせられる点ですね。ダメなところは、外から色々できるようにするとデザインが破壊されるところ。それと全然違う場所で同名のカスタムプロパティが作られた場合に予期せずにデザインが変わってしまったりすることがあるところです。*3まとめ今回はボタンコンポーネントを作ってみました。やってまとめるとあまり難しくないのですがここに至るまではかなり試行錯誤しました。Materialなどを使う方が良いでしょう。1プロダクトではなくもっと大きな単位で使い回すように作れば共通したUI/UXが作れてそれなりに元が取れるかと思います。言えブログでは他のコンポーネントや上位の層のことも書いていこうと思います。弊社ではエンジニアを募集しています。Angular以外にもVue.jsやフロント以外のエンジニア募集もしております。興味がある方は下記からエントリーお願いします。17:00AngularでAtomicDesign的にコンポーネントを作ってみた1Tweet関連記事2019-04-19AngularでAtomicDesign的にコンポーネントを作ってみた3こんにちは、情報システム部の高野です。AngularでAtomicDesig...2019-04-12AngularでAtomicDesign的にコンポーネントを作ってみた2こんにちは、情報システム部の高野です。AngularでAtomicDesig...2018-09-20Angularのコンポーネント間の値受け渡しについてこんにちは、情報システム部の高野です。ここのところバタバタ...2017-05-23HoloLensで新しいオブジェクトを生成してみるこんにちは、情報システム部の高野です。前回は、起動時にすで...2017-05-15HololensでAirTapしてみるこんにちは、情報システム部の高野です。新卒採用スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。