フロントエンドエンジニアにおけるWeb制作とWeb開発

近年「フロントエンドエンジニアになりたい！」と言う声をSNSでよく聞きます。

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

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

巷で言う「フロントエンドエンジニア」は以下の2種類に大別されるので、誤った認識を持たないように注意が必要です。

• Web制作者
• Web開発者

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

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

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

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

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

Web制作者の主な業務とは

まずはWeb制作・クリエイター業務についてです。
Web制作者・クリエイターの業務は、以下のようなものが主となります。

• Web"サイト"のデザイン設計
• デザインツール（Adobe XD/Figmaなど）を使ったデザインカンプの作成
• デザインカンプを元にしたHTMLマークアップ・CSSコーディング
• JavaScript・jQueryを用いた、サイトに動きをつける実装
• WordPressを用いたCMS構築

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

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

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

(セマンティックにマークアップができることはWeb開発者にも求められることですが...)

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

Web開発者の主な業務とは

そしてWebシステムの開発を主に行うWeb開発者・ディベロッパーの業務について。
Web開発者・ディベロッパーの主な業務は以下のようになります。

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

範囲が広すぎて書き切れないですね。

BFF（Backend For Frontend）の構築とかもおそらくフロントエンドWeb開発者の担当領域だと思います。

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

近年はWeb制作に比べるとJavaScriptよりはTypeScriptで書くことが多く、jQueryは使わなくなってきている印象が強いです。

そしておおよそ組織内にデザイナーがいるので、制作者に求められるデザインスキルを開発者に求められることは比較的少ないです。

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

まとめ

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

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

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

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

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

両者の境界は非常に曖昧なものなので、明確に住み分けができるものではありません。

言ってしまえばただの言葉の定義の問題なので。

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

僕自身はWeb開発者としてアプリケーションを作ることを軸にし、時々Web制作もやるというスタンスでこれからも取り組んでいこうと思っています。

どっちもできるほうが面白いし仕事の幅も広がりますからね。