inflearn logo
知識共有
inflearn logo

HTML/CSSの次はJavaScript! Web開発のためのJavaScript基礎

HTML/CSSを学んだなら、次はJavaScriptでウェブページを動かしてみましょう。変数・関数・配列・条件文・繰り返し文などプログラミングの基礎から、DOM要素の操作やイベント、タブ・アコーディオンのようなUIの実装までを学び、Reactなどのフロントエンド学習へとつながるJavaScriptの基礎力をしっかり身につけていきましょう。

難易度 初級

受講期間 無制限

HTML/CSS
HTML/CSS
JavaScript
JavaScript
css-flexbox
css-flexbox
vanilla-javascript
vanilla-javascript
HTML/CSS
HTML/CSS
JavaScript
JavaScript
css-flexbox
css-flexbox
vanilla-javascript
vanilla-javascript

受講後に得られること

  • JavaScriptの基礎力

  • JavaScriptを利用して要素を選択できる。

  • 要素のスタイルを変更できる

  • さまざまなイベントを適用できる

  • UI/UX効果を実装できる

🚀 HTML/CSSの次のステップ、今度はJavaScriptです

HTMLでWebページの構造を作り、CSSでデザインしたら、次はJavaScriptでWebページに動作とインタラクションを加える番です。

ボタンをクリックすると画面が切り替わり、ユーザーの入力に応じてコンテンツが変更され、タブやアコーディオンメニューが動作するウェブページ。このような機能を実装する中心的な言語がJavaScriptです。

この講義では、単に文法を暗記するだけでなく、

JavaScriptの基本文法 → DOM要素の操作 → イベント → 実際のUI実装

順番に学習します。

変数と関数が実際のWebページでどのように使われるのかを直接確認しながら、HTML/CSSで作られた静的なページをJavaScriptで動作させるプロセスを体験してみましょう。

🤖 AI時代にもJavaScriptの基礎が必要な理由

AIがJavaScriptコードを素早く作成してくれる時代になりました。

しかし、AIが生成したコードがなぜ動作するのかを理解し、望む機能に修正し、エラーが発生した際に問題を見つけるには、JavaScriptの基本原理を理解している必要があります。

特にReactやNext.jsといったフロントエンド技術も、JavaScriptを基盤としています。

AIにコードを依頼する能力とともに、生成されたコードを読み、理解し、修正できる基礎力を身につければ、AIをより効果的な開発ツールとして活用できます。

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

JavaScriptを初めて学ぶ方
HTML/CSSの学習を終え、プログラミングを初めて始める方に適しています。

Webパブリッシングのスキルを広げたい方
静的なページを超えて、クリック、入力、スクロールなどに反応するインタラクティブなWebページを作りたい方におすすめです。

JavaScriptの文法は学んだものの、活用に難しさを感じている方
変数、関数、条件文は知っているものの、実際のHTML要素にどのように適用すればよいのか悩んでいた方に役立ちます。

Reactなどのフロントエンド技術を学ぼうとしている方
Reactの学習前に必要なJavaScriptとDOM、イベントの基本概念を身につけられます。


💡 何を学びますか?

STEP 01. JavaScriptプログラミングの基礎力

プログラミングの基本となるJavaScriptの主要な文法から始めます。

  • 変数と演算子

  • 関数とオブジェクト

  • 配列の作成と活用

  • 条件文と論理演算子

  • for、while、forEach、for...ofなどの繰り返し文

一つひとつの文法を暗記するよりも、コードの流れを理解することに重点を置きます。

STEP 02. 文字列とタイマーを活用する

Web開発でよく使用する文字列処理と、時間に応じた動作を学習します。

  • 文字列の抽出と結合

  • 文字列の内容変更

  • JavaScriptタイマー

JavaScriptでデータを加工し、特定の時間にコードを実行する基本原理を理解します。

STEP 03. JavaScriptでウェブページを操作する

ここまで学んだ文法を、実際のHTML/CSSと連携させます。

  • DOM要素の選択

  • 選択した要素のスタイル変更

  • 繰り返し文を活用した複数要素の制御

  • click、mouseover、mouseoutなどのイベント

  • changeなどの入力要素イベント

ここからJavaScriptの文法が実際のWebページでどのように使われるのかを本格的に体験します。現在の講義でも、DOMの選択とスタイルの変更、イベントがそれぞれ別のレッスンとして構成されています。Inflearn

STEP 04. モダンJavaScriptの構文を身につける

モダンなJavaScriptコードを理解するために、ES6の主要な構文を学習します。

  • let、const

  • テンプレートリテラル

  • アロー関数

従来の文法と比較しながら、より簡潔で現代的なJavaScriptの書き方を身につけます。

STEP 05. JavaScriptで実践的なUIを実装する

これまで学んだ文法、DOM、イベントを総合し、実際のWebサイトでよく見られるUIを自分で実装します。

トップに戻る
スクロールとイベントを活用してページ上部へ移動する機能を実装します。

Tabs
メニューを選択するとコンテンツが切り替わるタブUIを実装します。

Accordion
クリックに応じてコンテンツが展開・折りたたまれるアコーディオンUIを実装します。

単に完成したコードを書き写すのではなく、これまでに学んだJavaScriptが実際のUIを実装する際にどのようにつながるのかを確認します。


✅ 受講後には、次のことができるようになります

受講後には、JavaScriptの主要な構文を理解して自分でコードを書けるようになり、条件分岐や繰り返し文を活用してプログラムの流れを制御できるようになります。

また、DOM要素を選択・変更したり、ユーザーイベントに反応する機能を実装したりし、HTML/CSSとJavaScriptを組み合わせて実際に動作するWebページを制作できる基礎力を身につけられます。

何より、今後jQuery、React、TypeScriptなど次の段階のWeb開発技術を学ぶためのJavaScriptの基礎を身につけられます。

🛠 受講前の準備事項

JavaScriptを初めて学ぶ方も受講できます。

ただし、実習ではJavaScriptでHTML要素とCSSスタイルを直接制御するため、HTMLとCSSの基本文法を知っていれば、よりスムーズに学習できます。

JavaScriptに関する事前経験は必要ありません。

実習ではVisual Studio CodeやChromeなどの最新のウェブブラウザを使用し、講義を視聴するだけでなく、サンプルコードを自分で記述して実行してみることをおすすめします。

HTML/CSSが初めてなら、まず無料の基礎コースを学習してから始めてもよいでしょう。

HTML基礎コース
CSS基礎コース

ムービングタブを実装する

アコーディオンを実装する

「Back to Top」スクロールアニメーションを実装する

よくある質問

Q1. JavaScript(JS)とはどのような言語ですか?

JavaScriptはWebページを動的に操作するプログラミング言語です。HTML・CSSで作成した静的な構造にインタラクションとロジックを追加し、マウスクリック、ボタン操作、アニメーション効果などを実装できます。

Q2. HTML/CSSを学んでいないのですが、この講義だけでも受講できますか?

この講義はWebパブリッシングの基礎知識(HTML・CSS)が必要な構成になっているため、基本的な文書構造を知っていれば、より簡単に学習できます。

Q3. 講義ではどのような内容を学びますか?

この講義では、次のような内容を扱います:

  • 変数、演算子、関数、オブジェクト、配列などの基本文法

  • 条件文、繰り返し文で論理的な流れを構成

  • HTML要素の選択およびスタイルの変更

  • イベント処理(click、hoverなど)

  • トップに戻る、タブメニュー、アコーディオンなどの簡単な実践例の実装

Q4. この講義を受講すると、何を作れるようになりますか?

この講義を受講すると、HTML要素をプログラムのように制御できる能力が身につきます。
例えば:

  • ボタンクリック時に内容を変更する

  • タブメニューの切り替え

  • スクロールに応じたエフェクトの適用
    など、インタラクティブUIを自分でコードとして実装できます。

📚 JavaScriptの基礎を身につけたら、次のステップへ!

JavaScriptの基本文法とDOM、イベントまで理解したら、次は学習目的に応じて学習範囲を広げてみましょう。


Webパブリッシングをより深く学びたいなら
jQueryを活用して、タブ、アコーディオン、スライダーなど、さまざまな実務UIの実装方法を学べます。


フロントエンド開発へと発展させたいなら
Reactのコンポーネント、Props、Stateなどを学び、実際のプロジェクト制作に挑戦してみましょう。

こんな方に
おすすめです

学習対象は
誰でしょう?

  • HTMLの基礎を学習した方

  • CSSの基礎を学習した方

  • ウェブページに動的な効果を実装したい方

  • Webパブリッシャーとして就職したい方

  • フロントエンド開発者を目指している方

前提知識、
必要でしょうか?

  • HTML

  • CSS

こんにちは
ezwebです。

キャリア認証

3,003

受講生

78

受講レビュー

4

回答

4.9

講座評価

15

講座

フロントエンドの実務教育から企業・機関への出張講義、オンライン講義の制作まで行う、Webフロントエンド専門講師です。

■ フロントエンド専門講義
HTML/CSS、JavaScript、React、Firebase、Figma、AIを活用したウェブ開発など
ウェブパブリッシングからフロントエンド実務まで、段階的な教育を行います。

■ 企業・機関・教育機関への出張講義が可能
企業の実務担当者向け研修、KDTコース、大学・スクールでの特別講義など
受講者の対象とレベルに合わせたカリキュラム構成および出張講義が可能です。

■ オンライン教育課程の設計・制作が可能
オンライン講義のカリキュラム企画から教材・PPT・実習資料・サンプルコードの制作、
講義の撮影およびコンテンツ納品まで、オンライン教育コンテンツの全工程に対応できます。

■ オンライン・オフライン講義の両方に対応
スクールでの対面講義だけでなく、リアルタイムのオンライン講義、録画型コンテンツの制作など
教育環境に合わせてさまざまな形式で実施します。


■ 主な活動

  • ESTSOFT KDT フロントエンド講義

  • グリーンコンピューターアカデミー Webパブリッシング・フロントエンド講義

  • WebパブリッシングのYouTubeチャンネル「ezweb」を運営

  • Webパブリッシング・Webデザイン関連書籍の執筆


■ 書籍
2021.07 / Webデザイン&WebパブリッシングのためのFigma完全活用ガイド / ビージェイパブリック

2022.08 / コーディングが初めての人のための with ウェブパブリッシング  / ヨンジン出版社

2023.10 / 2024 SDエデュ ユ・ソンベ ウェブデザイン技能士実技 個別指導ノート / 時代考試企画

2024.11 / 2025 SDエデュ ユ先輩 ウェブデザイン技能士 実技個別指導ノート / 時代考試企画

2025.11 / 2026 SDエデュ ユ・ソンベ ウェブデザイン技能士 実技個別指導ノート / 時代考試企画

 

もっと見る

受講レビュー

全体

1件

5.0

1件の受講レビュー

  • mrnobody님의 프로필 이미지
    mrnobody

    受講レビュー 8

    ∙

    平均評価 5.0

    5

    100% 受講後に作成

    良い講義をありがとうございます。

    ezwebの他の講座

    知識共有者の他の講座はこちら

    似ている講座

    同じ分野の他の講座を見てみましょう!

    新規会員登録で25%OFF

    ¥1,341

    25%

    ¥1,791