logo

Javascript/JQueryを読み込ませる方法 【初心者向け】

準備

  • テキストエディタ (例: メモ帳, VSCode, Atom, Sublime Text)
  • ウェブブラウザ (例: Chrome, Safari, Firefox)

フォルダ構成

次のようにフォルダを作ってみましょう:

my-js-website/
                    ├── index.html
                    └── script.js

my-first-website という名前のフォルダを作成し、その中に index.html と script.js ファイルを保存します。

HTMLの準備

index.html ファイルに以下のコードを記述します：

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8"> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JavaScript読み込みのためのウェブページ</title>
    </head>
    <body>
        <h1>JavaScriptとjQueryの読み込みページ！</h1>

        <!------ この下の2行があると、JavaScriptとjQueryが読み込めます ------>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <!-- JQueryを読み込ませる -->
        <script src="script.js"></script> <!-- JavaScriptを読み込ませる -->

    </body>
</html>

POINT

  • <head>タグ内にメタデータ、<body>タグ内に表示させたい内容を記述することで、HTMLの基本的な骨組みを作成しています。
  • <script src=～略～jquery.min.js"></script>のコードで、JQueryを使えるようになります。
  • <script src="script.js"></script>のコードで、JavaScriptを読み込めるようになります。
  • JavaScriptファイルは通常、</body>タグの直前に読み込むことで、HTMLコンテンツの読み込みが完了した後にスクリプトを実行することができます。

JavaScriptの準備

script.js ファイルに以下のコードを記述します：

alert('JavaScriptが読み込まれました！');
/* ここにコードを貼り付けると、JavaScriptが実行されるよ！ */

$(document).ready(function() {
    alert('jQueryが読み込まれました！'); 
    /* ここにコードを貼り付けると、JQueryが実行されるよ！ */
});

POINT

  • alert関数を使うことで、ブラウザにメッセージを表示することができます。
  • $(document).ready関数を使うことで、ページのDOMツリー(HTML)が完全に読み込まれた後にスクリプトを実行することができます。
  • /* */で囲まれた部分はコメントで、ブラウザには表示されません。

表示と確認

すべてのファイルを保存し、ウェブブラウザで index.html を開いて結果を確認してみましょう。「JavaScriptが読み込まれました！」「JQueryが読み込まれました！」というアラートが表示されます。

よくある質問

Q: HTMLファイルが正しく表示されません。どうすればよいですか？

A: HTMLタグの閉じ忘れやスペルミスが原因で正しく表示されない場合があります。HTML構造が正しいか確認しましょう。エディタの検証機能を使うと便利です。

Q: JavaScriptファイルが正しく読み込まれません。なぜでしょうか？

A: script.jsのパスが正しいか確認してください。例えば、index.htmlとscript.jsが同じフォルダにあるか、パスにスペルミスがないかをチェックします。

Q: jQueryが動作しません。どうしたらいいですか？

A: HTMLで、jQueryをJavaScriptファイルの後に読み込むと、jQueryが正しく動作しない場合があります。必ずjQueryのスクリプトを先に読み込むようにしましょう。

Q: スクリプトが更新されても変更が反映されません。何が原因でしょうか？

A: ブラウザキャッシュが古いバージョンを保持している可能性があります。この場合、ブラウザのキャッシュをクリアして再読み込みしてください。または、Ctrl + F5を押して強制的にキャッシュを無視して再読み込みすることも有効です。