【AI開発】AIがコードを書く時代、未経験エンジニアは何を考え学習していくべきか 【ClaudeCode】

はじめに

30代で未経験採用としてエンジニアに転職して、AIを活用しながら開発や学習などをしています。

AIにコードを書いてもらう機会が増えた今、何を考えどうやって学習していけばいいのだろう——とぼんやり考えていたのですが、最近その答えのひとつを体感する出来事がありました。

本当に小さなことです。でもそこから、AI時代の未経験エンジニアが意識すべきことが見えた気がしたので、共有してみます。

きっかけ：横スクロールUIでの想定外の挙動

今回、横スクロールで商品を一覧表示するUIを実装しました。overflow-x-auto と矢印ボタンで、マウスでもタッチでもスクロールできる構成です。

デスクトップのマウス操作で動作確認して「OK」と判断したのですが、ノートPCのトラックパッドで触ったときに問題が発生しました。

横スクロール領域の端までスクロールした後、さらにスワイプを続けるとブラウザの「戻る」「進む」ジェスチャーが反応してしまうのです。

商品を見ていたのに、突然前のページに戻される。これはかなりストレスのある挙動でした。

自分自身が今までノートPCで作業することがほとんどなかったので、この視点が完全に抜けていました。

原因と解決

この現象は「スクロールチェーン（scroll chaining）」と呼ばれるもので、スクロール可能な要素が端に達したあと、余ったスクロール量が親のスクロール領域へ伝播していく挙動です。最終的にブラウザ自体のナビゲーションジェスチャー（戻る/進む）に到達してしまい、意図しないページ遷移が起きます。

横スクロール → 端に到達 → まだスワイプが続く → 親のスクロール領域に伝播 → ブラウザジェスチャーが発動 → ページ遷移 😇

AIに相談したところ、Tailwind CSSの overscroll-x-contain で解決できると教えてもらいました。

<div class="grid grid-flow-col auto-cols-[200px] gap-6 overflow-x-auto overscroll-x-contain">
  <!-- 商品カード -->
</div>

これはCSSの overscroll-behavior-x: contain にコンパイルされるクラスで、スクロールが端に達しても隣接するスクロール領域への伝播をブロックし、ブラウザのスワイプナビゲーションも無効化してくれます。クラスひとつ追加するだけで解決しました。

ただ、今回伝えたいのはこのCSSの話ではなくて、ここに至るまでのプロセスのほうです。

AI時代の学習フロー：気づき → 質問 → 理解 → 深掘り → アウトプット(自分を強くするための装備集め)

この経験を振り返って、自分なりの「AI時代の学習フロー」が見えてきました。

今回の例で言えば

1. 気づく — トラックパッドでブラウザバックが暴発するぞ？
2. AIに質問 — 「横スクロールの端でブラウザバックが発動する問題を防ぎたい」
3. コードを読む — overscroll-behavior-x: contain が返ってくる。何をしているプロパティなのか読む
4. 動きを理解 — スクロールチェーンという仕組みと、それを遮断する効果を理解する
5. 深掘り — 「こういう時には使える？」「メリット・デメリットは？」など
6. 繰り返す — 納得いくまで質問と検証を繰り返す
7. アウトプット — この記事を書く

大事なのは、当たり前ですがAIが出したコードをそのまま貼り付けて終わりにしないことです。「このコードは何をしているのか」を自分で読んで理解し、「じゃあこっちのケースは？」と問いを立てる。この繰り返しが、AIに頼りながらも自分の力として積み上がっていく学び方なんじゃないかと思っています。

そしてこの積み重ねは、コードレビューを受けたときにも効いてきます。普段から「なぜこう書くのか」を理解する癖がついていれば、レビューで指摘をもらったときにもすんなり意図が入ってくる。もちろん、いただいたレビューに対しても「なぜこうするのか」をAIに聞く。そのひとつひとつが、自分の引き出しになっていく。(自分の装備を増やす、強いカードを集める感覚)

AI時代の未経験エンジニアが意識すべきこと

「使いにくい」と感じた直感を見逃さない

特にUIや導線設計などが該当すると思います。自分でプロダクトを触っていて「なんかこの操作やりにくいな」「ここ、ちょっと引っかかるな」と感じた瞬間——それはバグとして報告されるレベルではないかもしれないけど、ユーザーも同じ違和感を持っている可能性が高い。

コンソールにエラーが出るわけでもない。テストが落ちるわけでもない。でも、触っていて明らかにストレスがある。その感覚を「まあいいか」で流さずに、「これ、ちゃんと解決すべきでは？」と立ち止まれるかどうか。

エラーを直す力も大事ですが、エラーにならない"微妙な使いにくさ"に気づける力は、それと同じくらい価値があると思います。

AIがコードを書いてくれる時代、学ぶべきは「すべてのコードを自分で書く力」だけではなく、「何が問題で、何を解決すべきか」を見つけ出す力なんじゃないかと今回の小さな出来事から感じました。

まとめ

• AIの回答をそのまま使うのではなく、読んで理解し「じゃあこのケースは？」と深掘りする
• 「使いにくい」という直感は"気づき"の最大のヒント。見逃さないこと
• 気づき → 質問 → 理解 → 深掘り → アウトプット、このフローが学びを積み上げる(自分を強くする)

参考

• MDN - overscroll-behavior-x — contain の仕様：スクロールチェーンの防止とブラウザナビゲーションの無効化
• Chrome Developers - Take control of your scroll — スクロールチェーンの仕組みと overscroll-behavior の解説
• Tailwind CSS - Overscroll Behavior — overscroll-x-contain クラスの公式ドキュメント