2025年のアイデアソンででたアイディア: タイピングゲームを作るタイピングゲームを作ります．
本プロジェクトは3つのnpmパッケージ（npmコマンドが使えるディレクトリ）から構成されています．
frontendfunctionstest-client
また，npmパッケージ以外に，以下のディレクトリを含みます．
public
前提として，本プロジェクトはfirebaseでホスティング（世界に発信）されます．
functionsとpublicはfirebaseとつよい関わりがあります．
functionsはfirebase-functionsにデプロイされるソースコードを格納するためのnpmパッケージです．
firebase-functionsは，クラウド上でプログラムを実行するサービスです．
開発者はバックエンドの開発のためにこのパッケージのソースコード(src/**)を編集します．
このディレクトリに関する詳細はfunctions/README.mdを確認してください．
test-clientは一般公開されることはありません．
開発者はfunctionsパッケージで実装した機能をユーザの立場としてテストしたいときにこのパッケージを編集，利用します．
frontendはユーザの手元で実行するプログラム，およびユーザに直接配信されるコンテンツを格納を格納するためのnpmパッケージです．
ただし，このパッケージ自体が直接ユーザに配信されるわけではなく，ビルドを行って，publicに配信するコンテンツ・プログラムを配置します．
開発者はフロントエンドの開発のためにこのパッケージのソースコード(src/**)を編集します．
このディレクトリに関する詳細はfrontend/README.mdを確認してください．
publicはfirebase-hostingにデプロイされるソースコードを格納するためのディレクトリです．
publicとfrontend/publicは別物であることに注意してください．
publicに配置されたファイルはそのままユーザの手元に届きます．
publicはfrontendから自動で生成されるため，開発者がこのディレクトリを直接編集することはありません．
以下の手順を必要に応じて実行します．
-
リポジトリを最新にする．
git pull origin main -
フロントエンドの自動ビルドを有効化する.
cd frontend && npm run build:watch -
バックエンドの自動ビルドを有効化する．
cd functions && npm run build:watch -
firebaseのエミュレータを起動する．
firebase emulators:start
手順2から4はlaunch_local_server.shにスクリプトとしてまとめてあります．
すべての手順を位置から順番に実行しなければならないわけではありません．たとえば，すでにリポジトリをクローンしてある場合は新たにクローンする必要はありません．
かわりに，git pull origin mainを実行してローカルリポジトリ（手元の作業環境）を最新の状態に更新してください．
gitをインストールする．(詳細略)githubに公開鍵を登録する．(詳細略)- リポジトリをクローンする．ターミナルを開いて，
git clone git@github.com:jack-app/meidaisai2025D.gitを実行する． - 自分の名前のブランチを作る．
git branch <あなたの名前> - 先に作ったブランチに移動する．
git switch <あなたの名前>
このまま，権限が正しく設定されているか確認します．
- リモートリポジトリに新しく作ったブランチを反映する．
git push origin <あなたの名前>
6.で失敗した場合のヒント:
- githubへのssh-keyの登録
git config user.name <githubのユーザ名>およびgit config user.email <githubのメールアドレス>- リモートリポジトリ"meidaisai2025D"にあなたが追加されていない．
npmをインストールする(すでにインストールしてある場合は不要)．node.jsをインストールすれば自動でインストールされる．ここからインストール可能です．- プロジェクトルートに移動する．
- カレントディレクトリをfunctionsにする. ターミナルを開いて，
cd functions - 必要なライブラリをインストールする．
npm install - プロジェクトルートに戻る．
cd .. - カレントディレクトリをtest-clientにする．
cd test-client - 必要なライブラリをインストールする．
npm install
1.について，
- プロジェクトルートとは，
meidaisai2025D/のことです． - meidaisai2025DフォルダでVSCodeを開いて統合ターミナルを開くとすでにプロジェクトルートにいる状態からスタートします．
- ファイルエクスプローラでmeidaisai2025Dフォルダをひらいて，”ここで端末を開く”をクリックしてもプロジェクトルートに居る状態でターミナルが起動します．
firebase-toolsを動作させるためにJDK(ver11以上)が必要なため，インストールします． どのようにインストールしてもよいですが，たとえばこの記事を参考にしてください．
npmをインストールする(すでにインストールしてある場合は不要)．node.jsをインストールすれば自動でインストールされる．ここからインストール可能です．- ターミナルをひらいて，
npm i -g firebase-toolsでfirebaseコマンドをインストールする． firebase --versionでfirebaseコマンドがインストールできたことを確認する．
ここから，firebaseコマンドが正しくインストールできたかを確認します．
- カレントディレクトリをfunctionsにする.
cd functions - TS->JS．
npm run build - プロジェクトルートに戻る．
cd .. - firebaseにログインする．
firebase login - firebaseのエミュレータを起動する．
firebase emulators:start - "Issues? Report them at https://github.com/firebase/firebase-tools/issues and attach the *-debug.log files."と表示されるまで待つ．
- 別のターミナルを開いて，プロジェクトルートに移動する
- test-clientをカレントディレクトリにする．
cd test-client npm testを実行する．- "PASS"と表示されることを確認する．（エミュレータが正しく動作していない場合，"FAIL Tests failed."と言われます．）
以下は起動したテストやエミュレータを終了する手順です．（バツボタンでターミナルを閉じても構いません）
- テストの終了: テストを実行したターミナルを開きながら"Q"をおす
- エミュレータの終了: エミュレータを起動したターミナルを開きながら"Ctrl+C"(Macの場合はわからないです．すみません．)
mainブランチにプルリクエストを出して，@えんぴつ にデプロイを依頼してください． プルリクエストの出し方がわからない場合は @えんぴつ に連絡してください．
開発者以外が開発したアプリを利用できるようにする作業です．
以下の作業は基本的には @えんぴつ が行いますが，googleアカウントをプロジェクトに登録できれば他の方もデプロイ作業を行えます． アカウントの追加が必要になった場合は @えんぴつ に連絡してください．
実際のデプロイ手順は次の通りです．
- firebaseにログインする．
firebase login - バックエンドの依存パッケージを最新にする．
cd functions && npm install - バックエンドをビルドする．
npm run build && cd .. - フロントエンドの依存パッケージを最新にする．
cd frontend && npm install - フロントエンドをビルドする．
npm run build && cd .. - デプロイする
firebase deploy
手順2以降はdeploy.shにスクリプトとしてまとめてあります．
デプロイが済んだら，" https://metype-ffe25.web.app/ "に変更が反映されます． ブラウザにキャッシュが残っていて変更内容が反映されないことが往々にしてあります． その場合，キャッシュクリアを行ってください． Chromeの場合はキャッシュクリアしたいページを開きながら"Shift+F5"でできます．
- コードを編集したら頻繁に保存してください．"Ctrl+S"で保存できます．
- VSCodeを使用している場合，"Ctrl+J"で統合ターミナル（ターミナルの一種）を開けます．
- 統合ターミナルの右上のプラスボタンで新しくターミナルを開けます．
- スクリプトはコマンドプロンプトから実行します．たとえば，
launch_local_server.shを実行したいときは，カレントディレクトリをプロジェクトルートにして，./launch_local_server.shと入力し実行します．