別の端末でも続きをやりたい。 でも、いまは1台に閉じている。
前回までで、あなたが育てている物は、壊しても戻せるところまで来ました。 Gitでセーブポイントを作り、大胆に改造できる入口に立った。 すると次に、たぶんこう思うはずです。
通勤の電車の中で、スマホでちょっと触りたい。 職場のPCで進めた続きを、家のPCで開きたい。 ところが、いまそれができません。 データが、最初に作った1台の端末の中だけに閉じているからです。
たとえば、私が一緒に進めている弱点ドリルなら、こうなります。 職場のPCで10問解いて、弱点が貯まった。 次の日、自宅のPCで同じドリルを開く。 すると履歴がまっさらです。 職場で解いた続きを、自宅で開けない。 毎日場所を変えて勉強する私たちには、これは地味に痛い。
ゲームを育てている人なら、スコアやセーブデータが1台に閉じている状態。 自分用のメモを育てている人なら、入力した記録が1台に閉じている状態。 題材は違っても、困りごとは同じです。 データが1台の中に閉じていて、どこでも続きができない。
この回が終わると、あなたの育てている物は「端末を変えるとデータが消える物」から「クラウドにデータが残って、どの端末からでも続きが開ける物」になります。
なぜ今日、データベースなのか
技術の名前から入りません。 困りごとから入ります。
いまの物は、ちゃんと動いています。 データを入力すれば残るし、画面にも出る。 ここまではできています。
でも、そのデータはブラウザの中だけに書いてあります。 だから端末を変えると消える。 さっきのドリルの例なら、職場で貯めた履歴が、自宅のPCではまっさらです。 ゲームならセーブが、メモなら記録が、別の端末では空っぽになります。
だから今日は、データの置き場所を端末の中から、どこからでも開けるクラウドに移します。 その置き場所がデータベースで、今日使う道具がSupabaseです。
データを永続化するデータベース。無料枠あり。鍵はサーバ側に隠します。
たとえるなら、こうです。 ブラウザ保存は、1台のPCに貼ったメモ。 そのPCの前でしか読めません。 データベースは、どこからでも開ける保管庫です。 職場でも自宅でもスマホでも、同じ記録を見にいける。 今日やるのは、メモを保管庫に引っ越す作業です。
今日のゴールと、任せ方
今日、AIにどこまで任せるか。 これを先に宣言しておきます。 今日は、真ん中に置きます。
何をデータとして保存するか。 これは自分で決めます。 AIには決めさせません。 あなたが育てている物で、本当に残したい項目はどれか。 この保存する欄を設計するのは、自分の仕事です。
ドリルの例で言えば、日付、分野、正解か不正解か。 この記録欄を、私が決めます。 電子カルテで、どの項目を記録するか決めるのと同じ感覚です。 ゲームならスコアと日時。 メモなら金額と用途と日付。 育てている物に合わせて、自分で決めます。
一方で、その保存する欄をデータベースのどこに、どうやってつなぐか。 この配線はAIに任せます。 配管はAIが得意なところです。
視点
今日の分担
保存する欄を決めるのは自分。データベースへの配線はAIに任せる。何を残すかは医療者の設計判断で、配管はAIが得意な作業です。この線引きが、安全と速さを同時に手に入れる鍵になります。
今日のゴールを一文で言います。 自分で設計した欄に、データがクラウドへ保存され、端末を変えても同じ続きから開ける。 これができたら今日は合格です。
ステップ1。1台に閉じていることを確認する
まず、いま何が困っているかを自分の目で見ます。
私のドリルなら、前回までの履歴はブラウザの中にあります。 1台目で問題を解く。 履歴が残る。 でも、別の端末を想定して開くと、その履歴は見えません。
これは、壊れているわけではありません。 置き場所が端末の中だから、当然そうなっています。 まずはこの事実を確認します。
手を動かす
自分が育てている物を開いて、いま残っている記録を見てください。
ドリルなら、履歴や点数。 ゲームなら、スコアやセーブ。 自分用の道具なら、入力した一覧。
そして、その記録がどこにあるかを考えます。 いまはクラウドではありません。 あなたの端末のブラウザの中です。
できたらの目印は、「これは1台に閉じている」と自分の言葉で言えることです。
ステップ2。保存したい項目を3つ書き出す
配線を頼む前に、自分の設計を先に固めます。
ここで一度、自分の手で試してください。 紙でもメモアプリでもかまいません。 あなたが育てている物で「保存したい項目」を3つ書き出してください。 書くのは3つだけです。
ドリルなら、解いた日付。 問題の分野。 正解だったか不正解だったか。 この3つです。
別の物なら、その物にとって残したい3つに置き換えてください。 ゲームならスコアと面と日時。 家計メモなら日付と金額と用途。 このように読み替えます。
なぜ先に自分で書くのか。 ここが、AIへの任せ方を真ん中に置く理由です。 保存する欄の設計を丸ごとAIに渡すと、AIは気を利かせて、名前やメールアドレスを入れる欄まで作ろうとすることがあります。 それを後で消すより、最初から自分で「この3つだけ」と決めて渡すほうが、安全で速い。
電子カルテの記録項目を、業者任せにせず自分で決めるのと同じです。
手を動かす
自分の物で、保存したい項目を3つだけ書いてください。
患者情報、名前、メールアドレス、職員番号、施設名は入れません。 医療を題材にするなら、残すのは一般化した学習データと、自分の点数だけです。
できたらの目印は、項目のリストが3つ、手元に並んでいることです。
ステップ3。Supabaseの保管庫を用意する
次に、データの置き場所を用意します。
ここで出てくるのがSupabaseです。 Supabaseは、アプリの裏側にデータベースを置くための道具です。 今日は細かい管理画面の操作を覚える回ではありません。 自分のデータを端末の外に置く、という考え方をつかむ回です。
実際には、Supabaseでプロジェクトを作り、保存先の表を作ります。 ドリルなら、履歴を入れる表です。 表の列は、さっき自分で決めた3項目だけにします。
実画面では、Supabaseの管理画面で保存先の表を見ます。 見たいのは、表の中に日付、分野、正解数のような列が並ぶことです。 名前や症例を入れる列は作りません。
手を動かす
Supabaseを使う場合は、保存先の表に必要な列だけを作ります。
分からなければ、次の文を貼って、AIに手順を聞いてください（右上のボタンでコピーできます）。
Supabaseに、このアプリ用の保存先を作る手順を、私の保存項目3つに合わせて教えてください。
保存項目は、ここに3つ書きます。
名前、メールアドレス、患者情報を入れる列は作らないでください。
「ここに3つ書きます」のところは、ステップ2で決めた自分の3項目に置き換えます。
できたらの目印は、保存先の表に、自分で決めた項目だけが並んでいることです。
ステップ4。3項目を、そのまま注文書にする
3つ書けたら、それをそのままAIへの注文書にします。 次の文を貼ります（右上のボタンでコピーできます）。
このアプリのデータを、ブラウザの中ではなく、Supabaseに保存するように変えてください。
保存する項目は、解いた日付、問題の分野、正解か不正解かの3つだけです。
名前やメールアドレスなど、個人を特定する欄は作らないでください。
これは診療の指示出しと同じです。 何を記録して、何を記録しないかを、注文書にはっきり書く。
別の物を育てている人も、形は同じです。 ドリルの3項目を、自分の3項目に置き換えるだけです。
しばらくすると、コードが出てきます。 保存先がSupabaseに切り替わり、データが表に並ぶ。 実際に何回か入力してみると、データがSupabaseのほうに記録されて、行が増えていくのが見えます。
でも、ここで終わりません。 AIが言ったから正しい、ではありません。 育てている人の目で見ます。
検証の三観点を当てます。 内容が正しいか。 使い方に合っているか。 安全か。
ステップ5。Supabaseに保存できたか見る
保存機能を足したら、画面を触って終わりではありません。 本当にデータベースに入っているかを見ます。
私のドリルなら、問題を数問解きます。 日付、分野、正解か不正解かが保存される。 Supabaseの表を見ると、行が増えている。 これが、端末の中ではなく、保管庫に記録されたという目印です。
ここで見るのは、コードではありません。 まずは結果です。 画面で解いた履歴と、Supabaseに並んだ行が一致しているか。 必要な3項目だけが保存されているか。 余計な個人情報の列が作られていないか。
手を動かす
自分が育てている物で、1件だけ記録を作ってください。
ドリルなら、1回解く。 ゲームなら、1回スコアを出す。 メモなら、ダミーの記録を1件入れる。
そのあとSupabase側を見て、1行増えているかを確認します。
できたらの目印は、画面で作った記録が、Supabaseの表にも同じように残っていることです。 患者情報や院内情報が混じっていないことも、ここで確認します。
ステップ6。鍵が直書きされていないか確認する
ここが今日の本番です。
コードの中を見てみると、危ないところが一か所残ることがあります。 Supabaseにつなぐための鍵、接続キーが、コードの中にそのまま書いてある。 直書きされている状態です。
鍵をコードに混ぜない。 この鍵が見えたままだと、もし将来このコードを人と共有したとき、鍵ごと渡してしまいます。 鍵は、サーバ側に隠さないといけません。
動いたから良し、で素通りすると、この鍵の直書きを見逃します。 そこを自分の目で見つけられるかどうか。 これが今日の筋トレです。
視点
動いたから良し、で素通りしない
鍵の直書きは、画面が普通に動いていても残ります。だから「動いた」では見つかりません。研修医の出した鑑別を、もっともらしいからと鵜呑みにせず確かめる。あれと同じ目を、コードにも向けます。
手を動かす
あなたの育てている物のコードを開いて、Supabaseの接続キーがコードの中に直書きされていないか、自分の目で確認してください。 長い英数字の文字列が、コードにそのまま貼ってあったら、それが鍵です。
見つかったら、AIにこう一つだけ頼んでください。
このSupabaseの接続キーをコードに直書きせず、サーバ側に隠してください。
やることは、隠す依頼を1回出すことです。
できたらの目印は、コードを見て、その鍵の文字列が見えなくなっていることです。 鍵が消えて、代わりに環境変数のような呼び出しに変わっていたら成功です。
頼んだあと、もう一度コードを見ます。 鍵がコードから消えて、サーバ側に隠れている。 これで、コードを人に見せても鍵は渡りません。
検証で見つけて、直す。 この一往復が今日の中心です。 動いたから良し、ではなく、危ないところを自分の目で見つけて潰す。 これは、私たち医師が普段やっている動作に近いです。 研修医の出した鑑別を、もっともらしいからと鵜呑みにせず確かめる。 あれと同じことを、コードに対してやっているだけです。
ステップ7。別の端末で同じ履歴が見えるか確かめる
最後に、本当に端末をまたげるか確かめます。
さっき1台目で入力したデータを、別の端末を想定した別画面で、同じアプリを開きます。 スマホで少し解いて、PCで同じ履歴を見る。 あるいは職場PCで解いて、自宅PCで続きを見る。
すると、さっき貯めたデータが、別の端末でもそのまま見えます。 ドリルの例なら、これまで解いた履歴が、スマホ画面とPC画面の両方に同じように並びます。 これが、置き場所をクラウドに移した果実です。
通勤中にスマホで少し。 自宅でPCで続き。 ぜんぶ一つのデータに貯まっていきます。
手を動かす
自分が育てている物を、別の画面で開いてください。 本当に別端末があればそれが一番です。 なければ、別ブラウザや別ウィンドウでも構いません。
1台目で作った記録が、別の画面でも同じように見えるかを確認します。
できたらの目印は、端末を変えても、同じ履歴が見えることです。 ドリルなら、日付、分野、正解数がそろっていること。 患者情報が一行も入っていないこと。 ここまで見て、今日の実装は合格です。
ここで一度、立ち止まって考える
手を止めて、二つの問いを一緒に考えます。
一つ目。 これは医療を題材にしている人向けの、いちばん大事な問いです。 ネット上に保存できるなら、いっそ実際の症例も記録しておけば便利では。 この誘惑は、必ず湧きます。
答えは、だめです。 絶対に入れません。 ここが今日の本丸です。
AIは、渡されたものが患者情報なのか、公開してよい一般知識なのか、自分では判断できません。 判断するのは人間の側の責任です。 便利さと引き換えに、ここだけは渡しません。
二つ目。 前回までのブラウザ保存で、別に困っていなかったけど。
1台しか使わないなら、ブラウザ保存で十分です。 無理にここまで来なくていい。 でも、通勤中はスマホ、自宅ではPC、という使い方をする人は、端末をまたいだ瞬間にデータが途切れて、もったいない。 複数の端末で毎日続けたくなったとき、ここに来る。 それが今日の出番です。
今日でどう育ったか
Before。 端末を変えるとデータが消えました。 1台目で進めた続きを、別の端末で開けませんでした。
After。 データがクラウドに保存されました。 別の端末で開いても、続きから出ます。 これを自分の手で動かして確かめたはずです。
この差分に名前をつけます。 端末をまたいで一つのデータができた。 あなたの育てている物が、いよいよ持ち歩ける道具になりました。
補足
今日持って帰るもの
保存する欄は自分で3つに絞り、配線はAIに任せる。そして鍵はサーバ側に隠す。データを端末の外に出すときは、便利さより先に「何を載せて、何を載せないか」を自分で決める。これが、持ち歩ける道具にするための線引きです。
卒業ゲート
今日の卒業条件は、三つです。
- 保存したい項目を、自分で3つに絞れた。
- Supabaseに保存され、別の画面でも同じ履歴が見える。
- 鍵がコードに直書きされていないことと、患者情報が入っていないことを自分で確認できた。
この三つができていれば、Supabaseの細かい操作を全部覚えていなくても大丈夫です。 今日ほしいのは、端末の外に置く感覚と、安全に置く線引きです。
今日の安全ライン
今日固有の安全ラインを、しっかり言います。 クラウド保存が解禁される回なので、ここは厚めにいきます。
一つ。 鍵はサーバ側に隠す。 今日、手を動かして直したとおりです。 接続キーをコードに直書きしない。 これは題材が何であっても共通です。
二つ。 これは医療を題材にする人向けです。 患者情報は入れない。 AIは、渡されたものが患者情報か公開情報か判断できません。 だから人間が、最初から入れない。
そして、守り方はいつもと同じです。 気をつける、ではなく、設計で塞ぐ。 保存する欄を、今日自分で設計したとおり、必要な3つだけにする。 名前やIDを入れる欄をそもそも作らない。 入れる場所がなければ、うっかりも起きません。
注意
クラウドに載せていいのは、知識と点数だけ
医療を題材にしているなら、クラウドに載るのは、一般化した知識と、自分の点数だけです。患者さんの情報は、この保管庫に一行も載せません。これは学習用なので、本番導入を考えるときは、必ず施設のルールを確認してください。
念のため、シリーズ共通の芯も置いておきます。 医療を題材にする場合、これは学習用です。 患者情報は入れません。 本番導入を考えるときは、必ず施設のルールを確認してください。
問い
つまずいたら
このレッスンの作業で起きがちな詰まりと、その抜け方です。
- 注文書を貼ったのにエラーが出て保存できない → 出てきたエラー文を、そのままAIに貼って「このエラーの直し方を教えてください」と聞く。鍵やパスワードは貼らず、エラー文と状況だけにする。
- Supabaseの表に行が増えない、または余計な列が混じる → ステップ2で書いた3項目の注文書と、いま並んでいる表の列を見比べる。ずれていたら「保存する項目はこの3つだけにしてください」ともう一度頼む。
- 別の画面で開いても履歴が出てこない → 1台目で1件入力したあと、Supabaseの表に行が増えているかを先に確認する。表に入っていれば、別画面はページの再読み込みで見えることが多い。
理解度チェック
セルフチェック
1. データの保存をデータベースに移すと、何ができるようになりますか。
2. 今日の検証の本番、Supabaseの接続キーについて正しいのはどれですか。
次へ：どこでも続けられるが、まだ伸びが見えない
最後に、今日できたことではなく、今日できて、まだ足りないことを起点に次へつなぎます。
データは、端末をまたいでクラウドに残るようになりました。 どこでも続きができます。 そうなると、データが少しずつ貯まっていきます。
ところが、いまはただ表に並んでいるだけです。 貯まってくると、たぶん次はこう思うはずです。 自分はちゃんと伸びているのか。 ドリルなら、正解率が日を追ってどう上がっているのか。 どの分野がずっと低いままなのか。 ゲームならスコアの推移。 メモなら支出の傾向。
せっかく貯めたデータが、まだ目で見える形になっていません。
次回は、この貯まったデータを見える化します。 推移をグラフにして、自分の成長と弱点が一目で分かるようにする。 今日クラウドに貯め始めたこのデータが、そのまま燃料になります。