【体験談】TodoリストをClaude Code × SupabaseでDB化したら、モダンとレガシーの差を痛感した。
こんにちは。あやおり子です。
以前、WordPressサイト制作者がReact.jsでTodoリストを作るまでの話を書きました。
今回はその続きとして、Supabaseを使ってTodoリストをDB化するところまでやりましたので、その体験談をまとめました。
また、今回はChatGPTやGeminiではなく、Claude Code も使ってみたので、その感想も一緒に書いていきます。
- 前回の記事を読んで「API連携どうすればいいんだろう」と思っていた人
- Supabaseが気になっているが何から始めればいいかわからない人
- Claude Codeが実際の開発でどう役立つのか知りたい人
- AIを使って作品を作ってみた体験談を探している人
実際に作ったToDOリストはこちらで確認ができますので、よかったらご覧ください。
【選定理由1】どうしてSupabaseにしたのか
元々、LaravelでAPIサーバーを作ろうかと考えていました。
しかし、このブログを運営しているConoHaサーバーは今月末で一度解約する必要がある都合上、移転に手間がかかることが想定されました。
そこでAIに相談したところ、microCMSのようにAPIサーバーとして外部にDBを保持できるサービスがあるとのことで、「Firebase」か「Supabase」の二択を提示されました。
「Firebase」はReact.jsを調べていると必ず一緒に出てくる単語でしたので、名前を聞いたことがありました。しかし、NoSQLという構文のため、1から勉強する箇所が出てくる可能性があるとのこと。
一方「Supabase」はSQL構文そのままなので、基本情報で学んだ内容の延長線上でデータベースを作れるとのこと。
今回、すでにデータを一つにまとめた.jsonファイルを作っていたことから、DBの構築後のイメージは出来上がっていました。
それなら「Supabase」の方がとっつきやすそうだなと思い、「Supabase」で作ることに決めました。
【選定理由2】どうしてClaudeを使ってみたのか
これまで、ChatGPTとGeminiを中心に使ってきましたが、次第にしっくりこない場面が増えてきた印象がありました。
Chat GPTも、アップデートで性格が選択できるようになってから、逆に「ユーザーが求めてそうなこと」に寄りすぎて、以前みたいな自然なやりとりの感じが薄れたように感じていました。
一方でGeminiだと、文章の言い回しにおかしいところがないか聞きたいだけなのに、余計な文章を追加されてしまうことにモヤモヤ。
だから、Geminiの性格でChat GPTのような回答を得たいと思う瞬間が度々ありました。
そんな時に、「Claude」の存在をAI比較サイトで知りました。
- 日本語の文章作成に強い
- プログラミングも得意
との特徴があるとのことで、私にピッタリなんじゃないかと思い、使ってみることにしました。
実際にやったこと
（1）初めは通常のClaudeのチャットを使ってアニメーションの実装
Todoリストを作成していて、縦長なのでどこに項目が追加されたか分かりにくいのが不便なように感じていました。
そのため、リストを追加したら追加されたリストまで自動でスクロール（scrollIntoView関数）される挙動と、追加されたリストが点滅するアニメーション（遅延でアニメーションに関するクラスを削除）をする挙動を追加したいと思いました。
実は、Next.jsでブログを作ってたり、基本情報を受けていたりして、最初にTodoリストを作ってから3ヶ月くらい時間が経っていました。
そのため、忘れているところが多く、言われるままに作りながらTodoリストの内容を思い出す作業が必要でした。
DOMの理解に苦戦
一番苦戦したのがDOM周り。
公式サイトのチュートリアルの項目では、「ADVANCED（上級）」と書いてあったので一旦スルーしていたのに、まさかここで出てくるとはと頭を抱えました。
jQueryはDOMを操作する作業がメインで、HTMLを書き換えるのでなるべく避けたい、という話を聞いたことがあります。
たしかに、今回はクラスをつけ外しすることでアニメーションを動かすので、HTMLを書き換える必要があるよねっていうことは理解できますが、じゃあDOMじゃないとできないことって具体的に何？というところまでは理解が及んでいませんでした。
踏ん張ってClaudeに質問して解説を読んでみるものの、しっくりくる理解ができず。。。修行不足です。
ライブラリを使って実装したら不具合勃発
また、リストを完了にしたらリストをフェードアウトするアニメーションを実装したいと思い相談したところ、react-transition-groupのライブラリがあることも教えていただいたので、実装。
CSSよりも簡単にできるかと思いきや、「findDOMNode is not a functionのエラー」が発生しパニック。Claudeいわく、React 19でfindDOMNodeが廃止されたため、nodeRefを使って直接DOM要素を渡す必要があるとのことで、言われるがまま追記し、何とかアニメーションをつけることに成功。とりあえず今のところ動いているのはいいのですが、果たして他の人に説明できるかは微妙です。。。
（2）DB接続もClaudeのチャットを使って実装するも、私は置いてけぼり。そして。。。
調べてみたところAWSのような従量制課金ではないと知ったため、Claudeに質問しながらSupabaseのアカウントを作成。
Supabaseを使ってみた感じ、SQLの表を作るのと同じ感覚でDB操作できたので、今回のToDoリスト以外でも使いやすそうに思いました。
そして、コーディング。Claudeで「SupabaseでDB接続したい」と伝えてコード丸っとをコピペしたら、「ここを変えたらいいよ」とサクサク教えてくれました。
とりあえず動いている実物がなければ始まらないと思い、言われるがまま実装し、動かすことに成功。
最初は、、データベースにアクセスできずにあたふた。Claude Codeに聞いてみたところRLS（Row Level Security）という、Supabaseの「誰がどのデータにアクセスできるか」を制御する仕組み（つまり設定しないとデータが外から丸見えになってしまう）で引っかかっていたようでした。初めは「個人ポートフォリオはRLS設定しなくてもいい」とアドバイスをいただいていたが、しばらく操作していたらエラーが表示され、RLSをちゃんと設定することに。Claude Codeがなければ実装できなかったと思う反面、本来私はSupabaseを触るようなレベルに達していないんだろうなぁとしみじみ。
途中、DBのIDが連番で自動登録がされるようになってなかったとのことで、指示されたSQLを打つことに。私はちょびっと知識があるので、ざっくりと大きな仕様変更ではないのはわかるのですが、SQL文を触ったことがない人にとっては、何やってるかわからないので本当に怖いだろうなぁと思いました。
そして、完了したものをGitにコミットしたとき、あることを思い出す。
言われるがままAPIキーを直接コードに書いていてコミットしたけど、
冷静に考えたらセキュリティ的にダメじゃん！！！
Next.jsでブログをやった時を思い出しながら、急いで.envファイルを作成してグローバル関数化してコミット。（もちろん、APIキーはリセット済み）
セキュリティリスクを逃れることができました。危なかった。。。
（3）リファクタリングをするためにClaude Codeを使ってみたら驚愕。
DB接続周りはさすがにもっと丁寧にやらなきゃダメでしょ！
と思い、モデル層(src/models/)に分離するリファクタリングをすることに。
うまいことヒントが欲しいなぁ、、、と思い、Claude のことを調べてみたところ、Claude Codeという別の機能があるらしい。
とのことでClaude Codeアプリをインストールしてみたところ、「コード」というタブがあるのを発見。
どれどれ、、、と思い、ローカルでファイルを選択。
ファイルを直接編集させられるのは嫌だな、、、と思ってたら、「プランモード」というものを発見。
プランモードで質問してみることに。
私「Supabaseに接続するモデルファイル作りたいです。」
Claude Code「…全体像が把握できました。目的は何ですか？」
私「コードを理解したい」
Claude Code「…では、現在のSupabase連携コードをモデル/サービス層に分離するリファクタリングを行い、それぞれの役割を明確にすることで理解しやすくする方針でプランを作ります。」
Claude Code「…作りました。プランを承認しますか？」
？！？！
私「ありがとう。（え、、、このままだと書き換えられる流れだよね、、、）
承認したら勉強にならないから自分で作った方がいいよね。」
Claude Code「それは良い考えだと思います。プランを作り直しました。このプランは「Claudeが実装する」のではなく、あなたが自分で実装するためのガイドとして使えます。詰まったらいつでもこのチャットで質問してください。」
あっぶね、、、、先に答えを見るところだった。
答えをそのまま教えるのではなく、どういう流れでやればいいか、丁寧にプラン表を作ってくれました。
その後、ひとつずつ関数を書いていって、都度Claude Code先生に質問しました。
こんな感じで1文ずつ丁寧に添削して教えてくれるので、初心者にはありがたい！
そして、慣れてきたところでリファクタリング終了。
私「これでOK！これからコミットするね！すごく助かったよ。ありがとう。」
そうさりげなく送ったら、差分を確認して想定外の修正がないことを確認した上で、Claude Code先生がコミットまで対応してしまい驚き。
私「コミットができるなら、マージはどうなんだろう」と思って半信半疑で聞いてみたら、マージもしっかりやってくれました。
感想
Supabaseを使ってみて、フロントエンドとバックエンドの差がなくなってきていることを実感
Supabase使ってみて、フロントエンドとバックエンドの差がなくなってきているように感じました。
昔はフロントエンドといえば、HTMLなどで見た目を作る役割でしたが、これからは見た目はAIが土台を作ってくれるので、昔ほど時間がかかることはなくなりそうです。
一方で、データの出し入れもフロントエンド(React.js)でやることの一つになっているため、フロント側でもDBの構造を把握する必要があります。
そうなってくるとフロントエンドの人がSupabaseのようなサービスを使ってバックエンドも並行して構築していく流れになるのも当然だと思いました。
Claude Codeに手綱を持っていかれないように、気をつけながら使う必要性
Claude Codeすごく便利だなと思いましたが、AIに手綱を持っていかれないように、気をつけながら使う必要性を感じました。
特に、今回私が陥った”API周りの設定値をコミットした”事案のようなことが起こるので、セキュリティ関連はまだ人間が見張る必要があるように思いました。わかる人が使わないと、後で取り返しのつかなくなるので、大変なことになりそうです。
ClaudeはAIと雑談を交えながらコーディングしたい人に向いている
設定にもよるかもしれないが、他のAIとは違い一回のやりとりあたりの文字数が少ないので、一つの手順ずつ丁寧に教えてくれたのが好印象でした。
ちゃんと修正できていない時は、修正できるまで「修正しろ」と言ってくる発言は、他のAIでは見かけない流れでした。
違う話題を振ったら、その内容共感しつつ、「で、あの件はどうなりました？」と聞いてくるので、話題が逸れることがないのが強いので、私みたいにAIと雑談を交えながら仕事したい人に向いていると思いました。
今までスクールに入ってきた人が多いのが何となくわかった。
ここまで作ってみて確実に断言できるのは、Claudeがなかったらどこかしらに躓いて、最後までToDoリストを作りきれなかったということ。
私はプログラミング系のスクールには通ったことがないですが、普通の人は作ってみたらどこかしらで詰まるので、詰まった時にアドバイスしてくれる先生の存在って大事だったんだなぁと実感しています。
また、今後のAI活用前提の現場では、スクールの役割が変わってくるように思いました。
今までは、言語によって1から学び直すようなことも必要でしたが、今後は何かしらの言語を習得できていればAIが翻訳してくれるので、言語をたくさん覚える手間が少なくなります。
それより、言語の壁に囚われることのない、プログラミングする前提の基礎をどれだけ理解できているかの勝負になってくるように思いました。
Claudeのデメリットは上限があること
Claudeは、有料でも利用制限や1スレッドあたりのやりとり上限があるのが、他のAIと比べての大きなデメリットなように思いました。
脳死でAIの言うことを聞いて作業している状態だと、上限に達して作業が進まない場合も出てくるのではと思いました。
また、Claudeは気を許すと資料を作成したがるので、作成が続くとあっという間に上限に達してしまいます。
なので、Claudeには下記のように、ドキュンメントを作成しないように指示を追加する必要がありそうです。
・ファイル、ドキュメント、Artifacts は作成しないでください
・すべてプレーンテキストでチャット内に出力してください
・編集可能ファイル形式（doc, pdf, markdown化）も不要です
【まとめ】モダンとレガシーの差は想像以上に大きいのかもしれない
今回特に思ったのが、「モダンとレガシーの差は想像以上に大きいのかもしれない」ということ。
今回やったモダンなサイト制作は、ひたすら「今の時代やべー」「AIと共存するにはどうすればいいのか」と考えてばかりでした。
一方で、レガシーな環境では、私のように興味本位で最新のAIを触ってみた人が少ないため、この焦りが伝わりにくいだろうなと思いました。
特にJAVAとかを使うような大規模システムの構築では、情報流出禁止とかで、AI禁止の職場も多くあるという噂も聞きます。
このAIに対する焦りを持ってるかどうかで、仕事の向き合い方はかなり変わってくるだろうなと思いました。
