はじめに
JISOUスクールの課題として、AI使わずほぼ自力でReactを使ってアプリを作成しました。
めちゃくちゃシンプルな学習記録アプリです。
課題を通して改めて自走しながら得られた気づきや学びを残していきます。
※毎度毎度、Viteを使った環境構築方法を忘れるのでメモの意味もこめて。
@ktdatascience さんのこちらの記事を参考にさせていただきました。
▼気づき・学び
- AIをなるべく使用せず開発することで、現在主流のAIバイブコーディングではできない、いろいろ遠回りしながらいろんなエラーに出会うことができた
- そのため、公式ドキュメントをしっかり読んだり、エラー内容を理解して解決策を考える経験ができた
- 趣味で開発するくらいなら、正直AI使って作りたいものをさっと作ってもらうのもありかも知れないけど、仕事としてやっていくなら、「なぜこう動いているか？」みたいな根拠まで理解していた方が、技術選定や提案の幅も広がるんじゃないかと感じた（※個人的な考え）
1. 開発環境構築
VSCodeで空の作業ディレクトリを用意して、以下を実行します。
事前にnode, npmがインストールされている前提です。
よく忘れる魔法のコマンド
npm create vite@latest study-log-react
以下、Vite + React開発のための選択
? Select a framework:
> React
※今回はJavaScriptで開発(いずれTypeScriptで開発したい)
? Select a variant:
> JavaScript
linter は伝統のESLintで(OxLintの方が速いらしいのでそっち使ってもよかったかも)
? Which linter to use?
> ESLint
インストール実行
? Install with npm and start now?
> Yes
これで開発準備はできました。
以前StackBlitzで実装した以下の簡易な学習記録アプリのソースコードをVSCode側にコピペしてから本番です。
2. データ永続化のためにSupabaseを導入
簡単にDB用意できるSupabaseを使用します。
- サインインして
Start your projectをクリック
-
New ProjectからSupabase プロジェクトを作成
- プロジェクトができたら、左側メニューの「Table Editer」→「Create a table」をクリック
- Name は
study-record、Columnsは以下のような感じで用意する
- とりあえず適当にぽちぽちして何個かデータを作成
- Supabaseで登録したデータを取得して画面に表示するために、Supabaseクライアントまわりを設定していく
- 公式ライブラリをインストール
npm install @supabase/supabase-js
- supabaseライブラリを使って、もろもろ実装
import { createClient } from "@supabase/supabase-js"
// 初期設定
export const supabase = createClient(
import.meta.env.VITE_SUPABASE_URL,
import.meta.env.VITE_SUPABASE_PUBLISHABLE_KEY,
)
// 登録されてるデータを全て取得して返す
// ※エラーの場合はいったんログだけ出して空データを返しておく
export const getAllTodos = async () => {
const { data, error } = await supabase.from("study-record").select("*")
if (error) {
console.log("getAllTodos error: ", error)
return []
}
return data
}
// 受け取った1件のデータを永続化する
export const insertTodo = async (title, time) => {
const { data, error } = await supabase
.from("study-record")
.insert({ title: title, time: time })
.select()
if (error) {
console.log(error)
}
return data
}
// 受け取った1件のデータを削除する
export const deleteTodo = async (id) => {
const { data, error } = await supabase
.from("study-record")
.delete()
.eq("id", id)
.select()
return data
}
-
.env.localを用意して、Supabaseのキーを環境変数を設定
記事の投稿日によっては、画面が古かったり設定値まで変わってたりでここも苦労しました。
一番は公式Docを見るのが早かったのですが、現時点（2026.8.11）設定方法を残しておきます。
VITE_SUPABASE_URL
Project Settings -> General -> Project IDの内容を、https://xxxx.supabase.coのxxxxに置き換えて設定する。
VITE_SUPABASE_PUBLISHABLE_KEY
Project Settings -> API Keys -> Publishable keyの欄を入力
これでSupabaseの取得処理や永続化処理が使えるようになる。
3. Firebaseへのデプロイ
デプロイ方法をいろんな記事探してたけど、やり方が古かったり、うまくいかないことが多かったです。
現時点（2026.8.11）では、firebase init hosting:githubを使用してfirebaseコマンドでGithub認証するのが一番楽なやり方だと思います。
※参考記事
4. 自動テスト（CI）作成
意外にここでめちゃくちゃ苦労しました。
react-testing-libraryを使って画面をレンダリングしてテキスト入力だったりボタンクリック動作を検証できるんだけど、非同期処理で要素が現れなかったり、複数ある同じボタン（各記録の削除ボタンとか）をどうやって特定するか？とか、かなり苦戦しました。
※CI作成の苦戦の記録：
※参考記事：