🍋
フロントエンド技術、どんな種類があるの？ざっくり整理してみた！
フロントエンド開発って、いろんな技術がありすぎて「どれを使えばいいの？」ってなってます。
フロントエンド技術を9つのカテゴリに分けて、それぞれの特徴や代表的なツールをざっくり整理してみました。
1. ライブラリ（Library）
「特定の機能を提供」
ライブラリは特定の機能を提供し、必要なものを組み合わせて開発できる。
代表的なライブラリ
- UI作成（画面の構築）: React, Vue, Svelte
- 状態管理（データの管理）: Redux, Recoil, Zustand, Vuex
- データフェッチ（APIとのデータのやりとり）: Axios, SWR, React Query
2. フレームワーク（Framework）
「アプリ全体の設計を提供」
フレームワークは「開発のルールや仕組み」が決まっているので、効率よく作成できる。
代表的なフレームワーク
- React: Next.js, Remix
- Vue: Nuxt.js
- Svelte: SvelteKit
3. ビルドツール（Build Tool）
「開発中の動作を速くしたり、最終的なコードを軽減」
ビルドツールは、開発をスムーズに進めたり、本番環境向けにコードを最適化できる。
代表的なツール
- モジュールバンドラー（ファイルをまとめる）: Webpack, Parcel, Rollup
- 開発サーバー（高速な開発環境）: Vite, Snowpack
4. パッケージマネージャー（Package Manager）
「ライブラリやツールを簡単に管理」
パッケージマネージャーは、プロジェクトで使うライブラリやツールのインストール・更新・削除を管理できる。
代表的なツール
- npm（Node.js標準のパッケージマネージャー）
- yarn（npmより速く＆便利にしたもの）
- pnpm（ディスク容量を節約できる軽量版）
5. CSS関連技術
「デザインやスタイリングをサポート」
CSS関連技術を使用すると、デザインを効率的に適用しメンテナンスもできる。
代表的な技術
- CSSフレームワーク（すぐに使えるデザイン）: Bootstrap, Tailwind CSS
- CSSプリプロセッサ（CSSを拡張して便利に）: Sass, Less
--
6. テストツール
「アプリの品質を保証」
テストツールを使うと、コードの誤動作を早めに発見でき、安心して開発できる。
代表的なツール
- ユニットテスト（関数や部品ごとの動作確認）: Jest, Mocha
- E2Eテスト（実際のユーザー操作を再現）: Cypress, Playwright
- コンポーネントテスト（UIコンポーネントの動作確認）: Testing Library, Storybook
--
7. APIとの通信
「バックエンドとの通信がスムーズに」
フロントエンドとバックエンドがデータをやり取りするために、APIクライアントを使うと処理を簡単、効率的にできる。
代表的なツール
- REST API（シンプルなデータ通信）: Axios, Fetch API
- GraphQL（柔軟なデータ取得）: Apollo Client, Relay
8. 静的サイトジェネレーター（SSG）
「HTMLを事前に生成し、高速サイト作成」
SSG（Static Site Generation）は、ページを事前に生成することで、サーバーの負荷を減らし、高速に表示できる。
代表的なツール
- React: Next.js (SSG対応)
- Vue: Nuxt.js (SSG対応)
9. サーバーレス & BaaS
「認証、データベース、ストレージを簡単に利用できる」
BaaS（Backend as a Service）やサーバーレスを使うと、サーバーを自分で構築せずに、バックエンド機能をそのまま利用できる。
代表的なツール
- Firebase（Google提供、認証）
- Supabase（オープンソースのFirebase代替）
- AWS Amplify（AWSサービスと連携しやすいBaaS）
まとめ
| カテゴリ | 役割 | 代表例 |
|---|---|---|
| ライブラリ | 特定の機能を提供し組み合わせて使用 | React, Redux, Axios |
| フレームワーク | 設計が決まっていて開発の流れがスムーズ | Next.js, Nuxt.js, Angular |
| ビルドツール | 開発を高速化しコードを最適化 | Vite, Webpack, Parcel |
| パッケージマネージャー | ライブラリやツールの管理を簡単に | npm, yarn, pnpm |
| CSS関連技術 | スタイリングを効率的に適用 | Tailwind CSS, Sass, Styled Components |
| テストツール | コードの品質を保ちバグを防ぐ | Jest, Cypress, Storybook |
| API通信 | バックエンドとデータのやり取り | Axios, Apollo Client |
| SSG | 事前にHTMLを生成し表示を高速化 | Next.js, Gatsby, Astro |
| BaaS | 認証やデータベースを手軽に利用 | Firebase, Supabase |
最後まで読んでくれてありがとうございます！
Discussion