フロントエンドエンジニアって2種類に大別されるよね。って話

「フロントエンドエンジニア」という肩書き・名乗りを聞いて、皆さんはどういったエンジニア像を思い浮かべるでしょうか。

僕はフロントエンドエンジニアには大きく分けて2種類あると考えています。

＜2種類のフロントエンドエンジニア＞

同じフロントエンドエンジニア同士でも、この属性が違うと話が噛み合わなかったり、そもそも主眼に置いている価値観が違ったりとで不幸を生むケースがあります。

Web制作者がフロントエンドエンジニアを求めている企業に応募したところ、企業はWeb開発者を求めていた...なんてミスマッチを生んでしまう場合などですね。

フロントエンドエンジニアの肩書きの方がどちらの属性であるかを理解しておくと、無用な軋轢も減るのではないでしょうか。

今回は主にWeb初学者の方に向けて、両者の特徴を挙げてみます。

僕はWeb開発者寄りのフロントエンドエンジニアですが、この記事で申し上げたいことは「Web制作者とWeb開発者のどちらが優れているか」といった議論ではありません。あらかじめご認識おきください。

Web制作者（Webクリエイター）

まずはWeb制作を取得するクリエイター業務についてです。

Web制作者・クリエイターの業務は、以下のようなものが主となると考えています。

企業・案件によってはデザイナーがデザインカンプまでを作成、HTML・CSSマークアップをフロントエンドエンジニアが担当するといった分業がなされます。

ただ、私はWeb制作者に求められるのは上記の業務の中でも「Webデザイン」のスキルが重要視されると考えています。

JavaScriptやPHPによるプログラミングスキルよりも、デザインスキルやマークアップスキルの方が重視されると言えるでしょう。

エンドユーザーのUXを向上させ、クライアントのビジネスの成功に結びつけるためには相応のデザインスキル・優れたUI/UXへの理解がWeb制作者に求められます。

そしてWebシステム開発を主に行うWebディベロッパーの業務について。

Web開発者の主な業務は以下のようになります。

Web"アプリケーション"の開発
Vue.js, React, AngularJSなどのJavaScriptフレームワークを使ったリッチなSingle Page Application（SPA）の開発
Redux, Vuexなどを使ったフロントエンドアーキテクチャのstore設計
CI/CDパイプラインの構築など、フロントエンドDevOps
フロントエンドアプリケーションのユニットテスト・E2Eテストの構築

範囲広すぎて書き切れないです。BFF（Backend For Frontend）の構築とかもおそらくフロントエンドWeb開発者の担当領域だと思います。

Web制作者と比較するとプログラミングのスキル、アーキテクチャへの理解、パフォーマンス改善などがより求められると考えています。

制作者に求められるデザインスキルを求められることは比較すると少ないです。

さらにはシステム保守の観点から、より堅牢で保守性の高いコンポーネント設計を考えて実装することも重要です。

フロントエンドエンジニアは、Webデザインスキルが重視されるWeb制作者とWebプログラミングスキルが重視されるWeb開発者に大別されるということを書きました。

フロントエンドエンジニアの担当範囲は本当に広いです。それゆえ同じ「フロントエンド」というワードの中で制作ベースの考えと開発ベースの考えで乖離が起きたりするケースがあります。

例えば「Web制作はプログラミングであるか否か」みたいな議論ですね。

個人的にはHTML/CSSはあくまでマークアップ言語で、動的処理を中心としたプログラミングとは別物、という考えです。

しかしながらWeb制作者でもJavaScriptによるプログラミングをするでしょうし、Web開発者でもデザインツールを使ってそれを元にコンポーネント設計などをするわけです。

両者の境界は非常に曖昧なものなので、明確に住み分けができるものではありません。言ってしまえばただの言葉の定義の問題なので。

gulpなどのタスクランナー構築は制作担当がやるのか開発担当がやるのか・・・？とか、nuxtをSSG（静的サイトジェネレータ）として使うのは開発者か制作者か、なんて正解は出せないと思います。

フロントエンドエンジニアを自称するものとして、制作と開発のどちらに軸足を置くか、そのスタンスは明確にしておきたいですね。

僕自身はWeb開発者としてアプリケーションを作ることを軸にし、Web制作もやるというスタンスでこれからも取り組んでいこうと思っています。どっちもできるほうが面白いし仕事の幅も広がります。

それでは。