HTML/CSS

手順通りに進めるだけ!HTMLでJavaScript(js)の読み込みが上手くいかない方へ

ハンバーガーメニューや画像のスライドなど、自由に扱うことができればWeb制作の幅が広がるJavaScript。

しかし、HTMLに直接記述するのではなく、外部ファイルから読み込みたいけど記述方法が分からない、忘れてしまったという方も多いのではないでしょうか。

そんな方へ向けて、手順通りに進めるだけで読み込みが完了する方法を記載します。ファイルの作成からjsの読み込み、ちゃんと読み込みできているかのテストまで網羅していますので、ぜひ役立ててください。

記述するための前準備

HTMLファイルを作成する

まずは、何はともあれエディターを開きましょう。今回はVisual stadio codeというエディターを使用していますが、他のエディターでも問題なく作業を進められます。

エディターが開いたら、HTMLファイルを作成します。

下の画像では、『js-loading』というフォルダの中に『index.html』というファイルを作成しました。

拡張子『.html』さえ合っていれば、『index』の部分は自由な文字列で構いません。その場合は、次からの文章で『index.html』というファイルが出てきたら、この作業で作成したファイルのことだと思ってください。

htmlファイルの作成

HTMLの雛形を作成する。

Visual Studio Codeをお使いの方は、『!』と入力し、タブキーを押すと下図のような雛形が作成できます。

他のエディターをお使いの方は、下のコードをコピペすることでも手順通りに進められますが、そのエディターにも雛形を作成する機能があるかと思います。HTMLファイルを作成したら必ず行う作業ですので、今後の時間短縮のためにも一度調べていただくことをおすすめします。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
</body>
</html>

JavaScript記述用のファイルを作成する。

画像では、『main.js』というファイルを作成しました。

ファイル名の後の拡張子(ドットの後)に『js』と記述することでJavaScript専用のファイルであると認識させます。

画像では、『main.js』というファイルを作成しました。

ファイル名の後の拡張子(ドットの後)に『js』と記述することでJavaScript専用のファイルであると認識させます。

これもindex.htmlと同様で、『.js』という拡張子さえ合っていればどのようなファイル名にしていただいても構いません。その場合は、参照するファイル名をご自身で作成したもので記述する必要があるのでその点に注意してください。

中にはまだ何も記述せずに、ひとまずindex.htmlでの作業に戻ります。

Javascriptファイルの作成

コードを記述していく

jsファイルを読み込む準備をする。

まずは、それ専用のファイルと分かるように、『index.html』のbodyタグ内にh1タグで『JavaScript読み込みテスト』と記述しておきましょう。必要なければ記載しなくてもこの後の作業に支障はありません。

<h1>JavaScript読み込みテスト</h1>
テキスト入力

次に、</body>タグのすぐ上に下のように記述します。

<script type="text/javascript" src="main.js"></script>
jsファイルの読み込み

この文章で、実際にjsファイルを読み込んでいます。

『src=』の後に記述している『” “』内の文字列が、jsファイルの場所を表しています。

今回は、index.htmlファイルから見て、同じフォルダ内にmain.jsファイルがあるのでこのような表記となっています。

【番外編】もしjsファイルを違う場所に保存している場合

仮に下図のようなファイル構成にしたとします。

jsファイルのディレクトリ

フォルダの構成が、js-liading > js > main.jsとなっています。

その場合、先ほどの『src=』の後に記述している『” “』内の文字列は、『js/main.js』となります。

これは、jsフォルダの中にmain.jsが格納されていますということを表すために『/』で区切ってファイルの場所を教えてあげています。

記述できたら先に進みましょう。

フォルダの特定

main.jsを正常に読み込めているか確認する

main.jsファイル内に、下のように記述してみましょう。

alert('hello');

このコードはJavaScript言語で、『alert』の後に記述している’hello’という文字を、ポップアップ形式で表示するというものです。

記述できましたら、index.htmlをブラウザで開きます。

画面上部に、ポップアップでhelloと表示されたら読み込みできています。上のコードで『’ ‘』の中身を任意の文字列に変更すれば、その文字列が表示されるので試してみてください。

ポップアップでhelloと表示

まとめ

いかがでしたでしょうか。ちゃんと読み込みできましたでしょうか。

自在に扱えるようになるととても便利なJavaScriptですが、html、cssを学び終えた方からするとまた違う言語を学ばなければならないのか、と思われるかもしれません。

しかし、どのWebサイトを見ても至るところで使用されており、なくてはならないものとなっています。

ま思った通りの動きを実装出来たらWebサイト制作がより一層楽しい物になっていくので、まずは読み込むところから理解し、一つずつ着実にこなしていきましょう。