JavaScriptの全体像を理解し使いこなす!初心者が覚えるべき要素を厳選。アニメーション効果やモーションデザインも解説
JavaScriptの全体像を理解し使いこなす!初心者が覚えるべき要素を厳選。
ユーザビリティを向上させるアニメーション効果やモーションデザインも解説。
JavaScriptは他のプログラミング言語より敷居が低い(初心者向きの)言語として知られていますが、仕様や技術の全体像を理解していないと、なかなか使いこなせないものです。
本書は、JavaScriptの全体像を常に意識しながら、言語仕様であるECMAScript、ブラウザーに文字や画像を表示する仕組み、ブラウザーとプログラムをつなぐAPI、DOM、アニメーション表現などの技術を体系的に学べるように構成しました。
各章の冒頭では、達成目標や学習のポイント、学習の流れを理解し、「今何を学んでいるのか」を常に把握できます。
章末では、練習問題や達成目標のチェックシートで理解度を自己評価し、理解が曖昧な箇所や、復習すべき学習項目を洗い出すことができます。
また、JavaScriptには20年以上の歴史があり、何度も改訂が繰り返されてきましたが、特に大きな改訂となったのがECMAScript2015(ES6)です。ソフトウェア開発の生産性に関わる重要な仕様が盛り込まれており、これからJavaScriptを学ぶ人たちにとっての「入り口」になります。本書はこのES6に準拠しているので、より実践的なスキルを身につけることができます。
はじめに
本書の読み方
Chapter1 WebとJavaScript
01.JavaScript 誕生の歴史
・JavaScriptとは?
・JavaScriptとJavaはどう違うの?
02.Web ブラウザーの種類
・OSの標準ブラウザーとサードパーティのブラウザー
・レンダリングエンジンとJavaScriptエンジン
03. JavaScript とECMAScript の関係
・マイクロソフトのJScriptって何?
・高校生でもわかるJavaScriptの全体像
■学習目標のチェックシート・Chapter1 のまとめ
Chapter2 準備と基本文法
01.JavaScript を学ぶための準備をしておこう
・学習に必要な環境とは?
・テキストエディタの種類
・プログラミングは修正の繰り返し
02.HTML ファイルを作成する
・プロジェクトフォルダーとHTMLファイルを新規作成する
03.オートコンプリートを活用してコードを記述しよう
・オートコンプリート機能とは?
04.プログラミングの「デバッグ」を体験してみよう
・コンソールとは?
05.外部のJavaScript ファイルを作成してHTML に読み込む
・JavaScriptファイルを新規作成する
06.用途に応じてコメントを記述する
・コメントを記述してみよう
■学習目標のチェックシート・Chapter2 のまとめ
Chapter 3 変数とデータ型
01.変数とは?
・変数を宣言する
・変数にデータを記憶する
・変数名の付け方
・予約語は使用できない
・変数宣言の巻き上げとは?
02.演算子の種類と優先順位
・演算子とは?
03.JavaScript のデータ型
・データ型を学ぶ
・JavaScriptのデータ型はプリミティブ型とオブジェクト型
■練習問題
■学習目標のチェックシート・Chapter3 のまとめ
■練習問題の解答
Chapter 4 条件分岐
01.アルゴリズムって?
・アルゴリズムの基本
02.体格指数を算出するプログラムをif 文で書いてみよう
・if文で記述する
03.体格指数を算出するプログラムをif/else 文で書いてみよう
・if/else文で記述する
・痩せぎみの判定を追加する
04.曜日によって表示を変更するプログラムをswitch 文で書いてみよう
・switch文で記述する
■練習問題
■学習目標のチェックシート・Chapter4 のまとめ
■練習問題の解答
Chapter 5 繰り返し
01.ループ文
・ループ文とは?
02.while 文とdo while 文を理解する
・while文とdo while文で記述する
03.for 文を理解する
・for文で記述する
04.break 文とcontinue 文を理解する
・break文とcontinue文で記述する
■練習問題
■学習目標のチェックシート・Chapter5 のまとめ
■練習問題の解答
Chapter 6 配列
01.配列とは何か?
・配列を学ぶ
02.JavaScript の配列はオブジェクト
・組み込みオブジェクトとは?
03.連想配列
・連想配列を使ってデータを格納する
04.基本的な配列の操作
・配列の操作を学ぶ
■練習問題
■学習目標のチェックシート・Chapter6 のまとめ
■練習問題の解答
Chapter 7 関数
01.関数の基礎知識
・関数のどこが便利なの?
・関数はどのように定義するの?
・メソッドでもある関数とメソッドではない関数
02.関数の使い方
・独自の関数を定義して呼び出す
03.関数を使って簡単なプログラムを作る
・改良前のプログラムを再確認する
・プログラムを設計する
■練習問題
■学習目標のチェックシート・Chapter7 のまとめ
■練習問題の解答
Chapter 8 組み込みオブジェクト
01.JavaScript の組み込みオブジェクト
・組み込みオブジェクトとその種類
02.Date オブジェクトを使う
・Dateオブジェクトで日付や時刻を表示する
03.String オブジェクトを使う
・Stringオブジェクトで文字列を操作する
04.Number オブジェクトを使う
・Numberオブジェクトで数値を表示する
■練習問題
■学習目標のチェックシート・Chapter8 のまとめ
■練習問題の解答
Chapter 9 オブジェクト指向プログラミング
01.オブジェクト指向とは?
・オブジェクト指向の概念を学ぶ
02.DOM オブジェクトとは?
・JavaScriptをWebで使うために欠かせない技術
03.DOM の操作
・DOMの構造を理解する
・DOMを操作する
・DOMオブジェクトの内容を確認する
■練習問題
■学習目標のチェックシート・Chapter9 のまとめ
■練習問題の解答
Chapter 10 Web API
01.API とは?
・Webアプリケーション開発で必須のAPI
・ブラウザーのAPIとサードパーティのAPI
02.Web ブラウザーのオブジェクト
・Webブラウザーのオブジェクトとは?
・Webブラウザーの印刷ダイアログを表示する
・イベントオブジェクト
03.その他のオブジェクト(XMLHttpRequest)
・XMLHttpRequestを使った処理を確認する
■練習問題
■学習目標のチェックシート・Chapter10 のまとめ
■練習問題の解答
Chapter 11 jQuery
01. JavaScript のライブラリ「jQuery」
・ライブラリとフレームワークとは?
・jQueryの使い方
・ライブラリなしのJavaScriptコードとjQueryを比較する
・jQueryでh1要素の色を変更する
02. スライドショーを作成する
・スライドショーを作成する
■練習問題
■学習目標のチェックシート・Chapter11 のまとめ
■練習問題の解答
Chapter 12 アニメーション
01. Vue.js の使い方
・JavaScript 学習の全体像
・Vue.js をインストールする
・Vue.js を動かしてみる
02. 基本的なアニメーション表現
・フェードイン・アウト
・ズームイン・アウト
03. モーションデザイン
・フラットデザインとモーションデザイン
・モーションデザインの重要性
・CSSアニメーションライブラリの活用
■練習問題
■学習目標のチェックシート・Chapter12 のまとめ
■練習問題の解答
・索引