AIに「可読性の低い」コードを出力させてみた

まずはv0.devでベースになるコードを書かせてみた

テーマは以下の通り

架空の都市「リアクト市」の人口をグラフで表示する

グラフはWebGLで表示する

3D前提だけど今のところ2D描画

グラフはアニメーションを使って表示する

なんでWebGLにしたのかというと、コード量のかさ増しが一番楽そうだったから

ほんで、出てきたコードをVS Code上に移して続きはGitHub Copilotにやらせる

（v0.devのアカウントは無料なので、メッセージ数に上限がある 課金で解決してもいいけどなんかアレだったので…）

ChatGPT o1に「可読性の低いコード」とはなんぞや、ということを聞いてみた

code:txt

あなたの思う「可読性の低いコード」の可読性が低い理由を5個以上、できる限り挙げてください。

返ってきた答えをCopilot Editsのプロンプトにぶち込んでみる

code:txt

このファイルを以下のような要素を取り入れて、可読性の低いコードに書き直してほしい

1. 意味の分からない変数・関数名

変数名や関数名に単一文字 (a や b)、極端に略語化された名称 (cal など) が使われていたり、命名規則がバラバラだったりすると、コードの意図がひと目で分かりにくくなります。

2. インデントやフォーマットの乱れ

インデント幅が不統一、タブとスペースが混在、空行の挿入が適当でないなど、フォーマットに一貫性がないと、スコープやロジックの流れを把握するのが難しくなります。

3. コメント不足・コメントの質が低い

必要な情報を補足しないコメントや、コードとズレたコメントがあると理解を阻害します。コメント自体がほとんどない場合も、処理や意図を推測するのに時間がかかります。

4. 巨大な関数・クラスの乱立

本来は分割すべき複数の責務が一つに詰め込まれた「肥大化した関数」や「肥大化したクラス」は、どこで何をしているか全体を把握しにくく、可読性を下げます。

5. ネストが深すぎる

if 文やループの入れ子が深すぎると、どのブロックがどこで終わるのかを追うのが難しくなり、バグを生みやすく、コードのメンテナンス性も低下します。

6. 命名規則やコーディング規約の不統一

チーム内で命名規則やコーディングスタイルを共有していないと、同じ概念に複数の名前が使われるなど、読み手を混乱させる原因になります。

7. 無意味なマジックナンバーの氾濫

値が何を示すか分からない数値リテラル (3.14 など) が大量に出てくると、意図を推測しづらくなります。定数化や変数化がされていない状態は可読性を大きく損ないます。

8. 処理フローが分かりにくい実装

goto 文の乱用や、意図が分からない例外ハンドリングが突然入るなど、コード全体のロジックがつかみにくい作りだと可読性は低くなります。

9. 抽象度の不一致・一貫性のないレイヤー設計

下層の実装コードにアプリケーション全体に関わるような要素が混在していたり、上層で低レベルの実装が出てきたりすると、レイヤーや責務を把握しにくくなります。

10. DRY (Don't Repeat Yourself) 原則の欠如

同じロジックがあちこちに重複していると、修正時にどこを直せばよいか把握できなくなり、保守性や可読性が著しく下がります。

11. グローバルスコープの乱用

グローバル変数やシングルトンの多用は、依存関係が複雑化し、データの流れを把握しづらくなり、コードが混乱しやすくなります。

12. 不要な最適化や複雑なアルゴリズムの乱用

パフォーマンスを必要以上に気にして、極端に複雑な記述や特殊な演算を多用すると、理解コストが跳ね上がり、可読性は低下します。

大体こんな感じになった

https://gyazo.com/58dc7fb56b9af329712ba6cf03f920ef

https://gyazo.com/2f344d7c6dbf2b22e5094f2356bfee08

ここまでやって思ったこと

「可読性の低いコード」の定義はもう少し詰める余地がありそう

o1に聞いたっきり特にレビューはしてない

なにかのAPIを使うようなコードはインターフェースが決まってるので、そこを含めて読もうとするとギリ読めるかも

短いコードで可読性の低さを実現するにはアルゴリズムの実装みたいな感じが良いのかも

とはいえ、自分自身はコンテキストを知ってしまってるのでなんとも言えない

というわけでo1に別コンテキストで聞いてみた

Q. 実装するのにそこそこコード量の多くなるようなアルゴリズムと、TypeScriptでの実装例を教えて

A. 以下では、「A* (Aスター) アルゴリズム」を TypeScript で実装した例をご紹介します。A* は、グリッド上などで最短経路を探索する有名なアルゴリズムです。実装量としてそこそこ多く、かつアルゴリズムとしての学習にも役立つと思います。参考になれば幸いです。

非常にわかりやすい実装例が出てきたので、これを可読性が低くなるように加工してみた

Q. 下記は、可読性の低いコードの特徴をリストアップしてあります。これに沿って、上記のA*アルゴリズムのコードの可読性が低くなるように編集してください。特に、インデントの乱れやスコープの分かりづらい箇所などがあると素敵です。（下に↑の1~12を追記）

https://gyazo.com/546be035dfa53976f81228c497f2c8e6

なんかすごいコードが出てきちゃったぞ

https://gyazo.com/2975998f29f1c04248e5a302889e4377

動作確認のときにはここは使わないのでちょっともったいない

というわけで、出てきたコードをVS Codeに移してみた

きれいなコードの方は特に問題なかったが、汚いコードの方はちょっと修正が必要だった（curly bracketが一個多かっただけだったけど）

テストコードを書いて、一旦動作的に同じになってることを確認した（汚いコードは探索失敗時のときにnullではなくundefinedになる、という差異はあったけど）