SBクリエイティブ

1冊ですべて身につくJavaScript入門講座

Mana:著者

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

定価:2,794円(本体2,540円+10%税)

書籍情報

  • 発売日:2023年3月1日(水)
  • ISBN:978-4-8156-1575-8
  • サイズ:B5判
  • ページ数:344
  • 付録:-
  • Manaが書いたやさしい入門書

    大人気ブログ「Webクリエイターボックス」の管理人、Manaが書いたJavaScriptの入門書です。Webで活躍する人に向けてずっと役立つ情報をわかりやすく書いていたから、説明がやさしくスッと頭に入ってきます。

  • 最新の知識を楽しく体系的に学べる

    体系的な知識として身につけたいなら書籍の学習はとても有効です。この本は難しい文法の話も、とことん噛み砕き、なるべく楽しく伝わるように解説しています。最新のJavaScriptの情報を知識ゼロから学びはじめられます。

  • プログラミングの学習にも使える

    JavaScriptはWebページに機能を追加できるプログラミング言語です。条件によってHTMLやCSSを書き換えたり、アニメーションで動きをつけたりできます。ブラウザーだけで確認できる本書はプログラミングの最初の学習に最適です。

  • アニメーションの知識が深く学べる

    なぜWebサイトに動きがあると効果的なのか。心地よいと感じる動きとはなんなのか。この本では手軽に使えるWeb Animations APIの学習のから、タイミングや速度などWebデザインを作る上で必要な動きの知識まで学べます。

  • Webサイトを作りながら学べる

    ローディング、画像ギャラリー、スライドメニューといったWebサイトでよく使われる機能を一緒に作っていきます。実際に1つのWebサイトに実装していくことでJavaScriptの現場の使い方が体験できます。

  • この1冊ですべての基本が身につく!

    この1冊にJavaScriptの基本、プログラミングの知識、イベント操作、アニメーション、Webページでの使用方法、エラーと解決方法といったことがギュッと詰まっています。コードの知識から実装方法まで一気に身につきます。

サポート情報はありません。ご不明な点がございましたら、こちらからお問い合わせください。

著者紹介


関連商品のご案内

もっと見る

試し読み新着お届け

もっと見る