学べるもの

Web制作の基礎から、JavaScriptで「動く仕組み」を作るところまでを実践的に学びます。

⚙️

JavaScript

ボタンで内容が変わる、入力チェック、アニメーションなどの動きを実装。

📄

HTML

文書の構造を作る。見出し・段落・リンク・画像・フォームなど。

🎨

CSS

色・余白・レイアウトを整える。カードやボタンのデザインも。

🧩

プログラミングの考え方

変数・条件分岐・繰り返し・関数など、基礎を実践で定着。

🖱️

UIの仕組み

タブ切替、ポップアップ、スライドショーなどをやさしい手順で。

📝

フォーム操作

入力チェック・エラーメッセージ・送信前のガイドを作る。

☁️

API活用

外部サービスのデータ(天気など)を取得して画面に表示。

🎮

ゲーム制作

乱数・タイマー・当たり判定などを使い、ミニゲームで楽しく学ぶ。

カリキュラム

基礎を固めることで、無理なくステップアップできる構成です(抜粋)。

Lesson 1

WEB抽選機(ガラポン)

はじめてのJS

画面に表示・入力・分岐の基本を体験。JavaScriptの手応えを最速でつかみます。

console.log alert コメント 変数・代入 prompt if / 比較・論理
Lesson 2

クイズゲーム

繰り返し

ループとデバッグで「考え方」を鍛える。入れ子(ネスト)の読み解き方も学習します。

for / while break / continue ネスト デバッグ
Lesson 3

じゃんけんゲーム

関数

関数で処理を整理。乱数で手を決め、戻り値と引数の使い方を理解します。

関数 / return Math.random 引数・パラメータ
Lesson 4

アドベンチャーゲーム

分岐の発展

状態(true/false)とswitch文で分岐を丁寧に整理。読みやすいロジックを意識します。

true / false switch
Lesson 6

入力フォームを自動チェック

要素操作

属性とidを理解し、onclickで入力を検証。要素取得の基礎を身につけます。

属性・属性値 onclick id getElementById
Lesson 7

ルーレット風おみくじ

テキスト操作

要素のテキスト差し替えとタイマーで、動きのある表示に挑戦します。

innerText / innerHTML / textContent setInterval
Lesson 8

ビンゴ抽選機

配列

配列と要素取得で画像を切り替え。UIの基本パターンを理解します。

配列
Lesson 10

見積もりフォーム

イベント処理

入力値の取得と計算、イベントでリアルタイムに金額を更新する処理を学習します。

getElementsByClassName parseInt イベント
Lesson 15

画像アニメーション

UI演出

「画像アニメーション」を題材に、複数要素を扱う方法と動きのある表現を学びます。

querySelectorAll forEach transform
Lesson 16

キーを押すたびに変わる世界

キーイベント

キーイベントの使い方を学び、押したキーや離したキーをリアルタイムに検知できるようにします。

イベント
Lesson 17

夜空に舞うシンボル

要素の追加

実務でもよく使われる要素操作として、新しい要素を生成する方法を学びます。

createElement appendChild
Lesson 18

APIで天気表示

API入門

外部APIからデータ取得から画面表示までの基本フローを体験します。

API基礎 JSON
※上記は抜粋です。内容は一部変更になる場合があります。