Vite with Biome on Devcontainer

環境

• Ubuntu on WSL2
  • Docker
• VSCode
  • Dev Containers，Remote Development拡張機能をインストール

参考：Dev Container on WSL2で開発環境構築

プロジェクトの開発方法

初期設定

1. VSCodeをインストールし，上記を参考に，VSCode内でDev Containers，Remote Development拡張機能をインストール
2. このリポジトリをクローンする（WSL上でgit clone https://github.com/yif11/Team2.gitする）
3. WSL上でTeam2直下に移動（cd /path/to/Team2/）し，code .してVSCode上でプロジェクトを開く
4. VSCode画面右下のReopen In Containerをクリックし，DevContainer（仮想環境）で開く
5. Ctrl + @のショートカットキーでコンソールが開くので，そこでnpm initコマンドを入力（必要なライブラリがインストールされる）

開発手順

このサイト（https://zenn.dev/ynakashi/articles/1658c90cc3b673）を参考にしてください
GUIでの操作をする際は，masterブランチではなく自分のブランチであることを確認してから作業するようにしてください
不明点があればお互い相談し合いましょう
触るのは基本的にsrcディレクトリ以下だと思います

プロジェクトの実行方法

ターミナルでnpm run dev -- --hostをするとVSCode画面の右下にOpen In Browserが出るため，それをクリック

ディレクトリ構造

• index.html: Webページのルート
• src: プロジェクトのコード（設定ファイル以外のコード）を格納
  • main.tsx: index.htmlから呼び出すページ
  • App.tsx: main.tsxから呼び出すコンポーネント
  • index.css: Tailwind CSSを使う宣言を記述

使っているライブラリ・フレームワーク

Vite

• フロントエンドのビルドツール
• Reactプロジェクトのテンプレートを作成

Biome

• コードを整形してくれる
  • ESLint + Prettierの代替ツール
  • リント + フォーマットツール
  • ファイルを保存したときに自動で実行されるようにしている（.vscode/settings.json）

Tailwind CSS

.cssファイルを用意せず，HTMLのクラス要素に直接スタイルを当てるためのフレームワーク

設定ファイル群

.vscode/settings.json

• タブサイズをスペース2個分に指定

.npmrc

npm install [library]したときに，自動でバージョン固定オプション--save-exactを追加するように指定

.devcontainer/devcontainer.json

• devcontainerの設定ファイル
• Node v22とGitHub CLI（GitHubの便利ツール），Biomeを自動でインストールするように指定

biome.json

Biomeの設定ファイル

GeminiAPIの取得と設定

このプロジェクトで Gemini API を利用するには、各自で APIキー を取得し、.env ファイルに設定する必要があります。

Gemini APIキーの取得方法

1. Google の AI Studio にアクセス
2. Google アカウントでログイン
3. 「API キーを作成」ボタンをクリック
4. 表示された API キーをコピーする

.env ファイルの作成と設定

プロジェクトルートに .env ファイルを作成し、以下の内容を追加してください： VITE_GEMINI_API_KEY=ここに取得したAPIキーを貼り付ける VITE_GEMINI_API_URL=https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-pro:generateContent