ReactとFirebaseで記事投稿アプリ作った感想 #1

## 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の連携を進めていきます。

:::note info
動画の内容、しっかり理解できました！ルーティング設定やナビゲーションバーの作成、そして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
コードをコピーする
<Route path="/" element={<Home />} />
### 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でログインボタンを押してアカウントを選択すると、コンソールにユーザー情報が表示される。
ログイン情報がローカルストレージに保存され、ページリロード後も保持される。
リダイレクトのテスト:

ログイン後、ホームコンポーネントに正しく遷移するか確認。


:::note info
次に、ログアウト機能を持つ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. 確認とデバッグ
実装が完了したら、実際にアプリケーションを起動して、以下を確認します。

ログイン状態に応じてボタンが正しく切り替わるか
ログアウトボタンをクリックすると、ユーザーがログアウトされ、リダイレクトされるか
ローカルストレージがクリアされているか
このような流れで進めていくと、ログアウト機能の実装がスムーズに進むと思います。