【jQuery最高の教科書】第3章 jQueryの基本的な書き方
①データを格納する様々な入れ物
jQuery（Javascript）で用意されているデータの格納方法
・オブジェクト
・変数
・配列
オブジェクトとは
データと値をセットにして格納するための入れ物
構文 オブジェクト
{
データ名：値,
データ名：値,
データ名：値
}
変数とは
1つのデータを格納するための入れ物
※変数はオブジェクトの様にデータ名と値のセットは格納できないが、
数値や文字列だけでなく配列やオブジェクトも格納できる
構文 変数宣言
var 変数名;
let 変数名;
const 変数名;
構文 変数宣言とデータの格納
var 変数名 = データ;
let 変数名 = データ;
const 変数名 = データ;
構文 複数の変数宣言とデータの格納
var 変数名 = データ,
変数名 = データ,
変数名 = データ;
let 変数名 = データ,
変数名 = データ,
変数名 = データ;
const 変数名 = データ,
変数名 = データ,
変数名 = データ;
変数の必要性
変数の役割＝プログラム内でデータを保持する
※Javascriptではオブジェクトの様なデータは、
メソッドなどに直接データを渡す場合には利用できるが、
記述した箇所以外からは利用できない（スコープ）
＝変数に格納すれば再記述しなくても使いまわせるので便利
変数に保存したオブジェクト内データの取得方法
構文 複数の変数宣言とデータの格納
var 変数名 = {データ,
変数名 = データ,
変数名 = データ;
};
let 変数名 = {データ,
変数名 = データ,
変数名 = データ;
};
const 変数名 = {データ,
変数名 = データ,
変数名 = データ;
};
構文 オブジェクト内データの取得方法①
変数名.データ名;
構文 オブジェクト内データの取得方法②
変数名[’データ名’];
※オブジェクト内に格納されているデータを「プロパティ」と言う
※プロパティとメソッド
オブジェクトに保存されているのが関数の場合はメソッドと言い、
オブジェクトに保存されているのが関数以外場合はメソッドと言う
配列とは
データを連続的に格納する入れ物
（配列はオブジェクトの様にデータ名は指定しない）
構文 配列
var 変数名=[
データ,
データ,
データ
];
let 変数名=[
データ,
データ,
データ
];
const 変数名=[
データ,
データ,
データ
];
構文 配列内データの取得方法①
変数名[配列番号（添字）];
例
array[0];
※配列番号は「1」からではなく「0」からはじまる
特殊な入れ物「this」
thisとは
データ取得専用の変数
※thisに格納されるデータはJavascriptの実行内容によって自動的に変化する
例
$(function(){
$('#item').on('click', function(){
$(this).css('color', '#000');
});
});
thisを使用する理由
・処理のパフォーマンスを向上できる
・内側のコードが使いまわしやすくなる
・$()関数に複数のセレクタを指定した場合に処理の切り分けが出来る
②特定の機能をまとめる「関数」
関数とは
何らかの一連の処理を行う、複数の命令の集まり（命令群）
※関数は同一コード内でも、他のコードからも呼び出せる
※繰り返し実行する処理や何度も利用する処理を関数にまとめると
記述量を減らせる
※関数にしておくことで一括変更など保守性も上がる
用意されている関数とオリジナルの関数
jQueryやJavascriptには予め組み込みの関数が多数用意されているが、
良く使う一連の動作をオリジナルの関数として定義することもできる
構文 関数の作り方
function 関数名 ( 引数1, 引数2… ) {
実行する処理（引数は関数内で変数の様に使用できる）
return 値;
}
例
function add ( num1, num2 ) {
return num1 + num2;
}
構文 関数の呼び出し方
関数名( 引数1, 引数2… );
※関数に引数が指定されていない場合は呼び出しも省略する
無名関数
関数名を省略した関数を作成することもできるが、
これを無名関数と言う
構文 無名関数の作り方
function( 引数1, 引数2… ) {
実行する処理（引数は関数内で変数の様に使用できる）
return 値;
}
※処理を複数の箇所で使いまわすためではなく、
引数として一連の処理を直接渡す際などは無名関数を使う
構文 無名関数を変数に格納する
var 変数名 = function( 引数1, 引数2… ) {
実行する処理（引数は関数内で変数の様に使用できる）
return 値;
}
let 変数名 = function( 引数1, 引数2… ) {
実行する処理（引数は関数内で変数の様に使用できる）
return 値;
}
const 変数名 = function( 引数1, 引数2… ) {
実行する処理（引数は関数内で変数の様に使用できる）
return 値;
}
※無名関数を格納する変数名を関数名と読み替える事も可能
※通常の関数と名前付き無名関数では
関数を実行できるタイミングに違いがある
※通常関数は関数の作成箇所に関わらず、
スコープ内であればどこからでも呼び出せる
関数名();（実行可能）
function 関数名() {
処理
}
関数名();（実行可能）
※名前付き無名関数は関数の作成箇所よりも下でないと呼び出せない
関数名();（実行不可）
var 変数名 = function() {
処理
}
関数名();（実行可能）
③スコープと命名規則
スコープとは
変数や関数を利用できる範囲（有効範囲）
※Javascriptの変数や関数は宣言、作成された箇所よりも
内側でのみ利用できる
スコープの種類
・グローバルスコープ：プログラム内のどこからでも使用できる
・ローカルスコープ：限られた範囲内でのみ使用できる
変数名と関数名の命名規則
・使用できる文字列は半角英数字と$、_
・先頭文字に数字は不可
・大文字と小文字は区別される
・予約語は使用不可
変数や関数(メソッド)の返り値を確認する方法
ディベロッパーツールでconsole.log()メソッドで確認できる
④演算子
算術演算子
基本的な計算をするための演算子
代入演算子
変数にデータを格納する際に使用する演算子
比較演算子
左右の値を比較して真偽値（true/false）を返す演算子
論理演算子
複数の条件を組み合わせる際に使用する演算子
nullとは
nullは値を持たない値
プログラム内で何の値も定義されていない状態
＝有効な値が存在しないことを表す値
※変数宣言して何も格納しなかった場合は
nullではなくundefined（未定義）が格納される
⑤主な制御文
初心者が覚えておくべき制御文
・if文
・switch文
・for文
条件分岐 if文
構文 if文①
if( 条件 ) {
trueの場合の処理
};
構文 if文②
if( 条件 ) {
trueの場合の処理
} else {
falseの場合の処理
};
構文 if文③
if( 条件1 ) {
trueの場合の処理
} else if( 条件2 ) {
条件1がfalseで条件2がtrueの場合の処理
} else {
falseの場合の処理
};
条件分岐 switch文
構文 switch文
switch ( 比較元の値 ) {
case 比較する値1:
trueの場合の処理
break;
case 比較する値2:
trueの場合の処理
break;
case 比較する値3:
trueの場合の処理
break;
default:
falseの場合の処理
break;
}
※breakを省略しても文法エラーではないが、
trueでも以降のcaseも実行されてしまうため注意
条件分岐 for文
構文 for文
for ( 初期化; 条件; 変更 ) {
繰り返す処理
}
※for文やif文内で使用できる文としてはcontinue文、break文がある
その他の制御文
jQueryやJavascriptにはwhile文やdo-while文などもあるが本書では割愛