2022年9月29日に開催された『Web TECH FORUM 2022　～Webシステム開発における業界動向やフロントエンドの技術トレンドとは？～』の講演資料です。

1. とある研修講師から見た
JavaScript動向
レポート

2. Profile
石崎 智展
2
• 株式会社カサレアル ラーニング技術課
• プログラミング講師歴20年
• プログラマー歴39年
著書：IOブックス「ダイナミックなWebサイトの作り方」
5歳からプログラミング！

3. Company
introduction
3
株式会社カサレアル
設立 1999年7月2日
代表者 代表取締役社長 窪 伸一郎
株主構成 テクマトリックス株式会社
所在地 東京都港区三田3-11-24
国際興業三田第2ビル
※2022年12月に移転予定：
東京都港区港南1-２-70 品川シーズンテラス

4. Learning service
introduction
4
【オープン研修】
オンラインやカサレアルの研修会場で定期的に開催し
ている研修です。
ラーニングサービス
技術者育成
・オープン研修
・カスタムメイド研修
・新入社員研修
・技術支援/内製化支援
【カスタムメイド研修/新入社員研修】
お客様企業のご要望をお伺いし、研修内容をカスタマ
イズして開催いたします。
【技術支援/内製化支援】
プロトタイプ開発といった技術支援型ワークショップ
や、技術研修の内製化の支援を行っています。

5. “p JavaScript過去と現在
p 研修業界から見たトレンド
p Future of JavaScript
p 研修コース紹介
Agenda
5

6. JavaScript
過去と現在
JavaScript past and present
1

7. 7

8. 過去のJavaScript利用目的
▸ HTMLにちょっとした動きを付け足す
▸ CSSの代わりにアニメーションを付ける
▸ IEで動くことが前提条件
▸ HTMLのおまけ程度の認識だった
（個人の感想です）
8

9. 過去のJavaScript不便さ
▸変数スコープが関数スコープしかない
▸変数宣言がわかりづらい
▸ブラウザごとに挙動が異なる
▸HTML API仕様もブラウザごとに異なる
▸クラスがコンストラクタ関数で定義
▸プロトタイプ継承が難しい
9

10. 10

11. 現在のJavaScript利用目的
▸フロントエンドのメイン言語
▸リアクティブなUIなどの実装
▸Ajaxを使ったサーバー通信の実装
▸Push型通信によるリアルタイムなWebアプリ開発
▸SPAの開発
11

12. 現在のJavaScript便利さ
▸変数スコープにブロックスコープ追加
▸変数宣言がlet、constが追加
▸標準化が進み、ブラウザごとの差異が減った
▸クラスがクラスベース定義できる
▸モジュール化できる
▸フレームワークの利用が増加
▸WebSocketによるリアルタイム通信
…etc
12

13. 研修会社から見た
JavaScriptトレンド
JavaScript trends
2

14. JavaScript系研修への申し込み統計
14
2020
2021
2022
JavaScript入門・応用 React・Redux Vue.js Angular jQuery Node.js TypeScript
※注意：2022年は4月〜8月の集計

15. 申し込み統計 変移まとめ
▸Reactは人気が高い
▸TypeScriptコースを追加してから増加傾向
▸jQuery、Vue.js需要は安定している
▸Angularは顕著に需要が落ちている
15

16. 受講者
アンケート調査
カサレアル研修受講者からのアンケートから
会社規模別・研修目的の項目で
3大フレームワークのトレンドを探る
16

17. 研修アンケート 会社規模別（Angular）
17
2020
2021
2022
100人未満 100～500人 500～1000人 1000～3000人 3000人以上
※注意：2022年は4月〜8月の集計

18. 研修アンケート 研修目的別（Angular）
18
2020
2021
2022
今後のプロジェクトで必要だから 現在のプロジェクトで必要だから
技術の調査のため その他
※注意：2022年は4月〜8月の集計

19. Angular
アンケートからの推察
▸ 大企業での需要は2021年をピークに減っている
▸ 2022年から中小企業では増えている
▸ 大企業の運用保守などで増えている
▸ 大企業でのAngularでの新規開発は減少傾向
19

20. 研修アンケート 会社規模別（Vue.js）
20
2020
2021
2022
100人未満 100～500人 500～1000人 1000～3000人 3000人以上
※注意：2022年は4月〜8月の集計

21. 研修アンケート 研修目的別（Vue.js）
21
2020
2021
2022
今後のプロジェクトで必要だから 現在のプロジェクトで必要だから
技術の調査のため その他
※注意：2022年は4月〜8月の集計

22. Vue.js
アンケートからの推察
▸ 2021年以降、大企業の受講が多い
▸ 技術調査目的の受講者がAngularより多い
▸ 2022年は現在のプロジェクトで必要な方が多い
▸ Vue.jsでの開発を視野に入れてる企業が増加
▸ 2022年からは運用保守に切り替わり始めてる
22

23. 研修アンケート 会社規模別（React）
23
2020
2021
2022
100人未満 100～500人 500～1000人 1000～3000人 3000人以上
※注意：2022年は4月〜8月の集計

24. 研修アンケート 研修目的別（React）
24
2020
2021
2022
今後のプロジェクトで必要だから 現在のプロジェクトで必要だから
技術の調査のため その他
※注意：2022年は4月〜8月の集計

25. React
アンケートからの推察
▸ 大企業からの受講が圧倒的に多い
▸ 2021年に技術調査が増えている
▸ 2022年は今後のプロジェクトで必要になっている
▸ ここ 1年でReactでの新規、乗り換えが増加
25

26. State of js
アンケート調査
世界の開発エンジニアからの
アンケート調査を報告しているWebサイト
アンケート調査統計からトレンドを探る
26

27. 27
フレームワーク利用率 出典：https://2021.stateofjs.com/

28. 28
興味のあるフレームワーク
出典：https://2021.stateofjs.com/

29. 29
3大フレームワークへの興味の変移
出典：https://2021.stateofjs.com/

30. Stateofjs
アンケート統計のトレンド
Angular
30
▸利用率は高い
▸興味は極端に下がっている
▸技術者からは嫌われている
エンジニアからの人気は低い
Vue.js
▸利用率は安定
▸Angularに迫っている
▸興味はReactより高い
▸技術者からは好まれている
次も使いたいと思わせるFW
React
▸3大FWでは一番の利用率
▸興味は下がっている
▸認知度が高い
▸Vue.js以上に好まれている
現場での利用率・人気 No.1

31. Future of
JavaScript
JavaScriptの未来
3

32. 3大フレームワーク
バージョンアップ頻度
32
Angular
メジャー ６ヶ月ごと
マイナー 1〜3回
パッチ ほぼ毎週
備考 リリースタイミングが
しっかり決まっている
Vue.js
メジャー 事前発表
マイナー 3〜6ヶ月
パッチ サイクルなし
備考 メジャーリリースに固
定のサイクルはない
React
メジャー サイクルなし
マイナー サイクルなし
パッチ サイクルなし
備考 マイナーリリースで
新機能を追加傾向
AngularはLTSバージョンを利用。Vue、Reactは最新版がおすすめ。

33. JavaScriptの未来
▸ ブロックチェーンライブラリが豊富で、今後開発が増える可能性
▸ 次々に新しいFWが生まれ、まさにFW戦国時代
▸ TypeScriptへの置き換えが進んでも基本文法はJSが使われる
33

34. JavaScriptの強み
▸ フロントエンド言語として、シェアを分ける言語が少ない
▸ あらゆるサーバーサイドアプリケーションと連動できる
▸ スマホアプリでも、WebViewなどで表示するプログラムに利用
▸ ReactNativeなどによるスマホアプリネイティブ化もできる
34

35. フレームワークの未来
▸ TypeScriptでの開発手法に置き換わり始めている
▸ React、Vue.jsでは脱仮想DOMの動き
▸ FWのトランスパイルによるファイルサイズ縮小が進んでいる
▸ Svelteの人気が海外では上がっている（日本でも人気が出る可能性？）
35
SVELTE
第4の人気FWになるかも？
今後のダークホース！

36. TypeScriptのすすめ
▸静的型付け（型アノテーション）ができる
▸エディター上でのコードチェックが強力
▸JavaScriptの最新バージョンが取り入れられる
▸インタフェース、ジェネリクスなどが使える
▸3大FWをTypeScriptで開発ができる
▸大規模開発・メンテナンスがしやすくなる
36

37. 37

38. カサレアル
研修コース紹介
Training Course Introduction
4

39. JavaScript入門系
39
JavaScriptで学ぶ
初めてのプログラミング
プログラミング初心者向けコース。
新人研修や、事務職からのジョブチェンジ
研修にぜひ。
モダンJavaScript入門
最新のJavaScript言語を基礎から学べるコ
ース。JavaScriptをこれから始める方にお
すすめです。
JavaScript応用
バックグラウンド処理や、最新のHTML
APIを使ったプログラムを学べます。
TypeScriptイントロダクション
大規模アプリケーション開発向けに拡張さ
れたTypeScriptを基礎から学べます。

40. フレームワーク系
40
Reactの導入方法から基礎・コンポーネン
ト作成・サーバーサイド連携・画面遷移を
学べます。
Reduxワークショップ
- React応用 -
Reduxの基礎から導入方法、非同期処
理の組み合わせを演習を通して学べま
す。
Vue.js入門 ‒ ver.3対応 -
Vue.jsの導入方法・基本的な作り方・リア
クティブ・Vue CLI・Vue Routeを学べます。
Angular入門
TypeScriptを利用し、RxJS・Angular
Material・画面遷移を学べます。
TypeScriptの初歩も学べます。
React入門

41. 41
THANKS!
最後までご清聴、
ありがとうございました。
Contact information:
▸ URL: https://www.casareal.co.jp/
▸ E-Mail: ishizaki@casareal.co.jp
また、カサレアル研修
でお会いしましょう！
研修、ウェビナー登壇のお問合せ・ご相談 お待ちしております！