1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

勢いと思いつきで駆け抜ける!僕の「vibecoding」体験記 〜Clineでアプリを色々作ってみた〜

Posted at

イントロダクション

Clineいいよね、という話が社内で挙がっていたので少し触ってみたら、なかなかに良く、色々と思うところが出てきたのでテキストにまとめてみることにしました。

本題に入る前にClineに関する前提知識を入れるのに良い2記事を紹介。

bazzってるだけあって刺さるセンテンスが多い。
https://zenn.dev/mizchi/articles/all-in-on-cline

上記事に対するアンサーライティングっぽい感じですが、エモーショナルな上記事に対して、Clineの行動原理についてわかりやすく説明してくれている。「実装上の工夫とテクニック」の章はCline使っていくにあたって大いに参考なる。
https://zenn.dev/codeciao/articles/6d0a83e234a34a

ちなみに人の解きたい課題に対して、自然言語で指示を与えて、LLMにコーティングさせることを「vibecoding(ヴァイブコーディング)」というらしいです。
https://ja.wikipedia.org/wiki/%E3%83%90%E3%82%A4%E3%83%96%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0

Clineでアプリ色々作ってみた

1つ30分ほどでサクッと作れました。

Clineの利用自体はVSCodeにインストールして、OpenAI等のAPIを設定するだけで出来るので割愛します。迷ったときに先人の備忘録をみればいい。
https://qiita.com/SatouHa/items/f963d0a68efb03e1d0aa

①画像共有アプリ「めもシェア!」

image.png

▼主な機能
スマホなどで撮影した画像(HEIC形式も対応!)を複数枚アップロード可能
画像のEXIF情報からGPSデータを抽出し、緯度経度を取得
取得した位置情報を元に、Plotlyを使って地図上にピンで表示
ピンをクリックすると画像が拡大表示されるモーダルUI
アップロード済み画像の一覧表示・削除機能

▼vibecoding的ハイライト(作:gemini)
Pythonの軽量フレームワークFlaskなら手軽に始められる!と思い、早速開発スタート。画像処理にはPillow、EXIF情報取得にはpiexifライブラリを採用しました。特にGPS情報の抽出ロジック (get_exif_location関数) は、piexifを優先しつつ、取得できなければPillowでフォールバックするという二段構えに挑戦。試行錯誤の末、うまく緯度経度が取れた時の達成感はひとしおでした。

②妹系AIチャット

image.png

▼主な機能
ユーザーが入力したメッセージに対して、AIが応答を返すチャットインターフェースを提供します。
AIのキャラクター(ペルソナ)や応答スタイルを、システムプロンプトを編集することでカスタマイズ可能です。
使用するAIモデル (例: "gpt-3.5-turbo") を選択できます。
AIの応答の多様性(temperature)を調整できます。
チャットの会話履歴をセッション中に保持し、連続した会話が可能です。
会話履歴をリセットする機能があります。

▼vibecoding的ハイライト (作:gemini)
手軽なAIチャットアプリをFlaskで構築!OpenAI API (gpt-3.5-turboなど) を活用し、ユーザーとの対話を実現しました。 特にこだわったのは、AIのキャラクター設定です。システムプロンプトをユーザーが自由に変更できるようにし、「優しい妹キャラ」といった具体的なペルソナをAIに与えることで、より親しみやすいコミュニケーションを目指しました。会話履歴をセッションに保存することで、文脈を理解した自然なやり取りが可能です。 エラーハンドリングも実装し、API呼び出し時の問題にも対応できるようにしています。

私が作ったみたいな文章が出来てるけど手、全く動かしてない(笑)

実際、主要な機能は最初のプロンプトで大体形成され、①はGPS情報の取得とアップロード処理の動作で②はプロンプトログの管理(リセット処理の不具合)でエラーを吐いたので、数回の対話で仕上がりました。

触ってみた感想

早い。生成されたコードの可読性もなかなか良い。SLAを強く求めないものであれば、全然これでいい。内輪利用やモックアップ用途であれば充分すぎる。モックアップ作成でもうお金取れない。

市民開発的なノリでも使えるように思う。位置づけ的には開発支援ツールだと思うが、ノーコード(ローコード)ツールとしての役割にも近い。がっつり書けるわけじゃないけど、ある程度は知ってる位のレベル感のコーティングスピードを爆上げしてくれる感じ。

今回、機能の作りこみはしていないが、機能退行や過剰修正に最低限気を配っていればいいので、GUIのノーコード(ローコード)ツールよりもある意味、自由度・操作性ともによいといえる。Cursorよりエラー修正時の機能退行・過剰修正は少ないように思えた。

まとめ

ClineはAIすごいぞ芸人に容易に扱えるものではないが、善良なAIインフルエンサーによって市民開発の裾野が広がっていく可能性を感じる。一方で商用稼働コードをいじるにはコードレベル、サービス品質面でどう担保するのか?だったり、稼働時にコードや変数をガンガン学習するのでセキュリティガバナンス上の整理だったり、面倒臭そうな課題もあるので、大手を振って使いはじめる雰囲気になるのにはもう少し時間がいるようにも思える。当面はコードアシスタント的な役割を担うか。

「人がコーティングをしなくてよくなる」未来に対してどのような現在、どの地点にいるのかということについて、各々見解は異なるかと思いますが、手作業によるコーティングの仕事量が削減する代わりに、エンジニアに求められる役割が「問題を定義して、解決策を設計して、構築する」ことへ変化していくことは規定の話、だと言えるのではないかと感じました。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?