Web業界（フロントエンド〜サーバサイド）の記事には次々と新しい技術キーワードが登場します。「○○はオワコン」「これからは○○！」などいろいろ書かれています。現時点のWeb業界ではどんな技術が求められているのでしょうか。前回までと同様、indeedの件数を調べてグラフにしてみました。キャリアパスシリーズは今回で一区切りです。それでは、どうぞ！
【目次】
※参考：【indeed】職種別スキル集計：Webデザイナー、Webディレクター、UI/UXデザイナー、フロントエンドエンジニア、サーバサイドエンジニア（2019年3月） - クモのようにコツコツと
古い技術、新しい技術
古い技術と新しい技術を観測していて気づくこと。
- 古い技術の不便さから新しい技術が生まれる
- 古い技術の中にもアップデートし続けているものと開発が止まっているものがある
- 新しい技術でも定着する前に消えてしまうものもある
- 古い技術には安定感、信頼感、定番感を獲得しているものもある
といった感じで一概に古い新しいだけでは判断がしづらいです。現時点で実際の制作現場が必要としている技術を求人情報から把握します。
調査方法
下記の方法で調査しました。
- 各ジャンルのキーワードは私がピックアップしたもの
- indeedで検索（2019/03/31〜2019/4/2）
- ブラウザのプライベートモードで検索
- 「技術キーワード」「東京」で検索
プライベートモードにしたのは個人向けに結果がカスタマイズされないため。東京にしたのは件数が一番多い地域と予想されるためです。おそらく他の地域もそう変わらない内容になると思われます。
前回の記事と同じ調査方法です。
※参考：【indeed】職種別スキル集計：Webデザイナー、Webディレクター、UI/UXデザイナー、フロントエンドエンジニア、サーバサイドエンジニア（2019年3月） - クモのようにコツコツと
調査したジャンルはこちら
- Web業界全体
- デザインアプリ
- テキストエディタ
- Webマーケ
- 言語
- フロントエンド
- テンプレートエンジン
- CSSフレームワーク
- AltCSS
- SPA
- AltJS
- リッチコンテンツ
- ゲームライブラリ
- モバイル対策
- ハイブリッドアプリ
- サーバサイド
- サーバサイドFW
- CMS
- EC
- DB接続
- webサーバ
- Git
- クラウド
- 仮想環境
- ネイティブアプリ
- ゲームエンジン
それではいきましょう！
Web業界全体
まずはWeb業界全体に共通する技術からみていきましょう。
Webデザイナーはビジネス、デザイン、マーケティングがクロスした職種なので、どれにも関わる可能性があると思います。
※参考：Webデザイナーに必要なスキルと代表的な7つのキャリアパス - クモのようにコツコツと
デザインアプリ
最初にデザイン画面をつくるアプリから。
「photoshop」「illustrator」はやはり多いです。Web業界以外にも使われているからでしょうね。件数は拮抗しています。
3位の「sketch」はWebだけでなくアプリデザインなどにも使われていますがケタは変わりますね。「XD」はsketchのさらに半分以下に。
「invision」はsketchと組み合わせて使われるプロトタイプツール。「zeplin」は開発現場にデザイン仕様を共有するツールです。私が愛してやまない「Figma」は件数としては少ないです。。
| デザインアプリ | 求人件数 |
|---|---|
| photoshop | 10,187 |
| illustrator | 9,974 |
| sketch | 868 |
| XD | 325 |
| invision | 203 |
| zeplin | 126 |
| Figma | 51 |
テキストエディタ
次に、コーディングをするテキストエディタを見ていきましょう。
Adobeの「DreamWeaver」が桁違いですね。Adobe CCを導入している企業が多いからですかね。
「Vim」「Atom」「Emacs」は拮抗していて「Sublime Text」「Visual Studio Code」はさらに落ちます。
Visual Studio CodeはMicrosoftが開発するWindows用のエディタで、ネット上ではとても評判が高いです。
| テキストエディタ | 求人件数 |
|---|---|
| DreamWeaver | 1,210 |
| Vim | 137 |
| Atom | 106 |
| Emacs | 101 |
| Sublime Text | 35 |
| Visual Studio Code | 30 |
Webマーケ
WebマーケといえばGoogle！というイメージがあるので、Googleの主要なWebマーケのサービスを調べてみました。
「Google Analytics」が突出！GAはアクセス解析などほぼなんでも出来ちゃうのでWebマーケでは必須スキルですね。
「Google AdWords」はサイトの広告を外に表示するためのツール。「Google Search Console」はSEOキーワードの分析。「Google Adsense」はサイト内に外部の広告を表示するためのツール。
| Webマーケ | 求人件数 |
|---|---|
| Google Analytics | 1,308 |
| Google AdWords | 168 |
| Google Search Console | 41 |
| Google Adsense | 35 |
言語
次は言語を見ていきましょう。Web業界（フロントエンド、サーバサイド）に関係深い言語です。
1位は「html」！やはり何は無くともこれはできないとという感じでしょうか。2位の「php」はサーバサイド。3位の「JavaScript」はフロントエンド。表記のゆれがあり最後の「js」と足すと実はphpとほぼ同じです。
続く「python」「ruby」はサーバサイドで拮抗してます。pythonは機械学習で人気が上がっています。フロントの3番目「css」は意外と少なかったですね。あとCGIでかつてメジャーだった「perl」は今も件数としては多いです。
| プログラミング言語 | 求人件数 |
|---|---|
| html | 17,610 |
| php | 15,625 |
| javascript | 11,279 |
| python | 10,462 |
| ruby | 9,290 |
| css | 7,806 |
| perl | 5,268 |
| js | 3,519 |
フロントエンド
ここからフロントエンドの技術を見ていきます。
テンプレートエンジン
テンプレートエンジンはHTMLを少ない技術で書いてあとでコンバートする技術です。
※参考：【Emmet, Haml, Markdown, Slim, Pug】HTMLテンプレートエンジン事始め - クモのようにコツコツと
「slim」が一番でした。「Haml」と「pug」は拮抗しています。なお、「Emmet」と「Markdown」はテンプレートエンジンではないですが、関連する用語として加えました。
Emmetはエディタ上で変換されます。MarkdownはブログやCMSに書いたもののページ生成時に変換されます。
| テンプレートエンジン | 求人件数 |
|---|---|
| Slim | 152 |
| Haml | 42 |
| Pug | 37 |
| Emmet | 32 |
| Markdown | 13 |
CSSフレームワーク
CSSフレームワークは、予め用意されたUIパーツやレイアウト設定で素早くページを作ることができます。（私はあまり使わないんですよね…）
「Bootstrap」が突出してますねー。予想通りではありました。「Foundation」も老舗のCSSフレームワークですがちょっと関係ない内容も含まれたようなので「css」を加えました。
| CSSフレームワーク | 求人件数 |
|---|---|
| Bootstrap | 201 |
| UIkit | 31 |
| Foundation css | 20 |
| Bulma | 8 |
AltCSS
AltCSSはテンプレートエンジン同様に少ない記述でかけてあとからコンバートします。
※参考：【LESS, SCSS, Sass, Stylus, PostCSS】 AltCSS 事始め - クモのようにコツコツと
「Sass」が「LESS」を倍くらい離しています。なお「SCSS」はSassの後継技術であり、求人情報のSassはSCSSを意味している場合もあります。そう考えるとますます差が出ますね！
「Stylus」と「PostCSS」は件数としては少ないようでした。
| AltCSS | 求人件数 |
|---|---|
| Sass | 696 |
| LESS | 385 |
| SCSS | 228 |
| Stylus | 47 |
| PostCSS | 43 |
SPA
SPA（シングルページアプリケーション）はAjaxの非同期通信などによってページ遷移せずにページの内容が変わります。
フロントエンドの本丸の分野と言っていいでしょう。
※参考：三大フレームワークとかSPAとか仮想DOMとかわかりにくかったのでHellow Vue.jsしてみた！ - クモのようにコツコツと
「jQuery」はまだ強いです。まあjQueryは用途が幅広いのですが。ただ「React」もかなり迫る勢いなことがわかります。「Vue.js」も続きますね。
「Angular」はやれることが多いフレームワークでReact、Vueと三大フレームワークと言われています。「Backbone」はかつてはメジャーでしたが件数は下がってきました。「Riot.js」は評判がいいのですが件数としてはまだ少ないようです。
| SPA | 求人件数 |
|---|---|
| jQuery | 2,106 |
| React | 1,616 |
| Vue.js | 960 |
| Angular | 705 |
| Backbone | 185 |
| Riot.js | 39 |
AltJS
AltJSはテンプレートエンジン、AltCSSと同じく少ない記述でかけてあとからコンバートします。
※参考：【CoffeeScript, LiveScript, TypeScript, Babel】AltJS 事始め - クモのようにコツコツと
「TypeScript」が突出！JSに静的型付けができるのが人気です。「Babel」「CoffeeScript」と続きます。CoffeeScriptはかつてはメジャーでした。「LiveScript」は0件でした…。
| AltJS | 求人件数 |
|---|---|
| TypeScript | 629 |
| Babel | 116 |
| CoffeeScript | 87 |
| LiveScript | 0 |
リッチコンテンツ
3Dアニメ、2Dアニメ、グラフ、音楽など個人的には力を入れていきたい分野。ユーザーの操作に反応するインタラクティブコンテンツが動画との違いになります。
SVGのグラフ描画の「D3.js」が1位ですが…少な！「Three.js」はcanvas要素の3D。「Chart.js」はcanvas要素のグラフ描画。あとは0件でした（泣）
「Pixy.js」は2Dアニメ。「p5.js」はprocessingのJS版。「Babylon.js」はThree.jsのライバルの3D。Tone.jsはWeb Audio APIの音楽。
スマホ時代でリッチコンテンツの需要が減ってる気がします。5Gなど通信環境の発展でまた盛り上がるといあなぁ…
| リッチコンテンツ | 求人件数 |
|---|---|
| D3.js | 43 |
| Three.js | 24 |
| Chart.js | 5 |
| Pixi.js | 0 |
| p5.js | 0 |
| Babylon.js | 0 |
| Tone.js | 0 |
ゲームライブラリ
ブラウザでゲームが作れるライブラリたち。
またしても件数が少ないです。。「Cocos2d」は後述するゲームエンジンの「Cocos2d-x」のJS版。「enchant.js」はゲームライブラリでは一番有名と思う。あとは0件でした（泣）中でも「Create.js」はFlashの開発者が作ったライブラリなんですよねー。
インストールが不要のHTML5ゲームは今後、需要が増えていくと思ってます。
| ゲームライブラリ | 求人件数 |
|---|---|
| Cocos2d | 23 |
| enchant.js | 16 |
| phina.js | 0 |
| Create.js | 0 |
| Kiwi.js | 0 |
モバイル対策
モバイルでクルクル待ち時間があるとユーザーは途端に離脱してしまいます！モバイル高速化の技術。
「レスポンシブ」（レスポンシブウェブデザイン）はやはり1位。基本ですね。ちなみに下にある「RWD」も同義です。この言い方はあまりされないようです。
「AMP」はレスポンシブに迫る勢いでした。「PWA」は少し落ちます。PWAとAMPを融合した「PWAMP」は0件でした。
| モバイル対策 | 求人件数 |
|---|---|
| レスポンシブ | 265 |
| AMP | 211 |
| PWA | 72 |
| RWD | 25 |
| PWAMP | 0 |
ハイブリッドアプリ
ハイブリッドアプリはフロント言語（HTML、 CSS、JS）で表示部分（Webビュー）を作る技術です。
一位は「cordova」。ただ、件数自体は100を切ってますねぇ。なお、「PhoneGap」はハイブリッドの老舗でのちにそこからcordovaが生まれます。ほぼ同義です。
「Electron」はGitHubが開発。Node.js + Chromiumベースでデスクトップアプリなどが作れます。「Monaca」は日本で開発されていてCordovaベースです。「ionic」もCordovaベース。「Titanium」は老舗ですが最近は件数が少ないようです。
| ハイブリッドアプリ | 求人件数 |
|---|---|
| cordova | 78 |
| Electron | 41 |
| Monaca | 30 |
| PhoneGap | 22 |
| ionic | 19 |
| Titanium | 4 |
サーバサイド
ここからはサーバサイド技術を見ていきましょう。サーバ通信で動的にページ内容を変えるWebアプリを作る技術です。
サーバサイドFW
サーバサイドFW（フレームワーク、長いので略した）。あらかじめ用意された関数でゼロから書くより早くWebアプリを開発できます。
「Ruby on Rails」は突出してますね！文字通りRubyのフレームワークです。
「Laravel」と「CakePHP」はphpのフレームワークです。CakePHPがメジャーでしたがLaravelは人気が上がってきて並びました。
「Django」はpythonのフレームワークです。少し落ちます。「Symfony」はphpのフレームワークですがこちらも落ちてきています。
| サーバサイドFW | 求人件数 |
|---|---|
| Ruby on Rails | 1,931 |
| Laravel | 692 |
| CakePHP | 649 |
| Django | 310 |
| Symfony | 209 |
CMS
CMS（コンテンツマネジメントシステム）。ページを動的に作り、記事更新はブログの様に管理画面で行えます。
「WordPress」はやはり突出。「Movable Type」もかつてはメジャーだったのですが。「Drupal」はさらに落ちます。
| CMS | 求人件数 |
|---|---|
| WordPress | 1,560 |
| Movable Type | 120 |
| Drupal | 30 |
EC
ECサイトはカートシステムでユーザーが買い物をできるサイトです。
国産の「EC-CUBE」が突出！海外では「Magento」がメジャーなようですが。
WordPressのカートプラグインも加えてみました。「WooCommerce」は海外、「Welcart」は国産ですがプラグインなのでワードが細かすぎたか件数は少なあです。
| EC | 求人件数 |
|---|---|
| EC-CUBE | 146 |
| Magento | 42 |
| WooCommerce | 4 |
| Welcart | 0 |
DB接続
DB（データベース）接続ツールを見ていきます。
1位は「Oracle」ですが2位の「MySQL」も拮抗しています。WordPressやってるとMySQLが馴染み深いですね。
続く「PostgreSQL」「SQL Server」も一定数ありますが「SQLite」は少ないようです。
| DB接続 | 求人件数 |
|---|---|
| Oracle | 7,485 |
| MySQL | 6,738 |
| PostgreSQL | 2,697 |
| SQL Server | 1,929 |
| SQLite | 129 |
webサーバ
Webサーバを見ていきましょう。
1位はやはり「Apache 」。LAMP環境、MAMP、XAMPPなどでおなじみの。サーバで動くJS「Node.js」はその半分くらい。「Nginx」はNodeに近いですね。
| webサーバ | 求人件数 |
|---|---|
| Apache | 2,413 |
| Node.js | 1,254 |
| Nginx | 959 |
Git
バージョン管理システムGitのツール。
1位はやはり「GitHub」でした。競合の「GitLab」「BitBucket」より突出しています。
| Git | 求人件数 |
|---|---|
| GitHub | 2,947 |
| GitLab | 438 |
| BitBucket | 302 |
クラウド
サーバやDBの様々な機能があらかじめ用意されてきれクラウド環境。
1位はやはり「AWS」！。2位の「Azure」はMicrosoftが開発。AWSの1/3程度。「GCP」はGoogleが開発。Azureと近いです。
「firebase」「heroku」はサーバサイドの知識が少なくてもWebアプリを作りやすいクラウドで注目されていますが求人件数は落ちるようです。
| クラウド | 求人件数 |
|---|---|
| AWS | 8,458 |
| Azure | 2,392 |
| GCP | 2,156 |
| firebase | 219 |
| heroku | 193 |
仮想環境
PCのローカル領域に本番環境と同じ仮想環境を作って開発する技術です。仮想OSとコンテナ型に分かれます。
仮想OSの「VMware」が1位ですね。コンテナ型の筆頭「Docker」の記事をよく見るので意外でした。
「LAMP」はLinux、Apache、MySQL、PHP（Python、Perl）の略で仮想環境の総称。ツールを使わないで一つずつインストールすることも意味します。
「Vagrant」はDockerと同じコンテナ型ですがかなり差があります。「VirtualBox」は仮想OSで個人的には愛用してきたので意外に少ないんだな、という印象。
「Xampp」「MAMP」はGUIで簡単にローカルサーバを作れるツールですが求人件数としてはかなり少ないですね。
| 仮想環境 | 求人件数 |
|---|---|
| VMware | 2,258 |
| Docker | 1,612 |
| LAMP | 1,564 |
| Vagrant | 301 |
| VirtualBox | 46 |
| Xampp | 7 |
| MAMP | 1 |
ネイティブアプリ
ネイティブアプリはハイブリッドアプリより高速ですがiOSはSwift、AndroidはKotlinなどプラットフォームごとに異なる言語で開発するのが難点です。一つの言語でクロスプラットフォーム開発できるツールもあります。
一位は「React Native」。Facebookが開発していて言語はJS。二位を結構引き離していますね。
「Xamarin」はMicrosoftが開発しています。言語はC#やVB.NET。「Flutter」はGoogleが開発しており言語はDart（JSとよく似た言語）です。
| ネイティブアプリ | 求人件数 |
|---|---|
| React Native | 168 |
| Xamarin | 95 |
| Flutter | 21 |
ゲームエンジン
Webの範囲を超えますが最後にゲームエンジンも見てみます。クロスプラットフォームなのでWebのゲームも作れます。
やはり「Unity」は突出！言語はC#などです。「Unreal Engine」はUnityのライバルですがまだ差がありますね。言語はC++など。
「Cocos2d-x」は先ほどJSにあったCocos2dの本体です。言語はC++など。
| ゲームエンジン | 求人件数 |
|---|---|
| Unity | 2,643 |
| Unreal Engine | 367 |
| Cocos2d-x | 255 |
各ジャンル1位の比較（2019/04/04追記！）
各ジャンルの1位はこうなりました！
Web業界全体
まずはWeb業界全体の1位を比較。
「デザインアプリ」と「言語」が突出。「Webマーケ」よりデザイン制作とコーディングの件数が多いが、言語に比べると「テキストエディタ」はそれほど重視されていない、と見受けられます。
| ジャンル | 1位 | 件数 |
|---|---|---|
| デザインアプリ | photoshop | 10,187 |
| テキストエディタ | DreamWeaver | 1,210 |
| Webマーケ | Google Analytics | 1,308 |
| 言語 | html | 17,610 |
フロントエンド
次はフロントエンドの1位を比較。
「SPA」が突出しており、次に「AltCSS」、「AltJS」です。サイトのパフォーマンスよりも制作時間の速度が重視されているように見受けられます。「リッチコンテンツ」や「ゲームライブラリ」の件数が少ないのが寂しい。「ハイブリッドアプリ」も少なめです。
| ジャンル | 1位 | 件数 |
|---|---|---|
| テンプレートエンジン | Slim | 152 |
| CSSフレームワーク | Bootstrap | 201 |
| AltCSS | Sass | 696 |
| SPA | jQuery | 2,106 |
| AltJS | TypeScript | 629 |
| リッチコンテンツ | D3.js | 43 |
| ゲームライブラリ | Cocos2d | 23 |
| モバイル対策 | レスポンシブ | 265 |
| ハイブリッドアプリ | cordova | 78 |
サーバサイド
最後はサーバサイド の1位を比較。
「クラウド」と「DB接続」が突出しています。それ以外は拮抗していますが「CMS」は想像より少ない。「EC」と「ネイティブアプリ」はさらに少ないようです。
| ジャンル | 1位 | 件数 |
|---|---|---|
| サーバサイドFW | Ruby on Rails | 1,931 |
| CMS | WordPress | 1,560 |
| EC | EC-CUBE | 146 |
| DB接続 | Oracle | 7,485 |
| webサーバ | Apache | 2,413 |
| Git | GitHub | 2,947 |
| クラウド | AWS | 8,458 |
| 仮想環境 | VMware | 2,258 |
| ネイティブアプリ | React Native | 168 |
| ゲームエンジン | Unity | 2,643 |
最後に
技術の最先端と求人情報には時差があって、定番なものが一位になっている傾向があるなぁと感じました。
中には新技術が定番を抜いて一位になっている例もあり、企業が意欲的に取り入れている、または新技術に意欲的な人材を望んでいる現れかと感じました。
また定期的に観測をして行きたく思います。果たして順位の入れ替わりはあるのか？キーワードのピックアップも順次入れ替えようと思います。それではまた！
※参考：Web系職種のキャリアパスまとめ qiita.com
