【はじめに】
フロントエンドエンジニアの kalbeekatz です。話の背景となる自分の経歴から紹介させてください。
Web制作会社でマークアップエンジニアとして HTML/CSS/JavaScript（主に jQuery）で静的な Web サイトの構築をしていました（2年間）。
その後、株式会社ニジボックスに転職し、フロントエンドエンジニアとして上記に加え、React で動的な Web サービスを構築してきました（2年半）。
この5年間を通して自分がマークアップエンジニアからフロントエンドエンジニアになるまでを振り返り、それぞれの違いや求められること、やりがい、道のりなどをまとめました。
これからエンジニアを目指す方、マークアップ以外のエンジニアリングに興味を持っている方などの参考になれば幸いです。
マークアップエンジニアとフロントエンドエンジニアの違い
「マークアップエンジニア」「フロントエンドエンジニア」と書いてはみたものの、両者にはどのような違いがあるのでしょうか。
それぞれ使用する技術や職域が明確に定義されている訳ではなく、組織によって、また、同じ組織内であっても個々人によって捉え方が異なることがあります。
とは言うものの、巷の情報を眺めてみると、ある程度の共通認識はあると思います。
ざっくりまとめると、
- マークアップエンジニア: Web サイトが閲覧できるようにエンジニアリングするお仕事。
- フロントエンドエンジニア: Web サービスが動かせるようにエンジニアリングするお仕事。
Web サイトという言葉はここでは主にコーポレートサイトやランディングページなどページの閲覧を主な目的とするメディアを指します。
一方、 Web サービスは通販サービスや旅行予約サービスなどユーザーとの対話を主な目的とするメディアを指します。
言葉上の分類はしたものの、コーポレートサイトのお問い合わせページなどで対話ができるのは一般的ですし、通販サービスはそもそも商品を閲覧できないと対話に進めません。それぞれの性質を併せ持ったメディアが多いのが現状で、マークアップエンジニアとフロントエンドエンジニアの定義を明確にできないのは Web メディアを分類しきれないのが理由の一つと思われます。
仕事内容の傾向
◯: 開発の中で割く時間が多い
△: 割く時間が比較的少ない
| 仕事内容 | マークアップ エンジニア |
フロントエンド エンジニア |
|---|---|---|
| HTML をセマンティックにコーディングする | ◯ | △ |
| CSS を BEM などの設計思想に則ってコーディングする | ◯ | △ |
| HTML/CSS でデザインを忠実に再現した Web サイトをコーディングする | ◯ | △ |
| HTML/CSS の仕様を理解しクロスブラウザ、クロスデバイスに対応する | ◯ | △ |
| JavaScript（jQuery など）を用いて HTML/CSS だけでは実現できないアニメーションや機能を実装する | ◯ | ◯ |
| デザインカンプから画像を適切に書き出し Web ページに設置する | ◯ | △ |
| マークアップ面で SEO 対策する | ◯ | △ |
| アクセシビリティに対応する | ◯ | △ |
| Pug, EJS, Sass, Tailwind CSS, Bootstrap などで効率的に開発する | ◯ | △ |
| gulp や webpack などで上記の環境を構築する | ◯ | △ |
| 各種 CMS（WordPress や EC-CUBE など）でサイトを構築する | ◯ | △ |
| Git でバージョン管理する | ◯ | ◯ |
| npm などで Node.js のパッケージを管理する | △ | ◯ |
| React, Vue.js などで SPA を構築する | △ | ◯ |
| OAuth などでフロント側の認証を実装する | △ | ◯ |
| REST や GraphQL など API 設計をする | △ | ◯ |
| API 通信を伴う処理を実装する | △ | ◯ |
| テストコードを書く | △ | ◯ |
| Linux コマンドなどで CLI 操作する | △ | ◯ |
| 定義書、仕様書、設計書、テストなどのドキュメントを作成・運用する | △ | ◯ |
| スクラムなどの手法に則って開発をする | △ | ◯ |
どれも突き詰める（質もスピードも求める）となると技術力と経験が必要だと感じています。
マークアップエンジニアの延長線上でフロントエンドエンジニアを語られるシーンは多いと思いますが、どちらかが技術的に優れているというものではないとつくづく感じます。
マークアップエンジニアが、フロントエンドエンジニアの構築した複雑なロジックに驚くシーンだけでなく、熟達したフロントエンドエンジニアが、マークアップエンジニアの職人芸を見て感心しているシーンもよく見ます。
マークアップエンジニアとフロントエンドエンジニアは直列でも並列でも語ることができます。
やりがい
マークアップエンジニア
- フロントエンドエンジニアと比較して短納期の案件が多いので成功体験が積みやすい
- プロジェクトの人数が少ない傾向があり、デザイナー、ディレクター、営業、バックエンドなど他のチームのメンバーやクライアントと距離が近い
- まっさらな状態から美しいデザインを再現して構築しきった時の達成感は半端ない
- 複雑なレイアウトに対してスタイリングの行数の少なさ・保守性を意識しながらパズルを解いていく感覚がたまらない
- CSS は自由度が高い言語なので、設計技術がプロジェクト中盤に効いてきて上手くハマると気持ちよい
フロントエンドエンジニア
- 初めて React や Vue.js を触った時の感動は忘れられない
- プロジェクトのメンバー数が多い傾向にあり、フロントエンドエンジニアが複数いるとチームの結束が生まれやすい
- バックエンドと結合して一気通貫で機能が動いた時の達成感は半端ない
- コンポーネント設計が上手くハマると気持ちよい
- 複雑な機能を分解して小さいパーツをコツコツ作りながら一つの立派な機能が動くことが確認できた夜は酒が上手い
フロントエンドエンジニアまでの道のり
2年間マークアップエンジニアをする中で、 React はおろか HTML テンプレートエンジンや Sass、 Git さえ使ったことがありませんでした（存在さえ知りませんでした）。
そのような状態でニジボックスへ転職してすぐの入社時研修で Git の使い方からテンプレートエンジン、 Sass の書き方を学びました（2週間ほど先輩エンジニアにレビューいただいていました）。
書籍やチュートリアルでも勉強はできるかと思いますが、今思えば実際の現場の近くで習得していく方が早くて確実だという実感があります。
また、研修対象の知識だけでなく周辺技術のこぼれ話が聞けたり、エラーと遭遇した時に解決するまでのプロセスを追えたりするのは非常に有意義でした。
入社後1ヶ月くらい経ち Git の操作にもようやく慣れてきた頃、 React を知りました。
先に React を触っていた同僚の勧めがきっかけで、まずは公式のチュートリアルからはじめました。
その時につまずいたのは、自分の PC に Node.js が動く環境を準備することでした。
React などへの第一歩を踏み出す時に、この辺りの環境構築が大変だった方は少なくないのではないでしょうか。
どこかのブログの通りにやってはエラーが出るというのを繰り返し、同僚や先輩に見てもらいながら仕組みは理解せずとも、とりあえず動く状態にはなりました。
今となってはパスを通していないなど、単純な所でつまずいていたなと思います。
その後、 React の実案件にアサインされて現在に至ります。
振り返ってみると右も左も分からない最初の状態が一番辛く、その時にすぐに質問できる人が近くにいることがとても救いになりました。
公式ドキュメントを読めば分かるでしょ。と言われればそれはそうなのですが、初めはドキュメントの読み方自体が分からないので路頭に迷っていました。
第一歩の時は周りに頼れる人がいる環境を探すところから始めるのがおすすめです。
React 案件のアサイン後、フロントエンド開発にも慣れてくると、マークアップエンジニアとしての経験が効いてきました。
マークアップする中で身につけた HTML/CSS 構築の精度や速さ、知識と経験はフロントエンド界隈でも重宝されるシーンがあります。
ドキュメントに書いてあることが理解できるようになると、フロントエンド開発の精度が格段と上がりました。
自分がフロントエンドエンジニアになるまでのターニングポイントをまとめます。
- 第一歩の時に頼れる人がすぐ近くにいたこと
- フロントエンド開発で成功体験を詰めたこと
- ドキュメントの内容が理解できるようになったこと
人それぞれのスタイルがあると思いますが、本記事がフロントエンドエンジニアに興味を持っている方を少しでも後押しできれば嬉しいです。