【claude code】シンプルな日記アプリを爆速で作った

こんにちは、skkです。
本日勉強会でバイブコーディングなるものを知って、claude codeを使ってやってみました。
個人開発はいつもchatGPTやらGeminiやらに、詳細なシステム構成や言語などの情報を与えていたので、自然言語のみでアプリが作れると聞いて試してみた次第です。

参加した勉強会のURLはこちら

claude codeのセットアップ

まずは、claude codeの公式サイトよりsign upをします。
cliから開発を行おうと思い、公式サイトに表示されていたコマンドよりcliをインストールしました。

curl -fsSL https://claude.ai/install.sh | bash

cliインストール後、対話モードに入ろうとすると以下のような選択肢が表示されました。

自分はFreeで始めるつもりだったんだけどなぁと思いながら1.を選択すると、ブラウザで下記の画面が表示されました。

というわけで、cliからclaude codeを使用するには、ProかMaxの契約が必要みたいです。
なので、ブラウザ版からアプリを作成することにしました。

アプリの作成

与えたプロンプトは以下の一文だけです
シンプルな日記アプリを作成してください。

そうすると、どのような機能をつけるか、なんの言語でアプリを作成するかの質問があり、
質問にチェックボックスにチェックをする形式で回答しアプリのプレビューが、右ペインに表示されました。

プロンプト入力後
形式と機能の選択肢を選択後

出来上がったアプリが下記の通りです。含まれる機能は、
・日記の追加・削除
・気分記録
・タグ機能
・日記の一覧確認
です。

日記の追加画面

5分もかからずアプリができました。日記の追加はlocal storageで保存しているため、ブラウザを閉じても永久化されています。
アプリは、github pagesで公開しています。

まとめ

今回はclaude codeを使ってアプリを作ってみました。
これまでは、フロントエンド、バックエンドを指定して、細かい機能の仕様もある程度プロンプトとして与えて初めてアプリを作れていたので、自然言語のみでアプリを作れることに驚きました。

課題として感じたのは、一部勉強会でも言われていたことも含まれますが、
・セキュリティの対策は別途行う必要がある
・コードの構造がわからないので、長期的な運用保守ができるのか
・途中でどの形式でアプリを作るかという質問があったので、ある程度のIT知識は必要
などです。
この辺の課題もまたclaude codeでできるのかなとも思いますが、やはり基礎的なIT知識はまだまだ必要だと感じました。

あと、個人開発で使用するにしてもProの月額USD 20.00は高いな思いました。
では、また。

コメント

タイトルとURLをコピーしました