AI時代に身につけるスキルの順番｜基礎なくして応用なし

「AI時代なら、まずReactとかNext.jsから覚えた方が早いですよね」

こう相談されたことがあります。気持ちは分かります。検索してもSNSを見ても、目に入るのは新しいフレームワーク、AIエディタ、プロンプト術。せっかく学ぶなら、最初から今っぽいものに触れたくなる。

ただ、実務の現場でコードを見ていると、そこで遠回りする人も見ます。見た目は動いているのに、HTMLの構造が崩れている。CSSがなぜ効かないか分からない。AIが出したJavaScriptを貼ったものの、エラー文の意味を読めずに止まる。プロンプトは上手いのに、出力の正誤を判断できない。

私は約20年、フロントエンドとWeb制作の仕事をしてきました。約500サイトの構築に関わり、現在は個人事業主として、Claude、ChatGPT、Geminiを日常的に使い分けています。AIでコードを書くことが当たり前になった今でも、伸びる人と詰まる人の差は「何を知っているか」だけではなく、学ぶ順番にかなり出ると感じています。

前の記事では、AI時代でもプログラミングを学ぶ意味はあると書きました。では、何から学ぶのか。この記事ではそこを整理します。

順番を間違えると、AIがあっても伸びない

AIがあると、最初の一歩はかなり軽くなりました。HTMLを書いて、CSSを当てて、JavaScriptで少し動かす。昔なら本を読みながら何日もかかったものが、今はChatGPTやClaudeに頼めば数分で形になります。

だからこそ、順番を間違えやすい。

最新フレームワークから入ると、画面はすぐ作れます。AIエディタを使えば、ファイル構成もそれっぽく整います。プロンプト術を学べば、コードの下書きも出せる。表面的には進んでいるように見えるんです。

でも、動かなくなった瞬間に差が出ます。エラーが出た時、どこへ戻ればいいか分からない。CSSの問題なのか、JavaScriptの問題なのか、フレームワークの書き方なのかを切り分けられない。AIに聞き直しても、返ってきた答えが正しいか判断できない。

ここで止まる人を何度も見ました。AIがない時代なら、手で書く途中で基礎に触れざるを得なかった。今は、基礎を飛ばしても一度は動いてしまう。その分、後から詰まった時に立ち返る基準が見えにくくなっています。

正直に言うと、私は「まず全部を手書きで覚えよう」とは思っていません。AIを使う前提でいい。ただし、AIを使う前提だからこそ、立ち返る土台を先に作る必要があります。

ステップ1 ── まず「読めて、分かる」土台

最初に身につけたいのは、手で何も見ずに書ける力ではありません。まずは、読めて意味が分かる力です。

HTMLなら、見出し、段落、リスト、フォーム、リンクがどういう構造で置かれているか。CSSなら、なぜこの余白がついているのか、どの指定がどこに効いているのか。JavaScriptなら、クリックした時に何が起きてどの値が変わっているのか。

このあたりは地味です。SNSで目立つスキルでもありません。でも、AIの出力を読む時に必ず効きます。

たとえばClaudeにカード型のUIを頼むと、かなりきれいなHTMLとCSSが返ってきます。見た目だけならそのまま使えそうなことも多い。ただ、見出しの階層が不自然だったり、ボタンに見えるものがリンクであるべきだったり、スマホ幅で余白が崩れそうだったりします。

ここで必要なのは、暗記量ではありません。「この構造は少し危ないな」と気づけることです。読めるから気づける。気づけるから、AIに直させる指示も具体的になります。

土台は、AIに置き換えられるものではなく、AIの出力を受け止めるための地面です。

ステップ2 ── AIに「小さく」書かせて、出力を検証する

土台に少し触れたら、AIを使っていい。むしろ、ここからは積極的に使った方がいいと思っています。

ただし、大きく丸投げしないことです。

「予約サイトを作って」と頼むより、「カード一覧のHTMLだけ作って」「このCSSの余白を整理して」「このエラーの原因候補を3つ出して」のように、小さく切る。小さく出して、読む。動かす。直す。もう一度AIに聞く。

この流れを繰り返すと、AIはただの代筆者ではなく、学習を進める相手になります。

私自身も、ClaudeにUIのたたき台を作らせて、ChatGPT(Codex)に別案を出させ、最後に自分で差分を見ることがあります。そこでよく分かるのは、AIごとに得意な書き方が違うことです。Claudeは文章や構成が自然な一方で、細かい実装条件をこちらが補う必要がある。ChatGPTは候補出しが速いけれど、前提をこちらがはっきりさせないと一般論に寄りやすい。Geminiは調べ物や周辺情報の確認に向く場面があります。

どれが上という話ではありません。小さく出して検証すれば、違いを使い分けられます。大きく丸投げすると、どこが良くてどこが危ないのか見えません。

AIを使う学習で大事なのは、答えをもらうことではなく、出力を検証する回数を増やすことです。

ステップ3 ── 要件・設計・レビューで使い分ける

最後に伸ばしたいのは、判断の層です。

何を作るのか。誰が使うのか。どの画面が先に必要なのか。保守しやすい形か。AIが出したコードをそのまま入れていいのか。ここは、単なる文法知識より少し上の層です。

AI時代に価値が残るのは、この判断です。

コードを書く量だけで見ると、人間の仕事は減ります。これは避けられません。でも、作るものを決める、要件を整理する、出力をレビューする、エラーの原因を切り分ける。この部分は、むしろ重要になっています。

たとえば、問い合わせフォームを作る時でも、「入力欄を作る」だけならAIでかなり進みます。けれど、必須項目は何か、送信後にどの画面へ遷移するか、エラー文は誰に分かる言葉か、個人情報の扱いは大丈夫か。ここを考えないと、仕事としては弱い。

AIは候補を出してくれます。でも、候補から選ぶのは人間です。選ぶには、目的と制約が分かっていないといけません。

やりがちな「逆順」の罠

詰まりやすい学び方には、いくつか型があります。

ひとつ目は、最新フレームワーク先行です。ReactやNext.jsから入ること自体が悪いわけではありません。ただ、HTML、CSS、JavaScriptの基本が見えないまま入ると、エラーの原因がどの層にあるのか分かりにくくなります。

二つ目は、プロンプト術先行です。プロンプトを整えると、AIの返答はたしかに良くなります。でも、出てきたコードを読めないままプロンプトだけ磨いても、最終的な品質は上がりません。うまく頼めるのに、正しいか分からない。これはかなり危ない状態です。

三つ目は、写経だけで満足する学び方です。教材のコードをなぞると、手は動きます。ただ、少し条件が変わった時に何を直せばいいか分からないなら、まだ自分の力にはなっていません。

私が見てきた中で伸びる人は、派手な技術に飛びつかない人ではありません。新しいものにも触れます。ただ、その前後で必ず小さく立ち返ります。「このHTMLはどういう意味か」「なぜこのCSSで崩れたか」「AIの答えは要件に合っているか」。この立ち返り方がある人は強い。

遠回りをゼロにする必要はありません。むしろ、多少迷う方が理解は残ります。ただ、立ち返る基準のない迷い方はしんどい。だから順番が大事です。

図解：AI時代に身につけるスキルの順番

③ 要件・設計・判断
   何を作るか決める／出力をレビューする

② AIで小さく作って検証
   部品単位で出す／読む／直す

① 読めて分かる土台
   HTML・CSS・JavaScriptの基本構造

AIは②から本格的に使う。①があるほど、②と③が速くなる。

何をAIに任せ、何を自分に残すか

AI時代の学習では、「全部を自分でやる」でも「全部をAIに任せる」でもなく、分け方を覚える必要があります。

AIに任せていい	自分がやる
下書き・定型コードの生成	何を作るかの決定（要件・設計）
調べ物・候補出し	出力が正しいかの検証・判断
単純な書き換え・整形	エラー原因の切り分け

HTMLのひな形、CSSの整理、文章の言い換え、エラー原因の候補出し。このあたりはAIに任せていい領域です。むしろ任せた方が、学習の速度は上がります。

一方で、何を作るか、どこまで作るか、返ってきたものを採用していいかは、自分に残したい。ここまでAIに預けると、速く進んでいるように見えて、実は自分の判断が育ちません。

個人的には、AI時代の学習は「覚える量を減らす」より、「検証する回数を増やす」と考えた方がうまくいきます。AIが下書きを出す。自分が読む。動かす。違和感を見つける。修正を頼む。もう一度読む。

この繰り返しが、仕事で使える力に近いです。

まとめ｜「何を学ぶか」より「どの順で学ぶか」

AI時代の学習は、順番で決まります。

いきなり最新フレームワークやプロンプト術から入ると、最初は速く進むかもしれません。でも、AIの出力を読めない、エラーを切り分けられない、要件に合っているか判断できない状態だと、途中で止まります。

• まず、HTML・CSS・JavaScriptを「読めて分かる」土台を作る
• 次に、AIへ小さく書かせて、出力を読んで検証する
• 最後に、要件・設計・レビューの判断を伸ばす

この順番なら、AIは学習を邪魔するものではなく、伸びる速度を上げる道具になります。

20年近くこの仕事をしてきて、道具は何度も変わりました。FlashやjQuery中心の時代も、スマホ対応が一気に広がった時期も、フレームワークが増えた時期も見てきました。そのたびに、表面の技術は変わります。でも、画面の構造を読む力、問題を切り分ける力、何を作るか判断する力は残ります。

だから私は、これから学ぶ人ほど、焦って上から積まない方がいいと思っています。土台を作り、AIで小さく試し、最後に判断へ進む。基礎なくして応用なし。AI時代ほど、この順番が効きます。

あわせて読みたい