目次
- はじめに
- これだけは抑えたい必須スキル
- なくても困らないスキル
- その他あったら嬉しいスキル
- さいごに
- まとめ
はじめに
制作会社では、webサイトを作るエンジニアのことを「フロントエンドエンジニア」と呼ぶことが多いと思います。フロントエンドエンジニアの定義は世の中に様々ありますが、ざっくりデザインをもとにサイトを実装するエンジニアと理解していただいて問題ないと思います。
ツイッターではよく、デザインから実装まで学習している駆け出しのエンジニアの方をよく見かけますが、制作会社で働くのであればエンジニアがデザインをする必要はありません。なぜなら、規模が大きな制作会社であればあるほど一人に求められる役割が細分化されているからです。
下記は業界で有名ないくつかの制作会社の社員紹介ページのリンクです。リンク先をみてもらえれば、どの会社もデザイナーとエンジニアが別々に紹介されていることが分かると思います。
mount inc
SHIFTBRAIN inc.
AID-DCC Inc.
このように制作会社では役割が細分化され、フロントエンドエンジニアはデザインは行わず実装のみを行うことがほとんどです。
しかし、当然ただ役割が細分化され狭くなっているのではなく、代わりにひとつひとつのスキルに高いレベルが求められます。
初学者が制作会社で働くことを考えたときに、最前線で活躍するようなフロントエンドエンジニアに求められる全てのスキルを、最初から高いレベルで身につける難しいと思います。実際多くのエンジニアが働きながらそれらのスキルを身につけているはずです。
では働きながらそれらのスキルを身につけるためにも、まず制作会社で働くというスタートラインに立つために「最低限身につけるべきスキルは何なのか」次の章からご紹介します。
これだけは抑えたい必須スキル
1.開発環境
現在のweb制作では、生のHTML, CSSを書くことはほぼありません。ejsやpugと言ったmeta言語を使ってHTMLを記述したり、sassやstylusと言った言語を使ってスタイルの記述を行います。それらのmeta言語は、そのままではブラウザで動作しないため、HTMLやCSSにコンパイル（変換）した上でサーバーにアップロードします。
そう言ったコンパイルやローカルマシン（手元のPC）での表示確認など、効率的な開発を行うための開発環境を活用するのが当たり前なので、それらが扱えないとそもそもコードを書くことができません。
このように書くと開発環境に対してハードルを感じてしまう方が多そうですが、開発環境自体は全く難しいものではなく一度用意してしまえば何度も使いまわせるものだったりします。
以下のリンクなどを参考に一度試してみてください。完全に理解する必要はありません。とにかくやってみて動かしてみることが重要です。
ICS MEDIA「絶対つまずかないGulp 4入門(2022年版) インストールとSassを使うまでの手順」
2.git
制作会社では基本的にソースコードのバージョン管理ツールであるgitを使います。すでにgit知っている方の中で、複数人で作業をしない限りgitは必要ないと思っている方がいれば、それは間違いです。もちろん複数人で作業する際にはgitは必須ですが、web制作会社では一人で開発を行う場合でもgitを使ってソースコードを管理します。
gitはコマンドで操作する必要はありません。SourceTreeなどのGUIツールを使って構いませんので、以下のリンクなどを参考にgitも必ず使えるようにしてください。
サル先生のGit入門
3.スタイリング
ようやくここからコードを書くステップです。「HTMLの前にスタイリングを行うの？」と思う方もいらっしゃるかもしれませんが、実際のweb制作ではスタイルを当てる作業だけを切り離せることが多々あります。そのため先輩エンジニアが組んだHTMLに対して、後輩エンジニアがスタイルを当て見た目をデザイン通りにするということがよくあります。
大規模なサイトでない限り、スタイルによってサイトが壊れることはほとんどないため、フロントエンドエンジニアの業務の中でも、初学者がとっつきやすい作業ではないでしょうか。
最初にお伝えしたようにフロントエンドエンジニアはデザイナーのデザインを元に実装を行います。デザイナーが作ったどんなデザインでも、ブラウザ上でしっかりと再現できる力が求められます。レスポンシブ対応は特別なことがない限り基本的にどんなサイトでも必須です。
4.マークアップ
最後にマークアップです。マークアップスキルとしてはセマンティックと言われる、タグの意味を理解した上でマークアップするスキルが求められます。また近年ではアクセシビリティ対応が求められることも非常に増えました。
しかしセマンティックなマークアップもアクセシビリティ対応も、プロにとっても非常に奥が深い世界なので、どちらも完全に理解するというより、それらを意識してマークアップが行えることが大事だと思います。
MDN Web Docs 用語集: ウェブ関連用語の定義「Semantics (セマンティクス)」
Ameba Accessibility Guidelines
なくても困らないスキル
ここからは積極的に身につける必要がないと考えているスキルをご紹介します。
WordPress
よくTwitterではWordPressを勉強している方を見かけますが、特に比較的規模が大きい制作会社で働くのであれば、不要なスキルと言っていいと思います。セキュリティ対策等の運用コストを考えると導入しない方が良いという判断になることが多く最近はほとんど採用されていない印象です。
近年はHeadlessCMSの流行もあり、制作会社がWordPressを採用する機会はより減っていくのではないでしょうか。
ノーコード/ローコード
これらのスキルも今のところは必要なさそうです。現状ではまだ、ノーコード/ローコードでは実現できないものを提供するのが我々制作会社に求められる役割だと思います。
ノーコード/ローコードを導入したとしても、結果的にスクラッチ開発でしか対応できない要望を受けて脱ノーコード/ローコードした事例もいくつか聞いたことがあります。
その他あったら嬉しいスキル
JavaScript
JavaScriptが必須スキルでないことに驚かれる方も多いと思います。JavaScriptを「その他あったら嬉しいスキル」としているのは、初学者が身につけられる程度のスキルでは現場ではあまり有用ではないことが多いと考えるからです。
web制作といえども、実務では意外とJavaScriptを用いた複雑な処理が求められます。多少JavaScriptが書ける程度のスキルで手を出してしまうと、そもそも仕様を満たせなかったり、一見実装できているように見えてバグを生み出してしまうなど、余計な工数を発生させてしまうことが多々あります。
中途半端にJavaScriptに手を出すのであれば、セマンティックなマークアップを意識し、デザイン通りに忠実にスタイリングできる方が、制作会社の実務には入って行きやすいと思います。
さいごに
最初にも書いたように、ここで書いたことが全ての制作会社に当てはまる訳ではないと思います。
他のエンジニアの意見を聞いた上で、実際の現場では様々な制作会社で働こうとしている方や、制作会社の仕事を受けようとしている方が、最も効率よく学習できる方法を見つけてもらえればと思います。
フロントエンドクラブには多くの現役エンジニアが所属していますので、ぜひ参加していただき意見を聞いてみてはいかがでしょうか。
まとめ
- 制作会社ではwebサイトを作るエンジニアのことを「フロントエンドエンジニア」と呼ぶことが多い
- 制作会社で必須のスキルは、開発環境、git、スタイリング、マークアップの4つ
- WordPressやノーコード/ローコードのスキルはなくても困らない
- JavaScriptはあったら嬉しいが、中途半端に手を出すのであればなくてもOKなスキル
