はじめに
ChatGPTでコードを出してもらって、コピペしたら動いた…けど、仕組みはよくわからない。
そんな経験、ありませんか？
この記事は、ChatGPTから得たコードを「読める・直せる・応用できる」力を身につけたい人のために書いています。
特にJavaScript初〜中級者の方向けに、よく出てくるコードを「仕組みから」解説していきます。
1. なぜChatGPTのコードは“わかりにくい”のか？
✅ ChatGPTは「最短で動く」コードを返してくれる
- エラーが出ない
- よくある構文で構成されている
- でも「なぜそう書くのか」が省略されがち
✅ よくある“わかりにくさ”の例
const fetchData = async () => {
const res = await fetch("https://api.example.com/data");
const json = await res.json();
console.log(json);
};
→ 動く。でも async と await の意味、説明された？
2. async / await の仕組みをちゃんと理解する
async function getUser() {
const response = await fetch("https://api.example.com/user");
const data = await response.json();
return data;
}
✅ これがやってること（ざっくり）
-
fetch()はPromise（非同期処理）を返す -
awaitは「この処理が終わるまで止まる」指示 -
asyncが付いた関数は、自動的にPromiseを返す関数になる
✅ よくある間違い
const user = getUser(); // → Promiseオブジェクトが返ってくるだけ
→ 正しくは：
getUser().then(user => console.log(user));
// または
const user = await getUser(); // （async関数の中で）
3. なぜ“状態管理”が必要になるのか？
let isLoading = false;
function fetchData() {
isLoading = true;
fetch("https://api.example.com")
.then(res => res.json())
.then(data => {
console.log(data);
isLoading = false;
});
}
✅ ChatGPTがよく出す書き方だけど…
→ isLoading のような「状態変数」は、UIや処理の進行制御のためにある
✅ 状態の管理は今後のUI実装で避けて通れない
- ローディング中かどうか？
- エラーが起きたかどうか？
- データが取得済みかどうか？
→ この考えがわかると、Vue / React に進むときもスムーズ
4. map / filter / reduce の違い、わかってる？
const list = [1, 2, 3];
const doubled = list.map(n => n * 2); // [2, 4, 6]
→ map：変換用（個々の値を変える）
const filtered = list.filter(n => n > 1); // [2, 3]
→ filter：条件で絞り込み
const sum = list.reduce((acc, n) => acc + n, 0); // 6
→ reduce：累積処理（合計など）
ChatGPTが当たり前のように使うけど、「なんでこの関数なの？」と感じたら、こういう意図があるってこと。
5. じゃあどうやって“理解”していけばいいのか？
✅ 「動くコード」を「分解」してみる
// ChatGPTが出した関数
const greet = name => alert(`Hello, ${name}`);
// 分解
function greet(name) {
const message = `Hello, ${name}`;
alert(message);
}
→ どこで処理されてるかが見えてくる
✅ ChatGPTに「このコードの意味を教えて」と聞く
→ 出てきたコードが意味不明なら、分解と併用で意味を知る
6. おわりに：ChatGPTは“先生”ではなく“相棒”
- ChatGPTは動くコードを出すけど、文脈や目的は説明してくれないことが多い
- だからこそ、「なぜそう書くのか？」を自分で理解していく力が大事
- この記事を読んだあなたは、「ChatGPTで出てきたコードを読める人」にもうなれてる
まとめ：こんな風に成長していこう
| ステージ | 課題 | 対策 |
|---|---|---|
| 初心者 | 動いたけどよくわからん | 分解＋ChatGPTに意味を聞く |
| 中級者手前 | カスタマイズができない | map/filter/reduceや非同期の理解 |
| 中級者 | 設計の理由まで考えられる | 状態管理や再利用性を意識 |
次回
フォローしてくれたあなたへ
Qiitaではこうした「ChatGPTを相棒にするための記事」をシリーズ化していきます。
JSの基礎力・読解力を一緒に伸ばしていきましょう！