• ローカル検索 SEO対策
    ローカルSEOの内部対策!商圏エリアで検索上位を獲得する方法
    2019年05月16日
  • ユーザー属性 SEO対策
    SEOでアクセス数アップを目指すには、10のユーザー種別の理解がポイント
    2019年05月16日
  • ブログ
    5分でブログサイト完成!ワードプレスで簡単ブログサイト作成術
    2019年03月28日
  • 被リンク対策 SEO対策
    SEO対策で重要な被リンク元の増やし方 | 初心者向けSEO対策ノウハウ
    2019年05月16日
  • Webデザイン ホームページ制作
    ホームページ制作はスマホファーストの時代!デバイスの多様化に対応
    2019年02月26日
  • 採用サイト ホームページ制作
    奈良の求人サイト制作会社が教えるIndeed活用ノウハウ!ダイレクト・リクルーティング
    2019年03月14日
  • seo対策リンク SEO対策
    SEO対策で重要な被リンク元の調べ方 | 初心者向けのSEO対策ノウハウ
    2019年05月16日
  • 歯医者さんのブログ記事 ブログ集客
    見ているだけ参考になる歯科のブログ3選!歯科のホームページ制作
    2019年03月12日
  • SEO対策 SEO対策
    SEO初心者向けのSEO実践ノウハウ!7個のポイントをご紹介
    2019年05月16日
  • 被リンクの量と質 SEO対策
    SEO対策で重要な被リンク元の数と質 | 初心者向けSEO対策ノウハウ
    2019年05月16日
jQueryの基本的な書き方!JavaScriptの基本文法を紹介

こんにちは。
JOYCONNECTのデザイン担当、デザインマスターです。

今回はjQueryの基本的な書き方について、
jQueryの初心者向けにまとめたいと思います。

jQueryの基本的な書き方

jQueryの実装記述であるJavaScriptでは、
プログラム内で使用するデータの入れ物として主に

・オブジェクト
・変数
・配列

の3種類を使用できます。

プログラム内では様々な場面でデータの受け渡しを行いますが、
その際にこれらの入れ物を使用します。

オブジェクト

オブジェクトとは複数のデータを、
データ名とセットにして格納するための入れ物です。

上記のコードのうち、
{}で囲まれている範囲のコードがオブジェクトです。

オブジェクトは以下の構文で宣言します。

{}で囲まれた中に、データ名と値を「;(コロン)」で区切って記述します。

複数のデータ名と値を指定する場合はさらに「,(カンマ)」で区切ります。

上記を見ると、
複数のデータから成るデータの塊がcss()メソッドの第一引数として使用されていることが分かります。

変数

変数は「1つのデータを格納するための入れ物」です。

オブジェクトのように複数のデータ名と値をセットに格納することはできません。

ただし、変数には数値や文字列といった値だけでなく、
オブジェクトや配列なども格納できます。

変数は以下の構文で宣言します。

最初に変数の宣言文である「var」を記述し、
それに続いて「変数名」を記述します。

上記のコードを記述すると指定した変数名を持つ空の入れ物が作成されます。

変数の宣言と同時にデータを格納する場合は以下の構文で記述します。

変数の宣言に続いて「=(イコール)」を記述し、
格納するデータを指定します。

このように記述すると「=」の右側に指定したデータを変数に格納できます。

なお、同時に複数の変数を宣言することも可能です。

その場合は各変数の後に「,(カンマ)」を記述し、
最後に「;(セミコロン)」を記述します。

変数の基本的な使い方

JavaScriptでは、変数にデータを格納した後でその変数名を記述すると、
変数名が格納されているデータに置き換えられて処理が実行されます。

以下の例をみてください。

変数の必要性

変数の主な役割は「プログラム内でデータを保持する」ことです。

JavaScriptではオブジェクトのようなデータは、
メソッドなどに直接データを渡す場合には利用できますが、
記述した箇所以外からは利用できません。

そのため、同じ内容のオブジェクトが必要な場合であっても、
再度記述しなければなりません。

一方で、変数に格納されたデータはプログラム内で保持されるため、
変数名を指定することで様々な箇所から利用できます。

変数にはオブジェクトを格納することも可能なので、
以下のように記述することでデータを再利用できます。

このように、プログラム内の複数の箇所で同一データを使用したり、
格納されている値を編集したりする場合は、
変数にデータを格納することが必要です。

変数に保存したオブジェクト内のデータの取得方法

オブジェクトの宣言と、変数への格納は以下の構文で行います。

変数に格納されたオブジェクト内のデータを取得する方法を2通りご紹介します。

さらに具体的な例を記述してみます。

上記のように、
オブジェクト内に格納されている各データのことを「プロパティ」と言います。

プロパティとメソッド

オブジェクトに保存されたデータが関数の場合:メソッド
オブジェクトに保存されたデータが関数以外のデータの場合:プロパティ

配列

JavaScriptでは、オブジェクトや変数に加えて、
「配列」というデータの入れ物を使用できます。

配列とは、データを連続的に格納する入れ物です。
配列は以下の構文で宣言します。

配列の宣言とデータの格納の例

配列内のデータの取得方法

配列内のデータには「データ名」がないため、
オブジェクトのようにデータ名を用いてデータを取得することはできません。

一方、配列では各データが指定順通りに格納されるので、
「○番目のデータを取得する」という方法でデータを取得できます。

配列に関しては順番の数え方が「0」から始まるので注意が必要です。

特殊な入れ物「this」

JavaScriptでは上記で解説した3つの入れ物に加えて
「this」という少し特殊な入れ物を使用することができます。

thisは「データ取得専用の変数」のようなものです。

thisには何らかのデータが格納されますが、
以下のように具体的に格納する値を指定することはできません。

thisに格納されるデータは、
JavaScriptの実行内容によって自動的に変化します。

以下に例をあげます。
$(‘#typo’)に対してon()メソッドを実行し、
そのイベント内では$(‘#typo’)に対してcss()メソッドを実行しています。

上記のコードはthisを使用することで、
以下のように書き換えることができます。

このon()メソッドのように「メソッドの第二引数に命令(関数)を渡すメソッド」では、
その命令内でthisを使用できます。

もう一つ例をあげてみます。

上記の場合、上部のthisには「’#typo’」が格納され、
下部のthisには「’#header’」が格納されます。

このように、thisの値はJavaScriptの処理内容によって自動的に変化します。

thisを使用する理由

・処理のパフォーマンスを向上できる
・内側のコードを使い回しやすくなる
・$()関数に複数のセレクタを指定した場合に処理の切り分けが可能になる

処理のパフォーマンスを向上できる

thisを使用することによって処理のパフォーマンスが向上する理由は、
「メソッドチェーンのメリット」と同じです。

$()関数が実行されると、ブラウザは指定されたセレクタを手がかりにしてHTMLから要素を集める処理を行うため、
この処理が繰り返し実行されるとCPUの負荷となり、
処理に時間がかかります。

一方でthisを使用すると取得済みの要素を使いまわすことができるため、
HTMLから要素を集める処理を行わなくてもよくなります。

内側のコードを使い回しやすくなる

先ほどの例をみても分かる通り、
2つのon()メソッドの対象処理は異なりますが、その中の命令の内容は同じです。

ともに$(this).css(‘color’, ‘#ebc000’);を実行しています。

このようにthisを使用すると、
対象処理を自動的に切り替えることができるため、
メソッド内のコードを使い回しやすくなります。

$()関数に複数のセレクタを指定した場合に処理の切り分けが可能になる

thisを使用すると、$()関数に複数のセレクタを指定した場合に、
処理の切り分けが可能になります。

以下のコードでは、thisを用いても、用いなくても同じ結果になります。

このように$()関数に渡されるセレクタが1つの場合は、
いずれの書き方でも「正しく動作するコード」になります。

一方で、以下のように$()関数に複数のセレクタを指定した場合はどうでしょうか。

>>デモをチェックする
上記のコードを実行すると、
$()関数に指定されている3つのセレクタのいずれかの要素上にマウスオーバーすると、
指定されている全ての要素にcss()メソッドが適用されます。

つまり、header要素にマウスオーバーすると、
#typoの要素やfooter要素の背景色も変更されます。

このコードをthisを使用して書き換えてみます。

>>デモをチェックする
・header要素にマウスオーバーすると、thisにはheader要素のみが格納されるため、header要素の背景色のみ変更される
・#typo要素にマウスオーバーすると、thisには#typo要素のみが格納されるため、#typo要素の背景色のみ変更される
・#footer要素にマウスオーバーすると、thisにはfooter要素のみが格納されるため、footer要素の背景色のみ変更される

このようにthisを使用するとイベントが起きた対象要素だけに処理を実行できるようになります。

関数

関数とは「何らかの一連の処理を行う、複数の命令の集まり(命令群)」です。
例えば「引数として渡した数値を使用して足し算を行い、その結果を返す関数」などが考えられます。

関数は同一コード内はもとより、
他のコードからも呼び出すことができるので「繰り返し実行する処理」や「何度も利用する処理」を
関数としてまとめておくことで、同じコードを何度も記述する手間を省くことができます。

また一連の処理を一箇所にまとめることによって、
その処理の内容を変更する際の手間を大幅に軽減することにも繋がります。

用意されている関数とオリジナルの関数

jQueryやJavaScriptには「様々なコードでの利用が想定される汎用的な処理」が関数として
あらかじめ数多く用意されています。

一方で自分で「オリジナルの関数」を作成することもできます。

jQueryやJavaScriptには用意されていないけれど、
自身が作成するプログラム内で何度も利用する一連の処理を関数としてまとめることが可能です。

関数の作り方

オリジナルの関数を作成する際は、
以下の構文で関数を定義します。

以下では、独自にオリジナルの関数addを作成しています。

この関数では、2つの引数(num1とnum2)を受け取り、
関数内で2つの引数を足し算し、その値を呼び出し元に戻します。(呼び出し元に戻される値のことを「返り値」または「戻り値」と言います。)

関数の呼び出し方

関数は以下の構文で呼び出すことができます。

使用する関数名の後に()を記述し、
その()の中に引数を指定します。

なお、関数に引数が指定されていない場合は呼び出し時も省略します。

以下では、上記で作成した関数addを呼び出して、
2つの引数を足し算し、その値を呼び出し元に戻しています。

上記のコードでは変数added1には「3」という値が格納され、
変数added2には「13」という値が格納されます。

その結果、変数added3には「16」という値が格納されます。

無名関数

以下の構文を使用することで、
関数名を省略した関数を作成することができます。

このような関数のことを「無名関数」と言います。

jQueryのメソッドの引数には、
よく無名関数が使われます。

以下をみてください。
このコードでは、on()メソッドの引数に無名関数を指定しています。

無名関数内では$(‘#typo’).css(‘color’, ‘#3bc000’);という処理が実行されています。

このように、処理を複数の箇所で使いまわすためではなく、
引数として一連の処理を直接渡す際などは無名関数を利用します。

無名関数を変数に格納する

無名関数を以下のように変数に格納すると、
その変数名を用いて関数を呼び出すことが可能です。

つまり以下では「変数名」となっていますが、
これを「関数名」と読み換えることも可能です。

上記のように、無名関数に関数名を割り当てると、
通常の関数のように別の箇所から関数を呼び出すことが可能になります。

ただし、通常の関数と名前付き無名関数には「関数を実行できるタイミング」に違いがあります。

通常の関数(functionに続けて関数名を指定した関数)は、
関数の作成箇所に関わらず、その関数を使用できるスコープ内であれば、
どこからでも呼び出すことができます。

一方で、変数に格納した無名関数は、
以下のように関数の作成箇所よりも下部でないと呼び出すことができません。

スコープ

スコープとは「変数や関数を利用できる範囲(有効範囲)」です。
JavaScriptの変数や関数はそれらが宣言・作成された箇所よりも内側でのみ利用できます。

スコープの種類

スコープには以下の2種類があります。

種類 説明
グローバルスコープ プログラム内のどこからでも使用できる変数や関数のスコープ
ローカルスコープ プログラム内の限られた範囲内でしか使用できない変数や関数のスコープ

以下のコード例をみてください。
このコードでは様々な変数を宣言していますが、
記述場所によって使用できるものと、使用できないものがあります。

変数名と関数名の命名規則

・使用できる文字列は、半角英数字と「$」、「_」
・先頭文字に数字は使用できない
・大文字と小文字は区別される
・予約語は使用できない

break do if package throw
case else implements private true
catch enum import protected try
class export in public typeof
const extends instanceof return var
continue false interface static void
debugger finally let super while
default for new switch with
delete function null this yield
変数や関数(メソッド)の返り値を確認する方法

jQuery

変数に格納されている値や、関数(メソッド)の返り値は、
開発者ツールで確認できます。

以下のようにコード内にconsole.log()メソッドを記述すると、
引数に指定した変数や関数の返り値がコンソール画面に表示されます。

演算子

演算子とはプログラムで使われる「+」や「-」のような演算を表す記号の総称です。
変数にデータを格納する際に使用する「=」の演算子の一種です。

・算術演算子
・代入演算子
・比較演算子
・論理演算子

算術演算子

算術演算子とは、基本的な計算をするための演算子です。

これらを使用することで複数の数値を加算したり、
文字列を連結したりできます。

演算子 説明 左列の実行結果
+ 加算または文字列の連結 4 + 2
‘私は’ + ‘元気です’
6
私は元気です
減算または単行マイナス 4 – 2
-4
2
-4
* 乗算 4 * 2 8
/ 徐算 4 / 2 2
% 剰余 4 % 2 0
++ 変数の値を1増やす val++ または ++val val が4の場合、 5
変数の値を1減らす val– または –val val が4の場合、 3

代入演算子

代入演算子とは、変数にデータを格納する際に使用する演算子です。

演算子 説明 例の変数の値
= データを格納(代入)する val = 4 4
+= 変数に加算、または文字列の連結をしたものを代入 val += 2
val += ‘元気です’ (‘わたしは’)
val が4の場合、 6
わたしは元気です
-= 変数に減算したものを代入 val -= 2 val が4の場合、 2
*= 変数に乗算したものを代入 val *= 2 val が4の場合、 8
/= 変数に徐算したものを代入 val /= 2 val が4の場合、 2
%= 変数に剰余を代入 val %= 2 val が4の場合、 0

比較演算子

比較演算子とは、左右の値を比較して真偽値(true/false)を返す演算子です。

演算子 説明 左列の実行結果
< より小さい(未満) 4 < 4 false(偽)
<= より小さいか等しい(以下) 4 <= 4 true(真)
> より大きい(超) 4 > 2 true(真)
>= より大きいか等しい(以上) 4 >= 3 ture(真)
== 等しい 4 == 3 false(偽)
!= 等しくない 4 != 3 true(真)
=== 厳密に等しい 4 === 3 false(偽)
!== 厳密に等しくない 4 !== 3 true(真)

比較演算子は主に「条件分岐」や「繰り返し処理」などの条件に使用します。

比較演算子の真偽値について

特に数値同士の比較といったシンプルな演算ではなく、
文字列と数値の比較や、オブジェクト同士の比較を行う際はその結果の真偽値を正確に理解しておかないと、
意図した結果にならないことがあります。

・(1 ==’1′)はtrue(真)
・(1 !=’1′)はfalse(偽)
・(1 ===’1′)はfalse(偽)
・(1 !==’1′)がtrue(真)

if文の条件における真偽値の判定

ifの条件に変数(データ)を指定した場合は以下のように判定されます。

・データが数値の場合、「0以外」ならtrue(真)、「0」ならfalse(偽)
・データが文字列の場合、「1文字以上」であればtrue(真)、空文字列(”)の場合はfalse(偽)
・データがオブジェクトの場合、常にtrue(真)
・データが空(null)の場合、常にfalse(偽)

論理演算子

論理演算子は、複数の条件を組み合わせる際に使用する演算子です。

演算子 説明
&& 条件Aが真かつ条件Bが真の場合、true(真) 条件A && 条件B
|| 条件Aが真または条件Bが真の場合、true(真) 条件A || 条件B
! 条件の真偽値を反転する(条件がtrueの場合はfalse、falseの場合はtrue) !条件
null

nullとは値を持たない値です。

プログラムに置いて何の値も定義されていない状態であり、
言い換えるなら「有効な値が存在しないことを表す値」とも言えます。

nullは別の値と比較することができないため、
比較演算子の左右いずれかにnullを指定すると、
その演算結果は必ずfalse(偽)になります。

数値「0」や空文字「”」とは異なるので注意が必要です。

・null == 0がfalse
・null == ‘ ‘はfalse
・null === 0はfalse
・null === ‘ ‘はfalse
・null == nullはtrue

なお、変数を宣言した際に何も値を格納せず、
入れ物だけを作成した場合、その変数には「undefined(未定義)」が格納されます。

・undefinde == nullはture
・undefinde === nullはfalse

主な制御文

jQueryやJavaScriptのコードは、
基本的には上部から下部へ向かって順番に処理されます。

しかし、プログラムの内容によっては、
与えられた値をもとにして処理を分岐したり、同じ処理を何度も繰り返し実行したい場合があります。

このような「場合によって処理内容を変更する」には、
制御文を使用します。

・if文
・switch文
・for文

条件分岐_if文

複数の値を比較し、その結果によって処理を分岐する場合は、
if文を使用します。

if文の基本的な構文は以下の通りです。

条件には、その比較結果がtrue(真)またはfalse(偽)になるような条件式を指定します。

なお、if文にはelse文やelse if文を加えることで、
様々な分岐を実現することができます。

上記のようにelse文やelse if文を組み合わせると、
様々な条件で処理を分岐できるようになります。

・条件には、真偽値(true/false)や、比較演算子を使った式を指定する
・条件には論理演算子を組み合わせることができる
・else if文は同一if文内に何個でも記述できる
・else文は同一if文内で1つのみ記述できる
・else文はif文やelse if文よりも後に記述する(if文の最後に記述する)

条件分岐_switch文

switch文は「ある一つのデータと複数のデータとを比較して処理を分岐する」際に使用できる制御文です。

switch文で指定できる分岐処理はif文で書き換えることも可能ですが、
switch文を使用すると条件を省略できるので、コード内容の可読性が高くなります。

先ほどのif文の例をswitch文で書き換えると以下のようになります。

switch文では比較が厳密に行われるので、
数値と文字列などを指定する際には注意が必要です。

また、文法上はbreak文を省略してもエラーにはなりませんが、
break文を書き忘れると該当のcase以降の全ての処理が実行されてしまい、
意図した結果にならなくなります。

繰り返し処理_for文

for文は「特定の処理を複数回繰り返す際に使用する制御文」です。
以下の構文で指定します。

1)まず[初期化]で、[条件]などで使用するカウント用の変数などを初期化する
2)[条件]を評価し、true(真)の場合は次へ、false(偽)の場合はfor文の処理を終了する
3)上記の[繰り返す処理]を実行する
4)カウント用の変数などを[変更]し、(2)に戻る

例えば、「数値が格納されている配列内の値を全て足したい」という場合は
以下のようなコードを書きます。

1)[初期化]でカウント用の変数iに「0」を格納し、変数lenに配列の長さ(=6)を格納する(配列の長さはlengthプロパティで取得できる)
2)[条件]を評価する。例では、変数iが変数lenの値(=6)よりも小さい場合に処理が繰り返される
3)[繰り返す処理]では、変数bに配列の値を加算している
4)[繰り返す処理]の実行後に[変更]の処理(この例では変数iに1を加算)を行い、再度(2)に戻る

またfor文やif文などの制御文の中では以下の2種類の文を指定できます。

文の種類 説明
continue文 処理を途中で止めて、[変更]の処理をスキップする
break文 for文の処理を強制的に終了させる

上記の文を指定することで、
任意のタイミングでfor文の処理を制御できるようになります。

例えば、先ほどの例に
「配列内の値が偶数の場合は加算し、5の倍数の場合は処理を終了する」という条件を加えると
以下のコードになります。

・for文内にif文を記述してその中にbreak文を指定することで、「配列の値を5で割った余りが0の場合(5の倍数の場合)はfor文を終了」させている
・つまり、for文自体は6回(配列の要素数分)処理が実行されるように記述されているが、比較する値が「5」の際に処理が終了する(5回目の処理)
・else ifではcontinue文をしていることで、「配列の値が5の倍数でなく、かつ値を2で割った余りが1の場合(奇数の場合)は処理をfor文の先頭に戻す」ようにしている
・continue文が実行されると、たとえ他の処理(b += num;)が残っていても、処理がfor文の先頭に戻される。
・つまり配列の値が奇数の場合は加算する処理がスキップされる(配列内の値が偶数の場合は加算する)

jQueryでは「each()メソッド」を使用することでも繰り返し処理を実行できます。

その他の制御文

jQueryやJavaScriptでは、
while文やdo-while文といった制御文も使用できます。

関連キーワード
  • スライドギャラリー
    Flash非対応デバイス用のスライドギャラリーを実装!jQueryのサンプルコード付き
  • Ajax
    初心者向けjQuery!Ajaxでスムーズページングを実装 サンプルコード付き
  • SSL対応
    SSL対応ってなに?SSLの仕組みと意味をわかりやすく解説
  • jQuery
    jQueryでカルーセルパネルを実装!簡単jQueryのサンプルコード付き
  • jQuery
    jQueryの基本的な書き方!JavaScriptの基本文法を紹介
  • progressbar.js
    プログレスバーを超簡単に実装できるprogressbar.jsを分かりやすく紹介
ホームページ制作・WEBコンサルティングのご相談は無料

JOYCONNCTでは、社内の人材不足やノウハウ不足により、
WEB集客に関するお悩みを抱えられている中小企業様のサポートをしております。

TEL: 0742-55-4737/営業時間: 9:00〜18:00(平日)

この記事が気に入ったら
フォローしよう

最新情報をお届けします

おすすめの記事