新卒フリーランスの生存戦略

就活で全社にお祈りされて彼女にもお祈りされた難病患者がフリーランスエンジニアになって人類の幸せをお祈りする話

俺の考えた最強のSchematics!!(前編) [Angular]

Angular Advent Calendar 2日目の記事です。昨日はkasaharuさんの「Angular アプリケーションに Testing Library を導入する」でした!

お詫び

昨日まではGPT-3を用いたテスト駆動開発について、@angular/fireのバグ修正を例に解説しようと考えていましたが、急に素晴らしいアイディアが降りてきたのでそちらについて書くことにします!でも、やっぱり、そのためにもGPT-3や経緯について説明する必要があるので、サクッと先に書きます!(頭の悪そうな文章ですみません!)

GPT-3って何よ?

GPT-3は非常に噛み砕いて言うと、文脈を理解できるレベルに高度なAIです。

こんな感じで、テストコードと伴に「上記を満たすコードを書け」と命令すると、それっぽいコードを生成してくれます。これを用いると人類はspecファイルを書くだけで、AIがテストコードをパスするまで不眠不休でコードを生成してくれそうです。(実際に、この方法で書いたPRはこちら。)

AIの波に乗り遅れた私

で、はじめは私も「AIがコード書くとかSUGEEEEEEEEえええ!!」とテンション上がっていたんですが、1週間くらい前に初めてCopilotを触ったら、私が周回遅れだったという事実を知りました。(皆さんはすでにAIをこき使ってコードを書いたんですね...)

で、Copilotユーザーの皆さんにも何かおもしろい記事が書けないだろうかと、無心に私もCopilotでコードを書いていました。

そして、ひらめきました。「SchematicsにGPT-3を組み込もう」

俺の考えた最強のSchematics!!

課題

現状のCopilotではファイルの自動生成はしてくれません。補助してくれるのはあくまでファイルをエディタで開いてからです。Angularユーザーである我々にはSchematicsという最高なコードジェネレーターがありますが、毎度毎度、プロジェクトに合わせてSchematicsをカスタマイズするのは骨が折れます。

しかも、プロジェクト初期は記法を模索していてSchematicsの設計が決まらないし、ある程度記法が安定してきた頃にはもう新規にコードを生成する機会が少ないです。(Schematics愛好家としてはこのジレンマが悩ましい...)

アプローチ

そこで考えたのが、SchematicsにGPT-3を組み込んで空気を読んだファイルを生成してもらう方法です。

例えば、下記のようにSigninComponentとSignupComponentが並んだディレクトリに、UserComponentを生成したいとします。このとき、新規に生成したいuserディレクトリの中身は同じ階層にあるsigninディレクトリとsignupディレクトリに似ることでしょう。

libs/components/src/lib/templates
├── signin
│   ├── signin.module.ts
│   ├── signin.stories.ts
│   ├── signin.component.html
│   ├── signin.component.scss
│   ├── signin.component.spec.ts
│   ├── signin.component.ts
│   └── index.ts
├── signup
│   ├── signup.module.ts
│   ├── signup.stories.ts
│   ├── signup.component.html
│   ├── signup.component.scss
│   ├── signup.component.spec.ts
│   ├── signup.component.ts
│   └── index.ts
├── user <- 新規に生成したい

なので、signinとsignupディレクトリの中身を文脈としてGPT-3に渡せば、userディレクトリの中身を生成させることができるはずです。

├── user
│   ├── user.module.ts
│   ├── user.stories.ts
│   ├── user.component.html
│   ├── user.component.scss
│   ├── user.component.spec.ts
│   ├── user.component.ts
│   └── index.ts

これで、既存コードの記法を見直しても、それに合わせて自動的にSchematicsが生成するコードも変化していき、ジレンマが解消されることが期待されます。

次回予告

アプローチの詳細と実際に使用してみた感想は来週(12/9)のAdvent Calendarにて!!

ざっくり作ってみた感じ、問題なく動いたけど、まだ安定してないので公開はしばしお待ちをmm

ちなみに、明日はrukutelialoveさんです!