フロントエンドエンジニアは出世魚？「ぶり」になれる３つの資質

私は普段、HTML, CSS, JavaScriptを使ったWeb制作のフロント回りを担当しています。

「肩書は何ですか？」と聞かれたら、

「マークアップエンジニアです」

と答えます。

一方で、
・フロントエンドエンジニア
・コーダー
と答える人もいるでしょう。

何が違うのでしょうか？
恐る恐るググってみました…

うーん、よくわからんです、いろんなこと言い散らしている。
思わず「言ったもん勝ちか？」って心の中を通り越して声に出してしまいました。

ざっくりまとめると、こんな感じだと思います。

フロントエンドエンジニア

フロントエンドエンジニアとは、情報システムやWebサイトを開発する技術者のうち、利用者への表示や操作の受け付けを行う部分を担当する職種のこと。特に、WebサイトやWebサービスの開発で、Webブラウザ側に展開されるコードの開発を行うエンジニアのこと。

IT用語辞典 e-Words

つまり、
・Webサイトの閲覧者と所有者といった異なったユーザーの立場から考え、設計など上流から構築作業を担う
・ユーザーとサービスの接点（可視、操作、体験）を開発する

コーダー（マークアップ）

Webサイト制作・開発の分野では、デザイナーの作成したイメージ画像やデザイン案などをもとに、HTMLやCSS、JavaScriptなどの言語でWebページのコードを記述するコーディング作業を行う職種をコーダーという。

IT用語辞典 e-Words

*コーダーはソフトウェア開発でも使われる言葉らしく今回はWebコーダーについて記載しています。

こちらは、
・デザイナーが作成したデザイン、クライアントから要望されたビジュアルをWebサイトに再現させる
・ユーザーとサービスの接点（可視）を担当する

ということでしょうか。

実際の現場ではどうか？

フロントエンドエンジニア
マークアップの作業も包含しつつ、ユーザーが操作する部分やサーバーサイドとデータのやり取り、インタラクティブな表現など多岐にわたり、Webサイトを使用するユーザーが体験する部分の開発を行う。

強みは「JavaScriptを巧みに操る能力」
ex )
・ボタンをクリックやページ遷移に合わせたインタラクティブなUI/UXの開発
・APIを利用したデータ取得などバックエンドとの連携
・Ajaxなどを用いた非同期処理
・クライアントサイドで表現されるプログラミング開発全般
・Webページ表示速度のチューニング
・WordPressなどCMS構築

コーダー（マークアップ）
原案となるデータを元にHTML, CSSでマークアップを行い、
場合によってはJavaScriptを用いてWebサイト（Webアプリケーション）のビジュアルを表現する。
さらに追求する場合は、アクセシビリティ、ユーザービリティを踏まえた文章構造を理解し、SEOにも探求する。

強みは「HTMLとCSSをひたすら書き上げるパワーと耐久性」
ex )
・セマンティックなコーディング
・デザインに忠実な再現性
・W3C準拠の正しい文法

フロントエンドエンジニアは出世魚？

フロントエンドエンジニアという呼び名は、
ユーザーがWebサイトを閲覧、操作する部分の開発を担うエンジニアの総称みたいです。

昨今、Webサイトの普及は拡大し、表現できる幅も広くなりました。
それに合わせてフロントエンドに携わるエンジニアの作業は多岐に渡ります。個々の技術や知見の幅も広くなりフロントエンドエンジニアという職種ができたようです。

出世魚の名前が変わるのは、成長とともに姿が変化し、味わいも変わるため。

マルイチ産商

フロントエンドエンジニアという職種は、
技術と知見の幅＋経験が積み重なった形態だと思います。
現場によって呼び名も変わりますし、成長と共に変化していく様は出世魚のようだなと思いました。

コーダーは「ワラシ」として経験を重ね、「ブリ」になったときがフロントエンドエンジニアなんですね、きっと。

結局のところ

調べていく最中、これまで出会ったフロントエンドエンジニアたちのことを思い出してみると、以下3つの共通点がありました。

・JavaScriptスキルが高い
・Webの世界やプログラムの知見が広い
・新しいことへの好奇心を備えている

これらの資質があれば、「ぶり」になれるのかもしれません。

いつの日か、
「私は、フロントエンドエンジニアです」と名乗りたいなぁ。

さて、そろそろ構築作業に戻ります。