AI時代でもやっぱり"確認"は廃れない
みなさんお疲れ様です、T山です！
もっぱらバックエンド畑だったんですが、最近はフロントエンドのお仕事もいただく機会ありまして。
ほこり被った古〜い知識しかないものの、そこはAIも使っていい感じに〜、と言っていただけるので本当にありがたいです。そんなこんなでガンガン壁打ちしーの、深堀りしーの、それ何？kwskって投げかけーので、ガツガツ学動いてまして。
その流れでデザイン用語(？)も一緒に吸収していけるので、本当Aiって0⇨1する時は特にものすごい戦力になりますよねっ！
はい、ではそんななか今回は「え？AIさん、そんな動きするんですか？！」なホラー体験回になりますw
フロント作業やるにあたって、figmaで書き起こした画面をどうにかさくっとコードに変換できないか、って依頼を受けまして。人が微調整するのはいいとして、ほぼほぼをさくっとAIが作ってくれるとスケジュール的にも助かるとのこと。また、ここで手法ある程度確立できたら他プロジェクトにも流用したいな〜とのこと。
そこで色々調べたところ、さすがはfigmaさん。けっこうもりっと色んなやり方あるようでした。需要は集約するもんなんだなぁとしみじみ。まーでも最初はなるべくちっちゃく試したい、必要十分は正義派なのであんまゴージャスなやり方でなくシンプルなのを探したんです。
んでいくつか試してみたんですよー。
まずはfigmaデザインをPNG画像でエクスポートして、Cursorに食わせるパワープレイw
安直に考えついたので試してみたくてwでも結果は意外と悪くはなかったです。ちゃんとできると画像だからってぐちゃぐちゃまコードではない。ただdivが多いかな〜っていうのと、いかんせん画像からコード作ってもらうって、こう、昭和生まれの私にゃ漠然とした不安感がありまして(^_^;)それにこのご時世、さすがにもっといい方法あるんじゃ？と思って一旦保留。
次にFigma Makeを試してみました。
figmaの生成AIとやりとりしながらデザインを書き起こしてくれるツールで、コード変換もできるっぽかったのでどれどれと。まぁ...できはしたものの、Figma Make上にコード一式作られる感じでして。それこそHTML最初のhead部分とかから(^_^;)それらをダウンロードしてリポジトリに持っていく作業と、結局そこからプロジェクトに最適化されるようCursorで整える作業がいるな〜と。あと既存のfigmaデザインをコードにするには、デザイン自体をコピペしてAIに投げる必要もあって、これもなんだかな感が拭えず保留。
このあたりでコードがちょっとぐっちゃってきたので、一旦ここまでの成果物をブランチAにcommitしておいたんです。一応ね、あとで比較したくなった時のためにも残しておこうと思って。改めて新しくブランチBを作って、
そこで次の手法、figma Dev mode + MCPでCursorから指示出す方法を試してみました！
これがま〜なかなかGoodで！内部でfigma公式のSkillsも使ってくれたりで品質もよく、対象のfigmaフレームのURLをCursorに貼り付けるだけなので操作もシンプルで再現性も期待できるな〜って！これは勝ったな(｀・ω・´)とかワクソワしながらCursorのチャットを見返してたら。。。
なんかさっきまで使ってたブランチAを参照してるっぽい履歴がありまして
。。。？なんだろこれ？Cursorさん「できたよ！」って言った時特に何も言ってなかったけど、え？私の理解力が乏しいだけ？うん？あれ？今ブランチAにいるっけ？あれ。。。もしやっ！？と思いめっちゃ問い詰めましたところ、ざっくり言うと
「既存パターン探してるうちにgitコマンド叩いて別ブランチに同じ画面の実装があるからそれを正として真似たわ、てへぺろ☆」とのこと。
((((；ﾟДﾟ)))))))
((((；ﾟДﾟ)))))))
((((；ﾟДﾟ)))))))
あんぐりでしたわ。
他のブランチみた？なんで？なんでそんなことするん？なんでその発想になるん？人がやってもなかなかそうはならないよ？ふえぇ？
と虚無ってたんですが、より背景や理由を深掘りしてみたら、勝手に暴走しまくったってわけではなく、私がAGENTS.mdに書いておいた「既存パターンにあわせてね」的な内容も踏まえた上での判断だったとのこと。
いや画面ごとに独自実装されても嫌じゃないですか。なる別部品化したいなーって思って書いたこの一文が意図せぬ解釈を生んでしまったとのこと。
これめちゃ衝撃でしたね〜。確かにこれはNGだよって明示的に書いてないとはいえ、こんなに拡大解釈とは思わなんだ。まじで確認しておいてよかった！気づかずにええやん〜、で進んで他プロジェクトに横展して迷惑かけたもんならもう。。。((((；ﾟДﾟ)))))))それにAI使った作業で微妙な結果出しちゃったら、こう、扱えてないな〜的な印象持たれやすいじゃないですか(~_~;)あぶなかったぁ。。。
そんなホラー体験もあって、確認の大切さを今一度突きつけられました。いやもうほんと大事。人だろうとAIだろうと「確認」っていうステップは絶対無くならない、無くしちゃいけないことなんだって。
なので改めて脳死でAI利用はダメ絶対ですね！AGENTS.mdもちゃんとブラッシュアップしていかな！ダメ押しでCurosrに厳しめレビューしてもらったり、なんなら（効果あるのかわからんけども）別のチャット開いてそこでもレビューしてもらってみたりせな(｀・ω・´)！！ってめちゃめちゃ慎重になりました。
正直なところ、じゃあどこまで確認すればいいのか？って塩梅の難しさは付きまといますし、考え出すとキリがないもんですが、でもここ考えていけるのが人の強みだと思うし、アピールしていく部分だと思うんですよね。だってお金払ってくれるのは人間だもの。人が安心したり信用もってくれる部分って、結局こういう人臭い部分なんだと思うんですよね、アラフォーな私は(｀・ω・´)
そんなこんなを感じた昨今でした。
みなさんの晩酌の肴にでもなれたら幸いです(^_^;) いやぁめっちゃ焦った。。。w
では今回はこのあたりで〜