HTML/CSS 次は JavaScript と React：AIと一緒に学ぶフロントエンド入門

🤖 AIがコードを書いてくれる時代、それなのになぜ自分のコードは直せないのでしょうか？

AIはコードを素早く提案します。しかし、そのコードが要件に合っているかを判断し、エラーを修正し、実際のサービスに適用するのは開発者の役割です。

基礎が不足していると、AIの回答をそのままコピーすることになり、小さな問題が起きてもどこから直せばよいのか分からなくなります。

この講義は"AIにコードを作ってもらう方法"を学ぶためのものではありません。JavaScriptの基本文法とDOM、イベントをまず身につけ、Reactのコンポーネント・状態構造へ自然に発展させていきます。AIは学習パートナーとして活用しますが、生成されたコードを自分で読み、修正し、検証する力を養うことに重点を置きます。

完成作品をプレビュー

▶ React完成版を見る

https://ai-js-react.vercel.app/

このような方におすすめです 🙋

• HTML/CSSまでは学んだけれど、次に何を学べばよいのか途方に暮れている方

• JavaScriptの文法は学んだけれど、Reactに進んだ途端につまずいてしまう方

• AIコーディングツールを使ってみたものの、得られたコードが正しいか判断したり、修正したりするのが難しい方

• 小さな例題にとどまらず、要件整理 → 実装 → テスト → ビルドまで、プロジェクトの流れを経験したい方

前提知識

• HTML/CSSで簡単なウェブページ（タグ構造、基本的なスタイリング）を作成できるレベル

• VS CodeとWebブラウザ（開発者ツール）の基本的な使い方

• JavaScript・Reactの経験は必要ありません。

この講義が他と違う点 💡

HTML/CSSの次のステップにぴったり合った流れ

JavaScriptの基礎 → DOM・イベント → Reactの順に、一度に一段階ずつステップアップします。

同じ機能を2回作ります（JavaScript → React）

検索・フィルターをまずJavaScriptで作り、同じ機能をReactで再実装します。2つの方法の違いを実感しながら理解するセクションです。

行き詰まってもやり直せます

すべてのレッスンでstartコードとcompleteコードを提供します。行き詰まったら、そのレッスンのstartコードからもう一度始めてください。

自分での実装が中心、AIは部分的に活用

AIに丸ごと任せれば早いものの、問題が発生したときにどこを直せばよいのか分からなくなります。コードはほとんど自分で入力して原理を身につけ、AIは要件の整理や実装方針の提案を受けるときにのみ使用します。何を反映するかは学習者自身が選びます。

🛤️自分のスタイルに合った2つの学習方法

• どちらの方法も同じ動画で進めます。{{学習ノートの提供場所（例：授業資料タブ）を記入してください}}

• 学習ノートは動画の横に開いて置き、手順に沿って進めるためのマニュアルです。入力するプロンプト、作成するコード、行き詰まったときの確認方法がまとめられています。

このような内容を学びます 📚

🌱 セクション1 · AIとJavaScript、最初の一歩

AIを正解生成器ではなくコーディングパートナーとして活用する方法を学び、JavaScriptの実行環境を準備して最初のコードを実行します。

• 第1回 - HTML/CSSの次は何を学ぶ？ JavaScriptが必要な理由

• 2時限目 - AIを答えではなくコーディングパートナーとして使う方法を学ぶ

• 3時限目 - JavaScriptを始める - 変数とデータ型

  
  

🧩 セクション2 · コードを読み解く力、JavaScriptの基本文法

変数・条件文・関数・配列・オブジェクト・mapを学びます。AIが提示したコードも自分で読み、説明できる基礎を身につけます。

• 4回目 - コードが自ら判断する：演算子とif条件文

• 5時限目 - 繰り返しコードはもう終わり：関数を一度で理解する

• 6回目 - 商品リストを入れる器、配列

• 第7時限 - 商品1つを表現する方法：オブジェクトとデータ構造

• 8次 - forからmapまで：リストを扱う最も簡単な方法

• 9時限目 - Reactへの入場券：必ず知っておきたい最新JS文法

🖱️ セクション3・画面を動かす力、DOMとイベント

要素を選択してクリック・入力イベントを処理し、データから商品カードを描画し、検索とカテゴリーのフィルターまで自分で実装します。

• 10回目 - 画面上の要素を自分の手でつかんでみる（DOM選択）

• 11回 - クリックすると反応するウェブ：イベント処理（構造分離）

• 12回目 - コードで画面を変える：テキスト・スタイル・クラス

• 13回目 - データを入れるだけでカードが次々に表示される：リストレンダリング

• 14回目 - タイピングするとすぐに見つけてくれる商品検索を作る

• 15回目 - ボタンを1回クリックするだけでカテゴリー絞り込みを完成させる

⚛️ セクション4 · JavaScriptからReactへ思考を広げる

先ほど作った機能を、コンポーネント・props・state構造で作り直します。2つの方式の違いを体感して理解するパートです。

• 16時限目 - なぜReactなのか？ 直接DOMを操作することの限界を実感する

• 17時限目 - 初めてのReactプロジェクト（Vite）

• 18回 - JSXを理解する：HTMLのように見えるJavaScript、JSX

• 19時限 - 画面をレゴのように：商品カードコンポーネントの分離

• 20回目 - 親から子へ：Propsでデータを渡す

• 21回目 - 値が変わると画面も変わる：useState

• 22回目 - Reactでクリックと入力を扱う：イベントとForm

• 23回目 - 配列ひとつでリストを完成：mapとkey

• 24時限 - 作る前にまず設計：検索要件とState設計

🛒 セクション5・AIと完成させるReact商品探索プロジェクト

要件整理から検索、カテゴリ・価格の複合フィルター、お気に入り登録、商品詳細まで実装します。Vitestのテストとビルドで仕上げ、CopilotとClaude Codeでコードレビューとリファクタリングのポイントを比較してみます。

• 25回目 - プロジェクト開始：要件整理と構成設計

• 26回目 - Reactで商品検索を実装する

• 27回目 - 検索＋カテゴリー＋価格、条件を組み合わせたフィルター

• 28時限目 - 気に入った商品をお気に入り登録して詳細を見る

• 29時限目 - 本当にうまく動く？ Vitestで検証する

• 30回目 - AIコードレビュー・リファクタリングとプロジェクト完成

この講義を作った人

HTML/CSSからJavaScript・Reactまで、未経験者や初心者を教えてきたフロントエンド講師です。

ESTSOFT KDTやグリーンコンピューターアカデミーなどで、「HTML/CSSの次に何をすればよいのか」と途方に暮れている方々に多く出会いました。そこで、複雑な概念を小さな実習に分け、自ら成果物を完成させるプロジェクト中心の授業を作ってきました。

『コーディングが初めてなら with ウェブパブリッシング』などのウェブパブリッシング・ウェブデザイン書籍を執筆し、ウェブパブリッシングのYouTubeチャンネル 'ezweb'を運営しています。

インフラン イージーウェブの全講座 →

ご不明な点はありますか？

Q. 🔰 コーディングが初めてでもついていけますか？

基礎知識があれば十分です。JavaScriptから一つずつ丁寧に始め、各レッスンにstartコードを用意しているため、誰でも同じ環境で実習を始められます。

Q. 🤖 AIツールは何を使い、有料ですか？

基本ツールはGitHub Copilotで、無料プランで進められます。無料プランの月間利用上限によって実習が止まる可能性があるか確認したうえで一文追加し、後半のコードレビュー・リファクタリングのセクションではClaude Codeも併用して、2つのツールの結果を比較します。Claude Codeは有料であり、講義ではこの点を最初に案内します。インストール方法は講師のYouTube動画へのリンクで公開します。

Q. 💳 Claude Codeを購入しないと受講は難しいですか？

Claude Codeは2つのツールを比較する場面でのみ使用し、最終的な進行はCopilotで行います。支払いをしなくても、動画で比較の過程を確認しながら学習を進められます。

Q. 📓 動画を見るだけでよいですか？学習ノートも必要ですか？

動画を見るだけでも学習できます。2つ目の学習方法（プロンプトでAIと一緒に進める）を選択する場合は、学習ノートが必須です。

受講前の注意事項

次のステップのおすすめ

この講義を修了した後は、次のコースに進んで学習してみましょう。

React + TypeScript実践 - TodoListプロジェクトで学ぶTypeScript

AIと一緒に作るウェブサイト - Stitch · Figma Make · React実践プロジェクト