フロントエンドエンジニアの仕事内容を業界歴11年の方に聞いてみました
Web業界で現役バリバリで働く人がどんな仕事をしているのか気になりませんか？
今回は
- フロントエンドエンジニア
という仕事について
仕事内容、求められるスキル、やりがい、年収相場、将来性、キャリアパス、就転職方法
を業界歴11年のベテランエンジニアの方から話しを聞いてみましたので「フロントエンドエンジニア」に興味がある方は参考にしてみてください♪
フロントエンドエンジニアの仕事内容
こんにちは！たそです。冒頭でお伝えした通り私はWeb業界に足を踏み入れてから11年となります。色々と経験を積んできましたので自分の経験がこの業界・仕事に興味ある方の参考になれば幸いです、
フロントエンドエンジニアの仕事内容は、Webサービスの見えている表層画面をプログラミングするお仕事です。
まず、Webサービスの開発というのは、工程がこの様になっています。
- 要件定義
- 設計（ワイヤーフレーム制作、サイトマップ制作など）
- デザイン
- コーディング実装、API実装、DB設計＆実装、インフラ設計＆実装
- テスト設計＆実装
- 検証
- 公開作業
- 効果分析
4はバックエンドエンジニアやインフラエンジニアの仕事内容も入っておりますが、ほぼ同時進行で動く事が多い為、この様に記載しました。
フロントエンドエンジニアは上記４番目、５番目の部分である
- 「コーディング実装、テスト設計＆実装」
この辺りが主軸となる業務内容となります。
具体的な作業の流れは以下の通りです。
1.画像書き出し
まず、デザイナーが作成したデザインからインターネットブラウザで表示させる為の「画像書き出し」という作業をします。
2.HTML記述
次に、HTMLという言語を使い、デザインをインターネットブラウザで表示できる状態にプログラミングします。この作業の意味は、ただ表示させればよいだけではなく、新聞や雑誌の様に、どこが見出しでどこが注釈でどこが画像でという様にマークアップ記法（HTMLを書いていく作業）を用いて設定をしていきます。
3.CSSでデザイニング
その次に、CSSという言語を使い、装飾するプログラミングをします。これは、HTMLだけですとただテキストや画像がむき出し状態でデザインがされていない状態になりますので、色や大きさや背景画像など細かなグラフィック要素を充てていくというのが主だった作業となります。
4.JavaScript(Typescript)でWebサイトに動きをつける
JavaScript(Typescript)で動的に変化する部分をプログラミングし、JavaScriptプログラムが想定通りに動いているか確認する為にテストを設計し実装します。
マークアップエンジニアとフロントエンドエンジニアの違いについて
マークアップエンジニアという職もあります。デザインをインターネットブラウザに表示させる仕事という意味ではフロントエンドエンジニアと同じです。では何が違うのか、ご存知でしょうか？
マークアップエンジニアは、前述のフロントエンドエンジニアの仕事内容でいうHTMLとCSSの実装部分が主な仕事となります。それ以外はフロントエンドエンジニアの仕事となります。つまりJavaScript(Typescript)で動的に変化する部分をプログラミングする仕事が追加されたのがフロントエンドエンジニアということです。
マークアップエンジニアからフロントエンドエンジニアへ転向される方も多く居ます。私もその1人です。最初はHTML、CSSでWebサイトを作れるレベルから現場でスキルを新しく積み上げていきました。
フロントエンドエンジニアに求められるスキル
フロントエンドエンジニアに求められるスキルは、HTML、CSSでコーディングができる他に
- JavaScriptは必須
- JavaScriptフレームワークを実践で触れた経験は欲しい
という所でしょう。
JavaScriptフレームワークは、
- Vue・React・Angularが三大フレームワーク
と言われております。このどれか1つでも3年以上経験していると有利になるかと思います。
そして、TypescriptというJavaScriptを拡張して作られたプログラミング言語も今はプラスαとして求められていますが、今後は必須となってくるのではないでしょうか。
よりプラスとなるスキルとしてユニットテストが書けるというのは評価に繋がります。
JavaScriptのユニットテストライブラリーであればJestがおすすめです。私も好んで使っておりますが、どこの開発現場でもJestが書けると評価される傾向です。
フロントエンドエンジニアが扱う言語はJavaScriptなのですが、進化が激しい言語です。また、JavaScriptフレームワーク（Vue・React・Angular）は半年程で大きくバージョンアップされる事もあります。変化が激しいので常に出来る事が変わっていきます。
常に技術の進化を追っている事が、求められるスキルでもあるのですが、情報を追っていると世の中の様々な情勢に目を通すことがあります。
JavaScriptフレームワーク（Vue・React・Angular）の開発は海外国籍のエンジニアが主流であったりしますので、より最新の情報を得るには英語の習得も視野に入ってきます。
参考までに私が身につけてきたスキルは以下の通りです。
- 使用言語：JavaScript, Typescript, HTML, CSS
- フレームワーク：Vue.js, Angular,React, Backbone.js
- 単体テスト用ライブラリー：Jest, Jasmine
- UIテスト用ライブラリー：protractor, nightwatch.js
- 自動タスクランナー：webpack, gulp, grant
等。
現在使っている言語がTypescript、フレームワークはVue/Nuxt、単体テストはJestというシステム設計を選んでいます。
・TypescriptとはJavaScriptが進化したような特徴を持つイメージのプログラミング言語のこと、2016年くらいから現場で使われるようになってきた
・単体テスト用とは組んだプログラムが正しく動くか個別に確認すること
・ライブラリとは便利なプログラムの部品をいっぱい集めて、ひとまとめにしたファイルのこと
・フレームワークとはシステム開発を楽に行えるように用意されたプログラムとかのひな形のようなもの
・タスクランナーとはフロントエンド制作業務の中で出てくる単純作業を自動化してくれるツールのこと
フロントエンドエンジニアのやりがい
このお仕事をしていて、やりがいは多方面に存在しています。
私の場合は、UX設計に携わる事もありますので、ユーザーさんの満足度を自分が設計し実装した画面から分析できた時です。
印象深く残っている経験としては
- 子供服のECサイトでの経験
でした。Webサイトのリニューアルを行った際に、デザイナーが作成したワイヤーフレームに対してレビューを行いました。子供服を購入する主婦の立場にたってサイトをどうやって利用するかを考え提案したんです。
結果、
- 使いやすいレイアウトにすることが出来クライアントから感謝された
- 実装のしやすさを意識したこともあり開発スピードが上がった
という成功体験を積むことができました。お客さんからも感謝され自分もやりやすい環境を作れたというのは自信になりました。
他には、デザイナーが実現したいけれども技術的に諦めていた様な動きを実装できた時などは、クリエイターとして貢献できたと思う事が出来ます。近年、アニメーションを凝らしたデザインが出てきていますので、そういった動きをデザイナーは常に考えています。どうやったらこんな動きが実現できるのだろう、いろいろ調べ学習し実装する。出来上がった時の達成感は大きいです。
フロントエンドエンジニアの年収相場
フロントエンドエンジニアの年収相場についてですが、正社員の場合は、400万円～700万円位かと思います。熟練度によって上がっていきますので、一概には言えませんが、3~4年の経験がある方でしたら500万円前後の金額になるかと思われます。
大企業だからと言って際立って高い訳ではなく、必要とされる企業に入る事が高単価で就職できるポイントです。
フリーランスになった場合は、雇われの場合と比較すると月額で10~20万円程上がる傾向です。現場で数年間実務を積んだ場合の傾向ですのでご注意を。
ですが、今後は働き方も自由になってくる傾向かと思われますので、経験1~2年でも自分の努力次第では現場で数年間働いた人より稼げる可能性はあるかもしれませんね。
フロントエンドエンジニアの将来性
フロントエンドエンジニアの将来性についてですが、今後Webサービスを開発する企業というのは増加していくと思いますので必要とされる職種かと思います。
Webにとってかわる技術が生まれない限りは、JavaScriptを組むというお仕事（＝フロントエンドエンジニア）の形は変わっても0になる事はないと思っています。
またAI等の技術を持った企業とWebを繋ぐ技術が今後は注目されていきますので、組み込み系のエンジニアや機械学習エンジニア等とコラボレーションをして活躍していくステージは十分にあると感じています。
ただ3年先でもどんな技術が流行っているかは分かりません。
都度時代に合わせてスキルを磨いていく事がフロントエンドエンジニアとしての未来を安定させてくれると考えます。
フロントエンドエンジニアのキャリアパス
フロントエンドエンジニアのキャリアパスについては、近い職種ですと
- UXデザイナー
- UIデザイナー
- バックエンドエンジニア
等が考えられます。
デザインも出来るフロントエンドエンジニアや、バックエンドも出来るフロントエンドエンジニアというスキル構成ですと活躍できる領域は広がりますので転職時に報酬や地位もあがりやすいです。
デザインができるというのはPhotoshop,Illustraotorなどを使い実際デザインを制作できる人を言います。今はfigmaというデザインツールが人気ですね。私も使っています。
実際JavaScriptを組めるUX、UIデザイナーは存在し高い評価を得ています。
エンジニアとして現場でキャリアを長年積むと、独立をする方もいます。フロントエンドエンジニアの仕事だけでも独立は可能ですが、何か他にもプラスアルファで秀でるスキルがあると安心ではあるでしょう。
フロントエンドエンジニアの就職転職方法
全く未経験の方がフロントエンドエンジニアとしてチャレンジするのであれば最初はマークアップエンジニアで就職転職されるという手もありではないでしょうか。そこでJavaScriptを独学で学んでいったり、フロントエンドエンジニアの先輩などもいるでしょうから学べる機会はあると思います。入口はマークアップエンジニアで現場ですこしづつ学び、家でも勉強しつつキャリアアップしていけると良いのかなと思います。
もちろん最初からフロントエンドエンジニアとして会社選びをしてもいいと思います。
どちらにしても実績となる成果物が就職転職活動で必要になるのでHTML、CSS、JavaScriptでのWebサイト制作をされることをオススメします。
近年、フロントエンドエンジニアへの転職の方法は4パターンあります。
１．エージェント経由
２．ダイレクトリクルーティング
３．リファラル採用
４．SNS・ブログ
基本的には昔ながらのエージェントに紹介してもらうという方法がまだまだ主流かもしれません。
私の場合になりますが、大半はエージェント経由で転職をしていましたが、直近の職場については、求人情報ウェブサイト（Wantedly）で企業の採用担当者と直接やり取りをし転職致しました。ダイレクトリクルーティングと呼ばれるものです。
私は経験したことはないですが、リファラル採用と呼ばれる友達や知り合いからの紹介で転職することもありますし、個人のSNSやブログで技術系の情報をアウトプットしてスカウトが来る事もあります。Twitter転職という言葉もあるくらいです。
様々な方法でフロントエンドエンジニアへの道は用意されていますので、興味のある方は成果物を作って挑戦してみてもよいのではないでしょうか。
フロントエンドエンジニアはデザイナーの思いを表現するエンジニア
ユズトです。フロントエンドエンジニアはデザイナーが考えるUX体験やユーザビリティを表現するエンジニアということが理解できました。
コーダーはHTML、CSSができる職種、フロントエンドエンジニアはそれに追加でJavaScriptができる職、ということなのかな、と思っていました。
しかしながら、フロントエンドエンジニアはデザイナーの真の意図を理解してそれを表現できると成果物のクオリティが上がっていくんですね。10年選手の伝えたい内容はご理解いただけましたでしょうか？
テックアカデミー「フロントエンドコース」受講後副業につなげる方法【コース選びで迷った時に】
この記事はここまでです。