簡単に覚えられるjQueryのダウンロードから実行までの手順とその方法。 | Garney.Web

簡単に覚えられるjQueryのダウンロードから実行までの手順とその方法。

スポンサーリンク

20160206_1

この間jqueryは簡単だけど副作用も多い。Javascriptを覚えて負の連鎖から抜けだそう。って記事を書いた。中身を読んでもらえれば分かるかも知れないけど、全ての人にとってjQueryがダメという訳ではない。

極めようとしている人や本業である人以外では有効だと思う。例えばデザイン作業がメインのデザイナーさんだったり、趣味や仕事でブログを書く人だとか、遊びでたまに書いている人達だ。Javascriptを仕事として利用している人やプログラマーの方で無い限りはjQueryは取っ付き易いので有効だ。

本気でJavascriptを学びたいのであれば止めておいた方が良い。上に紹介した通り、自分のようにネイティブJavascriptを書けなくなるぞ。

さて、ブログを運営している人であればもしかすると「この部分をアニメーションさせてみたいな」や「こんな機能を付け足せれたら良いのに」と思ったことがあるかも知れない。

そんな人の為にjqueryの導入方法をまず説明してみる。具体的な使い方は今後Webページに組み込めるパーツJsカテゴリで紹介していこうと思う。

jQueryとは

20160214_12-min

jQueryとはJavascriptのライブラリなのだ。

ライブラリとは?Javascriptの機能を簡単に使えるようまとめたものことだ。Javascriptライブラリと呼ばれるものは他にも沢山ある。例えばprototype.js、Backbone.js、AngularJSなど。

少し脱線
(最近はAngularJSが人気らしいのだけど、jQueryとは何ら関係の無い別ベクトルな代物だ。
またライブラリは不用意に沢山読み込むとお互いに干渉を起こして使用しづらい状況になるのでオススメしない。例えばjQueryとprototype.jsは干渉しあうので使えない。使えないことはないけど使えないと思って良い)

jQueryがなんだと言われればライブラリなんだぜ!便利機能が沢山備わっているんだぜ!と覚えておけばそれ以上は必要ない。さて続いて

jQueryをダウンロードしよう

では早速ダウンロードしに行くぞ。jQueryにアクセスして欲しい。
そうすると英語のサイトに飛ぶ。英語だからって別に速攻で窓を閉じる必要はない。このサイトは割と直感的で日本人にも優しいのだ。

ページ右上の赤枠で示した所をクリックしよう。すっごいDownloadって書いてあるね!分かりやすい!

20160214_1-min

次はページ上部のjQuery2.xと書かれたセクションまで行く。

20160214_2-min

Download the compressed.production jQuery 2.2.0をクリック。

バージョンが新しくなるとここが2.2.xと数字が増えるので2016/02/14現在以降に読まれた方は数字が違う可能性はある。

またバージョンが3になると当然3.x.xとなるので今はjQuery2.xのセクションから選んでいるが将来的にはここが3.xになると思われる。

それから、compressedとあるがこれはデータ圧縮版なのでオリジナル版が欲しい方はその下にあるDownload the uncompressedと書かれているリンクをクリックして欲しい。

作業用ディレクトリを作ろう

さてダウンロードの場所を作らないといけないな。

20160214_3-min

自分はc/Apache24/htdocs/test/ディレクトリを作業用ディレクトリとするけど、別にデスクトップにフォルダ作ってもOKだ。

名前は何でもいいけどtestと命名しといてくれると良いかなと思う。そのテストの中にjsフォルダを作ってそこにダウンロードしたjQueryを保存すれば良い。jQueryのファイル名はそのままで。

これで作業用ディレクトリは完成だ。jQueryのダウンロードも完了だ簡単!

jQueryを動かしてみよう

ダウンロードだけじゃ味気がないので、せっかくだしjQueryを動かしてみる所までやろう。
メモ帳でもなんでも良いのでテキストエディタを開いてhtmlファイルを作るぞ。

20160214_4-min

htmlファイルを作ったら

<br />
&lt;!DOCTYPE html&gt;<br />
&lt;html&gt;<br />
&lt;head&gt;<br />
&lt;title&gt;jQuery-test&lt;/title&gt;<br />
&lt;/head&gt;<br />
&lt;body&gt;<br />
&lt;/body&gt;<br />
&lt;/html&gt;<br />

この様に書いて保存しといて欲しい。

20160214_5-min

testフォルダ直下にindex.htmlと命名して保存した。/jsフォルダの中ではないので注意。

jQueryを読みこませよう

保存したらダウンロードしてきたjQueryを読みこませよう。
先ほどのhtmlファイルに追加でこの様に記述する。

20160214_6-min

<br />
&lt;!DOCTYPE html&gt;<br />
&lt;html&gt;<br />
&lt;head&gt;<br />
&lt;title&gt;jQuery-test&lt;/title&gt;<br />
&lt;/head&gt;<br />
&lt;body&gt;<br />
    &lt;script type=&quot;text/javascript&quot; src=&quot;js/jquery-2.2.0.min.js&quot;&gt;&lt;/script&gt;<br />
    &lt;script type=&quot;text/javascript&quot; src=&quot;js/script.js&quot;&gt;&lt;/script&gt;<br />
&lt;/body&gt;<br />
&lt;/html&gt;<br />

scriptと書かれている2行が追加分だ。scriptが2つあるが上の方がjQuery。その下がjQuery実行のためのファイルだ。なので次はまだ作っていないjQuery実行ファイルを作る。

jQuery実行ファイルを作ろう

test/jsフォルダに移動して。メモ帳等なんでも良いのでjsファイルを作る。

20160214_8-min

<br />
$(document).ready(function(){<br />
    var $btn = $(&quot;a&quot;);<br />
    $btn.on(&quot;click&quot;,function(){<br />
        alert(&quot;click!!&quot;);<br />
        return false;<br />
    });<br />
});<br />

このようにコピペして書いておいて欲しい。そしてscript.jsと命名して保存

20160214_9-min

保存場所はjs/フォルダ内だ。お間違い無いように。

これで読み込み完了だ。

jQueryを実行してみよう

最後に適当なボタンを作ってjQueryを実行してみよう。

htmlファイルに更に追加でボタンを記述する。

20160214_7-min

<br />
&lt;!DOCTYPE html&gt;<br />
&lt;html&gt;<br />
&lt;head&gt;<br />
&lt;title&gt;jQuery-test&lt;/title&gt;<br />
&lt;/head&gt;<br />
&lt;body&gt;<br />
    &lt;a href=&quot;#&quot;&gt;click-btn&lt;/a&gt;<br />
    &lt;script type=&quot;text/javascript&quot; src=&quot;js/jquery-2.2.0.min.js&quot;&gt;&lt;/script&gt;<br />
    &lt;script type=&quot;text/javascript&quot; src=&quot;js/script.js&quot;&gt;&lt;/script&gt;<br />
&lt;/body&gt;<br />
&lt;/html&gt;<br />

html書いたことある人なら誰もが知っているaタグですな!

これでお終い。後はhtmlファイルをダブルクリックしてChromeやIE等のインターネットブラウザで開いてみてください。そうすると・・・

20160214_10-min

click-btnというテキストだけ表示されている殺風景な画面になると思う。これをクリックしてみましょう。

20160214_11-min

こんな感じでアラートが出ればjQuery実行完了だ。見事成功!

クリックすると発火するプログラムを書いたのだ!

すっごいシンプルだけどこれを勉強していけば色々できるようになるのだ。もし興味あれば続けて遊んでみて?。

もっと自転車旅を知りたい人向け有料マガジンやってます。

もっと自転車旅を知りたい人向け!
有料マガジンやってます。

自転車世界一周マガジンについて詳しくはこちら

スポンサーリンク

フォローする

ツイッターやっています。


Profile

プロフィール

Profile びゃす

名前 びゃす
現在自転車で世界中旅しています。
スタートはアメリカ合衆国アラスカ州。
南米最南端を目指して毎日ひたすら前進中!。

自転車を漕ぎ、見た世界について感じたことをブログで発信しています。
詳しいProfileはこちら


Instagram
follow us in feedly
Followボタンからお気に入りブログを
登録する方法