はじめに

アプリ制作のフロントエンドやバックエンドの事を学ぶ中でReactについて少し学習しました。今回はReactの代わりとなる技術について少し深ぼってみたのでアウトプットしたいと思います

Reactは使わなくてもよくなった？！

Reactは、Facebookが開発したJavaScriptライブラリで、ユーザーインターフェース（UI）を構築するためのツールです。
ですが、Ruby on Rails 7以降はWebpackerの代わりにインポートマップ（import maps）やesbuild、Viteなどの新しいフロントエンドツールを導入ています。
これにより、JavaScriptの依存関係をRailsアプリケーション内で直接管理できるようになり、ReactなどのJavaScriptフレームワークを必須とせずにフロントエンドを構築することが可能となっています。

早速表にまとめてみました

フレームワーク/ライブラリ	特徴	メリット	デメリット	相性のいいバックエンド
Vue.js	柔軟で学習曲線が緩やか。コンポーネントベース。	・学習しやすい・ドキュメントが豊富・小規模から大規模アプリまで対応	・プラグインエコシステムが少ない・大企業のサポートが少ない	Laravel, Node.js, Rails
Angular	Googleが開発。フルスタックフレームワーク。	・フル機能を提供・大規模アプリに適している・強力な型安全性（TypeScript）	・学習コストが高い・設定が複雑	Node.js, ASP.NET, Java (Spring)
Svelte	コンパイル時に効率的なコードを生成。	・パフォーマンスが高い・コンポーネントベースで書きやすい・設定が簡単	・エコシステムがまだ小さい・他のフレームワークに比べて新しい	Node.js, Go, Rails
Alpine.js	軽量なJavaScriptフレームワーク。	・非常に軽量・シンプルで直感的・インタラクティブなUIを簡単に構築可能	・大規模アプリには向かない・高度な機能が少ない	Laravel, Rails, PHP
Stimulus	Railsと相性の良い軽量フレームワーク。	・Railsとの統合が簡単・小規模なインタラクティブUIに適している・学習コストが低い	・大規模アプリには不向き・限られた機能セット	Rails
Lit	Web Componentsに基づいたライブラリ。	・ネイティブWeb Components対応・高い再利用性・小規模なプロジェクトに最適	・学習曲線がある・他のライブラリとの統合が難しい	Node.js, Java, Rails
jQuery	クロスブラウザ互換性のあるDOM操作ライブラリ。	・学習が簡単・豊富なプラグイン・クロスブラウザサポート	・パフォーマンスの問題・モダンな開発手法に不向き	PHP, Rails, Django
Backbone.js	MVCアーキテクチャを採用した軽量フレームワーク。	・シンプルで軽量・高い柔軟性・学習コストが低い	・大規模アプリには不向き・他のライブラリと組み合わせる必要がある	Node.js, Rails, PHP

適切なフロントエンドフレームワークの選択方法

スキルレベル	推奨フレームワークライブラリ	適用プロジェクト例
初心者基本的なHTMLとCSSの知識がある。ウェブ開発始めたばかりの人	jQuery	既存サイトのインタラクティブ化、小規模なフォームバリデーションやアニメーション
同上	Alpine.js	軽量なインタラクションの追加、シンプルなモーダルウィンドウやツールチップ
中級者中規模なウェブサイトやアプリを構築できる人	Vue.js	ダッシュボード、シングルページアプリケーション（SPA）
同上	Stimulus	小規模なインタラクティブUI
上級者	Angular	エンタープライズアプリケーション、複雑な業務システム
同上	Svelte	高パフォーマンスを求められるインタラクティブなユーザーインターフェース

フレームワークの公式サイト

公式サイトは全て海外版のものです。日本語版はVue.jsとAngularのみ確認できました。

日本語版はこちら

さいごに

Reactの代わりとなるフレームワークについて私個人として見やすい表の形式で紹介しました。私自身、Reactを使用しないといけない…みたいな状態にあり、ほかの人から教えてもらうことで使用しなくても作成できることを知りました。使用するフレームワークによっては見栄え等がアップしますが、私含め初心者さんは、まずは最低限を目指しましょう！