今の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 これからどうするの?