弱々エンジニアの生成AIを用いた開発 #5-2 (フロントエンド開発 環境構築その2)

前回のおさらい

前回やったこと

• 開発環境の共通化の為、OneDriveアカウントを作り同期設定
• GitHubアカウント作成 ～ プロジェクト作成とローカルへのCloneまで
• nvmでNode.jsのインストール

今回やること

• VSCodeポータブルの環境構築
• VSCodeとCodeiumの連携
• Firebaseを使うための設定

VSCode（ポータブル版）の環境構築

ポータブル版ダウンロードページ
上記ページの「Windows」の「.zip」で「x64」を選択しました
ZipファイルをOneDrive上にVSCodeフォルダを作って、その中に解凍しました

初期だと表示言語が英語になっているので
拡張機能で日本語化パックをインストールし、日本語化しておきます

※本来なら英語のままの方が良い気もしますが英語もできないので…
　拡張機能の追加については割愛 → こちらの記事様が参考になるかも

VSCodeとCodeiumの連携

そういや、CodeiumとVSCodeポータブルの連携方法って調べてなかったな…
AI君(Grok3)に聞いてみます

VSCodeとCodeiumの連携方法について要約

生成AI(Grok3)での出力です

VSCodeポータブルとCodeiumの連携方法

VSCodeポータブルでCodeiumのAIコード補完を利用するための手順を簡潔にまとめます。

要点

1. VSCodeポータブルの準備

• 公式サイトからVSCodeポータブルをダウンロードし、任意のフォルダに解凍。
• ポータブルモード用にdataフォルダを作成（設定・拡張機能を保存）。

2. Codeium拡張機能のインストール

• VSCodeポータブルを起動。
• 拡張機能（Ctrl+Shift+X）で「Codeium」を検索。
• 公式Codeium拡張機能をインストール。

3. Codeiumアカウントでログイン

• インストール後、右下の「Login」をクリック。
• ブラウザでGoogle/GitHub/メールでアカウント作成・ログイン。
• 「Visual Studio Codeを開く」をクリックしてVSCodeに戻る。

4. 動作確認

• コード入力時に補完候補（灰色テキスト）が表示 → Tabで確定。
• チャット機能は左メニューのCodeiumアイコンから「CHAT」タブで利用。

注意点

• インターネット接続：初回ログインや補完時に必要。
• プライバシー：機密コードはCodeiumのポリシーを確認。
• 日本語対応：英語プロンプトの方が精度が高い場合あり。
• ポータブル環境：dataフォルダの設定を確認し、USB速度に注意。

まとめ

VSCodeポータブルでも通常版と同様にCodeiumを簡単に導入可能。拡張機能のインストールとログインで、AIコード補完やチャット機能を活用できます。

---

とのことです

とりあえず、VSCodeのフォルダ配下に「data」フォルダを作っておきます

次に、Codeiumを使うにもアカウントを作らなきゃいけないっぽいので
アカウントを作っておきたいと思います

Codeium アカウント作成

アカウント作成完了したら、そのまま使う事もできるし
何かツールにプラグインでも使えるよーって画面が出てきます

VSCodeポータブルと連携させたいので、生成AIの手順にも書いてた通り
VSCode上の拡張機能でインストールして、ログインしておきます

とりあえず、こうなればインストール完了になったかな？と

※Japanese～ → 日本語化パック | Windsurf～ → Codeium

ちなみに
Codeium社が出しているコード生成AIツールが
「Windsurf」となっているらしいです

Firebaseを使うための設定

使ったことがないのでFirebaseについてもAI君に聞いてみます
そもそもどういう仕組みで動かすものなのか？

Firebaseを用いてログイン認証させる場合、どのような仕組みになっているのか要約して

生成AI(Grok3)での出力です

Firebaseを用いたログイン認証の仕組み

Firebase Authenticationを用いたログイン認証の仕組みを以下に要約します。

1. ユーザー認証の提供

Firebase Authenticationは、以下の認証方法をサポートしています：

• メールアドレス/パスワード
• SNSログイン（Google、Facebook、Twitterなど）
• 匿名ログイン
• 電話番号認証

2. クライアントサイドの統合

• アプリやウェブにFirebase SDKを組み込む
• ユーザーがログイン情報を入力
• Firebaseクライアントライブラリが情報をFirebase Authenticationサーバーに送信

3. トークンベースの認証

• 認証成功後、Firebaseは一意のIDトークン（JWT: JSON Web Token）を発行
• トークンはユーザーの身元を証明し、一定時間有効

4. サーバーとの通信

• クライアントはIDトークンを使用して、Firebaseのサービス（Realtime Database、Cloud Firestoreなど）やカスタムバックエンドと安全に通信
• サーバー側でトークンを検証し、アクセス制御を実施

5. セキュリティルール

• Firebaseのデータベースやストレージにセキュリティルールを設定
• 認証済みユーザーや特定の条件を満たすユーザーのみデータにアクセス可能

6. バックエンド処理

• ユーザー管理（登録、ログイン、パスワードリセットなど）を自動化
• 開発者はユーザー管理のためのサーバー構築が不要

7. マルチプラットフォーム対応

• iOS、Android、ウェブ、Unity、Flutterなど、さまざまなプラットフォームで一貫した認証機能を提供

まとめ

Firebase Authenticationは、簡単な統合、トークンベースの安全な認証、柔軟なセキュリティルールを通じて、効率的かつ安全なユーザー認証を実現します。

---

とのことなので、Firebaseを使えばユーザー管理はFirebase側に一任できるという事ですね
なんとも便利な世の中になったもんだ…

システム側としては

1. ログイン画面を準備
2. ユーザ情報をFirebaseに送信
3. 認証トークンが作られるのでそのトークンを使用して通信

という流れでどうもできるっぽいですね

そのためにはFirebaseのアカウントを作って、Firebaseでプロジェクトを作る必要があるみたいです

ということで作りましょう

Firebase Console

にアクセスし、アカウントを作成
そのあとプロジェクトを作成できる画面にいきましたので
CBITプロジェクトまで作成しました

こんな感じの画面になりました

プロジェクト毎に必要なものを設定するみたいですね
FirebaseはGeminiによるサポートを使えるみたいなので

ログイン認証の仕組みを作りたい。メールアドレスとパスワード or Googleアカウントで作りたい

と問い合わせした所

以下は生成AI(Gemini)の出力です

ステップ1：Firebaseプロダクトを選ぶ

メールアドレスとパスワード、およびGoogleアカウントでのログイン認証の仕組みを構築するというあなたのユースケースには、以下の3つのFirebaseプロダクトをお勧めします。

Firebase Authentication : これがあなたの主力です。ユーザーのサインアップとサインインにすぐに使えるサービスを提供し、メールアドレスとパスワード、Googleアカウントなどに対応しており、開発時間を大幅に節約できます。

Cloud Firestore : Authenticationがログインを処理する一方で、Firestoreは柔軟なNoSQLデータベースであり、ユーザープロファイル、設定、および認証されたユーザーに関連するその他のアプリケーションデータを保存するのに最適です。

Firebase Hosting : 新しいログインシステムを搭載したアプリケーションを公開するために、Firebase Hostingは、ウェブアプリをグローバルにデプロイするための高速で安全かつ簡単な方法を提供します。

ステップ2：コンソールまたはCLIを使用してFirebaseプロダクトを設定する

ステップ3：Firebaseプロジェクトにアプリを登録する

ステップ4：アプリのコードベースをFirebaseに接続する

---

以上ここまでGeminiの出力です

なんか、備え付けのGeminiだったのでもっとFirebaseのUIとかもつけて説明して
くれるものかと思ってたら、予想以上にドライな回答でした

とりあえずStep1のFirebaseプロダクト：Authenticationを設定しようと思います

構築の所のAuthenticationを押すと上記のような画面が表示されたので
ログイン方法を選択できそうです

今回は、メール/パスワード と Googleアカウントで認証できるようにしたいと思ってます

それぞれ

• メール/パスワードを選択し有効化
• Googleを選択し有効化(プロジェクト名と連絡先メールアドレスを入力)

を実施し、有効化できました
多分ここまでステップ２までの内容かなと

ステップ３のアプリを登録とあるので、プロジェクト画面に移動してアプリの登録を実施

• アプリの登録手順
  • ダッシュボードで「プロジェクトの概要」→「Webアイコン（</>）」をクリック
  • アプリ名 cbit-web
  • 「ホスティングも設定」にチェックを入れず、「アプリを登録」をクリック

これでアプリが登録できたので、API情報を抜き出します

こんな感じ(モザイク部分)に表示されているので

apiKey　～　appId に記載されている値を
.envファイルに入れて…
これでとりあえず、ログイン認証に関するAPI連携用のキーデータは作成できたかなと

後推奨されている

• Firebase Hosting
• Cloud Firestore

については後で必要だとは思うのですが…

一旦ログイン、ユーザ登録画面だけでもAIに作ってみてもらいます

とりあえず、今回はこんなところで
次回は

1. ログイン画面
2. ユーザ登録画面
3. ユーザ登録確認（FirebaseAuthentication上で）

を行っていきます