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として読み込むことが可能

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

LINEで送る
Pocket

ITエンジニアへ転職したい方におすすめ

自分を評価してくれる企業に転職して年収を上げたい! 自分のスキルにあった独自案件を知りたい!
エンジニアは今もっとも注目されている職業の1つ。エンジニアになって年収を増やしたい方や、あなたのスキルに見合った企業へ転職したいエンジニアの方も多いですよね。

しかし、大手の転職媒体は扱う求人数が多くても、誰もが登録しているので競争率もかなり高くなっています。そのため、あなたの条件に見合った企業を見つけても転職するためには、相応の努力とスキルが必要となります。

こういった媒体では、未経験からエンジニアを目指す方やエンジニア歴2〜3年で転職を考えている方にとって、最適な転職環境とはいえません。

そこでオススメしたいのが、未経験者や若手エンジニア向けの独自案件を多く掲載している「侍ワークス」です。

侍ワークスは、独自案件を多く掲載しているだけでなく、

・応募から就業まで一貫したサポート

・就業後もアフターフォロー

といった経験の浅い方や初めてエンジニアを目指す方にも安心のフォロー体制が整っています。もちろん登録は完全無料!しかも案件を見るだけなら登録も不要です。

まずは、お気軽にどんな求人があるか見てみてください。あなたにピッタリの企業がきっと見つかりますよ! 侍ワークスの求人情報を見る

書いた人

マサト

マサト

フリーランスのIT系ライターを8年従事。侍ブログ編集部としては、これまで270記事以上の記事を執筆。
独学でJavaScript, Node.js, Linuxを3年学習。個人プロダクトのWebメディア・アプリ作成経験あり。