The State of JS 2021を読んでみた

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.allsettledresolve,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 &&= 2

aが正なら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を操作する

ブラウザとサーバー間の通信

  • WebSocket API

ブラウザAPIの中でも外せない機能。
コネクションが確立後はデータを “パケット” として接続している全てのブラウザとサーバーはリアルタイムで双方向が出来る。

チャットなど様々な用途で活用されている。

グラフィックスを描画

3D表現はwebGLがメジャー

音声・動画

音声

動画

webRTCはP2P通信を用いずSFUサーバーにてリアルタイムでの通信を可能にする。
端末同士のやり取りはしない為、負担が少なく大人数での通信が可能。

webRTCを使用したサービスは

などがある。agoraしか使った事ない。

位置情報

  • Geolocation API
    ユーザーの位置情報を取得するAPI

参考

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

参考

https://developer.mozilla.org/ja/docs/Learn/JavaScript/Client-side_web_APIs/Introduction#%E4%B8%80%E8%88%AC%E7%9A%84%E3%81%AA%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%83%BC_api

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

https://svelte.jp/

  • 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はだいぶ関心が高まっている様子。

また今年はティアリストというランク表示によく使われるグラフがライブラリ全体のチャートで使われていて、レアリティみたいで分かりやすかった。

Select the fields to be shown. Others will be hidden. Drag and drop to rearrange the order.
  • Image
  • SKU
  • Rating
  • Price
  • Stock
  • Availability
  • Add to cart
  • Description
  • Content
  • Weight
  • Dimensions
  • Additional information
  • Attributes
  • Custom attributes
  • Custom fields
Click outside to hide the compare bar
Compare
Compare ×
Let's Compare! Continue shopping