ホームページ制作において、JavaScript（ジャバスクリプト）とjQuery（ジェイクエリー）の読み込ませ方について解説していきます。
JavaScriptとjQueryは、ホームページ制作に慣れてくると必ず出てくる壁になります。JavaScript・jQueryを使いこなせるかどうかで、ホームページのコンテンツは一気に変化しますので、きっちり使いこなし、ハンドリングの良いリッチなサイトを作れるようにしましょう。
このページでは、通常HTMLに読み込ませる事を前提に、WordPressにも対応した基本知識の紹介をしていきます。
具体的なコードの導入や書き方については、それぞれ解説が深くなっていきますので、あくまで基礎概念の把握で、「JavaScript・jQueryってよく聞くけど、そういった事だったんだ」程度でご理解いただければと存じます。
この記事は、動画バージョンでも解説しておりますので、動画で学習されたい方は以下のリンクより閲覧下さい。
JavaScript・jQueryとは？
JavaScript・jQueryとは、プログラミング言語の一つです。
プログラミング言語を利用する事で、動的サイト（スライドショーやタブメニューなどの特殊仕様）を実装させる事ができます。それらは、CSSだけで実装できる事もありますが、JavaScript・jQueryを使用する事で表現の幅が広がったり、より直感的な動作を実装する事ができるようになります。
-
ホームページ制作にあたり勉強すべきコンピュータ言語は？【ホームページ制作入門講座】
続きを見る
メモ
ちなみに、コンピュータ言語のJavaScriptとJava（ジャバ）は全く違う言語になりますので、間違えて参考書などを買わないようにしましょう。Javaはホームページ作成において、とりあえず全く理解していなくてもやっていけます。
ポイント
JavaScriptなどのプログラミング言語を本格的に勉強するにはかなりの時間が必要になりますので、JavaScript・jQuery共に、最初のうちは、ネットからソースを拾って実装させ、必要に応じて、CSSで調整するくらいができれば合格点だと思います。
JavaScriptの読み込ませ方
それでは、HTMLにJavaScriptを読み込ませていきましょう。
JavaScriptの読み込ませ方は、簡単にいうとJavaScriptの書かれたscriptタグを<head>または<body>に読み込ませる事です。その中で、JavaScriptのコード自体を「外部から読み込ませる」か「直接記述するか」の違いがあります。
scriptタグは<body>内で読み込ませても問題ありません。
例えば、「alert("こんにちわ");」というJavaScriptのコードがあるとします。
詳しい文法の話は割愛しますが、上記一行でもJavaScriptのプログラムコードで、「ポップアップダイアログで「こんにちわ」と表示します」という、プログラミング指示になります。
では、JavaScriptコードを読み込むために、コードをscriptタグで囲んでいきましょう。
<script>alert("こんにちわ");</script>
ポイント
ネットで配布されているものには、「type="text/javascript"」と属性をつけて「<script type="text/javascript">alert("こんにちわ");</script>」と書かれている場合もありますが、HTML5から<script>にタイプ属性を書かなくてもいけるようになっています。もちろん、わざわざ消す必要はないので、そのまま書いておいても大丈夫です。
あとは、このscriptタグで囲ったコードを<head>または<body>の中に、「外部から読み込ませる」か「直接記述するか」で記述すればOKです。以下で解説していきますので、皆さんも実際に操作してみると理解しやすいかもしれません。
HTMLの記述方法がわからない方は、以下の記事を参考に取り組んでみてください。
-
HTMLの基本構造（要素と属性）から記述方法、各タグの役割と意味まで解説。【ホームページ制作入門講座】
続きを見る
<head>で「外部から」読み込ませる方法
<head>で「外部から」読み込ませる場合、例えば同一階層上にJavaScriptファイルを置いている場合は、以下のようなコードになります。
外部から読み込ませるJavaScriptファイルの拡張子は「.js」にしなければいけません。
JavaScriptファイル sample.js
alert("こんにちわ");
HTMLファイル
<!DOCTYPE html>
<html lang="ja">
<head>
<script src="sample.js"></script>
</head>
<body>
<p>今日は晴れです。</p>
</body>
</html>
うまく表示できない時の注意
- 同一階層上にJavaScriptファイルはありますか？
- リンクさせているJavaScriptファイル名（sample.js）は一致していますか？
- JavaScriptファイルのコードに<script>などは入っていませんか？
<head>に「直接記述」する方法
<head>に「直接記述」する場合、以下のようなコードになります。
HTMLファイル
<!DOCTYPE html>
<html lang="ja">
<head>
<script>alert("こんにちわ2");</script>
</head>
<body>
<p>今日は晴れです。</p>
</body>
</html>
<body>に「直接記述」する方法
<body>に「直接記述」する事もできます。
HTMLファイル
<!DOCTYPE html>
<html lang="ja">
<head>
</head>
<body>
<script>alert("こんにちわ3");</script>
<p>今日は晴れです。</p>
</body>
</html>
実践的なJavaScript
上記のように、HTMLに簡単にJavaScriptを読み込ませる事ができました。しかし、みなさん思ったかもしれませんが、実際ホームページ運用でポップアップダイアログを出してメッセージを伝えるなんて事はしませんよね？実際のところ、JavaScriptでこのような使い方はほとんどしません。
ここで大事な概念なのですが、JavaScriptでは発動させるタイミングというものを意識する事が大事です。JavaScriptを動的に扱うには、まずは基本的な動作であるJavaScriptを設置した上で、「この動作をしたら」という指示を入れなければなりません。
例えば「ボタンをクリックしたら」という指令であれば、HTMLにその発動指示を書いておかなければなりません。
JavaScriptファイル sample2.js
function sample() { alert("こんにちわ4");}
意味・「sample」というテキストに「ポップアップダイアログで「こんにちわ4」と表示する」という事を設定する。
HTMLファイル
<!DOCTYPE html>
<html lang="ja">
<head>
<script src="sample2.js"></script>
</head>
<body>
<input type="button" value="クリック" onclick="sample();"/>
</body>
</html>
意味・「クリック」のボタンを押すと、「sample」の設定が発動する
実践的なホームページでは、ユーザーの動作に合わせてJavaScriptを発動させるタイミングという場面が多々出てくると思います。
ポップアップダイアログのようにページを開けば動作するという事もありますが、「場合によっては発動タイミングをHTMLに記述しなければならない」という事だけはしっかり覚えておきましょう。「あれ？JavaScriptを書いているのに、全然うまく動作しない」なんて、ハマってしまう事も多々ありますので。
WordPressで読み込ませる
WordPressでJavaScriptを読み込ませる方法も基本的には同じです。
しかし、外部から読み込ませる場合、「親テーマ」「子テーマ」のどちらにJavaScriptファイルを置くかで、header.phpの<head>内に読み込ませるURLが変わりますので要注意です。
-
ワードプレス「子テーマ」とは何か？入手方法とプラグインを使って作る方法も解説！
続きを見る
注意
親テーマの場合、（ドメイン直下）public_html → wp-content → themes→ 該当親テーマ、の中におそらく「js」フォルダがありますので、その中に設置する前提になります。
子テーマの場合は（ドメイン直下）public_html → wp-content → themes→ 該当子テーマ、の中に「js」フォルダがあればその中へ、なければフォルダを作成して、その中に設置する前提になります。
親テーマにファイルを置く場合
<script src="<?php echo get_template_directory_uri() ?>/js/sample2.js"></script>
子テーマにファイルを置く場合
<script src="<?php echo get_stylesheet_directory_uri() ?>/js/sample2.js"></script>
読み込ませるコードは親テーマ、子テーマどちらに設置してもOKですが、子テーマを設置しているなら子テーマに書きましょう。
JavaScriptがうまく動作しない場合
JavaScriptの読み込ませには順番があり、基本的には、対象発動タグより前にJavaScriptコードを記述してはいけないというルールがあります。今回のような簡単な例では問題は起こりませんが、複雑になってくると記述順によってはうまく動作しない場合が出てきます。
ですので、そんな時は</body>の閉じタグ直前にJavaScriptコードを書いてみて動作を確認してみてください。
jQueryとは？
jQueryはJavaScriptをベースにしたプログラムで、それを省略した書き方をするコードになります。大袈裟にいうと、「JavaScriptでは100行かかるコードが、jQueryでは10行で済む」、くらいの感覚で捉えておきましょう。とは言っても、jQueryでは特有の動作もあり、JavaScriptでは動かない事もあるので、厳密には違うかもしれませんが、初心者の方はあまり気にする必要もありません。
jQueryの読み込ませ方は、JavaScriptと基本的には似ていますが、大きく違う点があります。それは、jQueryの場合は「ライブラリ」と呼ばれる「プログラムをまとめたもの」を参照する必要があります。jQueryはライブラリを参照する事で、少ない行数でプログラムを実行する事ができているのです。
ですので、jQueryの実装には、jQueryコード自体の読み込みももちろん必要ですが、jQueryライブラリの読み込みも必要になります。
WordPressのテーマによっては最初からjQueryの読み込みが実装されている事もありますので、そのテーマがどういう仕様になっているかもきちんと把握しておきましょう。
jQueryライブラリの読み込み方法
jQueryライブラリの読み込み方法は2種類あり、jQuery公式ページよりライブラリをダウンロードしてサーバー内に設置してリンクを貼るか、CDN(Contents Delivery Network)というものを利用して、高速に直接プログラムを参照しにいくリンクを貼るかになります。
ダウンロードした場合は、オフラインでも利用できるし、何よりも通信不調などで利用できなくなったり、無くなったりする心配はありませんが、設置するのが手間だったりします。
直接リンクの場合は、設置の手間はないですが、ダウンロードの反対の不安要素はあり、一長一短ですので、どちらが優れているというのはないように思います。
jQueryの書き方
jQueryはJavaScriptの省略系と最初に言いましたが、jQueryには特有の書き方がありますので、JavaScriptを理解してるからと言って書けるというものではなく、jQueryの文章を改めて学ぶ必要はあると思います。
文章の書き方については、非常にややこしくなりますので、今回のページでは割愛させていただきます。あくまで、サイトを動的に動かす方法として「JavaScriptとjQueryというものがあり、読み込んでいくんだ」という概念を理解いただければ、このページではOKかなと思います。
最後に
JavaScript・jQueryに関しては、うまく動作しないという経験をいっぱいして、このページで学んだ事よりも、「JavaScript 動作しない」と検索する方が圧倒的に多くなると思います。コードも複雑になってくると、本当に色々混乱してきます。
そんな時、今一度、このページで学んだ基礎概念をゆっくりと読んでみてください。すると、意外なところに落とし穴を見つける事ができるかもしれませんよ。
JavaScript・jQueryでどちらかを勉強するなら、プログラミングの基礎を学べるJavaScriptから勉強をする方が良いでしょう。しかし、プログラミングは奥が深いですので、ホームページ制作に主眼をおいているなら、程々で大丈夫です。
