ローコードツールをVibeCodingしたら色々捗った

Transcript

1. 1 CONFIDENTIAL INFORMATION: Not for Public Distribution - Do Not Copy Looking Back, Moving Forward: FY25 Q2 株式会社エクスプラザ LT：vibecoding ローコードツールを vibecodingしたら色々捗った
2. ⬛ 自己紹介 Who am I? • 所属: ◦ 名前: まつにぃ ◦ 所属: 株式会社エクスプラザ ◦ 役割: 生成AIエバンジェリスト・リードAIプロデューサーという肩書きの元、 AX支援・生成AI研修・プロダクト開発支援を実施 • 趣味 ◦ 色々生成AIを触ること ▪ 自分だけの趣味エージェント構築 ▪ Sunoで自分だけのアルバム作り ▪ Brouser useのRPA的な機能検証 © 2025 Explaza Inc. 2 ローコードツールをvibecodingしたら色々捗った件 @yugen_matuni 非エンジニア枠です！
3. ⬛ 本日のメッセージ • ビジネスサイドでも実務での VibeCodingはとても有用。 • だけど結局中身把握してないと上手く使いこなせないの で勉強は引き続き大事だよね。 © 2025 Explaza Inc. 3 ローコードツールをvibecodingしたら色々捗った件 @yugen_matuni
4. ローコードツールをvibecodingしたら色々捗った件 4 1．最近Difyを始めとしたローコード案件が非常に多い • AIの本格的な企業導入（ AX）が増える中で、 ◦ ChatGPT、NotionAIのような汎用AIツール ◦ CursorやGithubCopilotと言ったAI搭載のIDE ◦ Difyやn8nのような現場から使えるローコードツール を求める声が増える中、 特に「Dify」などの自社セルフホスト可能なツールは エンタープライズ企業でも需要に溢れている。
5. ローコードツールをvibecodingしたら色々捗った件 そんな中、 PMをしながら Dify開発を並行でやると、特に以下のような悩 みが尽きない： • スピーディにローコードをGUI上で構築しないといけないが、わざわざ手動 操作するの面倒臭い • 第三者が作った初見Difyの問い合わせ対応やメンテナンスは相応に大変
6. ローコードツールをvibecodingしたら色々捗った件 あれ？ これVibe Codingしたら楽じゃね？
7. ローコードツールをvibecodingしたら色々捗った件 というわけで ClaudeCodeの「Sub Agents」機能などで以下の VibeCoding（？）機能を実装 1 2 3 DSLファイルから要件定義書・要件ヒアリングを逆生成 Agent モデル切替やコードノード、変数など一括、部分修正を行う Agent スケルトンDSLから実際のプロンプトやコードノードを編集 Agent 4 PlayWrightやChrome devtools MCPを使った色々自動化
8. ローコードツールをvibecodingしたら色々捗った件 1 DSLファイルから要件定義書・要件ヒアリングを逆生成 Agent • 第三者が作ったフローは「Why（なぜこのフロー・プロンプトなの？） 」がDSL単体から読み 取れないことが非常に多い • ふわっと読み取れたとしても「本当にあっているかの確証が得れない 」こともある 指定した要件定義書やヒアリングリストを逆生 成し、クイックに担当者に確認
9. • 例えば新規LLMモデル（まさに直近で出現したSonnet 4.5など）を検証したい時に、一部 変更や全変更をGUI上で手動で行ったり、性能比較のためにフローをコピーしたりというの が非常に手間 • また「環境変数」や「会話変数」と言ったものも手動編集するのは大変 ローコードツールをvibecodingしたら色々捗った件 この辺りも VibeCodingで良い感じに編集 2 モデル切替やコードノード、変数など一括、部分修正を行う Agent
10. ローコードツールをvibecodingしたら色々捗った件 旧DSL 全替DSL 部分修正 ver1_DSL 部分修正 ver2_DSL 部分修正 ver3_DSL • 以下のように部分的な変更差分のある複数の DSLを作成し、モデル更新や機能分割した 際の機能比較が取りやすいな体制を整える。 • またDSLのフロー名やノード名を変更に合わせてリネームすることで運用しやすさも向上。 2 モデル切替やコードノード、変数など一括、部分修正を行う Agent 2
11. ローコードツールをvibecodingしたら色々捗った件 • DifyはゼロベースからDSLをLLMに構築させることも可能だが、内臓のインポート時バリ デーションチェックを通っても諸々の構文エラーでつまづくことが多い。 インポートエラー インポート後の整合性エラー 3 スケルトンDSLから実際のプロンプトやコードノードを編集 Agent
12. ローコードツールをvibecodingしたら色々捗った件 3 スケルトンDSLから実際のプロンプトやコードノードを編集 Agent • エラーの要因は ◦ yamlの不整合 ◦ グラフの整合性破壊（nodes / edges の参照不整合） ◦ 型・必須キーのズレ ◦ 未サポート/導入されていないノード・フィールドの混在 など様々... この実装精度を上げやすいのが、 • スケルトンから作る • バリデーションチェックスクリプト作っておく
13. ローコードツールをvibecodingしたら色々捗った件 3 スケルトンDSLから実際のプロンプトやコードノードを編集 Agent • ノードの中身は空で名前だけ書いたものを並べたスケ ルトンDSLをLLMに渡し、スケルトンから起点で編集を 実施する • スケルトンと要件定義からDSLを自動作成 • 成果物をに対してバリデーションスクリプトを 実施
14. ローコードツールをvibecodingしたら色々捗った件 3 スケルトンDSLから実際のプロンプトやコードノードを編集 Agent 右の画像のように • フロー作成 • 構文検証 • フィードバックループ をSub Agent側に設定しておく ことで、自動的に改善を行って くれる
15. ローコードツールをvibecodingしたら色々捗った件 3 スケルトンDSLから実際のプロンプトやコードノードを編集 Agent • フロー名やアプリdescriptionをリッチにしてくれたり、 • コードノードやプロンプト、ノード名、ノード descriptionを自動最適化
16. ローコードツールをvibecodingしたら色々捗った件 3 スケルトンDSLから実際のプロンプトやコードノードを編集 Agent • スケルトン＋既存テンプレート ＋バリデーションチェック を組み合わせることで ゼロからDSL開発も可能（ささっと作りたい時はよく使います） スケルトン テンプレート
17. ローコードツールをvibecodingしたら色々捗った件 4 PlayWrightやChrome devtools MCPを使った色々自動化 折角DSLの作成まで自動化したのなら、 • DifyのDSLインポート • インポート後の Difyフローのe2eテスト もしたいよね？ということで検証中。 これができると要件から全自動作成も 夢じゃない！
18. ローコードツールをvibecodingしたら色々捗った件 4 PlayWrightやChrome devtools MCPを使った色々自動化 • 自動作成したDSLをSaas版Dify環境へインポート • インポート後のテストキックも可能 DSL自動インポート インポート後のテストキック
19. ローコードツールをvibecodingしたら色々捗った件 4 PlayWrightやChrome devtools MCPを使った色々自動化 • この流れをスクリプト＋SubAgentsに登録することで、再現性を持った自動化が可能 DSL自動インポート インポート後のテストキック
20. 20 でもやっぱり中身わかってないと運用はできない いくら自動化をしたところで、 Difyも例に漏れず中身を理 解していないと実運用まで運ぶことは難しい。 Dify問わず継続して学ぶことが大事。（教訓） ローコードツールをvibecodingしたら色々捗った件
21. エクスプラザでは一緒に働く仲間を大募集中です！ 募集中の職種 【正社員】 ITコンサルタント / PM 【正社員】 DXコンサルタント（構想策定・上流支援） 【正社員】業務 AXコンサルタント 【正社員】インサイドセールス 【正社員】リード LLMアプリケーションエンジニア 【正社員】リード AIプロデューサー AI BOOSTな環境です！お気軽にお声掛けください！