START
おみくじ、パスワード生成、ビンゴ、スロットを作り、乱数や配列を使って結果を生み出します。
レッスンをみる 時間を扱いたい方 日時やタイマーを使うカウントダウン、カレンダー、ストップウォッチを作り、日時の計算や画面の定期更新を学びます。
レッスンをみる 入力を保存したい方 入力とデータを扱うクイズ、メモ帳、Todo管理を作り、入力、判定、ブラウザへのデータ保存を組み合わせます。
レッスンをみる 操作感を作り込みたい方 UIやゲームを組み立てるスライドショー、タイピング、数字タッチゲームを作り、状態に応じて画面を変化させます。
レッスンをみるOVERVIEW
JavaScriptは、ブラウザ上でボタンやキーボードの操作を受け取り、画面の表示を変更できます。DOM操作で問題や選択肢を追加したり、画像を切り替えたりすることで、ユーザーの操作に応じて動くアプリを作れます。
おみくじやビンゴには、Math.random()で生成した乱数と配列を使います。Dateで時刻を取得し、タイマーで表示を更新すれば、カウントダウンやストップウォッチを作れます。
メモ帳やTodo管理には、ブラウザにデータを保存するlocalStorageを使います。保存した内容を読み込むことで、ページを開き直しても入力したデータを復元できます。
おみくじでは、ボタンのクリックを受け取り、乱数で配列から運勢を選び、画面に表示します。イベント、配列、DOM操作を使って、操作から結果表示までの処理を書きます。
ストップウォッチや数字タッチゲームでは、イベントで操作を受け取り、Date.now()で経過時間を計算します。関数で処理をまとめ、配列でデータを扱いながら、アプリの動きを組み立てます。
パスワード生成には乱数、カレンダーには日時の計算、Todo管理にはデータの保存、スライドショーには画像の切り替えを使います。アプリごとに異なるJavaScriptの機能を使います。
BEFORE YOU START
HTML、CSS、JavaScriptの基礎を学んだ方向けのレッスンです。
まだ学んでいない項目があれば、先に入門ガイドで確認しましょう。
GUIDE
乱数や配列を使い、実行するたびに結果が変わるツールやゲームを作ります。
Dateやタイマー処理を使い、時間を計算したり画面を定期的に更新したりします。
ユーザーの入力を受け取り、判定や保存を行って画面へ反映します。
キーボードやクリックの操作に応じて状態を管理し、画面を次々に変化させます。
NEXT STEP
FAQ
初めてなら「JavaScriptでおみくじを作ろう」から始めるのがおすすめです。乱数、配列、DOM操作、クリックイベントを使うので、JavaScript入門の復習にもなります。
まず基礎文法、関数、データ構造、DOM操作まで学んでおくとスムーズです。日時やタイマーの使い方で迷ったら、入門レッスンに戻って確認してください。
順に進める必要はありません。ランダム、日時、データ、UIの中から、興味のあるテーマや作ってみたいアプリを選んでください。途中で分からないところが出てきたら、JavaScript入門に戻って復習しましょう。
はい。HTMLタグとCSSの基本を学んだ方向けの内容です。まだ学んでいない方は、先にWebサイト制作入門で学習してください。
エディタとWebブラウザがあれば始められます。レッスン用の素材ファイルを開き、動画を見ながら実際にコードを書いていきます。
作品によって異なりますが、動画の視聴とコーディングを含め、1作品あたり数時間が目安です。1日20〜30分のペースなら、数日から2週間ほどを見ておくとよいでしょう。
一部の講座はプレミアム限定です。無料で視聴できる講座もあるため、内容を確認したうえでプレミアムプランをご検討いただけます。
ユーザー操作を受け取り、データを処理し、画面へ反映する一連の流れを自分で組み立てられるようになります。こうした流れは、Reactでアプリを作るときにも繰り返し使います。
LEARN NOW
3分動画でマスターできるプログラミング学習サービスです。あなたもプログラミングを始めてみませんか？
Copyright © 2011-2026 dotinstall.com. All Rights Reserved.
