皆さんは普段Angular開発を進めてている上で思ったより工数が膨らみ遅延した覚えありませんか？
今回はその問題のひとつについてまとめました。
開発工程
プロジェクト開発における簡単な開発工程図です。
デザイナーは要件定義を汲み取って画面設定書やモックを作成します。
(ここでは基本設計や詳細設計等は省きます)
プログラマーはその画面設計書やモックを元に製造を行います。
今回はその
開発プロセスにおけるデザイナーからプログラマーに引き渡す際の役割
について着目したいと思います。
一般的なデザイナーの役割として
・デザインカンプ(PhotoshopやXDなど) ・デザインガイドライン ・モック(HTML・CSS・Javascriptなど)
プログラマーに引き渡す
プログラマーは モックがAngularのコンポーネントになってないのでAngular用に作り直す
ここで問題が発生です！
デザイナーは一般的にjQueryを使ってモックアップを作ります。
このデザイナーが作成したモックアップをプログラマーがAngularに変換するので大半がコード変換が必要となり、この作業だけで工数が何倍もの膨らみます。
これはjQueryと言うライブラリーとAngularフレームワークの違いということもありますが、もっと基本的なところとしてAngularのコンポーネント開発と従来型のweb開発との違いが大きいです。
よくcssが流用出来ると言われていますが、コンポーネント開発のScopedCSSをうまく利用しようとするとむしろモック開発でのcssが足かせになります。
また、ガイドラインとカンプだけ渡してプログラマーに作成してもらう考えもありますが、少数の画面ならともかく多数ある画面からどのようにコンポーネントを切り出すか検討する時間が必要になり、ここでも工数が膨れることになります。
問題を解決するには
モックをAngularで作成
モックをAngularを使って作成するのが好ましいです。
かと言ってAngularの機能すべてをデザイナーが構築するのは難しいですよね。
ここでプログラマーとの分業です。
デザイナーがコンポーネントを作成し、プログラマーがserviceを作成する。
わかりやすく言うなれば、デザイナーはパーツ(部品)を作り装飾をし、プログラマーは処理を作成することになります。
デザイナーは画面のレイアウト、どの画面に再利用出来るパーツ(部品)が存在しているか理解しているのでコンポーネント作成にはとても向いています。
Angular開発でのデザイン
カンプ、デザインガイドライン作る上でもコンポーネント単位で考えます。
フォームで使用するinputやselect、またcardを使ったレイアウトなどパーツ(部品)ごとに区切ってコンポーネントを作成します。
仮にコンポーネントを作成するのがプログラマーだとした時に工数が大幅に減り作業効率UPにつながります。
Angularは学習コストが高く、難しいと言われていますが、デザイナーも習得することでプログラマーとのやりとりがスムーズになり生産性があがります。
弊社のデザイナー(私)もAngularでモックアップを作ってます(T_T)