今のWebサイトの動かし方が一気に学べる！

知識ゼロから体系的に学べるJavaScriptの基本
Webデザイナーなら外せない！アニメーションの知識
手を動かしながら学べる！プロの現場で役立つテクニック
最新のコードの知識から実装まで1冊ですべて学べる！

サンプルデータはWebサイトよりダウンロードできます。

Contents
———–
Chapter1　最初に知っておこう！JavaScriptでできること
1-1　JavaScriptとは
1-2　JavaScriptでできること
1-3　様々なJavaScriptを使ったWebサイト

Chapter2　JavaScriptに触れてみよう
2-1　JavaScriptはどこに書く？
2-2　JavaScriptを書く環境を用意しよう
2-3　はじめてのJavaScriptを書いてみよう
2-4　JavaScriptを書くときの基本ルール
2-5　コンソールを使ってみよう

Chapter3　JavaScriptの基本機能を使って背景色の選択ができるカラーピッカーを作ろう
3-1　この章で作成するカラーピッカーの紹介
3-2　必要なファイルを用意しよう
3-3　カラーピッカーの色の値を取得しよう
3-4　テキストを変更しよう
3-5　DOMを理解しよう
3-6　テンプレート文字列でテキストにカラーコードを表示させよう
3-7　定数でコードをスッキリまとめよう
3-8　カラーコードを表示する「きっかけ」を作ろう
3-9　関数で選んだ色を取得しよう
3-10　ページの背景色を変えてみよう
3-11　条件をつけて色の名前を表示させよう

Chapter4　イベントで操作しよう
4-1　イベントとは？
4-2　ローディング中の画面を作ろう
4-3　1 CSSのクラスを加えよう
4-4　2 ローディングアニメーションを手軽に実装しよう
4-5　ボタンをクリックしてページをダークモードにしよう
4-6　ボタンをクリックしてページをダークモードにしよう1 CSSのクラスを切り替えよう
4-7　ボタンをクリックしてページをダークモードにしよう2 ボタンのテキストを変更しよう
4-8　入力した文字数を数えてみよう
4-9　1 length でカウントしよう
4-10　2 比較演算子で文字数によって表示を変えよう
4-11　チェックを入れるとボタンを押せるようにしよう
4-12　1 チェックでボタンを有効化しよう
4-13　2 より効率のいい書き方を考えよう
4-14　ページのスクロール量を表示しよう
4-15　1 スクロール量を取得しよう
4-16　2 ページのサイズを取得しよう
4-17　3 計算式を書いてみよう

Chapter5　複数のデータを使ってみよう
5-1　この章で作成する画像一覧ページの紹介
5-2　insertAdjacentHTMLでHTMLタグを挿入しよう
5-3　配列で複数の画像のファイル名をまとめよう
5-4　配列の中にある画像を表示しよう
5-5　for文での繰り返し処理の書き方を理解しよう
5-6　for文で画像を一覧表示しよう
5-7　変数 let と定数 const の違いとは？
5-8　オブジェクトで画像、メニュー名、値段をまとめよう
5-9　オブジェクトの情報を取得しよう
5-10　配列とオブジェクトを組み合わせてデータをひとまとめにしよう
5-11　画像、メニュー名、値段を一覧表示しよう
5-12　分割代入でコードをスッキリさせよう

Chapter6　アニメーションを加えよう
6-1　動きがあるWebサイトを見てみよう
6-2　なぜWebサイトに動きあると効果的なのか
6-3　心地よいと感じる動きとは
6-4　見出しを下から浮き上がらせよう
6-5　1 アニメーションの基本の書き方
6-6　2 複数のアニメーションを加えよう
6-7　3 動きの詳細を加えよう
6-8　いろんな見出しのアニメーション
6-9　複数の画像を順番に表示しよう
6-10　1 すべてのクラスを取得しよう
6-11　2 ひとつずつ遅延させよう
6-12　いろんな画像のアニメーション
6-13　スクロールとアニメーションを組み合わせよう
6-14　1 Intersection Observerの仕組み
6-15　2 交差状態の情報を見てみよう
6-16　3 動きを加えてみよう

Chapter7　Webページを作ってみよう
7-1　作成するWebページの紹介
7-2　ローディングから画面遷移
7-3　1 画面遷移のスクリーンを作ろう
7-4　2 アニメーションのタイミングを調整しよう
7-5　画像ギャラリー
7-6　1 カーソルを合わせると大きく表示しよう
7-7　2 カーソルを合わせたときのアニメーション
7-8　3 複数要素の指定をforEachで書いてみよう
7-9　スライドメニュー
7-10　1 ボタンをクリックしてメニューを開閉しよう
7-11　2 ひとつずつ遅延させて上から順に表示させよう
7-12　スクロールで要素を表示
7-13　スクロールで要素を表示1 ふわっと表示するアニメーションの設定
7-14　スクロールで要素を表示2 交差判定のオプションについて
7-15　スクロールで要素を表示3 何度もアニメーションが実行されないように制御しよう

Chapter8　エラーと解決方法
8-1　エラーの確認方法
8-2　よくあるエラー一覧
8-3　これからどうするの？