はじめに
アプリ制作のフロントエンドやバックエンドの事を学ぶ中で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を使用しないといけない…みたいな状態にあり、ほかの人から教えてもらうことで使用しなくても作成できることを知りました。使用するフレームワークによっては見栄え等がアップしますが、私含め初心者さんは、まずは最低限を目指しましょう！