OpenAPIから画面生成に挑戦した話

ゆるプット.kioicho1で登壇した資料です！
#yuruput_kioicho

Transcript

1. OpenAPIから 画面生成に挑戦した話 1
2. 〜夢の爆速改善 AIを添えて〜 2
4. きっかけ 4
5. 夏休み中に こんな話を思い出した 5
6. 近い未来 6
7. Webサイトは リアルタイムに生成される 7
8. 完全に 個人にカスタマイズされる 8
9. ふと考えた 9
10. もうその未来が来ている 10
11. ...かもしれない 11
12. 最近のAIは驚くほど賢い 12
13. 速度も十分にある 13
14. もしかしたら... 14
15. もしかするかもしれない 15
16. やってみた 16
17. ちょっとだけできた 17
21. 単一のUI・APIなら余裕 21
22. UIは shadcn/uiを使えば安定する 22
23. gemini-2.5-flash-lite 23
24. めっちゃ早い 24
25. 1秒程度でページが作れる 25
26. でも 26
27. 複雑になったら破綻する 27
28. ライブラリ使わない 28
29. 逆に 29
30. 余計なライブラリを使う 30
31. パス間違える 31
32. エラー処理できない 32
33. 対策した 33
34. TSで書いて Linter走らせた 34
35. エラーの自己解決機能 作った 35
36. 重い... 36
37. それでもエラーが続く ...ことがある 37
38. 1秒の夢が消えた 38
39. 安定性を考えたら 使い物にならない 39
40. 考えた 40
41. 当たり前だけど 41
42. 動的生成は無駄が多すぎる 42
43. 動的生成の意味が薄い 43
44. お客さんに使ってもらう？ 44
45. セキュリティ リスク 怖い 45
46. 責任 46
47. 取れない 47
48. 速度遅い 48
49. プロンプトだけで 解決できないエラーがある 49
50. 厳しい 50
51. 社内だったら？ 51
52. 聞いてもらえる 関係性がある 52
53. サポートもしやすい 53
54. CSさんが 社内ツール作れたら 54
55. 最高なのでは？ 55
56. 社内なら ワンチャンある！ 56
57. 目的が変わった 57
58. Before 58
59. 爆速で好みのUIを提供する 59
60. After 60
61. CSさんが ツールを作るツール 61
62. 作り方も変わる 62
63. 一発生成 から 対話的にエラー修正可能に 63
64. 複雑な画面も生成可能に 64
65. これまで後回しにされがちだった 社内管理ツールを 65
66. 自身で カスタマイズ可能に！ 66
67. 最高よね！ 67
68. でも 68
69. 一筋縄ではいかない 69
70. ユースケース 70
71. 企業一覧画面に 情報が足りない問題 71
72. 詳細画面にあるいくつかの情報を 一覧に追加したい 72
73. とてもよくある要望 73
74. だが... 74
75. 意外と厄介で難しい 75
76. 実現はできる 76
77. でも 77
78. 問題点１ 78
79. 画面作成 ＝ APIの 新規作成 or 既存改修 が必須 79
80. APIは今必要な情報のみ返している 80
81. 要望で必要な情報は 返していない 81
82. 詳細APIから取得すると 82
83. 効率が悪い 83
84. 改めて考えると 84
85. ｶﾞｯﾁｬﾝｺでは 解決できないことも多い 85
86. 問題点２ 86
87. 思ったようにならない 87
88. 文言が違う 88
89. 意図しないカラム追加 89
90. 作って欲しい機能の消失 90
91. 細かい修正ができない 91
92. 問題点３ （一番つらい） 92
93. 複雑性が増すと 93
94. プロンプトも複雑に 94
95. とにかく 情報を与える必要がある 95
96. ロジック組むのが大変すぎる 96
97. 他にも... 97
98. 会話履歴渡してるから 98
99. 最初のプロンプト変えると 99
100. 後続に意図しない影響がでる 100
101. こんな不確定なもの 101
102. まともに扱えるかよ！！ 102
103. 結論 103
104. Claude Code 作ってる人 104
105. まじ化け物 105
106. 茶番は置いておいて 106
107. 解決策 107
109. フィールド名の指定 109
110. http://api.example.com/v1/users/1234?fields=name,age 110
111. レスポンスグループ 111
112. Small, Medium, Large 112
113. 他にも 113
114. GraphQLの柔軟性 114
115. 複雑性に対する対処は 115
117. また根本の要望に応えるためには、 117
118. 今回のようにフロントだけではなく 118
119. バックエンドもいい感じに作る方が いいかも？ 119
120. (v0はすごい) 120
122. エンジニアがUIを作らない 122
123. そんな未来はもうそこかもしれない 123
124. ご清聴 ありがとうございました 124
125. Q&A 125