ウェブの主役、ＪａｖａＳｃｒｉｐｔ

ｊＱｕｅｒｙのすすめ

使いはじめるには

ｊＱｕｅｒｙ（ジェイクエリ）を使うと、ＪａｖａＳｃｒｉｐｔを手軽に書けるようになります。ｊＱｕｅｒｙ自体がＪａｖａＳｃｒｉｐｔで書いてあります。すでに書かれたソースコードを利用することで、開発の手間を省けるため、この１０年以上の間、多くのウェブデザイナーが利用しました。無料です。

ｊＱｕｅｒｙを使い始めるには、<head>タグのなかに以下のタグを書きます。

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

そして、その下にもうひとつ<script>タグを追加し、次のように書きます。

<script>
    $(function(){
        //ここに書いていきます。
    });
</script>
アニメーション、 ＣＳＳアニメーション、 canvas要素、 Three.js、 Processing、 ＧＩＦアニメーション、 ＳＶＧアニメーション
ＪｉｍｄｏでｊＱｕｅｒｙを使うには

Ｊｉｍｄｏでも、ｊＱｕｅｒｙを使えます。以下の欄に書いていきます。

  • 管理メニュー ＞ 基本設定 ＞ ヘッダー編集 ＞ ホームページ全体

下の一行を書きます。注意することは、srcは、httpではなくhttpsから始めてください。 

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

そもそも、ＪａｖａＳｃｒｉｐｔもここに書きます。ｍｅｔａタグもここに書きます。以下の一行にあるように、ｖｉｅｗｐｏｒｔの設定も書いておくことをお勧めします。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

ともかく、この欄に書いた内容は、全ページで共通して、headタグに追加されます。

動かすための文法

ｊＱｕｅｒｙの文法も単純です。ＩＤがcontentである要素を非表示にしたければ、

$('#content').hide();

と書きます。また、クラス名がiconである要素を表示したければ、

$('.icon').show();

と書きます。このように、セレクタの後ろに付くカッコつきの動詞をメソッドといいます。ｊＱｕｅｒｙには１００余りのメソッドが用意されています。

$('セレクタ').メソッド();

メソッド、 キャメルケース、 メソッドチェーン、 関数、 変数、 エイリアス

ｊＱｕｅｒｙができること

ＩＤがcontentである要素を、クリックしたら非表示にするには、

$('#content').click(function(){
    $(this).hide();
});

と書きます。この「クリック」をはじめ、人間が行う動作をもとに動かすことができます。この動作をイベントといいます。イベントには、マウスでカーソルを当てる、スクロールする、キーを押すなどがあります。

イベントを使うとコンテンツを人間が操作できるように作れる

イベント、 ＡＰＩ、 タイマー、 トラバーサル、 findメソッド、 hasメソッド、 eachメソッド、 トリガー、 Ａｊａｘ

思いのままに操る方法

ＨＴＭＬを操作する

ｊＱｕｅｒｙには、ＨＴＭＬ要素を追加するａｐｐｅｎｄメソッドや、ＨＴＭＬ要素を削除するｒｅｍｏｖｅメソッドが用意されています。これをイベントに結び付けると、ボタンを押すと要素を増やしたり減らしたりできます。また、コンテンツを書き換えるｈｔｍｌメソッドを使うと、ボタンを押すとコンテンツを変えることができます。

ＨＴＭＬ要素を書き換えなくても、ｊＱｕｅｒｙを使えば、イベントの前後でＨＴＭＬに変化を付けることができます。

ｊＱｕｅｒｙでＨＴＭＬを変化させられる

appendメソッド・prependメソッド、 removeメソッド、 insertBeforeメソッド・insertAfterメソッド、 beforeメソッド・afterメソッド、 cloneメソッド、 emptyメソッド

ＣＳＳを操作する

ｊＱｕｅｒｙのｃｓｓメソッドを使うと、ほぼすべてのＣＳＳをｊＱｕｅｒｙで変更できます。イベントと結び付けると、クリックすると色を変えたり、文字を大きくしたり、下線を引いたりできます。また、ａｄｄＣｌａｓｓメソッドでクラス名を付けたり、ｒｅｍｏｖｅＣｌａｓｓメソッドでクラスを削除したりできます。ａｔｔｒメソッドではＩＤも変更できます。

ＣＳＳを書き換えなくても、ｊＱｕｅｒｙを使えば、イベントの前後でＣＳＳに変化を付けることができます。

ｊＱｕｅｒｙでＣＳＳも変化させられる

addClassメソッド、 hasClassメソッド、 removeClassメソッド、 attrメソッド、 propメソッド、 valメソッド、 animateメソッド

ＪａｖａＳｃｒｉｐｔで書くと

ｊＱｕｅｒｙは、ＪａｖａＳｃｒｉｐｔで書かれたプログラムです。たとえば、要素を非表示にするｈｉｄｅメソッドは、実はこんな風に書かれています。

function hide(elem) {
  elem.style.display = "none";
}

ＣＳＳのｄｉｓｐｌａｙプロパティをｎｏｎｅにしているのです。一方、ｓｈｏｗメソッドも同様に、ＣＳＳのｄｉｓｐｌａｙプロパティを、要素を表示するように書き換えています。ｔｏｇｇｌｅメソッドはｈｉｄｅメソッドとｓｈｏｗメソッドを切り替える内容です。

ｊＱｕｅｒｙはＪａｖａＳｃｒｉｐｔで書かれた関数の集まりで、その関数がｊＱｕｅｒｙのメソッドです。このような意味で、ｊＱｕｅｒｙでＪａｖａＳｃｒｉｐｔを手軽に書けるようになるのです。

ｊＱｕｅｒｙはＪａｖａＳｃｒｉｐｔで書いた関数の集まり

ｊＱｕｅｒｙプラグインの紹介

ｊＱｕｅｒｙを使って、さらに簡単にいろいろなことを実現するために、世界中の開発者たちがプラグインを作っています。代表的なものを６つ紹介します。

  • Slidebars（スライドバーズ）

    • アイコンを押すとメニューが横からスライド、ページの表示と共に上から下からＣｏｏｋｉｅの承諾メッセージをスライド、など、隠れたコンテンツをスライドする動きが作れます。

  • Animsition（アニムジション）

    • スクロールすると下からフェードイン、ローディングが終わると下から幕が上がる、ほか、平面回転、ズーム、フリップなど、最近よく見られる動きが作れます。

  • Chart.js（チャートジェイエス）

    • 棒グラフ、折れ線グラフ、円グラフなど、あらゆるグラフをアニメーション付きで表示したい時に役立ちます。ほか、グラフに吹き出しや進捗バーを加えることもできます。