コース: Cursorで行うバイブコーディング
今すぐ登録して、24,900件以上登録されている、業界エキスパート指導のコースを受講しましょう。
API 構築とデータ保存機能の仕組み
フロントでは、 タスクを追加できるようになりました。 でも、ページをリロードすると、 このように消えちゃいますよね。 前回のレッスンでは、 AI に React コンポーネントを 作ってもらい、 見た目を整えるところまでやりました。 今回のレッスンでは、 タスクを保存できるようにする仕組みを 作っていきます。 AI に手伝ってもらいながら 簡単な API を立ててみましょう。 そもそも API とは、というところを 簡単に説明します。 API というのは、 アプリの通訳みたいなものです。 フロントが「データを頂戴」と 話しかけると、 バックエンドがそれに答えてくれます。 今回は、タスクの一覧を読む GET と、 新しく保存する POST の ２つだけを扱います。 では、サーバを立てるコードを AI に作ってもらいましょう。 使うのは、Express という 軽いフレームワークです。 AI に ToDo を保存するための API を このようにお願いしてみます。 このように完了しました。 こちらの get の部分が データを受け取るところ、 post の部分が保存するところです。 この状態でサーバが動いています。 ブラウザから呼び出してみましょう。 次に、タスクを１件追加してみます。 この状態で再度読み込みをすると、 先ほどまで、 こちらのタスクが消えておりました。 しかし、読み込んでもタスクが残りました。 裏側にも todos というリンクで データを保持しているのですが、 このようにタスクが保存されています。 もし、Python 派であれば、 FastAPI でも全く同じことができます。 AI に「FastAPI で 同じ API を」と聞くだけです。 フレームワークが違っても 考え方は同じ。 リクエストを受け取って json を返す。 それだけです。 今回のレッスンでは、 AI にサーバを作らせて データを保存する仕組みを整えました。 もうこれで、 消えない ToDo が完成です。 次のレッスンでは、 ログインと認証、 ユーザーごとにタスクを管理できるように していきましょう。
コースをダウンロードして学習しましょう。
ラーニングコースをダウンロードしてオフラインで視聴しましょう。ダウンロードしたコースはLinkedInラーニングのモバイルアプリ (iOSまたはAndroid) で視聴できます。