※本記事は、ChatGPTによる意訳+翻訳を活用し、文章に手を加えたものです ※元記事を見て、内容がズレていないか査読するようにしています。 ※感想は、オリジナルです。
原文
意訳+要約
フロントエンドの現状2024
ソフトウェア開発の現場は大きく変化しています。
チームとテクノロジー
チーム構成
- リモートワークの定着: リモートワークはもはや一時的なものではなく、多くの企業で標準的な働き方になった
- 開発者のスキルアップ: 若手開発者が急速に成長し、上級職の割合が増加
- フロントエンド開発者の役割拡大: フロントエンド開発者は、従来の範囲を超えてバックエンドやテストなど、より幅広い業務を担当するようになってた
- QAチームの減少傾向: 専任のQAチームを持たないプロジェクトが増加しており、開発者が全体を担う傾向にある。
開発者は多才化し、ライフサイクル全体に責任を持つようになってきている。
フレームワーク
ReactとNext.jsは依然として最も支配的なフレームワークとレンダリングフレームワークの組み合わせを築いている。
背景には、プログレッシブ ウェブ アプリ、サーバー側でレンダリングされるアプリ、シングル ページ アプリ、静的 Web サイトなど、さまざまなソリューションを構築するためのアプローチがあることが挙げられます。
しかし、2023年は変革の種が蒔かれた年になる可能性があります。
注目度が低かったAstroが、Nuxtと並んでレンダリングフレームワークの第2位に浮上し、非常に高い関心を得ています。同様に、SvelteKitも急速に成長しており、非常に高い関心を集めています。QwikやSolidJSといった新しいフレームワークも開発者の注目を浴びています。
ライブラリ
状態管理
- ReduxとRedux Toolkitが依然として人気だが、複雑さとオーバーヘッドが課題。
- Context APIとZustandがサーバーサイド開発の台頭により注目されている。
- ZodがTypeScriptとのシームレスな統合で人気急上昇。
日付管理
- date-fnsが信頼性とモジュール性の高さで広く採用されている。
- Moment.jsは依然人気だが、サイズとパフォーマンスの問題が指摘されている。
- Day.jsが軽量で使いやすい代替案として注目されている。
ユーティリティ
- Lodashが多くの開発者に評価されているが、今後の学習意欲は低い。
- jQueryは賛否両論があり、今後の需要は減少傾向にある。
データ
現在のフロントエンド開発におけるデータ取得の環境は安定しており、一般的には「Axios」(73.6%)や「fetch API」(72.4%)が利用されています。開発者の多くが満足しているため、新たなデータ管理ライブラリの開発はあまり活発ではない。
フロントエンドシステムの成熟により、新しい未検証のライブラリよりも確立された信頼性の高いライブラリが優先されている。
ホスティング
Vercel (36.2%) と AWS (32%)が好みのトップを占めており、マネージド クラウド ホスティング ソリューションへの強い傾向がうかがえる。
個人サーバーまたはクライアント サーバーでのセルフホスティングの数が多い(24.3%)ことから、多くの開発者が、特定のユース ケースや、特にセキュリティ対策が必要な場合のクライアント要件を満たすためにカスタム環境を依然として好んでいる。
継続的インテグレーション
ソフトウェア開発における自動化が進む中で、継続的インテグレーション（CI）がプロセスの重要な部分となっています。推奨ツールとしては、使いやすく人気のあるGitHub Actions（68.1%のシェア）を挙げており、GitHub Copilotとの連携が今後さらに強化されると期待されています。
一方で、Jenkinsも31%のシェアを維持しており、オンプレミス環境での利用可能なオプションとして評価されています。クラウド移行が難しい場合には、GitLab CIが最新のセルフホスト型代替手段として推奨されています
マイクロフロントエンド
2022年に75.4%だったマイクロフロントエンドの採用率が、2024年には23.6%に大幅に減少しました。この急激な減少は、フロントエンドアーキテクチャに対する業界のアプローチの変化を示唆しています。
要因としては、技術的な知識だけでなく組織的・文化的変化が必要だったが多くの企業が準備ができなかったこと、同様の概念を取り入れたサーバーサイド レンダリング (SSR)と静的サイト生成 (SSG) アーキテクチャへの投資の増加にあると考えられます。
パッケージマネージャ
Node.jsのパッケージマネージャーでは、NPMが圧倒的なシェアを誇っています。これは、NPMがNode.jsのデフォルトパッケージマネージャーであり、広範なエコシステムを持つためです。しかし、YarnやPNPMといった代替パッケージマネージャーも着実にシェアを伸ばしています。
NPMはNode.jsのデフォルトパッケージマネージャとされているため、市場シェアの大幅な低下は考えにくいものの、Corepackの削除によりYarnやPNPMなどの代替ツールへの切り替えが難しくなる可能性もあります。それでも、YarnやPNPMの性能向上が支持を集めており、今後も開発者の特定ニーズに応えるツールとして存在感を高めていくでしょう。
開発者とユーザーエクスペリエンス
TypeScript
開発者の90.6%が現在TypeScriptを使用しており、これは2022年の84.1%から増加しています。また、開発者の半数以上（53.1%）がTypeScriptが新しいウェブ標準になったと感じており、この割合も2022年の43%から上昇しています。
開発環境でのTypeScriptの利用増加により、型チェックの速度がボトルネックとなる可能性が指摘されています。
ブラウザ技術
Fetch APIは、シンプルで使いやすいことから、82.1%という高い使用率を誇っています。
Storage API、IndexedDB、Service WorkersなどのAPIにより、クライアント側でデータを保持する「ローカルファースト」戦略が増加しています。これにより、ネイティブアプリのような高速な読み込みが普及しつつあります。
プログレッシブウェブアプリ
現在、モバイルアプリ開発において、PWA（Progressive Web App）はReact Nativeやネイティブ開発に次ぐ第3位の選択肢として、20%の開発者が利用しています。
PWAは幅広いブラウザのサポートを受け、デスクトップやモバイルプラットフォームへの統合が進んでいるため、今後も成長が見込まれます。
しかし、この上昇傾向が続くと思う開発者は35%にとどまり、30%はPWAの普及にあまり変化がないと考えています。これは、認知度や利用率の不足が原因である可能性があります。
デザインシステム
デザインツールの面では、Figma (86.9%) がデザイン作成の事実上の標準となっています。開発者モードと、デザインをコードに変換することを簡素化する人気の AI プラグインの追加により、Figma は革新を続けています。
スタイルツール
プレーン CSS は依然として非常に人気が高い状態を維持しています。
CSSは、以前は JavaScript でしか実行できなかったタスクを引き継いでいます。重量級の JS フレームワークにアウトソースするコードの多くが、少量の宣言型 CSS に削減されることが予想されます。
- Sass/SCSSも：提供される拡張機能や前処理機能が好まれている
- Tailwind CSS：高い使用率と承認率を誇り、ユーティリティ ファーストのアプローチがReact および Next.js の開発者に好評
- CSS モジュール / スタイル付き コンポーネント：多くの開発者が使用しており、採用率が高い。スタイルをスコープ設定し、React などのコンポーネントベースのアーキテクチャとうまく統合できることが好評
テスト
開発者またはQAチームがテストのほとんどを担っており、自動テストを活用することで開発スピードが向上しています。しかし、ユニットテストに偏る傾向があり、エンドツーエンドテストやインテグレーションテストも重要です。テストツールではJestとCypressが人気ですが、VitestとPlaywrightが注目を集めています。特にVitestはユニットテストに、Playwrightはエンドツーエンドテストに適しています。
コード管理
2022年の調査結果と比較して、フロントエンド開発者の間ではデスクトップコードエディタとバージョン管理サービスの利用状況に大きな変化は見られませんでした。
Visual Studio Codeは無料で拡張性が高いため、最も人気のあるデスクトップコードエディタでした。
JetBrains IDEは有料ですが、より優れた初期設定と信頼性の高いツールセットを提供しています。
ブラウザベースのコードエディタは、デモや簡単なコード例の作成には便利ですが、本格的な開発環境としてはまだ普及していません。
バージョン管理サービスでは、GitHubが圧倒的な人気を誇り、GitLabとBitBucketがそれに続く形となっています。
ローコード/ノーコード
ノーコード カテゴリでは、Notion (29.2%)とTypeform (7%)が優勢で、主に情報管理やオンライン フォームに関連付けられています。
ローコードツールでは、社内利用向けのAirtableやRetoolが主流となっている。Flutterflowは現時点では利用率が低いものの、モバイルアプリ開発のフレームワークをベースにした視覚的な開発環境を提供しており、今後急成長が期待される。
特に、Axis銀行が5000万人のユーザー向けアプリにFlutterflowを採用していることから、その将来性は明るい。
構築ツール
Viteは開発者からの満足度が高く、スピードとシンプルな設定が評価されている。
Webpackは、満足度が低く、複雑な設定がネックとなっている。
Parcelはシンプルな設定を目指しているが、Viteほどの人気や満足度を得られていない。
Create React App (CRA) は、Reactアプリの初期開発には便利だったが、現在はNext.jsやRemixなどのフレームワークが推奨されている。
ESLintとPrettierは、信頼性と業界標準としての長年の評判を反映して、引き続き lint と formatting の分野で優位に立っている。
Stylelintは、成長の可能性を秘めており、成長の可能性がある。
WordPressはウェブサイト構築ツールとして広く利用されており、依然として高い影響力がある。
オペレーティングシステム
Windowsは世界で最も広く使われているOSですが、フロントエンド開発者にとってはMacOSが人気です。
MacOSは、ハイパフォーマンス、強力なコマンドライン、多数の組み込みツール、そしてApple製品間の連携が利便性を高めています。
Linuxはカスタマイズ性やオープンソースの利点があり、Unix環境に慣れた開発者に人気です。
Windowsは多くの企業で標準のOSとして使用され、近年はTerminalの導入など開発者向けの機能も向上しています。また、WindowsとLinuxの両方の利点を兼ね備えたWSL2（9.8%）も人気が高まっています。
トレンドと将来
人工知能
近年、AIの台頭に対して開発者の間では「仕事が奪われるのでは」という不安の声があったが、多くの開発者はAIを活用してワークフローを向上させようとしいるのが現状です。
回答者の約半数が既にAIをアプリケーションに統合しており、今後のソフトウェア開発においてAIはますます一般的になると考えられます。
AIがソフトウェア開発の風景を急速に変えている中で、開発者は伝統的なプログラミングの枠を超え、AIを味方にして進化しているといえます。
AIの普及に伴い、モデルのバイアスやデータプライバシーなど、倫理的な問題にも注意を払う必要があります。
アクセシビリティ
多くの人は「アクセシビリティは障害者だけのため」と誤解していますが、これは大きな誤りです。アプリが「障害者向けではないからアクセシブルである必要はない」などという主張は、実際にはアクセシビリティの重要性を見逃しています。
アクセシビリティは特定の人々だけの問題ではなく、すべての人が利用できるオンライン体験を提供するための基本的な要素です。
しかし、調査の結果、自分の責任外だと考えている人が多いのは、残念ですが意外ではありません。
開発者やリーダー層がアクセシビリティを軽視し、新機能の開発に集中する傾向があるためです。
アクセシビリティは特権ではなく権利であり、フロントエンド開発者としてもっと尽力する必要がある。
将来の動向
- GraphQL（42.4% → 26.4%）：柔軟性がある一方で、導入や維持が複雑で開発効率を下げるおそれがある。
- Progressive Web Apps (PWAs)（44%）：様々なプラットフォームで動作するが、複雑になりすぎて本来の目的から外れるおそれがある。
- Digital Experience Platform (DXP)（90.4%）：単一の画面やインタラクションではなく、ユーザーの全体の体験を重視する。従来のCMSより機能が広く、コンテンツ管理だけでなく、ユーザーの行動を追跡・分析する。
開発者体験 (DX) の変化
- 以前は開発者の満足度を高めることに重点が置かれていたが、今は開発効率と生産性を上げることに重点が移っている。
- 単に「より速く作業しろ」と言うだけではチームのモチベーションは上がらない。より効率的に作業方法に開発者が気づく必要がある。
- コード生成ツールや自動化プラットフォームは必ずしも効率向上に繋がらない。人間による監視や修正が必要となり、工数が増える場合がある。
- ヘッドレス CMS（39.4% → 48.5%）：当初はチームの自律性を高める方法として期待されていたが、コミュニケーションが疎かになり、プロジェクトがばらばらになるおそれがある。
感想＋雑記
あまりフロントエンドに詳しいわけではないが、Reactを中心にいろんなものが影響を受けているように感じた。
特に、JS+CSS周りは影響が顕著だと思う。
今後もこの流れが急に変わることはなさそう。
読んでいて意外に思ったのは、マイクロフロントエンドの概念は、フロントエンドと合わないということ。
バックエンドだと、マイクロサービスという考えがあるが、フロントエンドは、むしろ分割された先の話だから、さらに細分化するメリットが薄いのだろうという理解でいる。
もしくは、APIとして各種サービスにアクセスするので、分ける必要性が薄いという可能性が高い。
ライブラリとしては、jQueryの終焉が如実だなって感じた。
ユーティリティ系がそもそも減少傾向となると、ほぼ必要になるケースがなくなっているのだろうな。。。
あとは、webpackも終焉を迎えつつあると感じている。
個人開発で使っているけど、正直、書くことを毎回調べていろいろ試すので、かなり苦労している。
webpack職人を抱える現場もあるような話を聞いたことがあるので、どこの現場でも苦戦してたんだろうなと感じてる。
Viteには移行しよう移行しようと考えているが、なかなか手が出せてない。
乗り換えタイミングは、早めにしたい。
AI関連の技術の流行としては、サポーターとしてAIを使うのが定番になってきている印象。
結局のところ、不確実性を内在しているのがAIなので、曖昧さがあると困るところには適用しづらいのだろうと思われる。なので、プログラミング領域だと、論理性が重視されるので、生成AIで開発者を完全に置き換えするのは厳しい気がしてる。
なので、置き換えというよりは、サポートとしてのAIとなるのは、当然と言えば当然か。。。
あくまで意思決定は人間が介在する必要がある。
これが崩れるようになってきたら、考え方を変える必要があるが、当面の間はやってこないだろうと思う。
使われている技術を考えたら、まったく別のアプローチがない限り、不確実性は排除できないはず。
早めにReact覚えないとな。。。
