The State of Jsとは
年に1回の大規模アンケート結果の報告レポート。
The State of JSとThe State of CSSがある。
英語圏の回答者が多く、流行りのライブラリやトレンド技術がざっくりと掴めるのが特徴！
内容のメモ
回答者属性
年齢・経験年数
回答者の年齢が予想以上に若く24~34歳がボリュームゾーン。ただ経験年数は結構ある人が多い。
年齢的には若いのに、経験年数が多い人が割といるイメージ。
機能
proxy
オブジェクトをラップして、別の処理を差し込める機能。
あまり使った事がなかったが、シンプル故に応用がめちゃくちゃ効きそう。
https://ja.javascript.info/proxy
基本形
let proxy = new Proxy(target, handler)targer：差し込まれるオブジェクトhandler：差し込む処理。トラップともいう
Promise.allsettled・Promise.any
知らんかった。Promise.allなら分かるけど…
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/any
https://penpen-dev.com/blog/promise-allsettled-all-any-race/
上記の記事曰く、
Promise.allは処理が1つでもrejectされたら全部終了。``resolveの場合は最後まで実行Promise.allsettledはresolve,rejectに関係なくすべて最後まで実行Promise.anyは1つでもresolveしたら全部終了
らしい。
dynamic import(動的import)
普段から使っている。
通常のimportはロードのタイミングで行われるので、そのタイミングを外してimportしたい時に使う事が多いイメージ。
例）
- 重いファイルのimport
- ロード時にはモジュールがない場合
- 条件付きでimportしたい
Nullish coalescing operator(null合体)
時々使う
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator
Optional chaining (?.)
普段から死ぬほど使う。
オブジェクトがnullかどうかの判定をしなくても、プロパティがあれば参照出来る。ない場合にエラーを返すのではなくundefinedを返す。
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining
プライベートフィールド
全く知らなかった。クラス系の機能は深入りせず…
BigInt
2^53より大きい値の整数を表せるデータ型。超絶でかい数字を扱うなら出番はありそうだが、普段は縁が無さそう…
replaceAll（）
基本形
string.replaceAll('A', 'B')stringのAをBに全て置き換える。replace()は最初に一致した物のみを置き換える
matchAll()
正規表現を使った文字列検索時に使う。
match()との違いはreplace同様に全て変換か最初の1つを変換か。
論理積代入 (&&=)
基本形
a &&= 2aが正なら2が代入される
at（）
配列から特定のindexの要素を抜き取る
await
async functionで使用する。Promiseで非同期処理を書くより現在は一般的なイメージ
例）
“`js
async function sample() {
const result = await sampleResolve();
// sampleResolve()のPromiseの結果が返ってくるまで以下は実行されない
console.log(result);}
コード元：https://qiita.com/soarflat/items/1a9613e023200bbebcb3#await%E3%81%A8%E3%81%AF
ブラウザのAPI
ブラウザには標準で様々なAPIが搭載されている。
今回の結果からチェックが必要そうなのは
- service worker
- web socket
- shadow dom
- Geolocation API
辺りの印象。
Web APIをジャンル別にまとめる
ブラウザのDOMを操作する
- DOM API
- JvsScript内で要素を取得する際などDOM操作周りでよく使う
- https://developer.mozilla.org/ja/docs/Web/API/Document_Object_Model
- Webコンポーネント
- Shadow DOM
- Custom Elements
- 詳細はココで：https://ja.javascript.info/web-components
ブラウザとサーバー間の通信
- WebSocket API
ブラウザAPIの中でも外せない機能。
コネクションが確立後はデータを “パケット” として接続している全てのブラウザとサーバーはリアルタイムで双方向が出来る。
チャットなど様々な用途で活用されている。
グラフィックスを描画
３D表現はwebGLがメジャー
音声・動画
音声
動画
webRTCはP2P通信を用いずSFUサーバーにてリアルタイムでの通信を可能にする。
端末同士のやり取りはしない為、負担が少なく大人数での通信が可能。
webRTCを使用したサービスは
- agora
- Twilio
などがある。agoraしか使った事ない。
位置情報
参考
https://zenn.dev/sweflo/articles/8c34c081cb764c
その他
Service Worker
名前知っているけど、実務で使った事なかった。
webアプリとは別にバックエンドで実行するスクリプト。
DOM操作は出来ない。
https://developers.google.com/web/fundamentals/primers/service-workers/
主な使い道として
- バックグラウンド同期
- プッシュ通知
- オフライン実行
- オフラインでも画像が表示されたりするやつ
参考
https://qiita.com/poster-keisuke/items/00056b8d5d6275afdb1a
Intl API
知らんかった。国際的なサービスの際にフォーマットを国際化するAPI
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Intl
参考
PWA
使用率は年々上がっていて、2021年は62%。
どっからがPWAを使っているになるのかはあいまいな気がする。
JavaScriptの3大フレームワークがPWA対応している事もあり、これらを使っている率なんじゃないか。
個人的にはWebアプリケーションの今後の動向 = PWAの動向だと思っている
PWAについて詳しくはコチラにまとめた。
WASM
Web Assemblyの略。webブラウザで実行可能なバイナリフォーマット。
使用率はまだまだ少ないが、ブラウザで動くJavaScript以外の言語の選択肢という事で注目度は高い。
ライブラリ
デファクト
- React(フロントエンドフレームワーク)
- Express(バックエンドフレームワーク)
- Next.js(バックエンドフレームワーク)
- webpack(ビルドツール)
- tsc CLI(ビルドツール)
- Jest(テスト)
期待
- storybook(テスト)
- Testing Library(テスト)
- Cypress(テスト)
- esbuild(ビルドツール)
- Vite(ビルドツール)
- Svelte(フロントエンドフレームワーク)
フロントエンド
基本的にReactがデファクト。
近年は他の選択肢としてはSvelteが満足度が高いらしい。
急に出てきたSolidはしらん！笑
Svelte
- HTMLを直で書いているイメージ
- React、Vueと比べて記述量が少なくなる傾向がある
- https://svelte.jp/examples/hello-world
- パフォーマンスが良い
- バンドルサイズが小さい
- 仮想DOMを使わない
詳しくはこっちにまとめた
個人的にsvelteはとても興味があるので、svelte日本人コミュニティを覗いてみる予定
バックエンドフレームワーク
利用率と満足度をみても、Express、Nextの時代は続きそう。
時点で今後slevte kitが入って来るか。
svelteの勢いがバックエンドのsvelte kitにも反映されている。
svelte kitはsvelteにサーバーサイドレンダリングや色々なラッパーを提供しているフレームワーク
個人的にはReact RouterやTesting Libraryで有名なKent C.Doddsが作ったRemixに注目している。
この分野は特にフロントエンドの領域はどこまでなのか？
今後どこに向かうのか？
が課題になる項目だと思っている。
個人的には昨年行っていたfrontend studyが大変この辺りに議題に対して面白かった。
テスト
Reactでのテスト環境は
- Jest
- Storybook
- Testing Library
に落ち着いた印象。
MochaやCypressもよく使われている。
Jasmineはだいぶ減ってきている。
テストは主に
- E2E
- インテグレーション
- ユニット
- スタティック
に分類される。
モバイル・デスクトップ
モバイルだとReact Native、デスクトップはElectronに落ち着いている。
IonicやCordovaは引き続き中堅どころ。
tauriが注目らしい
ビルドツール
デファクトはwebpack
gulpも使われているが落ち目。。
tsc CLI、esbuild、vite辺りが注目株
その他
ライブラリ
axios,Lodash,moment辺りは普段使う事もある。
ユーティリティ
ESlint,prittierは普段使う
babelは効く頻度が減った
ランタイム
基本的にnode.jsやブラウザ。
service workerやdenoは場面に応じて使う場合がありそう
まとめ【今後追記予定】
アワード
esbuildは満足度が高く、viteはだいぶ関心が高まっている様子。
また今年はティアリストというランク表示によく使われるグラフがライブラリ全体のチャートで使われていて、レアリティみたいで分かりやすかった。
