Webアプリを作ってみたいけど、サーバー管理やバックエンド開発は難しそう…そんな風に思っていませんか？
実は、ReactとFirebaseを組み合わせれば、無料で驚くほど簡単に本格的なWebアプリケーションを作って公開することができます。
この記事では、IT初心者の方でも迷わずに進められるよう、ReactとFirebase Hostingを使ったWebアプリの作成から公開まで、詳しく解説します。
30分もあれば、あなたの作ったアプリがインターネット上で動いているのを見ることができるでしょう。
なぜReact + Firebaseが最強の組み合わせなのか？
Reactの魅力
Reactは、Facebook（現Meta）が開発したJavaScriptライブラリで、現在最も人気のあるフロントエンド開発技術です。
42.26%の開発者がReactを使用しているというデータもあり、その人気の高さがうかがえます。
Reactを選ぶべき理由：
- コンポーネント化：再利用可能な部品として開発できる
- 仮想DOM：高速な画面更新が可能
- 豊富なエコシステム：ライブラリや情報が充実
- 就職・転職に有利：需要の高いスキル
Firebaseの魅力
FirebaseはGoogleが提供するバックエンドサービスで、複雑なサーバー管理を一切不要にしてくれます。
Firebaseを選ぶべき理由：
- 無料プラン：個人開発なら十分すぎるほど使える
- サーバー管理不要：インフラの知識が不要
- 高速デプロイ：数秒でアプリが世界中に配信
- 自動HTTPS：セキュリティも自動で対応
- CDN配信：世界中どこからでも高速アクセス
開発環境の準備
必要なツール
まずは開発に必要なツールをインストールしましょう。
1. Node.js
- Node.js公式サイトからLTS版をダウンロード
- インストール後、ターミナルで
node --versionと入力して確認
2. VSCode（推奨）
- VSCode公式サイトからダウンロード
- React開発に便利な拡張機能もインストール
3. Googleアカウント
- Firebaseを使うために必要
プロジェクトの作成
1. Reactプロジェクトの作成
npx create-react-app my-awesome-app
cd my-awesome-app2. 開発サーバーの起動
npm startブラウザで http://localhost:3000 にアクセスすると、Reactのデフォルトページが表示されます。
スタイリングの設定（Tailwind CSS）
React開発をより効率的にするために、Tailwind CSSを導入しましょう。詳しい設定方法は、以下の記事を参考にしてください。
Tailwind CSSを使うことで：
- 高速な開発：CSSを書かずにスタイリング
- レスポンシブ対応：簡単にモバイル対応
- 一貫したデザイン：統一感のあるUI
サンプルアプリの作成
実際にWebアプリを作ってみましょう。今回は、簡単なタスク管理アプリを作成します。
src/App.js を編集：
import React, { useState } from 'react';
import './App.css';
function App() {
const [tasks, setTasks] = useState([]);
const [inputValue, setInputValue] = useState('');
const addTask = () => {
if (inputValue.trim() !== '') {
setTasks([...tasks, { id: Date.now(), text: inputValue, completed: false }]);
setInputValue('');
}
};
const toggleTask = (id) => {
setTasks(tasks.map(task =>
task.id === id ? { ...task, completed: !task.completed } : task
));
};
const deleteTask = (id) => {
setTasks(tasks.filter(task => task.id !== id));
};
return (
<div className="min-h-screen bg-gray-100 py-8">
<div className="max-w-md mx-auto bg-white rounded-lg shadow-md p-6">
<h1 className="text-2xl font-bold text-center mb-6 text-gray-800">
タスク管理アプリ
</h1>
<div className="flex mb-4">
<input
type="text"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
onKeyPress={(e) => e.key === 'Enter' && addTask()}
placeholder="新しいタスクを入力..."
className="flex-1 px-3 py-2 border border-gray-300 rounded-l-md focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
<button
onClick={addTask}
className="px-4 py-2 bg-blue-500 text-white rounded-r-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
>
追加
</button>
</div>
<ul className="space-y-2">
{tasks.map(task => (
<li key={task.id} className="flex items-center justify-between p-3 bg-gray-50 rounded-md">
<div className="flex items-center">
<input
type="checkbox"
checked={task.completed}
onChange={() => toggleTask(task.id)}
className="mr-3"
/>
<span className={task.completed ? 'line-through text-gray-500' : 'text-gray-800'}>
{task.text}
</span>
</div>
<button
onClick={() => deleteTask(task.id)}
className="px-2 py-1 bg-red-500 text-white rounded text-sm hover:bg-red-600"
>
削除
</button>
</li>
))}
</ul>
{tasks.length === 0 && (
<p className="text-center text-gray-500 mt-6">
タスクを追加してみましょう！
</p>
)}
</div>
</div>
);
}
export default App;
Firebase Hostingの設定
1. Firebaseプロジェクトの作成
Firebase Console での作業：
- Firebase Consoleにアクセス
- 「プロジェクトを作成」をクリック
- プロジェクト名を入力（例：my-awesome-app）
- Google Analyticsは不要なので無効にして続行
- プロジェクトが作成されるまで待機
2. Firebase CLIのインストール
npm install -g firebase-tools3. Firebaseにログイン
firebase loginブラウザが開くので、Googleアカウントでログインしてください。
4. Firebaseプロジェクトの初期化
プロジェクトディレクトリで以下を実行：
firebase init hosting以下の質問に答えてください：
- プロジェクトを選択： 先ほど作成したプロジェクトを選択
- 公開ディレクトリ：
buildと入力 - シングルページアプリ：
yと入力 - GitHub連携： 今回は
Nと入力
アプリのビルドとデプロイ
1. 本番用ビルド
npm run buildこのコマンドを実行すると、buildディレクトリが作成されリリース用ファイルが出力されます。
2. デプロイの実行
いよいよ、あなたのアプリを世界に公開しましょう！
firebase deployデプロイが完了すると、以下のような形式のURLが表示されます：
Hosting URL: https://your-project-id.web.appこのURLにアクセスすると、あなたが作ったタスク管理アプリが動いているのを確認できます！
無料プランの制限と実用性
Firebase Hosting によるホスティングサービスも使えて、ドキュメント型 NoSQL のデータベースである Firestore も以下の範囲で利用できます。
マイクロなものを作る分なら困りません。
Spark プラン（無料）の制限
- ストレージ： 1GB
- 転送量： 月10GB
- 独自ドメイン： 対応
- SSL証明書： 自動対応
実際にどのくらい使える？
一般的な個人サイトやポートフォリオサイトなら、無料プランで十分すぎるほど使えます。月間数万ページビューでも問題ありません。
便利な機能の追加
Firebase Firestore
データベース機能を追加したい場合：
Firebase Realtime Databaseからデータを取得します。
プッシュ通知
Firebase Cloud Messagingを使えば、プッシュ通知も簡単に実装できます。
まとめ
ReactとFirebase Hostingを組み合わせることで、無料で高品質なWebアプリケーションを爆速で作成・公開することができます。
この組み合わせのメリット
- 開発速度：フロントエンドに集中できる
- コスト：無料で始められる
- スケーラビリティ：Googleの強力なインフラを活用
- 学習コスト：豊富な情報とコミュニティ
ReactとFirebaseを使えば、プログラミング初心者でも本格的なWebアプリケーションを無料で作成・公開できます。
サーバー管理の知識がなくても、たった30分でインターネット上にあなたのアプリを公開することができるのです。
ぜひ、ReactとFirebaseでWebアプリを作成してみてください！
