SPA開発しているフロントエンドエンジニアの方は自分でマークアップとスタイリングしてますか？

Question

表題の通りなのですが、SPA開発しているフロントエンドエンジニアの皆さまは、自分でHTMLのマークアップやCSSのスタイリングを行ってますか？それとも、マークアップエンジニアやWEBデザイナーの人がそれらを担当していますか？その場合、不都合とかないでしょうか？

「そういう風に組まれちゃうとコンポーネント化しづらいんだけど。。。」みたいな。

分業が上手く行くか否かはコミュニケーションや連携の仕方次第ですかね。

どのようなかたちで取り組まれてるか教えてください！

Answer 1

僕の場合ですがマークアップとCSSのスタイリングを同時にやっています。

また、僕はフロントエンド系の勉強会を主催していて、色々な方と話すことがあるのですが、それを通じて感じることはエンジニアのスキルによって大きく２つに別れます。

まず、前提としてですが、フロントエンドで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ページを組み上げていく。
決して各ページで独自のデザインをしないで、統一感をもたせるようにデザインする。
など注意すれば分担しても大丈夫だと思います。

どちらにしてもコミュニュケーションは大事です！

Comments

[退会済みユーザー]

ご回答ありがとうございます。

そうなんですよ、コーダーの方がatomic designの概念を理解している方だと話がはやいんですよね。

そうすると安心してコーディングを任せられるんですよね。

Answer 2

やや特殊で偏った話かもしれませんが．

Firebase + Vue.jsというtech stackなのですが，横割りでなく縦割りで分担してます．
*.vue ファイルが機能ごとにhtml, css, jsをまとめて一ファイルで扱うので，機能毎の縦割りがしやすいのです．

それからCSSに関しては，vue-materialなどのライブラリを利用してほぼそのまま置くだけポンしちゃってます．

Comments

[退会済みユーザー]

意味合いとしては例えば、ドロップダウンメニューのUIは私が作りまーす。〜のUIは誰々さんが作りまーす。みたいな感じでしょうか？すみません、vue.jsは未経験です。firebaseはわかります。

[退会済みユーザー]

そのように分担できるということは、それぞれの方がvue.js,html, cssを使いこなすことが出来るということですね。

[Yatima]

いえいえ，お気になさらず．
うちの場合はもっとかなりざっくり切っちゃってます．twitterで言えば，TLやるからメッセージよろしく，みたいな．

場合にもよりますが，大抵 `*.vue` ファイル一つはドロップダウンメニューより大きな粒度ですね．
表現が適切かわかりませんが，ウィジェット一つ，くらいのイメージです．

使いこなせるとまで言っていいのかどうかはわかりませんが，ドキュメントめくりながら一応使えてはいますね．

[退会済みユーザー]

なるほど。vue使いが複数いるから成せる技ですね。