表題の通りなのですが、SPA開発しているフロントエンドエンジニアの皆さまは、自分でHTMLのマークアップやCSSのスタイリングを行ってますか?それとも、マークアップエンジニアやWEBデザイナーの人がそれらを担当していますか?その場合、不都合とかないでしょうか?
「そういう風に組まれちゃうとコンポーネント化しづらいんだけど。。。」みたいな。
分業が上手く行くか否かはコミュニケーションや連携の仕方次第ですかね。
どのようなかたちで取り組まれてるか教えてください!
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答2件
0
ベストアンサー
僕の場合ですがマークアップと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ページを組み上げていく。
決して各ページで独自のデザインをしないで、統一感をもたせるようにデザインする。
など注意すれば分担しても大丈夫だと思います。
どちらにしてもコミュニュケーションは大事です!
投稿2017/09/26 06:36
総合スコア1869
0
やや特殊で偏った話かもしれませんが.
Firebase + Vue.jsというtech stackなのですが,横割りでなく縦割りで分担してます.
*.vue
ファイルが機能ごとにhtml, css, jsをまとめて一ファイルで扱うので,機能毎の縦割りがしやすいのです.
それからCSSに関しては,vue-materialなどのライブラリを利用してほぼそのまま置くだけポンしちゃってます.
投稿2017/09/16 16:32
総合スコア1159
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2017/09/16 21:55
2017/09/16 23:33
退会済みユーザー
2017/09/17 10:53
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2017/09/26 09:05