ノンプログラマのためのJavaScriptはじめの一歩（WEB+DB PRESS plusシリーズ）

ノンプログラマのためのJavaScriptはじめの一歩

2012年11月7日発売

外村和仁　著

A5判／272ページ／

定価2,499円（本体2,380円）

ISBN 978-4-7741-5376-6

→学校・法人一括購入ご検討の皆様へ

本書の公式タグは『jsippo』です。

この本の概要

本書は，プログラムを書いたことがないノンプログラマの人に向けたJavaScriptの入門書です。初学者の方がつまずきそうなところや，わかりにくいところを重点的に解説しています。たとえばプログラムを学ぶときにつまずきやすい点の一つに，ある文法や機能について説明を受けても，実際にどういう場面で使うのかがわからず，理解が進まないということが挙げられます。そこで本書では，書籍全体を通して1つのスライドショーのサンプルプログラムを使って，解説した文法や機能が実際にどこでどういうふうに使われているかを毎回見返すことでしっかり理解するという構成にしました。

定番ライブラリjQueryの基本も学べ，付録ではHTMLとCSSの基本を解説しています。

こんな方におすすめ

プログラミングに興味があるけど，はじめの一歩を踏み出せないでいる人
JavaScriptやjQueryの基本を学びたいノンプログラマ
プログラムの経験がないWebデザイナ，マークアップエンジニア

はじめに
謝辞

第1章　JavaScript入門準備

1.1　プログラムを学ぶうえでの心構え

プログラムはすべて覚えなくていい
プログラムは書かないと覚えない

1.2　JavaScriptとは何か

1.3　JavaScriptの実行

開発環境を整える
- コラム：JavaScriptを書いて実行できるWebサービス
script要素 ── JavaScriptの記述場所
初めてのJavaScript ── 「hello, world」を出力してみる

1.4　開発ツール

インストールと起動
- Firefox
- Google Chrome
コンソール
- エラーの出力
- メッセージやログの出力
HTMLとCSSの確認

1.5　スライドショー ── 本書のサンプルプログラム

1.6　本書の構成

1.7　本章のまとめ

- コラム：JavaScriptの適用範囲

第2章　JavaScriptの文法

2.1　基本的な文法

セミコロン ── 文の終わりを明示する
コメント ── プログラムに注釈を残す
- 行コメント
- ブロックコメント
変数 ── データを記録する
- 変数の定義
- 値の更新
- 変数の一括定義
サンプルプログラムを見直す
- コメント
- 変数の定義と代入
- 全体を見返す

2.2　文字列と数値

文字列の定義
文字列の連結
数値の定義
四則演算
数値と文字列の違い
サンプルプログラムを見直す
- 文字列
- 文字列の結合
- 数値
- 全体を見返す

2.3　配列とオブジェクト

配列とは何か ── 複数のデータをまとめて扱う
配列の定義
配列の操作
- 要素の値の取得
- 要素の値の更新
- 配列の要素数
オブジェクトとは何か ── 異なる種類のデータをまとめて扱う
オブジェクトの定義
- コラム：Internet Explorerでの注意点
オブジェクトの操作
- 値の取得
- 入れ子になっているオブジェクトのプロパティの値を取得
- []を使ってプロパティ名を指定して値を取得
- 値の更新
- プロパティの追加
サンプルプログラムを見直す
- 配列とオブジェクト
- 配列の要素数の取得
- 配列の要素の値の取得
- オブジェクトのプロパティの追加
- 全体を見返す

2.4　条件判定のための型と演算子

論理型 ── 「真」か「偽」を意味する値
比較演算子 ── 2つの値を比較する
条件式 ── 「真」か「偽」かを判定する
- falseに変換される値
- コラム：undefinedとnull
- trueに変換される値
論理演算子 ── 条件の組み合わせ
- &&と!を使った例
- ||を使った例

2.5　条件分岐

if文 ── 「もし～ならば」という処理
else文 ── 「もし～でなければ」という処理
サンプルプログラムを見直す
- 全体を見返す

2.6　繰り返し

while文 ── 条件に合う限り処理を続ける
- 無限ループ
for文 ── 単純な繰り返し
- 配列の繰り返し
サンプルプログラムを見直す
- 全体を見返す

2.7　関数 ── 一連の処理をまとめる

関数とは何か
- 単純なみかんジュース工場
- 果物を受け取ってジュースを作る工場
- 成果物を発注元に返す工場
関数の定義と呼び出し
- 基本的な定義と呼び出し
- 変数に代入することで定義する
- オブジェクトのプロパティとして定義する
引数
- 引数はあらかじめ知っておく必要がある
- 引数の数を間違えるとどうなるのか
戻り値
- 戻り値もあらかじめ知っておく必要がある
サンプルプログラムを見直す
- 関数の定義と呼び出し
- あらかじめ用意された関数を使う
- オブジェクトのプロパティに関数を代入する
- 全体を見返す

2.8　本章のまとめ

第3章　JavaScriptでHTMLやCSSを操作する

3.1　windowオブジェクト ── JavaScriptで最も重要なオブジェクト

windowオブジェクトとは何か
windowオブジェクトの省略
windowオブジェクトの主なプロパティ
- document ── HTML文書の取得や操作
- location ── URL情報
- コラム：URLのクエリ文字列とハッシュ
- history ── 履歴の管理
- navigator ── ブラウザのメタデータ
サンプルプログラムを見直す
- windowオブジェクト
- documentオブジェクト
- 全体を見返す

3.2　DOM ── JavaScriptからHTMLやCSSを操作するしくみ

DOMとは何か
要素の取得
- getElementById ── id名から要素を取得する
- コラム：HTML要素のオブジェクトの中身をコンソールで見る
- getElementsByTagName ── 指定した要素名の要素をすべて取得する
- getElementsByClassName ── class名から要素を取得する
- querySelector，querySelectorAll ── CSSのセレクタを使って要素を取得する
- クロスブラウザに対応した要素の取得
属性値の取得と変更
- 属性値の取得
- 属性値の変更
- getAttributeとsetAttributeによる属性値の取得と変更
innerHTMLによる要素の内容の取得と変更
- 要素の内容の取得
- 要素の内容の変更
新規要素の作成と追加
- createElement ── 要素の作成
- appendChild ── 要素の追加
サンプルプログラムを見直す
- 要素の取得
- 新規要素の作成と追加
- 要素の属性と内容の変更
- 全体を見返す

3.3　イベント ── 何かが行われたときの処理を予約する

イベントとは何か
要素のプロパティによるイベントの設定
- 要素のプロパティによるイベント設定の欠点
addEventListenerによるイベントの設定
- addEventListenerによるイベント設定の欠点
window.onloadとDOMContentLoaded ── HTMLの読み込みを待って処理をする
- window.onload ── 「HTMLの読み込みが終わったら」というイベント
- DOMContentLoaded ── 「HTMLを取得・操作可能な準備ができたら」というイベント
サンプルプログラムを見直す
- window.onload
- onclick
- 全体を見返す

3.4　本章のまとめ

第4章　プログラムの読み方と組み立て方

4.1　プログラムを読む

プログラムの全体像
変数の定義
- 画像のリストを保存する変数
- 画像の枚数を保存する変数
- 要素の取得
- 現在のインデックスを保存するための変数
初期化処理
- img要素をHTMLに追加する
- showPhoto関数を実行する
関数の定義
- すべての画像を非表示
- 表示する対象の要素を取得
- タイトルの表示
- 画像の表示
イベントの設定
- 表示する画像のインデックスを計算
- 画像の切り替え
- コラム：プログラムの速度とわかりやすさ

4.2　プログラムを組み立てる

仕様を決める
HTMLを書く
要素を取得する
データを定義する
img要素を追加する
- img要素の作成と追加
- 画像を非表示にする
初期表示を行う
- タイトルの表示
- 画像の表示
ボタンをクリックして次の画像を表示する
- クリックイベントの設定
- 次の画像を表示する
- 表示されている画像を非表示にする
- ループの処理
無駄な処理を改善する
- 関数にまとめる
- コラム：エラー処理
- img要素をキャッシュする

4.3　本章のまとめ

第5章　jQueryでプログラミングを楽にする

5.1　jQuery入門準備

jQueryとは何か
jQueryの利点
- jQueryを使わない場合
- jQueryを使った場合
$ ── jQueryという関数の別名
$(function() {}) ── HTMLの読み込みを待って処理をする
jQueryのダウンロードと読み込み
- ダウンロード
- 読み込み
初めてのjQuery ── 「hello, world」を出力してみる

5.2　基本的な機能と使い方

セレクタ ── jQueryを使った要素の取得
jQueryオブジェクト ── jQueryで取得した要素のオブジェクト
- コラム：jQueryオブジェクトの変数名
メソッド ── jQueryオブジェクトに処理を行う関数
- メソッドチェイン ── メソッドをつなげて記述する
イベントの設定
アニメーション

5.3　jQueryを使ったスライドショーのプログラム

仕様とコード
要素の取得
- findメソッドで要素を検索する
画像の切り替え
- 現在表示されている要素の取得
- 次に表示する要素の取得
- タイトルの設定
- アニメーションで画像を切り替える
初期表示
イベントの設定
- 次の画像を表示する処理
- 前の画像を表示する処理

5.4　本章のまとめ

- コラム：jQuery以外のライブラリ

付録A　HTMLの基本

A.1　HTMLとは何か

A.2　要素と属性

要素と属性について
要素のネスト

A.3　基本的なHTMLの記述

ドキュメントタイプ宣言 ── HTMLのバージョンの指定
html要素 ── ルート要素
head要素 ── メタデータ
body要素 ── コンテンツ

A.4　本書で登場する主な要素

h1～h6要素 ── 見出し
p要素 ── 段落
ul，ol，li要素 ── リスト
div要素 ── グルーピング
img要素 ── 画像
- 空要素
a要素 ── リンク
button要素 ── ボタン

A.5　id属性とclass属性 ── 要素に名前を付ける

id属性は同じ値を指定できない
class属性は同じ値を指定でき，複数指定も可能
id属性とclass属性の使い分け

付録B　CSSの基本

B.1　CSSとは何か

B.2　CSSを記述する場所

style要素の中に記述する
link要素で外部ファイルを読み込む
style属性でHTMLの要素に記述する

B.3　セレクタ

タイプセレクタ ── 要素名を指定する
idセレクタ ── id名を指定する
classセレクタ ── class名を指定する
子孫セレクタ ── 子孫要素を指定する

B.4　プロパティと値

プロパティと値について
本書で登場する主なプロパティ
- colorプロパティ ── テキスト色
- background-colorプロパティ ── 背景色
- displayプロパティ ── 表示形式
- widthプロパティ ── 要素の幅
- heightプロパティ ── 要素の高さ

あとがき
索引

外村和仁（ほかむらかずひと）

株式会社ピクセルグリッドにてJavaScriptを使ったWebアプリケーションの開発などを行っている。PHPやPerlなどの経験もあり、フロントエンドエンジニアという肩書きだがサーバサイドのプログラムを書くことも多い。好きなプログラミング言語はJavaScriptとRuby。

ブログ：http://webtech-walker.com/

Twitter: @hokaccha