React x Firebase のプロジェクトをセットアップする手順
もう何度かやってるけど、たまに手順が曖昧になってしまうので、備忘録。
今回は、新しいMacBookを買い替えたので、CLIのインストールからやらんとあかん。
最初にnode.js/npm/Gitはマシーンにインストールしておく。
1, Vite で React App を作る。
VS Codeからプロジェクトディレクトリを作り、下記コマンドでプロジェクトの初期化。
Viteは、create-react-app より全然高速で使いやすい。
npm create vite@latest
Dependencyのインストール
npm install
2, Firebase CLI のインストール
npm install -g firebase-tools
今回はパーミションエラーが出たので、Macのターミナルから
brew install firebase-cli
Firebaseにログインして、IDEからFirebaseに繋げる
npx firebase login
3, Firebase Project のセットアップ
Firebasenのコンソールから、プロジェクトを制作
今回は、Authentication/Firestore/Storage を使うので、それらをコンソール上で設定
4, Firebase Projectをローカル側で制作
VS Codeに戻って、Firebaseプロジェクト を初期化
firebase init
プロンプトに従って必要事項を入力すると、色々とFirebaseのディレクトリやファイルが生成される
5, Git を初期化
git init
git add .
git commit -m "Initial commit"
あとは、Githubとプロジェクトを繋いでおく
git remote add origin https://github.com/your_git_page/your_repo.git
git branch -M main
git push -u origin main
6, プロジェクトをレビュー
Viteのrunスクリプトを走らせて、ブラウザで確認
npm run dev
デフォルトの初期画面が表示されたらオーケー。
というわけで、１０分ほどあれば、Reactフロント／Firebaseバックエンド のアプリの開発をスタート出来る。
あとはコードを書いていくのみ。
付録
というわけで、リストをランダムに表示するだけの超シンプルなアプリをReactとFirebaseで作ってみました。
最近外国人に日本語を教えるグループレッスンを始めたんだけど、１０人ほどの生徒にランダムにあてたり、適当にグループ分けしたりするのって、意外と難しくて、名前を放り込んでガラガラポンでリストを生成してくれるようなメチャシンプルなアプリがあればなあと思って作ってみましたよ。