【初めて現場に入る人向け】 現役のフロントエンドエンジニアが仕事内容を紹介！
エンジニアになろうとしている人「初めて現場に入る予定だけど、仕事の範囲がわからなくて心配」「現場に入る前に何を準備しておけばよいのだろう…」
こういった疑問にお答えします。
本記事を読むことにより、フロントエンドエンジニアの仕事担当範囲や内容、制作の流れ・チーム構成人数などがわかるようになります。
本記事の内容
- フロントエンドエンジニアの対応範囲
- 役割・チーム構成
- 制作・開発期間
- 使えるようにしておくべきツール類
フロントエンドエンジニアの対応範囲
「フロントエンドエンジニア」というと名前の通り、フロントエンド全般を担当することになります。
- HTML&CSSのマークアップ
- WordPressなどView部分のPHPを使うケースもあり
- JavaScriptでの機能実装、API連携
大きく分けると、①HTML&CSSのマークアップ、②JavaScriptやPHP・Ruby等でのフロント部分の実装になります。
個人的な感覚だと明確な切り分けはなく、①+簡単なJavaScriptやPHP実装までできる人を「マークアップエンジニア」や「コーダー」と呼び、①〜②までできる人を「フロントエンドエンジニア」と呼ぶことが多い気がします。
最近ではデザインは分業されていて専任のデザイナーが行うことが多く、フロントエンドエンジニアというとReactやVueなどでJavaScriptを使いロジックを組むことがメインになっています。
規模が大きくなると、
・ReactやVueのJavaScriptを専門にする担当
にわかれることが多いです。
ただReactやVueのフレームワークを使うケースでは、わかっていないコーダーがマークアップをするとReactやVueに合っていない構成で書いてしまい、レビュー時に全部書き直しやJavaScriptの実装をする時に実装者が書き直すといったこともあります。
よって以下のような知識がある方がマークアップ担当としては好まれます。
- BEM・FLOCSS等を理解しており、規約に沿ってCSS設計がきちんとできるコーダー
- 少しでもReactやVueがわかっているコーダー
意外とコーディングするだけでもこれらができない人も多いので、当たり前と思われることもできるようにしておくと採用されやすいと思います。
役割・チーム構成
会社や仕事の規模により、チーム構成や仕事の担当範囲は大きく違ってきます。以下のような特徴があります。
Web制作会社
- 主に小規模〜中規模のホームページ制作
- バックエンドの開発やシステムを組むような仕事は基本的にしない
- 専任デザイナーがいる場合と、デザイナーがコーダーを兼務する場合がある
- ひとつのサイトを1人ですべてマークアップ担当することが多い。規模によってはヘルプで人が入ることもある。
- 大規模なホームページを保守・運用している時は特に担当などはいなく、チームで空いている人が対応ということもある。
システム開発会社
- 中規模〜大規模なサイト制作
- バックエンドの開発などシステム開発がメイン
- バックエンド〜フロントエンドまでこなす
- デザイナーは内部にいる場合と完全外注の場合がある。
- フロントエンドエンジニアがデザインをすることは、ほぼない。
- プロジェクト立ち上げ時は数人〜10人程度でローンチまで開発し徐々に人数を減らす。
- 運用フェーズだとフロントエンドは1〜2人で運用することが多い。
- バックエンドとフロントエンドを担当する企業自体がわけられていることもある。
制作・開発期間
Web制作会社の仕事のスパン
だいたい受注〜納品まで1〜2ヶ月以内ということが多い。
- ディレクターがヒアリング＆ワイヤーフレーム作成
- デザイナーがデザインを作成
- コーダー(デザイナーが兼務することもあり)がデザインからマークアップする
- 納品
システム開発会社の仕事のスパン
受注〜納品までの期間はまちまち。
小さいものだと数ヶ月で、大規模で長いものだと1年以上かかるものも多い。
- 企画・設計
- バックエンド開発 & デザイン制作
- フロントエンド開発
- テスト→バグ修正
- 納品
使えるようにしておくべきツール類
- GitHub （ソースコード管理）
- Slack （チャットツール）
他に進捗管理をするツールを使いますが、これはマチマチなので入ってからルールを覚えれば問題ありません。Redmine、Trelloなどを使うことも多いです。
まとめ：マークアップ〜JavaScriptのフレームワーク対応がメインの仕事
フロントエンドエンジニアの仕事としては、マークアップからReact・VueなどJavaScriptのフレームワークでの対応までがメインの仕事になるかと思います。
フロントエンドのエンジニアのロードマップ 【身につけるべきスキル・収入アップ手順】という記事も書いているので参考にしてみてください。
ご参考になれば幸いです。
※当サイトでは一部のリンクについてアフィリエイトプログラムを利用して商品を紹介しています