国選択UIをCopilotくんに頼んで5分で作成してみたよ

はじめまして

当ブログにてはじめて執筆しますので軽く自己紹介をさせていただきましょうかね。
SKIYAKI開発部クリエイターチーム コーダーの平野です。在籍は5年くらいですね。
普段はBitfan Proというプラットフォームにて、erb,scss,jsでもってフロントエンド構築をしています。犬を飼っています。

TwitterがXに変わり、この世の終わりみたいなSNSになってしまってからというものの、何かをネットに投稿するという行為からすっかり遠のいてしまいました。
文章書くのもしばらくぶりなもので拙い文にはなりますがどうかお付き合いください。

よろしくお願いします。

今回のテーマ

人間慣れっていうのは怖いもんで、長年同じプラットフォームを触っているとサービスのBAD UIに全然気づかないなんてことが多くあります。
当初はそれで良かったかもしれないけれど今の時代それはないよ〜みたいなUIが結構多かったりする。
プラットフォームだとなるべくその辺共通化するように出来てるんで、影響範囲が広くてなかなか工事しづらいってのもあります。常に新鮮にものを見ることができる目を持っていたいものですね。

さて、今回とあるサイトにてディレクターの方からこんな相談がありました。

会員登録時に国籍を選択させているのですが、アルファベット順に多くの国名が並んでいるためユーザーが選択しづらいとのことで下記が可能かご確認いただけますでしょうか？
①表示する国数を減らす
②頭文字を打つと下に候補リストが出てきてクリックで選択できる（「J」と打つとJから始まる国名に候補が絞られる）
③国名の選択肢（ドロップダウン）の幅を減らす

ふむ...

ユーザーの情報登録/編集画面のUIの話ですね。
ちょっと盛って1000サイトくらい運営しているBitfan Proですが、こういうユーザー情報に関わる箇所はだいたい共通化しています。やむなくthemeごとに切り出して独立させるということも少なくありませんが、なるべく共通化。
そうなると先述の通り、とにかく影響範囲がデカくなりがち。
なかなか腰が重いなあと思いつつ、ちょっとその国選択UIを見てみましょうか。

ふむ.........

特に何の捻りもないセレクトボックスの中に249もの国と地域がアルファベット順に並んでいますね。
シンプルイズベスト。ユーザーに何かを入力させるのであればそれが一番ですね。

...

......

.........そうですね。シンプルにも限度がありますね。

いくらなんでも自分の国籍をここからスクロールしてがんばって見つけるっていうのはかなり厳しい。
そしてここは日本。JAPANです。249個並んでいる中でアルファベット順112番目です。
このサイトにおいて「国名」は必須項目とのことですので、ユーザーの大半を占める日本人ユーザーはサイトへの登録ためにこのUIで「JAPAN」を見つけることを強いられる訳です。人によっては「JAPAN」ではなく「日本」で登録されているから一番下の方でしょう？と予測をし、一番下までスクロールして絶望を見る方もいるでしょう。
これではとんだ機会損失をしてしまいますね。

改善しましょう。

実装方針を考える

さて、ディレクターに提案していただいた３案がありましたね。

①表示する国数を減らす
②頭文字を打つと下に候補リストが出てきてクリックで選択できる（「J」と打つとJから始まる国名に候補が絞られる）
③国名の選択肢（ドロップダウン）の幅を減らす

①はライトですが、世界に向けてオープンしているこのサイト。国を減らすというのは倫理的にいかがなものかという思いもありました。一旦これは避けたいかな。
③については、selectタグで表示されるUI自体の幅ということで、ブラウザ次第ではあるのでこれもなかなか厳しいか...

ということで②のUIを作成していくとしましょう。
おそらく想定されているのはYouTubeの検索枠みたいなものですかね。
YouTubeの場合は枠をクリックすると検索履歴が出てきます

で、何かしら文字を入れると候補が絞られる

これをベンチマークとし、国名を検索&絞り込みできるようなUIを作っていきましょう。
ただし、影響範囲の話は無視できませんので、あくまで「オプションとして指定をすればこのUIになる」ような形で実装していきます。思わぬ使われ方があるかもしれないのでね。

とはいえ

忙しいんです。みんなもそうでしょう？
誰しもが今週末に提出を控えているタスクを進めないといけません。
単純にUI作るっていうのも楽ではない。htmlで要素を作ってcssで形を作ってjsで処理を作って変な影響ないか考慮してっていう過程がある以上、今週末の提出に間に合わなくなってしまいます。
現代人には時間がないのです。しかし昨今たよりになる味方がいますね。

そう、Copilotくんです。

Copilotくんに実装方針を伝えて作業してもらう

従来のコードは上述の通り、シンプルなselectタグによるもの

CopilotのAgentモードを起動しこの行を指定して、現状の問題点と実装したい旨のプロンプトを作成していく。

残念ながらその時のプロンプトの履歴が消失しましたので掘り出せませんが、以下の内容をまとめて指示を出しました。確か。

• 国の数が多いのでUIを改善したい
• selectをやめてテキスト入力枠UIとする
  • テキストを入力すると候補をリアルタイムで絞り込みできる
  • 候補を選択するとhiddenフィールドのvalueが更新される
• 編集時（既にvalueが入っている場合）も考慮する
• 予めファイルを作ったのでそこに記述してください

加筆や修正指示はしましたが、最終的に出来たUIがこちら

なかなか理想のUIができました。
初版から私自身で

• 日本語で検索できるように、アイテムに日本語表記も表示する
  など手を加えたり、
  細かい箇所で
• 選択すると候補が全て出てくるようにする
• class名はflocssで
  など追加指示をしましたが本当にそれくらい。優秀ですね。

最初の指示出しからUIが固まるまで、スピーディーに実装ができました。
あとはこれをオプション化出来るようにポチポチと実装（違う話になるので省きます）

便利な時代ですね。

振り返ってみて

今回はVSCode Copilot agentを駆使してUI作成をした一例を紹介しました。
どうしてもプロンプトを上手に作れず、使いこなしきれない方ももしかしたらいるかもしれません。
当時のプロンプトが残ってないので申し訳ないのですが、僭越ながらアドバイスさせていただくとしたら以下を気にしてみてください。

• 現状の問題点と最終的な理想系を言語化できているか？
• 確定仕様については具体的に指示ができているか？
• 修正指示についても問題の挙動と、それをどうして欲しいかを示しているか？

そう、つまりは人間に対するコミュニケーションと一緒ですね。その指示を受けた時に「良い依頼」と思えるかどうか。今後のエンジニアの時代は技術力よりも、どう伝えるか、ちょっとしたディレクター力の方も大事になってくるんだろうなと感じています。
どこかでAI時代について個人的に思うことも書きたいなとも思いますが、今回はここまで。

ありがとうございました。

好きな曲貼ります

https://www.youtube.com/watch?v=A4iWKliUSJU

おしまい