jQueyのその先へ。サンプルをつくりながら学ぶ制作現場の実装スキル jQueyのその先へ。 サンプルをつくりながら学ぶ制作現場の実装スキル JavaScriptの基本書は数多く存在しますが、実際の開発で、どうコードに落とし込めばいいかとなると、とたんに「壁」を感じる人がたくさんいます。本書は、そんな人たちが、これだけ学べば「壁」が越えられるという5つ（❶オブジェクト指向の考え方、❷UI・インタラクティブ表現としてのイベント、❸Canvas APIによるグラフィック表現、❹Ajaxを利用したAPI連携とデータ検索、❺シングルページアプリケーションの実装）を集中的に学んでいく学習書です。それぞれ読んで理解しできる「基本」と、具体的なコードを書きながら学べる「実践」とのセットで学べるので、現場で使えるスキルが効率よく学べます。 Chapter01 オブジェクト指向 Chapter02 UI・インタラクティブ表現 Chapter03 グラフィック表現 Chapter04 AJAX・API連携・データ検索 Chapter05 シングルページアプリケーション

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 のまとめ ■練習問題の解答 ・索引

実際のWebサイト制作に使えるコードを多数紹介。プロのデザイナーとして必須のスキルが身につく。 1 JavaScriptの基本 2 Webページの操作-変数の利用 3 文字の加工-文字列処理 4 値による表示の変更-条件分岐 5 複雑化した処理の整理-関数 6 大量のデータの処理-配列とループ処理 7 JavaScriptのデータ構造-オブジェクト 8 キャンバス-Canvas 1 9 画像、音声、動画の利用-Canvas 2、Audio、 Video