RのWeb制作

Webサービス制作のための技術情報を。データ分析(Python、機械学習コンペ他)や自作野球ゲームMeisyoのこと中心。

ブログ Web制作 WordPress ブログの書き方

駆け出しエンジニアは本当にフロントエンドエンジニアを目指すべきなのか

投稿日:2020年1月24日 更新日:

最近、駆け出しエンジニアをTwitter上で数多く見るようになりました。
ただ、揃いも揃って「フロントエンドエンジニア」になりたい(意訳)とプロフィールに書いてあります。

なぜでしょうか。
それは何が問題なのでしょうか。

私が何を問題視しているかというと、フロントエンドエンジニアってそんなにコストパフォーマンス良くないぞ?ということです。
なぜなら、バックエンド等に比べて要求される技術の種類が多くなりがちであるからです。

そこで今回、給与や技術などの視点から、この原因を読み解いてみました。
※すべてのベースとなる情報科学の知識については全く触れていません。

目次

給与
技術
目指してしまう理由
解決策
あとがき

給与


indeedをはじめ、リクナビネクスト、マイナビ転職、Green等のサイトを確認すると、その他のエンジニアに比べ、給与が10~20%程度低めです。

・フロントエンドエンジニア

・バックエンドエンジニア

*フロントの20%増しくらいの給与水準でした。
* 同じ待遇にしている会社も確認できました。内部で違っているのかもしれません。

エンジニア職種には数多く存在し、組み込み系やパッケージ系、社内SEもあればインフラ、品質管理等々が存在します。
その中で高いわけでもなく、低めの水準でした。

技術


フロントエンドエンジニアで特に問題なのは、習得すべき技術の種類の多さです。

基本的な技術だけでも大きな差が付きます。

・フロントエンドエンジニア
HTML(表示基礎)
CSS(表示スタイル調整)
JavaScript(動的なページの作成)

・バックエンドエンジニア
PHP(システム基礎:Ruby、Java、JavaScript等も可能)
SQL(データベースとの接続:AWS、BigQuery、RedShift等も可能)

1種類しか違わないのでは?と思いがちですが…、

HTML、CSS、JavaScriptは全く構文が違います。
例示していきます。

HTML

<タグ>~</タグ>を基本とした構成です。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>タイトル</title>
...

CSS

HTMLで作成したタグやクラス、idごとに表示スタイルの調整を行います。
タグ名 { ~ }です。

/** General Style Info **/
body {
	background: #003d4c;
	color: #fff;
	font-family:'lucida grande',verdana,helvetica,arial,sans-serif;
	font-size:90%;
	margin: 0;
}
a {
	color: #003d4c;
	text-decoration: underline;
	font-weight: bold;
}
...

JavaScript

動的なページを作るために、訪問者の属性ごとなどで条件分岐をさせたり、文字や背景自体を動かしたりできます。
下記はJQueryという過去のライブラリの記法です。

jQuery(document).ready(function( $ ) {

  $('#myTab a').click(function (e) {
    e.preventDefault()
    $(this).tab('show')
  });

  $('.carousel').carousel();
  
  $('#accordion').collapse({toggle: false});
...

PHP

PHPなどは比較的書きやすい言語です。
基本的な書き方はその他の言語(Ruby、Java、Python等)も同じです。
下記はCakePHPというフレームワークの記法です。

    public function LoadCSV($file, array $ycol, array $xcol, $hasHeader=true)
    {
        $xarray = array();
        $yarray = array();
        $handle = fopen($file, "r");

        //if first row has headers.. ignore
        if ($hasHeader)
            $data = fgetcsv($handle);
        //get the data into array
        while (($data = fgetcsv($handle)) !== FALSE)
        {
            $rawData[] = array($data);
        }
        $sampleSize = count($rawData);

        $r = 0;
        while ($r < $sampleSize)
        {
            $xarray[] = $this->GetArray($rawData, $xcol, $r, true);
            $yarray[] = $this->GetArray($rawData, $ycol, $r);   //y always has 1 col!
            $r++;
        }
        $this->x = $xarray;
        $this->y = $yarray;
    }
...

SQL

SQLは最も安定した言語です。
プログラミング言語にしては珍しく、ほぼ改修が入らず学んだことがずっと活かせる言語です。

SELECT
  date,
  COUNT(user_id) AS count_uu
FROM
  action
GROUP BY
  1
ORDER BY
  1

このように、HTML、CSS、JavaScriptは全く構文が違います。
それだけで理解するのが大変だと思います。しかも、実務では構文だけではなく、情報科学のロジックもふんだんに使います。

その他に、より問題だと考えている事柄としては、HTML、CSS、JavaScriptはすべて、技術の移り変わりが激しいことです。

新しい記法や、非推奨とされる記法、さらには動かなくなる記法すら出てきます。
新しいライブラリ、フレームワークと盛りだくさん追加されていきます。

JavaScriptのフレームワークとPHPのフレームワークで種類の数が全く違います。

例:JavaScriptのフレームワーク
AngularJS
Hyperapp
jQuery
React.js
Riot.js
Vue.js

その他にNode.js、Nuxt.js等も・・・それだけ、フロントエンド側で求められていることが多いということですね。よく調べてみると、フロントエンドのフレームワークにも関わらず、バックエンドの知識を当たり前に要求するものがあります。

例:PHPのフレームワーク
Laravel
CakePHP
zend framework
Symfony
FuelPHP

JavaScriptは見る限り、Angular、jQuery、React、Vueは現役です。
PHPもフレームワーク数は同等くらいですが、CakePHPがメインでLaravelが増加してきており、メインで使われるフレームワークは決まっている状況です。

バックエンドエンジニアですと、SQLは安定しているため、学習し続けるべきなのはメイン言語+αで済みます。
フロントエンドエンジニアは、進化し続けるHTML、CSS、JavaScriptをはじめ各種フレームワークの学習が必須です。

ちなみに、フロントエンドエンジニアの宿命として、デザインや触り心地の言語化、直感等も必要になってきます。
サーバーサイドエンジニアはサーバーとの通信速度(アルゴリズムの適正さ)やバグの少なさ、コードを書く速度等で能力は定量化しやすいですが、フロントエンドエンジニアはコードだけではない能力が要求されます。

そこまで頑張って得るものは多くはありません。
確かに自分で0 → 1ができるのは大きな強みですが・・・。

私が言いたいのは、
なぜフロントエンドエンジニアを(メインで)やりたいのか?
その他のエンジニア職種では何がダメなのか?
ということを彼らが理解しているしているのだろうかということです。

現役のエンジニアやIT業界の人に聞けばいいのに、と。

目指してしまう理由

一番目:わかりやすさ

表示側を作るのは素人にもわかりやすいし、今風のカッコいいサイトが作れるようになりそうですよね。(実はそんなに簡単ではないですが・・・)
自慢できる職業だと思います。

二番目:情報発信の多さ

フロントエンドエンジニアは数の多さと認知度の高さから、職業に関する情報発信がされやすい傾向にあります。

組み込みエンジニアの情報発信を見たことありますか?

僕はあまりに見かけない印象です。
情報を必要としている人が少ないですし、目立つ職業ではないので内々の情報交換や技術書での学習が多いです。

QiitaやTeratailなどが人気なのも要因でしょう。
フロントエンド以外の技術は基本的に見ないか、原典(説明書)および論文が仕事への理解として一番早いです。

日本語のやってみた記事は数多くあるのですが、コードだけ(何を考えてこのコードを書いたか説明がない)だったり、理解せずに数式をなんとなく書いてある(使用上の注意点が書いていないことやミスリードしている)記事が散見されます。
* QiitaやTeratailは良いサイトです。使い方を間違えなければ。
* 記事が転職等の実績として利用されつつあることに起因するのかもしれません。

それらの発信を職業にしている人も存在します。
そうです。インフルエンサーです。

オンラインサロン
自社開発
フリーランス

どれもキラキラワードですね。
ただよく考えてほしいのは、元々エンジニアの人たちがなぜそうなっていないのか?ということです。
彼らには本当かどうかを現役のエンジニアやIT業界の人に聞けばいいのに、と思いますね。

知っている方が動画配信をしているので以下をどうぞ。私の認識とほぼ同じです。
エンジニアのキャリアハックを配信「IT人事の毛呂淳一朗」

三番目:日本の現状と転職市場の活性化

日本の平均年収は400万円台です。
ちなみに、平均値は上位の値に引っ張られやすいので実情とは異なります。

例)4人(300万、400万、500万、1000万円)の平均年収
 ⇒ 550万円!??
一人が異常に高ければ、すぐに上がります。
それだと実感と合いませんよね。

実感に近い値としては、中央値で約350万円です。それ以下の人が約50%も居るのですが…。

IT業界は東京に一極集中していることもあり、ジュニア(駆け出し)レベルでも350万~が基本です。

・・・あれ?中央値を超えてない?

超えています。そういうことです。

つまり、低い年収をどうにかしたい人たちの入り口になっています。
それで駆け出しの方が多くなっているのかなと考えました。
(私はこの流れ自体は問題とは思っておらず、正常だと思っています。新しい産業にもっと人が移動すればいいとも思っています。)

ちなみに東京近辺は家賃以外は全然物価は変わらないです。

家賃は東京23区>東京郊外>千葉・さいたま等です。
住所を東京から千葉にすれば、ほぼ条件が同じような場所かつ駅にも近いのにも関わらず3~4万家賃が安かったです。

物価の面でいうと、東京・千葉は地方(例:奈良(実家)、栃木(前職)、熊本(大学・大学院))はほぼ変わりません。
野菜や地域の名産品が安いかな、でもそんなに変わらないかなという状態です。

ただし、東京は外食だけは高い・・・。ランチだと1,000円オーバーが当たり前でちょっと面食いました。
家賃が高いので仕方がないのですが。

解決策


複数の現役のエンジニアやIT業界の人に聞く、つまり一人だけを信頼するなという二点さえ注意すればよいです。

よくあるのは、
・給料が良さそうなので
・まともな労働環境で働きたかった
・友人に勧められて

だから、フロントエンドエンジニア・・・というのは少し安直ではないでしょうか。

なぜフロントエンドエンジニアをやりたいのか?
その他のエンジニア職種では何がダメなのか?
という問いは必ず付きまといますし、転職した後にもついてきます。

あなたが納得した道を選んでほしい。
その思いでこの記事を書きました。

あとがき


著者も29歳で製薬企業研究開発職からIT系職種(データ分析コンサルタント:機械学習や統計を企業の事業・業務方針コンサルティングに活かす)に転職した当人として、今の流れは危険だなーと思い記事を書きました。

もちろん、働いている場所によって定義が少しずつ異なるので、「あれ、これは書いてあったことと違うぞ?」と思うかもしれません。
バックエンドの方は内容によって複数言語を扱うのが基本だったり、サーバー側で突発的かつ大規模なアクセス増加に対応するためのクラウドであるAWSまたはGCPなどの知識が必要だったりと…。
実際はもっと複雑な問題なのですが、理解の簡便化のために問題を切り分けてお伝えしています。

元々趣味でプログラミング・HP作成をやっていたこともあり、フロント(HTML、CSS、JavaScript(JQuery他))もバック(PHP、Python、Perl、C系、MySQL)もインフラ(Linux)もちょっとはできる程度でした。

そういった経歴もあり、フロントエンドエンジニアも少し考えていた時もありましたが、上記懸念(技術更新早すぎやろ)もあり、デザイン系のセンスもないしでやめておきました。
昔は「JavaScriptはクソ」という扱いが基本でした・・・私は使ってましたけど。・・・それくらい大きな変動が10年以内でありました。

あなたは何がしたいですか?

どんなことに興味がありますか?(または、どんなことが許せませんか?)

カッコいいことに引っ張られていませんか?

これは自戒を込めて書きました。
私は今流行りのデータサイエンティストと名乗れます。でも、それは間違っていると思います。
実際の仕事は機械学習、統計解析の手法「も」使いますが、ビジネスサイド寄りです。
職種名はビジネスアナリストが非常に近いです。
エンジニアの方とも、データサイエンティストの方とも、コンサルタントの方とも働いているので、少しは目端が効くようになってきました。

・お客様にいかに現状を認識していただくか
・どこに事業の問題点があるか
・どうすればユーザーの苦しみを解決でき、事業が伸びるか

この3点を一緒に考えて、並走しています。
以前取れなかった(らしい)契約継続もしていただきましたし、満足度も高いのかなと思います。
事業を良くしていくことが非常に面白いですし、誇りに思っています。(給与はまだ安いけどね)

そんな職業に一人でも多くの人が会えるよう祈っています。
ちなみにTwitter > R(あいれい/おいす)で相談していただければいつでも対応します。
プログラミングの基礎をはじめ、統計や機械学習の手法や就活等もなんでも相談してください。
ただ、一人だけを信頼するなは気にかけておいてください。

それでは!

おすすめ記事

この記事を読んだ方には、下記の記事が読まれています。

未経験がエンジニアを目指すことって、それって意味あんの?

-ブログ, Web制作, WordPress, ブログの書き方

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

関連記事

no image

[PHP]まとめ読みをPSRで改良する(2)

PHPのコーディング規則、PSRを学ぶをまとめました。 しかし、実際に作るとなるとまだまだです! やらなきゃ実際の所なんてわからんです。難しく見えてもね! 現行ページ(テストサーバー上) この記事の( …

Flask-Babelを使って、Pythonアプリで多言語対応を行う

Pythonで多言語対応してみたいなーと思っていました。 思っていましたが、実際になかなか使うタイミングがない・・・。 今回自作ゲームでユーザー数の増加がみられ、かつ海外からのアクセスも複数確認できた …

no image

[PHP]まとめ読みをPSRで改良する(3)

(2)の記事から「PDO」を使い、データの通信をオブジェクト化しました。 password_hashを使い、パスワード処理の暗号化も行いました。 PDOを導入する一番の理由は「mysql_query」 …

no image

現代PHPの正しい道「PHP: The Right Way」の紹介とその要約

時代遅れの本や情報があふれている。そのため「何年前のコレ?」というコードが広まっている。 私もまずいコードを書いていた。悪意がある頭のいい人が少し手を加えるだけでデータベースが死んでしまうようなコード …

no image

WP No Category Baseのインストールでリダイレクトエラーが出た時の解決法

パーマリンクの「category」を取ってくれるWP No Category Base。 インストールするとリダイレクトエラーが起こる場合があります。 その解決方法をお伝えします。 プラグイン「Red …