「WEB業界で働きたい!」と思って調べてみると色んな職種が出てくると思います。

仕事の内容は大体同じなのに職種名が違っている。コーダーもフロントエンドエンジニアもHTMLとCSSを書くのに何が違うの?
そんな疑問を持ったことが一度はあるんじゃないでしょうか。

ここでは皆さんが特に気になる、コーダーとフロントエンドエンジニアの違いやエンジニアとしてどのようにキャリアアップをしていけばいいのかというのをお話ししていきます。

WEB業界のエンジニア

WEB業界で働くエンジニアをWEBエンジニアまたはWEBデベロッパーというような呼び方をします。
そこからさらにWEBエンジニアを細かく分けていくと、コーダーフロントエンドエンジニアバックエンドエンジニアというように分けることができます。

それぞれの大まかな違いとしては、コーダーとフロントエンドエンジニアはユーザーの目に見える部分の実装者、バックエンドエンジニアはユーザーの目に見えない部分の実装者となります。また、フロントエンドもバックエンドもこなす人をフルスタックエンジニアと呼んだりもします。

フロントエンドとバックエンドの違いが大まかに理解できたところで、本題のコーダーとフロントエンドエンジニアの違いを見ていきましょう。

コーダーの仕事

コーダーはデザイナーが作ったデザイン(Photoshopなどを使って作ったデザインカンプなど)をWEBブラウザ上で表現するために、HTMLとCSSを使って表層を作っていく仕事をする人です。

コーダーがHTMLやCSSでコードを書くことをコーディングといい、主に静的な表現をメインにするので、コーディングに関する技術と知識はもちろん、デザイナーから渡されたカンプなどをもとに画像やアイコンを切り出すといった作業も行います。そのため、フォトショップやイラストレーターを操作するスキルも必要になります。

指示通り正確にコーディングを行うことに加えて、後々の更新保守作業のことも考えて、わかりやすいコードを書く技術が求められてきます。

コーダーになるには

コーダーになるにはまず、HTMLとCSSの知識と技術は最低限必要になってきます。
このHTMLタグにはどういう意味があってどんな場面で使うのか、こんな表現をしたい場合はどのCSSプロパティを使用するのか、などは最低でも知っておく必要があります。

おすすめの学習方法は、最初は小さなパーツブロック単位からコーディングしていき、次はセクションページ単位、最後はサイト丸ごとと、少しづつステップアップしながらだと仕組みやベストな組み方などを理解しやすいです。

ビギナーの人はこれを逆に実践してしまって途中で挫折してしまう人が多いのですが、少しづつ理解していって一冊の技術書を繰り返し学習していくことが大事です。

ここで注意して欲しいのが、決して量を重視しないということです。
よく、「参考書を何十冊読んだ!」と自慢する人が私の周りにもいますが、量を重視して参考書を読んだとしても実力がついてるかどうかは微妙なところです。一冊の本を理解できるまで繰り返し書いて覚えるのが初級者におすすめの学習方法です。

フロントエンドエンジニアの仕事

続いてフロントエンドエンジニアについてお話していきます。

フロントエンドとはユーザーが見ている部分、画面に表示されている部分を指し、この部分に関わる技術者をフロントエンドエンジニアと呼びます。大体の会社では、コーダーの上位職に位置されていたりします。

フロントエンドエンジニアの仕事内容は、コーダーと同じくHTMLとCSSを実装するのは一緒ですが、それに加えてJavaScriptを使ってユーザーの目を引きつけるインタラクティブな実装をしたり、バックエンドとの連携や、CMSを導入してお客さんが運用する環境を整えたりもします。

また、最近ではgulpwebpackなどのビルドツールなどを使って開発環境などのインフラ面を整える仕事も増えてきています。

実装するだけでなく、フロントエンドに関わる全ての部分が業務フィールドになるので相当幅広い知識が必要になります。
そしてフロントエンドの世界は技術の進歩が速いので、色んなアンテナを張って技術を追い求める意識や姿勢が必要になってきます。モダンな技術を使って効率化を求めつつ、ユーザーの目を楽しませるような表現を実装するのがフロントエンドエンジニアの醍醐味とも言えます。

フロントエンドエンジニアになるには

フロントエンドエンジニアになるには、コーディングスキル(HTMLとCSS)に加えてインタラクテブな表現をするためのJavaScriptプログラミングの知識と技術が必要になります。

HTMLやCSSによる静的な表現ができるようになっていったら、少しずつ動的な表現にもチャレンジしていくようにしましょう。その過程でプログラミングの本質を学んで、APIの仕組みや活用法などを学んでいく経験が必要です。

また、HTMLに関してもデータの受け渡しなどバックエンドとの連携も意識した作りや、CSSに関しては複雑なアニメーション表現だったりと、より高いレベルのスキルが求められます。

本当にフロントエンドの領域は広すぎる・・・!とフロントエンド界隈のエンジニアは毎日嘆いています。

効率的なキャリアアップのコツ

あくまで私の経験談から話せる、効率的なキャリアアップのコツです。
こちらの記事でもお話ししましたが、コーダーとフロントエンドエンジニアの年収の差はかなり大きいです。


未経験・30代で年収相場はいくら?

私が以前在籍していた会社ではコーダーとフロントエンドエンジニアの年収は、200万ぐらいの差がありました。もちろんそれぐらい知識やスキルの差もあります。
そして、この差が示すように未経験からいきなりフロントエンドエンジニアに転職するのは現実的にいって難しいでしょう。

というのも、マークアップやJSのスキル以外にもバックエンドやインフラ周りの知識、最近だとReactやVueといったフレームワークの知識も必須になってきているので、全くの未経験者からすると覚えなくてはならないことが多すぎます。

また、この記事の対象読者を20代後半〜30代の方としてお話しすると、大体の方が家庭があったり何かしら時間に追われる要因があると思います。
そんな中で、上で話したようなスキルを習得していくのと同時にプライベートのことも考えると、やはり現実的にハードになってしまいます。現にそうなってしまい会社を去る方もたくさん見てきました。

そのため、まずは無理をせずにコーダーとして少しづつキャリアを積んでいって、徐々にフロントエンドエンジニアにキャリアアップするのをおすすめします。

また、雇用形態をそこまで考えなくても良いという方は、アルバイトからのスタートも視野に入れてみると良いかもしれません。

ただでさえ覚えなくてはいけないことがたくさんあるエンジニア職なのに、正社員だと何かと面倒な雑務もこなしていかなくてはいけません。
アルバイトの場合そういった事務系の雑務はほとんどありませんし、実力さえあればアルバイトでも色んな案件を任せてもらえることもできます。

事実、私もアルバイトからスタートして、コーダーを経てフロントエンドエンジニアになりました。そういった実体験から踏まえるとアルバイトからのスタートも悪くないと思うのでぜひ検討してみてください。

最後に、これも実体験からの話ですが、副業としてWEB制作の案件をすると実力が付きやすいです。

入社したての頃は更新業務ばかりで新規案件を回してもらうことが少ないため、WEB制作全体の知識や経験が得られにくいです。もちろん、個人で受けるので制作物の責任は全て自分になりますが、またそれも実力が付きます。また、少ないながらも年収の足しにもなります。
実際のところ、知人では本業の収入にほとんど手をつけないぐらい副業の収入がある人もいます。

収入の足しにもなるしエンジニアのスキルアップにもつながるので、ランサーズなどの案件を仕事終わりや休日に対応するのも良いかもしれません。