HOME > > > jQueryって一体なにものなの?【Basics of jQuery (vol.1)】

jQueryって一体なにものなの?【Basics of jQuery (vol.1)】

jQueryって一体なにものなの

jQuery(ジェイクエリ―)ってそもそも何でしょう?

そもそもjavascriptが詳しくない私ですが、今ではFlashを作る事もなくなりjQueryを利用してせっせこっせこ作っております。
制作時の打ち合わせやら使い方の説明やらでよく名前は出てくるのですが、「javascript」だったり「js」だったり「jQuery」だったり「Ajax」だったり「java(言語が違うあっちのjavaではなく省略してるだけ)」だったりと色んな名前で呼ばれますが、話の内容から「javascript」という事は解ります。
では、「javascript」と「jQuery」って同じ?違う?と聞かれるとちょっと違います。
私もさほど理解をしていないので、基本からまとめていきたいと思います。

jQueryって何ですか?

jQueryとは、javascriptのライブラリの1つです。
javascriptはブラウザ上で操作させるプログラム言語ですが、ライブラリはそのjavascript上で動作するプログラム。
jQueryはそのライブラリになります。

jQueryは何が出来るの?

jQueryはブラウザ上で色々な事ができます。

  • マウスアクションが設定できたり
  • ページトップへ戻るアクションが作れたり
  • ページが表示された時に何かを表示したり
  • アニメーションが出来たり
  • フォトギャラリーが作れたり

その他、色々なアクションをつける事が出来ます。

jQueryは何に使うの?

ではjQuery何に使うのか。
簡単に言ってしまうと、javascriptをより使いやすくしてくれるファイルの事です。
jquery無しで書くと長ーく(複雑・煩雑)なってしまうプログラムも利用しやすく書く事が出来ます。

jQueryを使わない場合の例

jQueryを使わない場合はこんな感じの書き方になります。
※多分。。。ごめんなさい多分です。仕事で書いたことないのです。。。


document.addEventListener('DOMContentLoaded', function(){
実行文
}

jQueryを使った場合の例


$(function(){
実行文
});

見た感じjQueryを使った文の方がスッキリしてますね。
jQueryを使った書き方はいくつかありますが、それはおいおい書いていきます。

jQueryの読み込み方法

jQueryの読み込み方法は2つ。
1つはURLから直接読み込む方法、もう1つはファイルをダウンロードして設置する方法です。

URLから直接読み

こちらの記述を「<body>」の中か、「</body>」の上あたりに設置します。
私はjsの記述はなるべく</body>の上にまとめています。


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

ダウンロードファイルを設置

ファイルは、jQuery公式サイトからダウンロードしてきます。

jQuery公式サイトはこちら

jquery公式

「compressed」は圧縮されたファイルで、 「uncompressed」は非圧縮ファイルです。


「jQuery 1.x」と「jQuery 2.x」がありますが、 「jQuery 1.x」はIE8以前をサポートするレガシーブラウザ向けのバージョン、 「jQuery 2.x」はIE8のサポートは捨てて、高速に安定して動作させることを目指したバージョンとなっています。


<script src="js/jquery-1.9.1.min.js"></script>

設置はファイルを置いた場所から任意でパスを設定します。 URL直接と同じ様に「<body>」の中か、「</body>」の上あたりに設置します。

vol.1のまとめ

まずはjQueryを使う前の設置方法をまとめました。
jQueryとは何かという触りの部分は以上です。
次からjQueryで出来る事を少しずつまとめていきます。

このページを共有する

Facebook
twitter
Line
googleプラス
はてなブックマーク
Pocket

2016.03.15