背景

今年はStable DiffusionやChatGPTといったさまざまなAIが注目を集めています。
ChatGPTに関してはシンプルな会話だけではなく、コードも書いてくれるということでTwitterでも話題になっていますね。

AIによるコード生成はGitHub Copilotなど今までも存在していましたが、ついにAWSのAmazon CodeWhispererがFree Previewとなりました。今回はフロントエンド周りのコードを色々と生成してみようと思います。

Amazon CodeWhispererとは

AIによるコード補完システムで、以下の特徴を持ちます。

• コメントや関数名から続きのコードをサジェストしてくれる
• VSCodeなど主要なIDEに拡張機能として対応
• サジェストがライセンスに触れていそうな場合は警告を出してくれる

一般的なコード補完システムだと言えますが、ライセンスの警告周りは最近のAIの風当たりを感じますね

使い方

公式ドキュメントやクラスメソッドさんの記事が分かりやすくまとまっていますし、そちらを参照ください。
1つポイントとしてはサジェストが欲しいタイミングで走らなかったりするので、手動で走らせるコマンドを知っておくと便利です。（Mac + VSCodeの場合はOption + C）

コード生成結果

TypeScriptに対応ということで、TypeScriptかつブラウザやSSGとして実行されるコードを試しました。

新規ファイルで関数生成

まずは関数名から内容を作ってもらいます。色がついている部分は筆者が入力、灰色の部分はCodeWhispererによる入力です。

これは流石に余裕ですね。ちゃんと型も指定しているのはありがたいです。ちなみに採用した後は、勝手に他のソートもサジェストしてくれました。

次にちょっと複雑なファイルアップロードです。例によって関数名だけ指定します。

引数だけだと判断できないので、続きを入力してもらうと

requireやpromiseは気になりますが、どうやら動きそうなコードが返ってきました。また、学習に使ったであろうコードのライセンスも提示しています。

CodeWhispererは続きを補完してくれるシステムです。つまり関数名から始めると事前にimportなどが行われないのでは？と思い、コメントから始めてみました。

上記のコメントのみを書くとサジェストが1行ずつ現れました。全てスクショすると大変なのでまとめて貼るとこのようなコードが生成されました。

引数が途切れているのはご容赦ください。想定通り事前にしっかりimportしてからコメント付きで関数を定義してくれています。どうやらNodeサーバーだと認識したようですが、ログも考慮してくれています。

S3だけだと得意分野な気がするので、限定せずに画像をアップロードしてもらいます。

隠しましたが、がっつりIDなどを含む結果が返ってきました。細かい指定がない場合でも動きそうな結果が返ってきます。

既存ファイルで関数生成

Amazon CodeWhispererは具体的な関数名やコメントがあると精度が上がるようです。なので、すでにプロダクションで動いているコードに追記するとどうなるかを試しました。

microCMSと接続しているコードのファイルで、新しい記事を取得する関数を生成します。

なんとすでに作成してあるNewsという型や、getEndpointを含む関数の書き方が綺麗に引き継がれています。きっと私が新しく関数を追加したとしてもこの形になったでしょう。

limitを指定したくなったので、引数を追加しても大丈夫でした。

しっかりmicroCMSの仕様に従い、最新の記事を持ってきているのも素晴らしいです。しかし、最新記事での並び替えは他のコードですでに行っていたので、古い順に取得してもらいます。

しっかり対応してきました。びっくりですね。悔しいので、既存のコードからでは推測できないであろうフィルターを使った検索も実装してもらいます。

フィルターという言葉が直接出てこないであろうsearchから始まる関数名なのに、しっかりmicroCMSの仕様に従って実装してきて脱帽です。と思っていたのですが若干間違っていまして、本当はtitle[contains]$(query) が正しくmatchという指定は存在しません。ただ、ほぼ合っていますしtitleで検索することも指定していなかったので、よくできていると思います。

既存のコードに新しい機能を追加するときは非常に強い力を発揮しそうです。

コンポーネントの追加

フロントエンドと言いながらシンプルな関数やAPIリクエストばかりだったので、今度はReactを書いてもらいます。

まずはシンプルなところでボタンを作ってもらいます。

まさかのSVGが返ってきました。これは本当にCloseっぽいSVGなんだろうかと表示してみたら、しっかりCloseでした。

ちなみにFavoriteやLikeなども指定しましたが、それはサジェストが出てきませんでした。Closeは共通のイメージがあるせいかもしれません。

ただこれはSVGであり期待していたHTMLとは違うので、今度はログインフォームを作ってもらいます。

これはきっと、雑に指定した私が悪いのでしょう。「続きを補完する」と「他のコードを参照する」という仕組みから、importを事前に書いてみました。

しっかりreact-hook-formかつuseFormContextを使える形にしています。しかし、未知のコンポーネントを出してきたのでそれも責任を持って実装してもらいます。

最低限のコードではありますが、useFormContextを利用したコードをしっかり書いています。registerを使っていないところはマイナスですが、ログインっぽい見た目にはなっていそうです。

まとめ

思ったよりも実用的なコードを出力してくれるなと感じました。特に既存のコードへの機能追加は出力してもらった結果を手直しすれば、実際に運用に使えるコードになりそうです。この機能によりエンジニアのコーディング時間が劇的に減ることはなさそうですが、IDEのサジェストぐらいの効果は得られると思います。

最後に

ZOZO NEXTでもエンジニアは積極的に採用中です。特にAIやVRなど新しい技術に興味がある方は気軽に応募してください。お待ちしております。

明日は @kurosuke1117 さんによる投稿となります。お楽しみに