面白きこともなき世を考えて

子育てと競争戦略とゲームと日々のあれこれを適当に。

jQueryをWeb初心者が勉強し始めるための下準備

jQueryの勉強を始めるにあたって、こちらの本を読んでいます。

初心者でもわかりやすいように、導入からサンプルから学べるようになっているのですが、私のような超がつくほどの初心者にはちょっと物足りない部分もある。

何から始めればいいのかもわからないというか。

ということで、自分がjQueryの勉強を始めるまでにした下準備について、メモしておきます。


ファイルの準備

まずは、jQueryのサンプル学習をするにあたって、コードを記述していくためのファイルを用意します。

用意するファイルは以下の3つ。

sample.html
style.css
script.js

それぞれテキストファイルなどで作って、上記の拡張子に変更して保存しておきましょう。

保存は全部一つのフォルダ内に。この保存場所によってファイル内でCSSjQueryを呼び出すための記述が微妙に変わりますので初心者のかたはご注意を。


jQueryの呼び出し方

次に、jQueryをどういう風に呼び出すかです。

呼び出し方は大きく2つ。

・ライブラリをダウンロードする
・CDNを利用する

ライブラリをダウンロードする場合は、こちらから。

CDNというのはWeb上に展開されていて、共有で使えるライブラリのようなものです。

Googleなどが提供していて、ライブラリをダウンロードしないでも、htmlファイル内からリンクするような形で使えます。

より簡単なので、私はCDNを利用することにしました。


html内の<head>タグの記述

そんなこんなでhtmlファイルの記述は以下のようにしておきます。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery サンプル</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
</body>
</html>

上から順に解説しますと、

・まずはDOCTYPEでHTML5の宣言です。今風に。

・次に言語はUTF-8に設定しておきます。これはjQueryを扱う場合は書いておいた方がいいっぽいです。

・titleはなんでもいいです。

・その次はCSSファイルの呼び出し。style.cssと書いてありますね。

・その次がいよいよjQueryのGoogleCDNへのリンク。1.9.0という部分はjQueryのバージョンを表しています。最新にしておけばいいんじゃないでしょうか。

・最後に、jQueryを今後記述していくことになるscript.jsファイルを呼び出しておきます。


まあよくわからなければ、上記のサンプルコードをそのままコピペしていただければ。

ちなみにjQueryの範囲での準備の仕方は下記サイトを参照しました。

7つのサンプルでjQueryを学ぼう!「jQueryが全く分からない人のため」の超初級者向け入門講座 | OZPAの表4


いかがでしょうか?

jQueryの入門書とかでも、意外とHTMLファイルの用意の仕方とかの当たり前すぎることは書いてなかったのでまとめておきました。

でも、自分もこの程度のことすら最初はわからず軽く調べたので、きっと誰かの役に立つはず。