質問: 表題の通りなのですが、SPA開発しているフロントエンドエンジニアの皆さまは、自分でHTMLのマークアップやCSSのスタイリングを行ってますか?それとも、マークアップエンジニアやWEBデザイナーの人がそれらを担当していますか?その場合、不都合とかないでしょうか? 「そういう風に組まれちゃうとコンポーネント化しづらいんだけど。。。」みたいな。 分業が上手く行くか否かはコミュニケーションや連携の仕方次第ですかね。 どのようなかたちで取り組まれてるか教えてください!
回答: 僕の場合ですがマークアップとCSSのスタイリングを同時にやっています。 また、僕はフロントエンド系の勉強会を主催していて、色々な方と話すことがあるのですが、それを通じて感じることはエンジニアのスキルによって大きく2つに別れます。 まず、前提としてですが、フロントエンドでSPAを書くエンジニアが`元フロントより`か`元バックエンドより`かに別れます。 元フロント寄りの場合 元フロント寄りならばスタイリングもスキルとして持っていますし、自然にマークアップもCSSも書くことが出来るので両方してることが多いようです。 なのでプロジェクト体制としては、以下のような感じになるのかなぁと * デザイナー(webデザインのみ) * フロントエンジニア(コーディング&CSS&JS) * バックエンド(rubyとかphpとか...) 元バックエンドよりの場合 バックエンドよりならばプログラミングに強くJavaScriptもサクサク書く人が多いですが、CSSは全く書けない(苦手)という人も少なくありません。 なのでこの場合はデザイナーの方がマークアップ&CSSを行い、フロントの方がJSとバックみたいな分業になるかなぁと思います。 * デザイナー(webデザイン&コーディング&CSS) * フロントエンジニア?(JS&バックも少々) * バックエンド(rubyとかphpとか...) SPAで選ぶフレームワークに関して さて、上記のように役割分担をしたとしてフレームワークはすごく重要です。 例えばReactの場合はJSの中にhtmlのようなものを記述していくため、デザイナーがhtmlを作ってみたいなことを行なってもjsに変換するのはフロントエンドエンジニアなわけです。 だからコーディングとJSを組む人が別の場合はReactは難しいかもなぁとも思います。(※追記しますがデザインのガイドラインをしっかりすれば問題ないという事例もあります) それに比べvueとangularの少し昔のverなどはhtmlを書いてそれにjsを適用しviewを作るような感じで組むことも可能です。 その場合ならデザイナーとJS担当を分けてもスムーズに行くかなぁと思います。 デザインに関して しかしAbema TVのweb版など使われているAtomic Designなどを上手く利用すればReactなどでも問題なく作れるかもしれません。 結局Reactなどで大事なのはすべて部品になるということです。 なのでAtomic Designで使われるように部品を`Atoms(原子)・Molecules(分子)・Organisms(有機体)・Templates(テンプレート)・Pages(ページ)`などに分けてコーディングするとうまくいくかもしれないなぁと。 デザイナーはコーディングまでして、部品部品でJS担当者に共有する。JS担当者は部品を使ってwebページを組み上げていく。 決して各ページで独自のデザインをしないで、統一感をもたせるようにデザインする。 など注意すれば分担しても大丈夫だと思います。 どちらにしてもコミュニュケーションは大事です!