#31「The State of JS 2021から見るこれからのJS」
The State of JS 2021をもとに、2021年までのJSに関する動向と2022年に注目すべき技術やフレームワークについてお話しました。
※ オフラインのため、音声ファイルを再生できません。ネットワーク状況をご確認の上、再度アクセスしてください。
- 橋本
- こんにちは！
- 加藤
- こんにちは！
- 橋本
- ミツエーテックラジオは株式会社ミツエーリンクスのスタッフがWebデザイン、WebフロントエンドなどのWeb技術に関するニュースやツールなどをシェアするためのポッドキャストです。
司会は橋本が務めます。今回はThe State of JS 2021について話していきます。加藤さん、よろしくお願いします！ - 加藤
- よろしくお願いします！ テックラジオでThe State of JSについて話すのは初めてですよね？
- 橋本
- そうですね。The State of CSSについてはこれまで何度か取り上げてきましたが、The State of JSは初めてなので最初に軽く説明をしておくと、JavaScriptの機能に関する認知度や、ライブラリ、フレームワークの利用動向に関する年次調査を行い、その結果を表やグラフで公開しているサイトになります。比較的新しく追加された機能がどれくらい使われているのかとか、その年に特に人気だったJavaScriptフレームワークなどをこのサイトで確認ができます。
- 加藤
- はい。自分と世界とのギャップを客観的に見ることができたり、各ツールの利用者がどれくらいいるのか、どれくらい増えているのか、減っているのかが見られるので、ツールを選定していくうえでの参考にもできますね。
- 橋本
- そうですね。The State of JSは2016年から集計したデータを公表しているので、6年分の技術動向の流れが見て取れます。2021年分は回答者数が世界で約16000人ほどで、そのうち日本からの回答者数は全体の1.3%の206人でした。
- 加藤
- なるほど。2020年は11000人強だったので、約5000人くらい増えてますね。ありがたいことに今回も多言語対応されていて、日本語でも結果が見られるのでまだ見ていない方がいればぜひ見てほしいです！
- 橋本
- そうですね。今回は全体の中から「機能」と「Libraries」のパートを中心に見ていきたいと思います。
- 加藤
- はい！よろしくお願いします！
- 橋本
- ではまず機能についてです。機能では「言語」と「ブラウザのAPI」と「そのほかの機能」にページが分かれていて、構文や機能がどれくらい使われているか、知られているかを見ることができます。
- 加藤
- えーこれまでと見方が大きく変わったのが、やっぱり今回挙げられている機能の多くがIEを除けばほとんどのブラウザでサポートされているっていうところですね。個人的にですけど、The State of JS 2020までは「IEでサポートされてないから無理して使わなくてもいいかぁ」と心のどこかで思っていた自分がいました。
- 橋本
- あー確かにそうですね。今までポリフィルを使っていたような機能も使わなくてよくなりますし、比較的気軽に採用しやすくなりますよね。加藤さんが特に注目しているのはどの辺りでしょうか？
- 加藤
- えっとーこれまでも別の方法で実現できたけど、よりシンプルに書ける系の機能が結構多いのかなと思うんですけど、個人的には最近、非同期処理を書くことが多いので、Promiseに関係するallSettledメソッド、anyメソッド、Top Level Awaitは今後使う機会が増えてくるだろうなぁと思ってます。
- 橋本
- なるほど。よりシンプルに書ける系で言えば、replaceAllやちょうど直近のSafari 15.4のアップデートでサポートされていたatメソッドとかも今後使う頻度が増えそうですよね。replace自体は前からありましたけど、文中のテキストすべてを置き換える場合は正規表現を使う必要がありましたし、あと配列の最後の要素を取得したいときは毎回「length – 1」って書いていたのを、atメソッドを使えば引数にマイナス値を指定すればいいだけなのでそこは便利ですよね。
- 加藤
- いやーこれはめちゃくちゃいいですよね。正規表現で置換していた時は「g」フラグをつけ忘れて「なんで置換されないんだ！」ってなったことが数えきれないほどあります笑 あとは、新しい書き方、具体的に言うとOptional Chainingや、Nullish Coalescingなどの「?」記号を使う演算子や、「#」記号を使うプライベートフィールドなどは、知っておかないとJSの正しい書き方なのかどうかの判断すらつかないので、もし知らないものがあればこれを機にこういう書き方もできるんだなぁと見ておくといいと思います。
- 橋本
- そうですね。知っておいたほうがコードレビューとかもスムーズに進みそうです。
- 加藤
- はい。続いてブラウザのAPIですが、こちらはそこまで新規性のあるものはなかったかなと思います。なので、どちらかと言えば全体の利用状況を見ていこうかなと思いますが、使ったことがあるかどうかは、やっぱりサイトの性質に大きく影響されますね。
- 橋本
- 分かりやすいところで言うと、WebXR APIは基本的にはXRコンテンツを作るときにしか使わないってことですよね。
- 加藤
- そうですね。ただ、そのなかでも意外だったのが、どんなサイトでも使えそうなWeb Animations APIやWeb Share APIを使ったことがある人がそこまで多くないってところですかね。
- 橋本
- Web Animations APIについては、CSS Animationsで十分なケースが多いのかなーって少し思いますね。それとWeb Share APIについては、APIを使わずにTwitterやFacebookなどのプラットフォームごとにシェア用のボタンをサイト上に設置しているケースが多い感じですよね。
- 加藤
- そうですね。ただ、地域や人によって使っているプラットフォームって結構違うじゃないですか。なので、どのプラットフォームでシェアするのかを、デバイスにインストールされているアプリの状況によって変えられるWeb Share APIっていうのはもっと使われてもいいんじゃないかなと思います。ただ、デスクトップブラウザでサポートされているのがSafariだけなので、PC向けには結局プラットフォームごとにシェアボタンを置かなきゃならないっていうのが少しネックかなと思います。
- 橋本
- なるほど。
- 加藤
- ちなみに、全体の78%の人が知らなかったBroadcast Channel APIについては、ミツエーリンクスのフロントエンドBlogに「今日から始めるBroadcast Channel API」という記事があるので、読んでみてください！
- 橋本
- はい、では続いてLibrariesの項目で気になったところですが、フロントエンドフレームワークの利用率でいえば、やはり3大フレームワークとして挙げられるReact、Angular、Vue.jsが多く使われているようでした。中でもReactの利用率が全体の80%と、特に高かったですね。
- 加藤
- そうですね。バックエンドフレームワークのセクションでもReactベースのフレームワークであるNext.jsの利用率が他に比べると高かったり、同じくReactベースのフレームワークであるRemixの満足度が高いっていう結果が出ていますね。モバイル＆デスクトップのセクションでもReact Nativeの利用率が、モバイルにおいてはトップ、認知度も上位に位置しているので、自然とReactの利用率も上がっているのかもしれないです。
- 橋本
- なるほど。
- 加藤
- ちなみにReactのコンセプトの1つに「一度学習すれば、どこでも使える」という言葉があって、やっぱりReactを学べばWebアプリもスマホアプリも作れちゃうっていうのは魅力的ですよね。
- 橋本
- あー、確かにそうですね。似ているところで自分が今ちらっと気になっているのが、Svelteなんですけど、利用率がまだ低いものの、満足度では3大フレームワークよりも上だったんですよ。
- 加藤
- うん、確かに興味を持っている人数もフロントエンドフレームワークの中では一番多いみたいなんで注目度は高いですよね。
- 橋本
- はい。それに加えてバックエンドフレームワークとしてSvelteKit、アプリ開発用としてSvelte NativeというそれぞれSvelteをベースとしたフレームワークが出てきていて、まだ出たばかりのものなので認知度は低いですけど満足度は高いので、個人的には注目してみようかなと思ってます。
- 加藤
- いいですね！Svelte NativeはSvelteとNativeScriptっていうアプリ開発用のフレームワークを組み合わせたものですね。フレームワークは相性がとても大事だと思うので、いろいろ使ってみて、プロジェクトや自分に合うものがどれなのかっていうのを探してみるといいと思います！
- 橋本
- そうですね。では次に移って、先ほども少し触れたモバイル＆デスクトップについてですが、モバイルアプリ開発にはReact Native、デスクトップアプリ開発にはElectronが最も使用されているようでした。 それと、2021年に新しく追加されたTauriが満足度、興味ともに一番高かったので、どういった良さがあるのかなってとこは気になるところです。
- 加藤
- そうですね。Tauriはバックエンド側がRustで書けるっていう特徴があって、最近バージョン1のRC版がリリースされてました。ちなみにTauriのGitHubにはElectronとの比較表があるので見ておくといいと思います。
- 橋本
- なるほど。見ておきます！
あとそれ以外に気になったところとしてはビルドツールのセクションですかね。2020年から新規に追加されたツールが多くあって、ビルドツールとして古くからあるgulpの満足度が下降を続けていて2021年には満足度が28%まで下がっていました。同じくwebpackも満足度が下降気味ではあるものの、gulpほどは下がってなかったですね。 - 加藤
- そうですね、実際のところは分からないんですけど、最後にgulpがアップデートされたのが、約3年前っていうのは大きく影響しているような気はしますね。gulpはいわゆるタスクランナーで、動かすタスク自体はプラグインを組み合わせて作っていくと思うんですけど、プラグイン自体がどれだけアップデートされても、核となるgulp自体が変わらなければ解決できない問題はやっぱあるんじゃないですかね。
- 橋本
- なるほど。あとはgulpでしかできなかったことが他のツールによってなくなってきてるというのも要因の1つかもしれないですよね。この機会に近年新しく追加されたもので、いくつか使ってみて普段の開発環境をアップデートしてみるのもいいかもしれませんね。
- 加藤
- はい、そうですね！
- 橋本
- ここまで機能とLibrariesについて話してきましたが、加藤さんが今年注目していたり、試してみようと思っているJS周りの技術って何かありますか？
- 加藤
- えーと、それでいうと、JSではなくなってしまうんですけど、まぁやっぱり少しずつRustベースのツールが増えてきているな、というのは気になってます。さっき少しだけ話したTauriとか、ビルドツールだとSWCとかですね。これまではツール自体もNode.jsで書かれているのが多かったので、うまくビルドできない時にはコードを見れば解決の糸口はつかめていたんですけど、慣れていない言語ってなると、変なところでハマりそうな気がしているので少しRustも勉強しておこうかなと思っているところです。橋本くんはやっぱりSvelteですか？
- 橋本
- そうですね。やっぱりReactやVue.jsと比べてまだナレッジとかも少ないと思うので、個人的に触ってみてフロントエンドBlogとかに気付いたこととか学びがあったことをまとめてみようかなとは思っています。あとは、ビルドツールとしてesbuildも触ってみようかなーと思っています。結構ほかのビルドツールと比較されることが多いくらいビルド速度が速くて、Viteでも内部的に使われているくらいなので、良さそうだなと感じています。
- 加藤
- なるほど。確かにビルド速度は開発者体験に直結するので、ツール選定においても重要なポイントですよね。
- 橋本
- そうですよね。とはいえ、利用率を見るとまだまだwebpackやgulpが上位を占めている感じなので、少しずつ試していけるといいですね。
最後に、ミツエーリンクスではスマートなコミュニケーションをデザインしたいUIデザイナー、UI開発者を募集しています。採用サイトではオンライン説明会やオンライン面接なども行っていますのでチェックしてみてください。
また、このPodcastはApple Podcast、 Google Podcast、Amazon Music、Spotify、YouTubeで配信していますので、お好みのプラットフォームでフォローいただけると、最新のエピソードをすぐ視聴できます！こちらもぜひご活用ください。「#ミツエーテックラジオ」でご意見、ご感想、こんなこと話してほしいというリクエストなどもお待ちしております。
それでは今日はこの辺で！ありがとうございましたー！ - 加藤
- ありがとうございました！