なんとなくそう思ってたけど、AIが作ってくれたコードって「動いてるから良し！」じゃないんだな〜って最近気づいたんだよね💭
友だちが趣味でコード書いてるんだけど、AIツールのCursorで作った部分を見せてもらったの。見た目は問題なく動いてるけど、中身はけっこうカオスでびっくりしちゃった😳
例えば、ユーザーのイニシャルを作るコードがあったんだけど、AIの書き方と友だちの書き方を比べると全然違うのよ。
AIが作ったコード（Cursor使用）
const userName = profile.first_name + ' ' + profile.last_name
const initials = userName
.split(' ')
.filter(Boolean)
.map(n => n[0])
.join('')
.slice(0, 2)
友だちのコード
const initials = profile?.first_name?.[0].toUpperCase() + profile?.last_name?.[0].toUpperCase()
うーん、見た目似てるけど、友だちのコードはすごくシンプルで必要なことだけやってる感じ✨
AIコードは機能的には動くけど、途中に無駄な処理があったり、ちょっとわかりにくいところもあるんだよね。
ここで大事なのは、「動いてるからOK」じゃなくて、「どう動いてるかをちゃんと見る」こと なんだと思う💡
AIは確かに便利だけど、出てきたものをそのまま鵜呑みにするのはこわい…！
AIを使うときに気をつけたいこと👀
- コードが動いても、もっとシンプルにできないか考える
- 意味のない処理や冗長な部分がないかチェックする
- 自分で読んで理解できるか確かめる
- AIが苦手な部分もあるって知っておく
なんかAIがすごいからって全部まかせちゃうと、後で自分が困ったりすることもあるよね😮💨
「動いてる＝良いコード」じゃないこと、ちょっとだけ覚えておくと、これからの仕事とか勉強にも役立つかも🍓
わたしもまだまだ勉強中だけど、AIと上手に付き合うコツは“ちゃんと見て使うこと”なんだなーって思ったよ💗
はてな
コメント
エイダン
これは面白いね！ 例えば `'${profile?.first_name[0]}${profile?.last_name[0]}'.toUppercase()` とかどう？
クリス
AIはプロトタイプ作りに最高で、進化したオートコンプリートにも便利だけど、高品質な本番コードを書くのは苦手だと思う。
ロバート
僕はAIをデバッグやアイデア出しに使ってる。 コードの一部を書かせても、わからないところはちゃんと説明を求めるよ。
グレース
要は、AIは便利な助手だけど、何でも鵜呑みにせず必ずチェックが必要。 高速だけどまだ学習中の新人みたいなものだよ。
ノーラン
神様、このAIの解決策はマジでひどいな。
ミア
```
キンバリー
const initials = JSON.stringify(profile)
ミア
.split('')
ロバート
.reduce((acc, char, i, arr) => {
グレース
if (char === '"' && arr[i - 1] === ':' && arr[i - 2] === 'e' && /[a-z]/i.test(arr[i + 1])) {
ハンナ
return acc + arr[i + 1].toUpperCase();
クリス
}
レオ
return acc;
ベン
}, '') || "N/A";
サム
```
ハンナ
彼はどんなプロンプト使ったの？ 僕がCopilotに「profileオブジェクトのfirst_nameとlast_nameからイニシャルを作るJavaScriptを書いて」って頼んだら、
グレース
```js
ノーラン
const getInitials = (profile) => {
ミア
const firstInitial = profile.first_name?.charAt(0).toUpperCase() || "";
クリス
const lastInitial = profile.last_name?.charAt(0).toUpperCase() || "";
リリー
return firstInitial + lastInitial;
マックス
};
ロバート
```
サラ
こんな感じで、彼のよりはずっとマシなんだよね。
クリス
この例はちょっと不運で、Cursorのコードの方が優れてる。 安全アクセスチェーンが多すぎてバグを生む自作コードよりずっといい。
グレース
例えば `{ first_name: null, last_name: "Smith" }` なら君のコードは `"undefinedS"` を出すけど、Cursorはもっとマシだよ。
Cursorの唯一の問題は最後の `slice` で長さを2文字に制限してるところ。 名前の大文字小文字をうまく残してるのは評価できる。
性能面を気にする人もいるけど、現代のJavaScriptはめちゃくちゃ速いし、配列も小さいからほとんど気にならないよ。
これは「こういう風に動くんだ」っていう面白い例だね。 詳しくはわからないけど、LLMがイニシャルを名前の属性として捉える様子は興味深いし、変数名が“userName”なのは笑える。
AIなんて全然すごくないし、君の方がコンピューターよりずっと優れてるよ。
実際にコード書いてた人が何も考えずAI任せにしちゃうのは驚きだよ。 LLMは便利だけど完全に頼るのは失敗の元だと思う。 Vibe codingは素人が「自分もコードできる」気になったり、単純作業を手早く済ませたい時の言い訳みたいなもんだよ。
君の解決策は不完全で、変数がundefinedだと文字列に「undefined」が混じるし、AIもそれは直してない。 あとユーザー入力の空白をトリムしないと変な空白も出るけど、そこはAIが対応してるね。
君のコードには問題がある。
```js
const getInitials = (firstName, lastName) =>
firstName?.[0].toUpperCase() + lastName?.[0].toUpperCase();
getInitials(undefined, "Davis"); // "undefinedD"
getInitials(undefined, undefined); // "NaN"
getInitials("John", ""); // エラーになる
```
Cursorの解決策は `"uD"`, `"uu"`, `"J"` と返すから、undefinedやNaNを出したり例外を投げるよりずっとマシだよ。
これは正解を出すのが難しい問題で、言語やルールが色々あるからね。 Githubのプレースホルダーアイコンみたいな方法の方が良いかも。 Gravatar、DiceBear、RoboHash、ui-avatarsは検討した？
Intl.Segmenterを使ってロケールを考慮しようとしてるサンプルもあるけど、完全じゃないんだよね。
（以下サンプルコード省略）
Undefined
僕は、vibe codingから脱却させる一番手っ取り早い方法は、コードにテスト合格を必須にすることだと思ってる。
そうすれば今のAIの限界が身にしみてわかるからね。
