JavaScriptの書き方が分からない?基本から外部ファイルの利用を解説


JavaScriptはどこに書いて実行するの?
外部ファイルからJavaScriptを実行するってどういう意味?
ライブラリを読み込むにはどうすればいいのかな

これからJavaScriptの学習を始めようと思った時に、どこに書いてどのように実行すればいいのか悩むケースは少なくありません。

また、JavaScriptの実行方法は1つだけとも限らず、無数にある便利なライブラリも併用することができます。これらの基本的な知識はどのように学習するのが良いのでしょうか?

そこで、この記事では初心者でも今日からJavaScriptの基本的な書き方について分かりやすく理解できるように解説するので、ぜひ最後まで読んで理解を深めて頂ければ幸いです。

一人でも多くの方がJavaScriptの不安を解消できれば幸いです。

基本的な書き方

この章では、JavaScriptのもっとも基本的な書き方について見ていきましょう。主に、HTML内に直接プログラムを書いていく手法について学んでいきます。

HTMLを準備しよう

まず、JavaScriptのプログラムを書いて実行するにはHTMLファイルが必要になります。これはブラウザにJavaScriptの実行エンジンが搭載されているため、HTMLファイルをブラウザに読み込ませてJavaScriptを実行させるからです。

基本的なHTMLとしては次のようになります。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Hello</title>
  </head>
  <body>

  </body>
</html>

一般的にJavaScriptのプログラムはbodyタグの中に書きます。ただし、そのまま記述するのではなくscriptタグという特別なHTML要素が用意されているので、その中にプログラムを書いていきます。

詳しい書き方については、次の章から見ていきましょう!

scriptタグでJavaScriptを書く

HTML要素の中で、scriptタグに囲まれた範囲はJavaScriptを書いて処理することが出来ます。

例えば、前章で作成したHTMLのbodyタグ内で、次のようにscriptタグを記述してみましょう。

<script>

    console.log('Hello World');
  
</script>

この例では、scriptタグ内にJavaScriptのプログラムを書いています。これにより、ブラウザがこのHTMLファイルを読み込んだ時に、JavaScriptプログラムも一緒に処理されて実行されるわけです。

ちなみに、bodyタグではなくheadタグ内にscriptタグを記述してJavaScriptプログラムを記述することも可能です。ただし、この場合は注意する点があります。

次のサンプル例を見てください。

<head>
    <script>
        const h1 = document.querySelector('h1');

        console.log(h1);
    </script>
</head>
<body>
    <h1>Hello World</h1>
</body>

実行結果

null

この例では、headタグ内にJavaScriptプログラムを記述していますね。プログラムとしては、h1要素を取得してコンソールログへ出力するという単純なものです。

しかしながら、実行結果は【null】となり要素を取得できていないことが分かります。理由は簡単で、HTMLファイルを上から下へ順番に処理されていくからです。

つまり、JavaScriptを実行した時点ではまだh1要素が構築されていないので、取得しようとしてもできなかったわけです。

このように、headタグ内にJavaScriptを記述する場合はDOM要素のタイミングに注意する必要があります。

外部ファイルの作成

この章では、JavaScriptを外部ファイルとして作成して実行する手法について見ていきましょう。ファイルの作成から実際にHTMLで読み込んで処理する方法について学んでいきます。

JavaScriptファイルを用意しよう

ここで言う外部ファイルとは、簡単に説明するとJavaScriptプログラムだけが記述されたファイルを用意するという意味になります。

これにより、HTMLとJavaScriptを分離することができるので、開発効率の向上や再利用性およびソースコードの見通しが良くなるわけです。

そこで、まずは【main.js】というファイルを作成して次のように記述してみましょう。

const h1 = document.querySelector('h1');
      
console.log(h1);

このmain.jsファイルは、HTML内にあるh1要素を取得して開発者ツールのConsoleタブに出力するという内容です。このファイルをindex.htmlと同じディレクトリに置いておきましょう。

これでJavaScriptファイルの準備は完了です。

あとは、このファイルをどうやって読み込んで実行するのか?ということですが、それは次の章で詳しく見ていきましょう。

scriptタグで外部ファイルを読み込む

先ほど作成したJavaScriptファイルは、scriptタグを利用すれば簡単に読み込むことができます。

一般的には、scriptタグの【src属性】を使って次のように記述します。

<script src="main.js"></script>

src属性にファイル名を指定すれば、自動的にファイルの中身を解析してJavaScriptを処理してくれるのです。

また、読み込むJavaScriptファイルは複数あっても同様です。

<script src="main1.js"></script>
<script src="main2.js"></script>
<script src="main3.js"></script>

注意する点としては、読み込まれるJavaScriptファイルは上から順番に処理されていくという点です。上記の例だと【main1.js】→【main2.js】→【main3.js】の順番で読み込まれて実行されていきます。

例えば、main2.jsの中で定義されている関数はmain1.jsでは実行できないことを意味しています。外部ファイルを読み込む時は注意するようにしておきましょう。

ライブラリを読み込む

この章では、JavaScriptライブラリを読み込んで利用する方法について見ていきましょう。主に、ライブラリの概要とjQueryの使い方について学んでいきます。

ライブラリとは?

前章では、外部ファイルとしてJavaScriptを読み込む方法を解説しましたが、この方法は第三者が作成したJavaScriptファイルを読み込むことが出来ることを意味しています。

この仕組みを活用して、あらかじめ便利なメソッド群やAPIを提供するプログラムを作成したものをライブラリとして広く公開されているのです。JavaSriptはこのエコシステムによって、複雑なプログラムをより効率よく記述できるようになっています。

例えば、ライブラリとしてもっとも有名なのはjQueryでしょう。

主にDOM操作を便利にするメソッドを多く提供しているわけですが、他にも図形描画や通信処理などさまざまな処理を簡単に扱えるようにしてくれるライブラリがたくさんあります。

jQueryのライブラリを読み込む書き方

それでは、実際にJavaScriptライブラリを読み込んでみましょう。

先ほどもご紹介しましたが、人気の高いjQueryのライブラリを利用して解説していきます。

jQueryは公式サイトからファイルをダウンロードすることができます

ファイルを入手したら、scriptタグのsrc属性を利用して読み込むだけです。

<script src="jquery.js"></script>

また、JavaScriptライブラリをCDN経由のURLを記述するだけでも利用可能です。例えば、jQueryの場合だと以下のようになります。

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>

このようにsrc属性にはファイルのパスだけでなくURLを記述しても利用することが出来るわけです。この1行を記述するだけで、基本的にはライブラリの導入が完了します。

まとめ

今回は、JavaScriptの基本的な書き方について学習をしました。

最後に、もう一度ポイントをおさらいしておきましょう!

  • JavaScriptはbodyタグ内にあるscriptタグ内に記述する
  • JavaScriptプログラムだけを記述した外部ファイルも読み込める
  • 誰かが作成したライブラリもJavaScriptとして読み込むことが可能

上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう!

「プログラミング、右も左もわからない…」という方にオススメ

当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。

その経験を通してプログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。

侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。

cta_under_bnr

「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。

書いた人

マサト

フリーランスのIT系ライターを10年従事する兵庫県出身の40歳。侍ブログ編集部としては、これまで270記事以上を執筆。
30歳を過ぎてから独学でJavaScript, Node.js, Linuxを習得した経験を活かし、初心者が迷わない記事作成を意識しながらプログラミングの楽しさを知ってもらうために活動しています。趣味はキャンプと登山です。

おすすめコンテンツ

まずはここから!初心者でも1から学べるプログラミング入門カリキュラム

転職成功で受講料0円!あなたもプログラミングを学んでエンジニアデビュー