最近のWeb開発動向調査（at 2023年1月）

Transcript

1. 最近のWeb開発動向
 @neko3cs
2. 誰？
 • neko3cs
 ◦ Twitter：@neko3cs
 ◦ GitHub：@neko3cs
 • 複合機売ってる会社でSI事業をしています
 ◦ 金融系システムがメイン 
 • 最近、ベース買いました
 ◦ ぼっちのやつに影響されました 

3. このスライドはこんな人におすすめです！
 • ここ数年におけるWeb開発技術の動向をチェックしたい！
 • 最近Webアプリケーションの開発をしたいと思ってるけど
 何から学んでいいか分からない！
 • とりあえず、情報をあつめたい！

4. 注意点
 • 範囲はここ2～3年のWeb技術の動向です
 • どちらかというとフロントエンド技術に寄った内容です
 • 筆者の個人的主観に基づく感想も含まれます

5. 目次 • State of JS 2022の調査結果
 • Web上のブログ記事から見た調査結果
 • 何を学んだらいいの？

6. State of JS 2022の調査結果
 • 有志の人によって実施されているJavaScriptを中心とした技術動向アンケートをまとめたサイト 
 • 主に米国を中心に世界中の開発者を対象としている 
 引用：The State of JS 2022 State of JSについて 調査の見方について • 満足度と利用率から分析する 
 ◦ 満足度　→　今後も使ってみたい人の比率　　　→　今後伸びる可能性があるもの 
 ◦ 利用率　→　認知度に対する使われている比率　→　安定しているもの 

7. State of JS 2022の調査結果
 • ライブラリ
 ◦ フロントエンドフレームワークを対象とした分析項目 
 • テスト
 ◦ テストライブラリ・フレームワーク対象とした分析項目 
 • モバイル＆デスクトップ 
 ◦ モバイル・デスクトップアプリを作るためのツール・フレームワーク対象とした分析項目 
 • ビルドツール
 ◦ JSモジュールの結合、CSSプリプロセッサの実行、altJSや特定のES規格への 
 トランスパイル、難読化、といったビルド作業を行うためのツールを対象とした分析項目 
 引用：The State of JS 2022 確認項目
8. State of JS 2022の調査結果
 引用：The State of JS 2022 ライブラリ • Solid、Qwikがここ数年で人気 
 • Svelte、React、Vueが継続して満足度は高い 

9. State of JS 2022の調査結果
 引用：The State of JS 2022 ライブラリ • React、Angular、Vueのシェアはとても高い 
 • Svelteがシェアを伸ばしつつある 

10. State of JS 2022の調査結果
 • Solid
 ◦ Reactライク、仮想DOMがなく処理が爆速 
 • Qwik
 ◦ Reactライク、Resumableという考え方でSSRのパフォーマンス問題を解決した 
 • Svelte
 ◦ Vueライク、ロード時にライブラリのコードや仮想DOMがなく非常に軽量 
 • React
 ◦ Facebookが作成した、今一番シェアの高い、ネイティブアプリ向けのReact Nativeとの互換性 
 • Vue
 ◦ 元Googleの社員が作成、AngularJSをもっと軽量に出来ないかと作られる 
 • Angular
 ◦ Googleが作成した、フロントエンドフレームワークの始祖、元々AngularJSとして作られるがTypeScriptベースのAngularとしてリメイクさ れる
 引用：The State of JS 2022 注目したライブラリについて
11. State of JS 2022の調査結果
 引用：The State of JS 2022 テスト • Vitest、Testing Library、Playwrightがここ数年で人気 
 • Jest、Storybook、Cypressが継続して満足度は高い 

12. State of JS 2022の調査結果
 引用：The State of JS 2022 テスト • Jest、Mochaのシェアが高い 
 • Storybook、Cypress、Testing Libraryがシェアを伸ばしている 

13. • Vitest
 ◦ Viteというビルドツールに組み込まれている、Jestを拡張する目的で作られた、非常に高速 
 • Testing Library 
 ◦ コンポーネントの内部実装を意識する必要がない、ユーザーがアプリケーションを使用する観点からテストを記述できる、ランナーが必要 
 • Playwright
 ◦ 対応しているブラウザが非常に多い 
 • Jest
 ◦ Facebookが作成した、Zero configurationを売りにしており面倒な設定が不要、ライブラリは他のを使ってもランナーはJestのものが使われがち 
 • Storybook
 ◦ サンドボックス環境にて実行されたコンポーネントをGUIで確認出来る、ビジュアルテストでよく使用される 
 • Cypress
 ◦ Seleniumとよく比べられる、ブラウザ上で直接実行されるため、Seleniumに比べて軽量、E2Eテストなどでよく使用される 
 • Mocha
 ◦ 昔からあるフレームワーク、元々はNode.jsのテストフレームワークとして作られた 
 State of JS 2022の調査結果
 引用：The State of JS 2022 注目したテストライブラリ・フレームワークについて
14. State of JS 2022の調査結果
 引用：The State of JS 2022 • Tauri、Expoがここ数年で人気が上がっている 
 • Native Appsが去年急に人気が上がっている 
 • Electron、React Nativeは継続して満足度が高い 
 モバイル＆デスクトップ
15. State of JS 2022の調査結果
 引用：The State of JS 2022 モバイル＆デスクトップ • Electron、React Nativeのシェアが高い 
 • Expoのシェアが少し伸びている 

16. State of JS 2022の調査結果
 • Tauri
 ◦ デスクトップ向け、Rust製でパフォーマンスがよい、WebViewを用いており軽量 
 • Expo
 ◦ React Nativeの開発サポートツールでXcodeやAndroid Studioなどのインストールを不要にする 
 • Native Apps
 ◦ Swift、Kotlinなど各プラットフォームでサポートしている開発方法 
 • Electron
 ◦ デスクトップ向け、昔からある、JavaScriptでネイティブアプリを作成するライブラリ 
 • React Native
 ◦ モバイル向け、Facebookが作成した、ReactライクでWeb開発者に優しい 
 Microsoftが作成したデスクトップ向けの拡張ライブラリもある 
 引用：The State of JS 2022 注目したモバイル＆デスクトップフレームワーク・ツールについて
17. State of JS 2022の調査結果
 引用：The State of JS 2022 ビルドツール • Vite、esbuild、SWC、tsc CLI、Turbopack、 
 Rollupなど様々なツールが注目されている状態 
 • 昔からあるwebpackの満足度は低いわけではないが下火化 

18. State of JS 2022の調査結果
 引用：The State of JS 2022 ビルドツール • webpackのシェアは依然として高い 
 • 利用率で最近注目されているものはVite、Rollup がある様です

19. Web上のブログ記事から見た調査結果
 • 静的ホスティングサイト 
 ◦ NetlifyやVercelといった静的サイトをホストしてくれるサービスの活用 
 ◦ CI/CDとの相性もいい！ 
 • サーバーレスアーキテクチャ 
 ◦ 静的ホスティングサイトの台頭に合わせ、FaaSを採用しサーバーサイド処理は簡潔に実装 
 • GraphQL
 ◦ REST APIの終焉とバックエンド開発の負担軽減 
 • Microfrontend
 ◦ バックエンドだけではなく、フロントエンドもマイクロサービス化 
 近年のWeb技術でのトレンド 引用：フロントエンドテクノロジートレンド遷移まとめ（ 2022年版） | Hexabase 　　　2021年後半から2022年以降のソフトウェア業界（ Web中心）の技術動向予想（ポエム） - Qiita 　　　『Micro Frontends』という記事を読んだのでまとめる - ねこさんのぶろぐ
20. State of JS 2022の調査結果
 • Vite
 ◦ Vueの開発者が作成、非常に高速、IE向けにもビルド出来る
 • esbuild
 ◦ Goで作成されており、かなり爆速、型チェックがない、CSSモジュール非対応などまだまだ制約が多い 
 • SWC
 ◦ Rustで作成されており、かなり爆速、DenoというNode.jsに代わるランタイムとの親和性が高い
 • tsc CLI
 ◦ TypeScript標準のビルドツール、Microsoft製
 • Turbopack
 ◦ Rustで作成されており、かなり爆速、webpackの後継として作成された
 • Rollup
 ◦ ES6ネイティブ、webpackに比べて軽量なdistを生成する
 • webpack
 ◦ 昔からあるビルドツール
 引用：The State of JS 2022 注目したビルドツールについて
21. 何を学んだらいいの？
 • フロントエンドフレームワークはReactが安定！
 • テストはJestを使いつつ、用途に合わせてライブラリを追加！
 • モバイル開発はReact Nativeが安定！
 • デスクトップ開発はTauriがよさそう！
 • ビルドツールはViteがよさそう！Turbopackにも注目！
 • 静的ホスティングサイトを使って簡単公開！
 • サーバーサイドはサーバーレスで！
 • データアクセスはGraphQLで！

22. おわり