Firebaseセットアップ手順
Firebaseコンソールへアクセス
ブラウザで「Firebase」と検索し、Firebaseコンソールを開きます。
まだアカウントを持っていない場合は、メールアドレスとパスワードで新規登録します。
新しいプロジェクトの作成
「プロジェクトの追加」ボタンを押し、プロジェクト名（例: "ブログ"）を入力して「続行」をクリックします。
Googleアナリティクスを有効にするか選択しますが、今回は無効にして「プロジェクトを作成」を選びます。
Webアプリの追加
プロジェクトが作成されたら、ウェブのタグをクリックし、アプリ名を設定します（ホスティングはオフにします）。
アプリを登録して、表示されるコマンドやファイルは後で使いますが、今は無視します。
認証設定
「Authentication」を選び、「始める」ボタンを押します。
Googleログインを有効にし、使用するメールアドレスを選択して保存します。
Cloud Firestoreの設定
「Cloud Firestore」をクリックして、「データベースの作成」を選択します。
本番モード（プロダクションモード）を選び、ロケーションを選択して「有効にする」ボタンを押します。
プロジェクト設定
プロジェクトの設定画面で、SDKの設定と構成をコピーします。
VSCodeを開き、Firebaseモジュールをインストールします。
Firebaseのインストール
コマンドラインでFirebaseモジュールをインストールします。
初期化ファイルの作成
firebase.jsというファイルを作成し、コピーした設定を貼り付けます。
Firebaseの認証とFirestoreをインポートし、初期化コードを記述します。
エクスポート
認証とデータベースの初期化が完了したら、それらをエクスポートして他のファイルで使えるようにします。
注意点
Firebaseのバージョンが更新されると、書き方が異なる場合があるので、公式ドキュメントを確認することをおすすめします。
この手順でFirebaseの基本的なセットアップが完了します。次の動画では、FirebaseとReactの連携を進めていきます。
動画の内容、しっかり理解できました！ルーティング設定やナビゲーションバーの作成、そしてCSSスタイリングに関するポイントがたくさんありましたね。以下に、動画で説明された内容の要点をまとめます。
1. ルーティング設定の概要
ルーティング設定は、特定のURLに対してどのコンポーネントを表示するかを決めるものです。例えば、ログインページやホームコンポーネント、投稿記事を表示するために使います。
2. ライブラリのインストール
react-router-domをインストールします。このライブラリを使うことで、簡単にルーティング設定ができます。
bash
コードをコピーする
npm install react-router-dom
3. コンポーネントのインポート
必要なコンポーネントをインポートします。具体的には以下のもの：
javascript
コードをコピーする
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
4. ルーティングの設定
Routerコンポーネントでアプリ全体を囲み、Routesコンポーネントで個々のルートを設定します。
例えば、ホームコンポーネントを表示する場合は以下のようにします。
javascript
コードをコピーする
} />
5. コンポーネントの作成
HomeコンポーネントやCreatePost、Login、Logoutなどのコンポーネントを作成し、それぞれのURLパスに関連付けます。
6. ナビゲーションバーの作成
ナビゲーションバーは別のコンポーネントとして作成し、リンクを設定します。
Linkコンポーネントを使用して、各ページへの遷移を実現します。
7. CSSスタイリング
ナビゲーションバーのスタイリングを行い、見た目を整えます。以下は主なCSSプロパティの説明：
display: flex: 要素を横並びにする。
justify-content: center: 要素を中央に寄せる。
align-items: center: 縦方向の配置を中央にする。
background-color: 背景色を設定。
text-decoration: none: リンクの下線を消す。
8. ホバーエフェクト
リンクにホバーした際の色変化などのエフェクトも設定します。
これらのポイントを押さえておけば、Reactのルーティングとスタイリングがしっかり理解できるはずです。
ログインページの作成
雛形の作成:
ログインページを簡単な文字とボタンだけの構成にする。
「ログインして始める」と「Googleでログイン」ボタンを追加。
ポップアップでのGoogleログイン:
Firebaseを利用して、Googleのログイン機能を実装する。
ボタンを押すとポップアップが表示され、アカウントを選択してログインできる。
Firebaseの設定
必要な変数の用意:
os（認証に関すること）とgoogleProvider（Googleのプロバイダー）を使用する。
イベントトリガーの設定:
ボタンがクリックされた時の処理をonClickで定義し、loginWithGoogle関数を呼び出す。
公式ドキュメントを参照:
FirebaseのドキュメントでGoogleログインの実装方法を確認。
実装の具体的な流れ
ボタンのクリック処理:
signInWithPopupメソッドを使用してポップアップを表示し、ログイン処理を行う。
非同期処理のため、async/awaitを使う。
ログイン状態の管理:
ログインしたかどうかの状態を管理するため、useStateを利用してisAuthという状態変数を作成。
ローカルストレージにログイン情報を保存。
リダイレクトの設定:
ログイン成功後、自動的にホームコンポーネントに遷移するようにuseNavigateを使用。
確認と動作チェック
ログイン処理の確認:
Googleでログインボタンを押してアカウントを選択すると、コンソールにユーザー情報が表示される。
ログイン情報がローカルストレージに保存され、ページリロード後も保持される。
リダイレクトのテスト:
ログイン後、ホームコンポーネントに正しく遷移するか確認。
次に、ログアウト機能を持つReactコンポーネントを作成します。
1. ログアウトコンポーネントの作成
ログアウトの機能を持つコンポーネントを作成するためには、以下の手順を踏みます。
コンポーネントの作成: 既存のログインコンポーネントをコピーして、ログアウトコンポーネントを作成します。
コンポーネント名や関数名を Logout に変更します。
必要に応じて、ログアウトのボタンを作成し、クリック時の動作を定義します。
ログアウト処理の実装: Googleのサインアウト機能を利用します。
import { signOut } from "firebase/auth"; // Firebaseのサインアウトをインポート
const handleLogout = async () => {
await signOut(auth); // サインアウト処理
localStorage.clear(); // ローカルストレージのクリア
setIsAuth(false); // 認証状態をfalseに
navigate('/login'); // ログインページにリダイレクト
};
2. ログイン状態の判定
ログインしているかどうかを判定するために、isAuthという状態を使います。
ナビゲーションバーでの切り替え: Navbar.jsなどで、isAuthを使ってボタンの表示を切り替えます。
{isAuth ? (
<LogoutButton onClick={handleLogout} />
) : (
<LoginButton />
)}
3. 確認とデバッグ
実装が完了したら、実際にアプリケーションを起動して、以下を確認します。
ログイン状態に応じてボタンが正しく切り替わるか
ログアウトボタンをクリックすると、ユーザーがログアウトされ、リダイレクトされるか
ローカルストレージがクリアされているか
このような流れで進めていくと、ログアウト機能の実装がスムーズに進むと思います。