昨年の終わりに公開された毎年恒例「State of JS」の結果について、@spring-raining と @AlanGDavalos が振り返りました。
@spring_raining
こんにちは、UITの玉田です。今回も、UIT INSIDEを始めたいと思います。
UIT INSIDEは、ユーザーインターフェースと、テクノロジーを愛する開発者のためのポットキャストです。
最新のウェブ標準の動向や、開発フレームワークの変遷、UIやUXに関することを、毎週フロントエンド
@spring_raining
の情報を発信していくことを目的としています。さて 今回はですね、えっと、去年の暮れなんですけれども、State of JS という、毎年JavaScriptに関することをアンケートをとってその統計を公開するという
@spring_raining
ものがあるんですけれども、それの2022年度版が公開されましたので、 それの内容について、今回はアランさんお呼びして、色々見ていこうかなと思います。それではよろしくお願いします
@AlanGDavalos
よろしくお願いします。
@spring_raining
はい、では、State of JSは、本当に公式サイトを見てもらうとわかりやすいかなと思うんですけども、いろんなライブラリのトレンドとかを読むのに、すごくいいサイトだと思います。
@AlanGDavalos
そうですね、なんかまあ毎年やってる分、結構その年事の変わりを見るのがすごくいいと思いますし、 ただ、まあ最初に注意点ですけど。
まあ、こういうのはあくまでアンケートなので、回答数は今回確か3万ちょいとかだったので、あのウェブ開発者は3万。なんか、世界中に3万人
@AlanGDavalos
だけなのかありえないので。なので、 あくまでこの結構偏りがある。あの回答は多々あるので、 ま、それを踏まえた上で、まあ聞いてくれればいいと思います。
@spring_raining
はい 本当に参考程度にという私も結構なんていうんですかね。あの真面目にというところもあるんですけど、ま、結構楽しみ的な感じで見てるところもあるので、 そういうスタンスで見るのが良さそうですね。
@AlanGDavalos
そうですね、それがちょうどいいと思います。
@spring_raining
じゃあ、えーっと、上から順に見ていこうかなと思うんですけれども、えっと、デモグラフィックスですね。まずはそこを見ていこうかなと思います。で、 まあ、色々と例えば年齢とかベースの英検年数とかそういった辺りですね。そうですね、私 が見た中で結構これ、あのー、今回変わってるなって思ったところで言うと、
@spring_raining
そうですね。例えば、Years of experienceなんで、あのJSを何年間経験しているかっていうところは、結構今回 実は変わってるところがあったりしまして、経験年数の短い人の回答が増えてるんですよね。実は で、ちょっと見てみると、もう5年以下の割合で見ると、大体2019年から2021年までは減少傾向が
@spring_raining
あったんですけども、 今回、2022年はえっと、10パーセント増えて、47.4パーセントが一応5年以下と回答みたいな感じにはいなってるんですよ。これ、あの 後で見ていくとこの傾向結構わかりやすくて、今年の特徴はそんな感じなのかなと。はい、個人的には見えて思いました。
@AlanGDavalos
そうですね、ま、確かに多分なんかそのーま経験年数でなんだろう、色々なところが ま影響されるんじゃないかなってところなんですよね。まあ、ただそれでもそのま5年以下ではあるんですけど、その ま、私の方がなんかま気になったのは、
@AlanGDavalos
その経験年数だと、ほとんどの人はま、3年から10年ぐらいの経験年数のなんだろう。間にいる っていう風に見ているので、全体的にはその例年よりは下がっている感覚はあるものの実際にそのほとんどはシニアというぐらいのなんだろう。まあ、そういう年数があるんじゃないかなって感じが
@AlanGDavalos
しますね。
@spring_raining
なるほど、なるほど でもそうですよね、過半数が5年以上ということなんで、まあ、やっぱりある程度こう経験を持っている人が答えてるっていうのは 確かだと思います。
@AlanGDavalos
そうですね、あとは、まあ個人的になんかちょっと。これは、あの、どうにかしたいところの1つは、 そのまあ、日本はそのデモグラフィクスのそのなんか、国のところにそもそも 入らないぐらい、なんだろう回答数が少なかったので、せっかく確か日本語版のあのアンケートもあるのに、
@AlanGDavalos
なんかもうちょっとその日本からの回答がないのはちょっとなんなんなんでだろうって思って、なんかもうちょっと 来年とかに、日本からの回答者をぜひぜひ増やしたいなってちょっと思いました。
@spring_raining
それなんですよ、本当にそう思います かろうじて、そのLanguageのところに、そのJapaneseが0.4パーセント。うん、うん、いるだけなので。
いや、これなんとかしたいですよね。
@AlanGDavalos
なんか、まあ、さっきのそのバイアスっていうか、その話で、ほとんどの回答者が英語を話す、白人の男性っていうところがあるからで、しかも、ほとんどそのまあ割と大きめの。その100人以上の会社に働く人がほとんどなので、
@AlanGDavalos
まあ、なんかもうちょっとそのメリハリがあった方が、全体像をまあ見るには 良くなるので、ぜひぜひ、皆さんの来年の番もぜひ回答してくださいと言いたいですね。
@spring_raining
そうですね、いや、もうほんとにあの2023年の後半あたりで 毎年例年公開されてるので、ぜひ 回答して、次の年の0.4パーセントを増やしていきましょう。
@AlanGDavalos
はい、
@spring_raining
えっと、こっからは、Featuresをの話をしていこうかなと思います。Featuresも、JSの機能について、まさしく取り上げた ところなんですけれども、ここ何かこう気になるところとかはありましたか。
@AlanGDavalos
あ、個人的になんか1番気になったのは そのなんだろう。ほとんどの機能は、その去年とはさほど認知度で言えば、変わりがない中で、 2つだけすごく増えたのがあって、それがなんかちょっと気になったのが、
@AlanGDavalos
そのまあNullish coalescing、いわゆる、あのはてな2つのやつと、あとま、トップレベルでのawait がなんかすっごく伸びたんですよね。ここ3年で。それ見てると、あー。いや、なんかこういうところがみんな知らないうちに欲しかったんだなって思って、確かに私も出てからすぐ使い始めましたね。その2つを
@spring_raining
そうですよね。いや、本当にNullish coalescingとかって言うと、割とTypeScript由来みたいなところもあって、そこそこも影響 してるかのかもしれないですけども。これは本当に使ったことがあるが、70パーセントなんで、
@AlanGDavalos
そうそうそう、本当に。で、去年までは確かなんか50パーとかぐらいでしたよね。
@spring_raining
あー、ほうほうほう
@AlanGDavalos
なんか結構例年に比べて増えてますよね。これが
@spring_raining
あとはTop level awaitもそうですね。ま、これはなんていうんすかね。まあ、何か覚えるっていうよりは環境が対応しているかっていうところだと思うんですけど、やっぱりNode.jsが もう問題なく使える状態になってるので、それは大きいですね。
@AlanGDavalos
そうなんですね、うん、
@spring_raining
そうですよね、うーん、
@AlanGDavalos
まあやはりなんかまあJavaScript、ずっとありありな話で。
まあ、対応されてから実際に使えるようになるので、 ま、こういう2つの対応がまあ、ここ2年で入って、あの
@AlanGDavalos
実際にみんなすぐ使い始めましたなっていう感じがしますね。だいぶ前からあるAPIよりは
@spring_raining
そうですね。ま、元々知ってて、あの、今回やって使えるようになったっていう感じかもしれないですね。うん、うん、 それ以外で言うとそうですね。あと、arrayの、array.prototype.atも順調に伸びて
@AlanGDavalos
去年追加されたばかりなのにね。
@spring_raining
これはでも、もうみんなこう待望だったんじゃないか。
@AlanGDavalos
そうですね、まー、そういう地味に欲しかったものが結構最近追加されてて、実際に使うまではあ、これ欲しかったなって気づくんですよね。タマダさんの方は、なんか気になるFeatureの傾向とかありますか。
@spring_raining
そうですね、ま、増えてるので言うとそこなんですけども、逆に全然知られてないな っていうところで言うと、errorのcauseオプションとか、あとtemporalかですね。
そうですね、そこはtemporalはまあ確かにポリフィル使わないと使えないんで、まだまだもうちょっとかなとは思うんですけれども、その辺りはもっと こう
@spring_raining
知られてもいいんじゃないかなっていうところですね。うん、
@AlanGDavalos
そうですね、特にまあ、あの、さっきのエラーのその理由を追加するやつは、 まあ割と最近ではあるけど、まあ、多分もう1年以上前から追加されているものなので、 特定のところでしか。なんかすごい役立たないんだけど、なんか、そういう特定のところではすごい役に立つと思うので、もうちょっと認知してもらって、
@AlanGDavalos
まあ、実際に欲しいってなるタイミングで使えるようになると、すごいいいと思いますね。
@spring_raining
じゃ、ランゲージはその辺りで、あと、Browser APIっていうと までもこの辺りは結構あれですね。横ばいという感じが多い。
あー、でもあれですね、あの、意外に思ったのはFile system access APIがすごく知名度が高いっていうのは意外でしたね。
@AlanGDavalos
そうですね、なんかまあこれ あの、ちょっと先走りになるんですけど、結構デスクトップ向けのアプリとか、あの、Node.jsのアプリを あの開発する人は、結構たくさんここに回答してくれてるっぽくて、なんかそれも影響していそうな
@AlanGDavalos
気がしますね。ま、それだけじゃないと思うんですけど、
@spring_raining
それはありそうですね、その結構、個人的にはデスクトップアプリを作るっていう用途があんまり考えてなかったんで、その Firefox全然対応してないのに、結構みんな使うんだなみたいな。そうですね、
@AlanGDavalos
なんか、ElectronとかTauriとか使うとFirefox。あの、気にしなくていいし、まあそこらへんですよね。あとは、まあ違う意味で、地味になんで知られてないのが ちょっと。web shareのapiが認知度がそこまで高くないのはちょっと。あの、個人的には不思議で、
@AlanGDavalos
正直なんか、ソーシャルのボタンより、これを使うのがすごく、個人プロジェクトでもそっちの方が好きなんで、あの対応が楽なんですし、だからなんかもうちょっとなんだろう、使っててもいいような気が。
@spring_raining
うん、
@AlanGDavalos
最近なんか、バージョン2が色々出てきて、もうなんだろうできることが増えていきそうなんで、 今のうちに知っといてほしいですね。はい、
@spring_raining
あ、それを言うと、確かにあのUIT INSIDE、普通にiframeでシェアボタンを埋め込んでる伝統的な方式なんで、この辺りは すぐに変えられるかもしれないですね。うーん、確かにですね、
@AlanGDavalos
ぜひ、それはもうぜひやっていきましょう。ま、それで、私たちが思いも知らない。snsでのシェアも簡単にできるようになるし、
@spring_raining
あとはIntl API確か、あの、以前 同じメンバーでUIT INSIDEで収録した。はいはい、しましたよね、
@AlanGDavalos
ちょうどIntlの話めっちゃしましたね、
@spring_raining
しました、しました。あのー、これもあの知名度的には横ばいっぽいんですけれども、なんてんすかね、使ったことあるの数値が順調に伸びてますね。これは、 割と知ったら、みんな使うっていうパターンで、私もおすすめだと思います。
@AlanGDavalos
そうですね、特になんか、日付のそのフォーマッティングにはすっごくいいんですよね。
@AlanGDavalos
なんか、日付のやり方は意外となんかこういう国が なんかめっちゃ変なやつ使うとかって、まあ、前の会でも話してるんで、
@spring_raining
これは、あのShow noteにじゃあリンクを貼っておきますね。確かそうですね、そんなにあの昔じゃなかったと思います。
@AlanGDavalos
そうですね、去年のうちにやっていましたね多分 あとはまあこのBrowser APIの部分で言うと、ま、それはこすごい個人的な話だけど、まあ、やはりなんかWeb components周りの標準は だいぶ知られてるのが嬉しいです。
@spring_raining
うん、うん、うん、そうですね、
@AlanGDavalos
その一言だけです。
@spring_raining
知られてはいるんですけど、使ったことがあるっていうのが意外と少ない。あの、これ使うの 定義にもよるかなと思うんですけれども、あのー、単純になんてんすかね。あの、もうすでに存在する wasmを使ってるっていう割合で言ったら、もう多分ずっと多いとは思うんですよね。
@AlanGDavalos
そうですね、なんかま結構人によってなんか使った言葉があるの。定義がま曖昧なのが、どれもに 当てはまるものなんですけど。でも、そうですね、 知らないうちに使ってる人が多いっていうところも、まあ、個人的に思ってるところなんですよね、
@spring_raining
確かに確かにいや、絶対あの使ってる人もっと多いと思いますよ。
@AlanGDavalos
そうですね、で分まフィーチャーの部分はまほとんど。なんかそのフィーチャーそれぞれの認知度の部分なんで、多分 これ以外はあんまり、うんないですかね。面白いところは、 まあwasmを使う人がぼちぼち増えてるところぐらいですかね。
@spring_raining
いや、それはいい傾向だと
@AlanGDavalos
なんだろう。やっとみんななんか、wasmを使うべきところがをちゃんと理解し始めている感じがしますね。
@spring_raining
じゃあ、はい、Featureはそんなところですか。
@AlanGDavalos
ですね、
@spring_raining
では、Librariesのところになります。で、これはまあ、いろんなライブラリーのトレンドについて 見れるところなんですけれども、まあ、最初のページがえーっと、いろんなライブリの。
まあ、その使ってみてどうだったかっていう意見と使ったことがあるかっていうところの、二軸で
@spring_raining
表示されてるところですね。これ見ると結構わかりやすいかなと思うんですけれども、 じゃあ、ここの中で見るべきところってどこですかね。
@AlanGDavalos
そうですね、なんか、Libraries全体の傾向で言うと、なんか色々な 部分でこう。代替わりが今起こってる最中な感じが個人的にしましたね。
あの、特にbuildとかtestとか、あのmobile/desktopとかの部分で、なんか
@AlanGDavalos
そういう傾向が結構強い感じがしましたね。front-endでも、まあちょこっとだけあるっぽいけど。
@spring_raining
そうですね、結構この傾向自体は割と2021年も見られたんですけれども、それがどんどん加速している ていうところですね。具体的に言うとあれですね、まあ、なんと言ってもViteの台頭、 あとはそうですね。ま、testingで言うと、Vitestとか、あとは、Tauri
@spring_raining
ビルドツールで言うと、まあ、Webpackが他のビルドツールに変わるみたいな、そういった流れは、やっぱりどんどん加速してってます。
@AlanGDavalos
そうですね、なんか特にそのなんだろう。なんかま、ViteとかAstroが出始めた時に、なんか結構 当時から。なんか、今後の時代は、そういう、フレームワーク問わずで使えるツールですよ。って、結構なんか言う人は あの出ていたんですけど、こういう結果を見ると、やはりそうだったんだなって
@AlanGDavalos
感じがしますね。そのViteの影響で、なんかWebpackの なんだろう。満足度がだだ下がりで、Vitestの影響で、なんかJestの 満足度がダダ下がりとか、あとは別の観点だと、まあのタマラさんが言ってたTauriで、
@AlanGDavalos
あのElectronがだだ下がりでま。Playwrightで、あのPuppeteerがだだ下がりとか。なんか、そういう代替わりが結構激しいんですよね。
@spring_raining
ま、その傾向は確かにはっきりしてる感はありますね。
@AlanGDavalos
まあ、利用率で言えば、なんかまあ今言ってたライブラリーの その利用率は、そこまで下がってはいないんですけど、満足度の方がすごい下がってるっていうのが、結構目立つ 感じがしますね。そのー、State of JSのサイトになんかあのtier listっていうのがあるんですけど、なんかそこに
@AlanGDavalos
まあだいぶ なんだろう、満足度でいうと、なんかどういう値がなんか1番満足度高いみたいなのを、結構なんか割とわかりやすく見れるような感じになってるので、ぜひ皆さんにも見ていただきたいですね。
@spring_raining
tier list確か、去年から導入、出ましたよね、すごくわかりやすいですね。
@AlanGDavalos
そうですね、本当になんか多分ライブラリーの部分で言うと、 なんか本当にこれだけ見るだけでも、詳細はそこまで見なくても、ほとんどなんかこれだけで済むかもしれないですね。
@spring_raining
うん、うん、うん、
@AlanGDavalos
まあ、もちろんそのなんだろう。使ってる人が、一定数を超えてないのが、まあ、 あの入ってないのがあるのですが。まあ、回答者の中でポピュラーなやつがなんかこういうところでままとめられてる感じがしますね。
@spring_raining
では、それぞれのまあライブラリについて見ていきますか。えーっと、じゃあ、front-end framework ていこうかなと思います。これは、結構、傾向的には、そんなに変わりはないかな。去年からは
@AlanGDavalos
そうですね、多分なんか唯一のなんだろう、変わりらしい変わりがなんか、Solidが結構 その満足度というか、なんか使ってる人が増えてる感じが強いぐらいですよね、それ以外はほとんど動いてない感じですね。
@spring_raining
はい、そうですね、あの使用率がSolidはすごく上がっていて。結構そのリテンション の数値は、あのー、さっきのなんて言うんですかね。その経験年数のこともあって、 パーセンテージで見ると、今年下がっているライブラリが多い中Solidが上がっているっていうところです。ま、Svelteも
@spring_raining
その、維持してますし。
@AlanGDavalos
そうですね。なんか本当にあのー、まあ、今回あの初めて入ったQwikはちょっと 参考のしようがないんだけど、それ以外のライブラリーはほとんど本当になんだろう。今までの 満足度を維持しているんですよね。
@AlanGDavalos
まあ、だいぶなんかまだ下がってるのは、Emberぐらいなんですけど、まあ、それはもうある意味しょうがないので、 それ以外はほとんど同じなんで。まあ、そうですね、なんか 多分そのフロンテンドで、実際になんかもっと動きがありそうなのは、今年なんじゃないかなと思いますね。
@AlanGDavalos
そのSolidとか、Qwikのなんか、勢いがそのまま増していけてたらっていう話で
@spring_raining
ですね。あとは、えっと、この1番上の表には入ってないんですけども、あの、other toolsを見ると、 やっぱりAstroが多いですね。
@AlanGDavalos
そうですね、まあ、Viteと同じで、結構なんかフレームワークを自分で自由に使えるってところが、 まあ目立つやつなので、うん。まあ、レンダリングフレームワークにもあの一応Astroが入るので。
なんかまあ、どちらかというと、そっち方面のなんかツールではあるんですけど。
@spring_raining
そうですね、表現が難しいですけど、どちらかというと、やっぱりそうですよね。front-end frameworkではない気は
@AlanGDavalos
そうですね。なんか、どっちかといえば、まあ、SSRっていうか、SSGというか、そっち方面の感じのツールですね。一応、次のやつへの繋がりにはなるんですけど、そのAstroはそのま、rendering frameworkでは、一応あのグラフには入っていて、 で、ここでまちょうど、ちょうどAstroで気になってたのは、
@AlanGDavalos
なんか、AstroとSveltekit以外はほとんど。なんか満足度が下がってる中で、その2つだけが、 まあ同じか、もうちょっと増えてる印象なんで。そうですね。
あとは、なんかGatsbyの下がり方は異常に、なんか異常なぐらいに下がってるので、まあ
@AlanGDavalos
結構ね。なんか、Gatsbyとかまこれ、NuxtとかにもNextにも当てはまるんですけど、なんか 言うて、なんかJSめっちゃ入れてるので、それにみんな気付き始めてるかな。
@spring_raining
そうですよね、あのー、アランさんといえば、去年、 そのLINEのブログで、そのJSのまあ、使用率みたいな観点で見ると、やっぱり新しく出てきた。そういった ライブラリに分があるっていうところが、まあすごくよく言われていたと思うんですけれども、
@spring_raining
そうですよね。やっぱりそういった意味で言うとこう。昔からあるライブラリがずっと使われ続けるっていうのが、 だんだん難しくなってきてるっていうのは、そのコードの歴史による肥大化ですね。
そういった面で言うと、
@AlanGDavalos
そうですねま、あとは本当になんか。まあ、このrendering frameworkの例で言うと、 そのNuxtとか、Nextとか、Gatsbyはなんかサーバーで色々やります。って言いながら、なんかフロントエンドでも色々やってる中で、 なんかAstroとかは、それと違って、本当にJavaScriptほぼ0で、
@AlanGDavalos
あの利用できることはあるので。なんかそういうところも、まあ、こういった満足度に繋がってるんじゃないかな。なんか、こう フレキシブルっていうか、なんかJSを必要なだけ使えるとか。なんか、そういった部分も多分評価の うちに入ってるんじゃないかなと思いますね。まあ、もちろんそのまNextとかNuxtだとまあ
@AlanGDavalos
React、Vueだけ使えるけど、Astroだと両方使えるとか、なんか、そういったところも多分評価のうちですよね。
@spring_raining
それ以外のツールで言うと、あー、SolidStartはこの中には入ってないんですけど、そのSolidでいうSvelteKit的なやつですね。うん、これはちょっとそうなんですよね、あのー、まだ結構ベータ版という感じが 個人的にはしてる気はするんですけども、今後は結構伸びそうな
@spring_raining
気はしますね。やっぱり、そのなんていうかSvelteKit的なツールは必要だと思います。
@AlanGDavalos
そうですね、なんか、Solidのフロントエンドでのなんか評価がそのままレンダリングのフレームワークで繋がってたら、まあ、来年とか再来年のあたりに、なんかそういう。
なんか、SolidStartがなんかそういうま満足度での位置づけも、似たようなものになるんじゃないかなと思いますね。
@spring_raining
ですよね、いや、これは結構重要ですね。SolidStartの出来によって変わってくるっていう可能性は十分にあり得る 注目したいです。えーっと、じゃあ、次testingですねtestingはランキングで言うと、 そうですね、やっぱりVitestですねtesting libraryも人気はあり、あと、Playwright。
@AlanGDavalos
そうですね、なんか、さっきの代替わりの話にも繋がるけど、まあ、やはりそのなんかJest とか。あのま、Puppeteerはまそのまま。なんかPlaywrightとVitest なんか似たようなAPIだけど、なんかもうちょっと軽量でかつ。まあ、
@AlanGDavalos
今流行りのところとかで使えるとか。ま、Playwrightの場合は、まあ、複数のブラウザーで使えるとか。なんかそういった部分があることで、 ま、やはり打ち勝ってる感じがしますね。なんか、直接そのなんか、Vitestの伸びがJestの下がりに 直接影響してそうな気がしますね。
@spring_raining
そうですね、いや、Jestは本当にesm対応が遅かったのが痛いですね。いや、なかなか やっぱり待ちきれなかったっていうところは、個人的には大きいかなと思います。
@AlanGDavalos
そうですね、まあ、あとはそのなんだろう。Jestが使う、なんか、DOMをシミュレートするライブラリが まーちょっとなんか対応が遅いっていうか、なんか、あとはVitestも実際にブラウサーで直接テストしてないので、なんかまあ、それもちょっと。
あの、個人的にはあんまり好きじゃないところではあるんですけど、まあ、やはりあのー、
@AlanGDavalos
なんかそういった部分を長く維持するのが難しいですね。
@spring_raining
いや、そうなんですよね、テストもなかなかなんていうんですかね。こうしがらみがあるっていうの、本当に なかなか難しいところです。同じ面で言うと、やっぱりPlaywrightとPlaywrightの代替わりは 見ておくべきですね。
@AlanGDavalos
そうですね、 あとはまあこれはすごい個人的な話ではあるんですけど、そのotherになんかギリ入ってる。あの、Web test runnerの方が なんか個人的に推しの1つで、まあ、実際にJestとかVitestと違って
@AlanGDavalos
その内部で、Playwrightとかを動かして、なんか直接テストをブラウザーで実行しているので、実際にアプリとして動くタイミングで、どういう風にコードが影響するのに、 より近くテストできるので、まあ、
@AlanGDavalos
個人的にはそっちの方をちょっと伸びてもらいたいところではあるけど、まあ、Viteのねえ、その影響力には 勝てないなってちょっと思いますね。
@spring_raining
あの、あれですよね、確かModern webのっていうの。
@AlanGDavalos
そうですねのテストツールです。
@spring_raining
ですよね、うん、うん、うん、うん、ちょっと見ておきたいです。で、結構頑張ってるなと思うのは、Storybookですね。Storybookが ここに来て、満足度が下がってはいるんですけれども、なかなか維持している。すごく 個人的には、一昔前のStorybookってだいぶしんどかったんですけれども、それでもちゃんと持ち直してるっていうのは
@AlanGDavalos
そうですね。特になんか最近まあ直近でなんか7.0が出そうな感じで、 あの色々と改善を行っているっぽいので、なんかそれが引き続きできてたら、まあ、もっと長く あのツールとしてなんだろう。まあ、満足度が少しずつ下がり気味ではあるけど、まあ、ユーザー数を
@AlanGDavalos
一定数持ち続けることはできるんでしょうね。
@spring_raining
これは割とそうですよね、なかなかない例だと思います。では、mobile & desktopなんですけども、ちょっと。ここに関しては、本当に私の 経験がそれほどないので、ちょっと申し訳ないんですけれども、まやはりTauriが人気が
@spring_raining
良いですね。
@AlanGDavalos
そうですね、私もまあそこまで詳しくはないので、ま、ここは多分あのすぐすぐ終わる話かもしれないんだけど、まあ、なんかTauriが Electronの代替わりになってそうな雰囲気が見受けるし、 あと、気になったのはまあ、モバイル用のツールが大体満足度が
@AlanGDavalos
下がってる全員なんかでも、全部下がってるのがちょっと気になってて、なんかDartの影響なのかなって、ちょっと 個人的に思うところはあるけど、それをなんか裏付けるデータはないので、 あくまで私の個人的な仮説として受け取ってください。
@spring_raining
Dartか、そうですね、そのマルチプラットフォームのモバイルアプリっていうこと自体が結構難しいなと個人的には 思っていて、今回その特にそのなんだ。経験年数が下がる傾向があったっていうところもあって。いや、正直にReact nativeで まあできるんですけど、結構あの、なんて言うんですかね。こう、両方の知識をやっぱりどうしても求められてしまうんですよね。そのandroid
@spring_raining
アプリの開発と、iosアプリの開発の知識がどこかで、ちょっと必要になる。あのー、それを 一応回避するっていうやつが、あの、いわゆるExpoとかですかね、その辺りは、あのExpoっていうのはですかね。React nativeの上で 動くものなんですけども、ただ、やっぱり辛い辛いというか。まあ、色々とあのはあのハードルがあるっていうところが事実なんで。
@AlanGDavalos
そうですね。まあ、多分なんだろう。最も、何かできそうなところの1つは、ここらへんですよね。こま、ウェブかNode.js以外のあのプラットフォーム向けのアプリで、 多分なんかここが1番。なんか、満足度があんまりない
@AlanGDavalos
ところの1つなので、ま、是非。なんかいアイデアのある人は、ツール作ってくださいって言うしかないです。
@spring_raining
そうですあ、あとあれですね、Tauriそういえば、あのTauri mobileというモバイルアプリ開発向けのライブラリが出てたと思うんで、それは
@AlanGDavalos
確かにそれはちょっと面白そうですね。
@spring_raining
ちょっと来年どう食い込むかは気になります。
@AlanGDavalos
確かに、うん、楽しみですね
@spring_raining
では、build tooldですね。build toolは、結構個人的には本当に 傾向が現状維持という感じではありますね。
@AlanGDavalos
そうですね、ま、Viteとesbuildの2人勝ちっていうか、 Rollupの満足度が下がるのって、なんか、Viteが内部で使ってるのに、あの下がってるのがちょっと面白いなと思いました。重い中だけど、まあ、そうですね、 Webpackへの辛さがだいぶ溜まってたなというかで、
@AlanGDavalos
まあ、5.0とかで多分 みんなが欲しいほどの改善ができなかったのかもしれないですね。なんか、今時Webpackで、その あのesm用のライブラリビルドを出力するには、一苦労する中で、
@AlanGDavalos
こういうのもあれなんですけど、なんか、Webpackはそろそろ卒業することになるんじゃないですかね。
@spring_raining
そうですね、いや、新しくそうです。新規開発で、Webpackを導入する意義は、私ももうないかなとは思います。
@spring_raining
それぞれ良いツールがもう本当に出てきているので。
@AlanGDavalos
そうですね。まあ、強いて言えばなんか純粋なTS。あの、TypeScriptのCLIを使うことでもいいんですよね。
あ、結構それに人気度はまだまだ、高そうですよね
@spring_raining
高いですね。結構意外だったのは、あのesbuildも注目度もそうなんですけれども、その 利用率がesbuild上がってるっていうのは、意外で、結構あのーesbuildそのまま使うよりは、 むしろ他のライブラりの中でesbuildを使ってるみたいな、あのスタンスなのかなと思ったんですけども、結構ここに来て、
@spring_raining
直接esbuildを使うっていうケースが多いっていうのは、あの 割と興味深いものでしたね。
@AlanGDavalos
まあ、そうですね、なんかそこまでなんだろう。スペックがすごいひろ、広くないようなアプリとかでしたら、 ま。確かに、なんか純粋にesbuildだけで、色々やるのも できるにはできるので、ま、その速さに魅了されてやる人がいるんじゃないですかね。
@spring_raining
そうですね、それ以外は、Snowpackとかは 結構注目はしてたんですけれども、やっぱりあの、もう本当に完全にViteに移行してしまったっていうところと、あとは、 あー、そうですね、SWCはやっぱり順調に伸びてますね、Next.jsパワーで。
@spring_raining
そうですね、結構そうSWCはあのー、私もあの最近ちょっと使ったことがあったっていう程度だったんですけど、あのー、 やっぱりいいのはあれですね。その後方互完性というか、ちゃんとes、 今でもes5の出力に対応してるっていう
@spring_raining
ところとか、割とesbuildの対極なのかなっていう風に思いましたね。そのesbuildは、その機能を絞っていく方面なんですけど、SWCは 割といろんな環境をサポートしてるっていうのは、触ってみて、気づいたところはその辺り なんで。そうですね。本当に純粋なWebpackの代替っていう意味で言うと、確かにSWCはありなのかなと
@spring_raining
思いました。
@AlanGDavalos
そうですね、まあ、ただ多分、これはちょっと個人的な意見にはなるんですけど、 まあ、やはりViteがもたらす。その使いやすさっていうか、なんかあんまり 気にしないで色々できるっていうところが。今後、多分、さらになんかViteの
@AlanGDavalos
あの認知度を高くしてくるんじゃないかな。
@spring_raining
そうですよね、ブラウズ自体もそうなんですよね、進化していくっていうところで、その環境、 その昔のブラウザをサポートってするっていう必然性がどんどんなくなっていくっていうところが 見えているんで、そういう意味でも確かにそうですよね。
@AlanGDavalos
なんか、IEのあの利用率は世界的に0.2パーセントぐらいになってる中で、まあ、esmじゃないものにするには、相当な理由がある。いると思いますね。
@spring_raining
そうですね、うん、私もしばらくViteの天下が続くっていうところについては賛成です。
では、えーっと、monorepo toolsですね、ここはどうでしょうか。
@AlanGDavalos
ま、ほとんど変わっていないが、まあ、 そうですね、ほとんどほとんど変わりがないんですよね、そう、その一言につけるんですよね。あとは、 まただ1つだけ気になってるのは、そのLernaが
@AlanGDavalos
少しずつではあるんですけど、なんか、満足度が下がりつつあるんですよね。その1番人気ではあるんですけど、 これもまあそのモバイルと同じで、結構みんな不満が溜まってそうなところの1つなので、 これはまさになんか何かいいのが出てきたら、一気にあのViteみたいに、なんか一気に活性化してしまいそうな
@AlanGDavalos
気がしますね。
@spring_raining
確かにそうですね、Lernaっていうと、あの、多分NxとLernaって結構なんてすか。近いというか、Lernaの移行先として、Nxを推奨されるっていうケースが多いのかなと思うんですけど、も。
でも、Nx側もそんなにめちゃくちゃ人気が伸びてるかと言われると、
@AlanGDavalos
そうで、そうなりますよね。
@spring_raining
そうそう、そうなんですよ、それがなかなか気になっているんですよね。
@AlanGDavalos
まあ、モノレポ自体を作るのは、まあ、相当の辛みがある ものなので。で、今あるツールはまじり。なんか仕事してくれてはいるけど、 まあ、やはりどれもまだね。みんなを納得させるほどのものを提供できていなさそうな感じがしますね。
@AlanGDavalos
まあ、自分で作れるかっていうとそうでもないんですけど、まあ、やはり何かがこう。まあ、イノベーション のできそうな領域の1つにはなってると思いますね。ここは、
@spring_raining
あの、1番下のそのモノレポツールを使って、ハッピーですか？ みたいな意見で言うと、ハッピーじゃないニュートラルがすごく多くて、 まあ、使えてはいるけど、そんなにいいと思って使ってるかって言われるとそうでもないみたいな。
@AlanGDavalos
そうそうなんか、ほとんどのところだと、ハッピー以上の人はなんか3割以上だったりする中で。
まあ、なんかこのモノレボとか、モバイルデストップのところだと、まあ、2割ちょい とかだったりするから、まあ、そうなんじゃないかな。ですね、
@spring_raining
個人的にはTurborepo推しなんですけれども、そうやっぱり概念が難しいと思うんですよね。そのグラフとか いきなり出てきてわかるが、何かこう。新しい、その技術的な新しさじゃなくて、考えとしての新しさが 出てこないと難しいのかなとは思いますけど、なかなか難しそうですよね。そうですね、
@AlanGDavalos
今後どうなるかはまあ多分当分あんまり変わらないけど、ちょっとなんか イノベーションが欲しいところの1つですね。
@spring_raining
ですね、
@spring_raining
ではだいぶ長くなってしまったんですけれども、じゃあ、ちょっとother toolという章もあるので、ここもちょっと ざっくりと見ていきます。じゃ、ここで何か見ておきたいところで言うとどうでしょう。
@AlanGDavalos
なんか、ここで多分 4つぐらい。あの、ちょっと気になったところがあるんですけど、ま、この中なんかこのこの回答者の中で、そのjQueryを使う人は、 まあ12パーセントとかっていう話で、
@AlanGDavalos
まあ、サンプリングのバイアスの話に戻ってしまいますね。まあ、ほとんどのwebがあのjQueryをまだ使ってる中で、 まこここに来て、jQuery使う人はほとんどいないっていうのは、まあそういうことだなって感じですね。
まだいだあの、ある程度のそのなんだろう。技術力があるっていうか、なんか、
@AlanGDavalos
ある一種のあの人だけが、なんかこういうところに回答してくれてそうな感じがしますね。
@spring_raining
それはあるかなと思います。
@AlanGDavalos
あとは、まあ deprecatedになってるのに、なんかまだmoment.jsを使ってる人が3割以上いるので、なんかやめときましょう。もう、メンテナンスすらされていないんです、
@spring_raining
これはほんとにそうですよね、いや、メンテナンスされてないんですよね、
@AlanGDavalos
そう、だから、なんかまあ、なんかこのチャートにあるdate functionsとか、Day.jsとかだ、Luxonの ほぼどれでもいいので、代わりに使ってください、
@spring_raining
その通りだと思います。Temporalって、そういえば、
@spring_raining
すぐで使えるのかな、Temporalが来るのが多分、あの、未来的には正しいかなと思うんですけど。
@AlanGDavalos
そうですね、まあ、TemporalとそのIntlの引き合わせで、 なんか、これらの代替わりをいずれできるようになるのが多分最適だと思いますけど。まあ、 あの、去年の記事でも話していたSafaryの2年問題があるので、
@AlanGDavalos
なので、まあ、当分ま何かのライブラリーを。まあ、結構day.jsとか。あの、date functionsはすごい軽量なので、まあ、 あんまり影響しないので、ぜひ使ってみてください。
@spring_raining
そうですね、まあ、どちらかを使っておけば、Luxonは使ったことないんですけど。そうですね、私もどっちかですね、day.jsか、date-fnsか。
@AlanGDavalos
私も大体その2つにしてしまいがちですあとはそうですね、 そのfetchの部分で、なんかAxiosがまあ引き続き。あの、高く使われてるんですけど、まあなんか、Node.jsのアプリだったら、まだちょっとわかるかもしれないんですけど、フロントエンドだと、ちょっとAxiosを使うのが、
@AlanGDavalos
なんかちょっと重いんですよね。今時だと、あの、なんかAxiosに変わって、まあ、純粋にfetchを使えるのもありますし。
まあ、なんかAxiosならではのAPIのやり方が好きだったら、なんかちょっと軽量化したAxiosみたいなのが、あのいくつかあるので、 まあ、代わりにそれを使って見るのがちょっと個人的にいいと思うので、あの、ぜひみんな検討してくれるといいと思います。
@spring_raining
いや、本当に その通りですね
@spring_raining
あとはまああのーTanStack queryとか、Apollo clientとか、Apollo clientはちょっと違いますけど、swrとかもありますし。この辺りは必ずしもAxiosを使う必要はないっていうのは同意見です。
@AlanGDavalos
そうですね、まあ例えばの話なんですけど、その あの一つそのAxiosと同じAPIのあの、Redaxiosっていうライブリーがあるんですけど、 Axiosが11キロバイトなのに、なんかこっちは1キロバイトなんで、まあ、だいぶ。あのま、
@AlanGDavalos
正直なんか1番なのが、純粋にfetchを使うことなんですけど、まあ、そうそれがなんか難しい場合はま、こういった なんか軽量化したAxiosを使うのがいいと思いますね。あとは、ま、すごい気になったのは、 ここの回答者が
@AlanGDavalos
あのランタイムとして、1番よく使うのがブラウザーではなく、Node.jsが1番高いのがちょっと気になりました。そのブラウザーが6割で、Node.jsが7割ぐらいなんですよね。
@spring_raining
ほんとですね、
@AlanGDavalos
それがすごい気になりましたね。
@spring_raining
あのー、これ複数回答なら例えばあれですよね。フロントエンドエンジニアは、Node.jsとブラウザー両方使うけれども、そのサーバーサイドで JS使う人は、Node.jsしか回答しない
@AlanGDavalos
という風に、そうそう、あの、そういう風に受け取ってもいいと思います。うん、なので、 まあ割合で言えばちょっとサーバーサイド気味の人の方があの回答者に多いっていう感じですね。
そのなんか、色々な回答の理由の説明には、
@AlanGDavalos
ちょっとだけなるかもしれないですけど。でも、そうですね、ま、個人的になんかここら辺で気になるところはそこですね。はい、
@spring_raining
あー、一点、あのzxの利用率がだいぶ低いっていうのは、ちょっとショックだった ですね。あの、UIT INSIDEでえ、取り上げたと思うんですけども、めっちゃ使い倒してるんですよ、zx
@AlanGDavalos
まあ、zxってまだお若いんですよ。なので、今後増えていくと、
@spring_raining
ありがとうございます
@AlanGDavalos
いや、あの、正直の意見なんですよ。なんか、結構その傾向的には、なんかzxの良さに気づいてる人がだんだん増えてるので、 まあ、なんか5割以上になることはさすがにないかもしれないんですけど、まあ増えていくんじゃないかなって、うん、 個人的には思いますね
@spring_raining
だと嬉しいです。それ以外はあれですね、章として追加されたのは、edge/serverless runtimes ってなんか前なかった気がするんですけども、これはもしかしたら最近追加されたかもしれないです。
@AlanGDavalos
そうですね、これはちょっと前あったか覚えてないんですけど、まあでもここでも、Lambdaが 王者だっていうところが、まあ、普段普段通りというか、まあ、AWSのクラウドのパワーが出てますね。
@spring_raining
そうですね、あ、でもCloudflare workersも。やっぱり
@AlanGDavalos
ま、どれもなんかすごい。なんか、みんなが使うっていうほどでもないんですよね。なんか、最大でも2割なんで
@spring_raining
ま、これは。でも、今後もしかしたらこう継続して取っていったら、なかなか傾向とかが見えるかもしれないですね。
@AlanGDavalos
そうですね、あとのセクションで言うと、usageですかね。次は ここで2点ほど個人的に気になったことがあるんですけど、あのJSとTSを使う割合、 そのまあどどれぐらいの時間でどっちを書いてるのかって言うと、なんかほとんどの人がまあ、
@AlanGDavalos
あのTSを書く時間の方が多いっていうことなんで、ま、これもなんだろう。
まあ、ある意味そのバイアスの表しのではあるんですけど、まだ傾向としては、多分なんかTSを使う人がまだんだん増えて 言ってるんですよね、
@spring_raining
これ面白いですよね一方で、でもこうJS100パーセントjsっていうのも一定数いて、なんかこう 真ん中がへこむってのは面白いですね。
@spring_raining
逆だと思ってたんですけど、
@AlanGDavalos
まあ、なるほど、結構なんかTSをほとんど使う。なんか、 中立な人があんあんまりいないですよね。なんか、どっちかを使うかっていうと、
@spring_raining
そうですよね。
@AlanGDavalos
ま、やはりなんかコンパイルが好きか嫌いかの違いが結構激しいので。
@spring_raining
いや、これは興味深いですね。このうーん、なるほど、そっか、いや 普通なんか中間とかあると思うんですけど、全然ないないですね。
@AlanGDavalos
気になるところで言うと、ぜん。前回の質問で、なんか、Node.jsの環境を使う人が多いというのに、 なんかあの、フロントエンドのディブロップメントで使う人のほがほぼ100パーっていうまえとね、7割か 7割になってるのがちょっと面白いですね。
@spring_raining
あー、そうそうそうそうんですよね、
@AlanGDavalos
まあ、でもNode.jsっていうと、まあ、あの、なんか他の種類。なんかバックエンドだけじゃなくて、なんか まあ、えっと、デイターアナリシスとか。あの ま色々。なんかエンベテドアップスとか、なんか色々なところでも使えるかな。マシンラーニングとかですね。なんでまあ、
@AlanGDavalos
ちょっと面白いですね。
@spring_raining
本当にJSってなんでもできるなっていうのは、これを見ると改めて思いますね。
@AlanGDavalos
そうですね、あと、ま、ここで言うと、アプリケーションのパターンで言うと、 まだ。なんかま、ここの回答者で言うと、なんかまだほとんどの人がSPAを開発してそうなところですね。
まあ、この数字をなんかちょっと例年とかに比べて、来年とかにも比べるのはちょっと面白そうですね。なんか、
@AlanGDavalos
SPAは最近ま色々悪いところが目立ち始めているというか、なんか、それを中心に いうことがま、Astroとかでもなんだろう。Astroの存在意義は、そもそもそれに対抗するための 1つなんで、なんかちょっとこれが今後どう動くかはちょっと個人的に気になりますね。
@spring_raining
うん、うん、はいはい、質問の内容があれですね。去年、1年間で使ったことがあるアプリケーションパターンなんですかね。
@AlanGDavalos
そうですね、で、最初はSPA、次はSSR SSGあとはまあMPAですね。
てか、なんかまあ2、3、4、5はほとんどなんかSSR系ですね。
@AlanGDavalos
もう1つだけ。あの、大切な部分があったんですけど、そのopinionsに
@AlanGDavalos
なんか今痛いところとなんだろう。JavaScriptに足りないっていうあの2つがあるんですけど、そこだけあの、最後にとっておきたいんですけど、 ここに回答してる人の中で、なんかま3割以上がなんかちょっとJavaScriptで、こういうところが辛いって思うのが ま。コードの管理、dependencyの管理、あとステートの管理ですね。っていうらしいで、確かに、それが
@AlanGDavalos
はいあります。
@spring_raining
そうそうですよね、いや、
@AlanGDavalos
これ
@spring_raining
前年からの傾向で言うとどうなんだろう、割と変わってなさそう。
ステートマネジメントがやっぱり辛いっていうのは、1番1番共感するのは、ステートマネジメントですかね。
その辺りかなとその割には結構ライブラリーとかでは、あまり取り上げられなかった気が。
@AlanGDavalos
そうですね。
@AlanGDavalos
なんか、そういうなんか、ステート管理のセクションなかったですね。
@spring_raining
そうですよね、なんか、RxとかRecoilとかいっぱいあるはずなんで、これはなんかそうですよね、もうちょっと 注目されてもよい気はしますよね。うん、うん、うんうん。
@AlanGDavalos
最後に取り上げたいところは、なんかJavaScriptに何が足りないと思うところで、まあ、トップスリーがあの まースタティックのタイプと、あのー、コモンのそのutil、あの標準のライブラリーと、 あとは、まあもっといいdateっていうか、日付の管理ですね、がトップスリーです。
@spring_raining
なるほど、なんか1番目と3番目はでも、
@AlanGDavalos
まあ、そろそろそうです、
@spring_raining
そろそろですよね、そう、あのスタティックタイピングは、ちょっとなんてんすかね。そのランタイムでのタイピングではないんですけども、そのそのままその なんて言うんすかね。いわゆる、そのチェックはしないけれども、その文法として、そのTypeScriptっぽい型の アノテーションっていうのは、来るっていうのはありますしまで、デートマネジメントはそれこそTemporalがありますし。
@AlanGDavalos
うん、
@AlanGDavalos
まあ、多分なんかこのリストの中に書いてるのは、ほとんどなんか何かのプロポーサルがあるものだと思うんですよね。で、 まあその中でこの3つがなんか1番回答数が多かったのはちょっと 面白いですね。なんか、やはりなんかTypeScript書く人が多いとなると、みんなJSにスタティックタイプが
@AlanGDavalos
欲しいですよ。みたいな回答になるんですよね、
@spring_raining
はいはい、そっかま、それは確かに
@AlanGDavalos
多分ちょうどそのスタティックタイピングが欲しい割合が、なんかJSをあのTSを あのー、7割以上の時間で書く人の割合と、多分近いと思いますね。
@AlanGDavalos
多分これでほとんど全部見ましたね。
@spring_raining
はい、いや、長丁場ありがとうございます
@AlanGDavalos
はい、
@AlanGDavalos
いや、なかなかなんだろう。実際に分析してみると、まあ、面白いところは多々ありますね。
@spring_raining
そうですよね、いや、やっぱりこう、JSがなんでもできるんで、本当に開発の多様性とか、 こんなにそのライブラリーとかいっぱい見ていくっていうのも、なかなかか他の言語ではないことかなと思うので。
@AlanGDavalos
そうですね、
@AlanGDavalos
なかなか他の開発をやってると気づかないもんなんで、 まあ、何かの参考になっていったらよかったと思いますね。ですね、
@spring_raining
いや、フロントエンドほんと楽しいですね。
@spring_raining
では、最後に1点なんですけど、えっと今回そのState of JSというまー、全世界でのサーウェイがあったと思うんですけれども、一応 LINEのUITもですね。あの、同じようなUIT Surveyというえー、統計も毎年取っていたりします。で、えーっと、 これは
@spring_raining
確かPodcastでの収録も確か、今後あるかなと思うので、えっと、ぜひそちらも見て、まあ、その全世界の傾向と LINE社内での傾向みたいなのの違いとかも一応見れたりするので、ま、そういったところもぜひ見ていってもらえると嬉しいです。
はい、というのが多分、そのうち収録されるので、よろしくお願いします。告知です
@spring_raining
今回はState of JS 2022について、アランさんに、話を聞いてみました。
LINEのフロントエンド組織UITでは、このような技術的なキャッチアップを日々行っております。
UIT INSIDE以外にも、毎週の社内勉強会で、フロントエンドの情報交換を行っています。
今後もUIT INSIDEを通して、このような情報を外部に発信していけたらと思います。
それではアランさん、ありがとうございました、
@AlanGDavalos 1:00:43
ありがとうございました。
