はじめに
JavaScriptは説明するまでもありません。Web開発において最も人気のあるプログラミング言語の1つです。これは、HTML や CSS と同様に機能します。これらの言語はすべて、Webベースのアプリケーションやプログラムの設計と開発に役立ちます。
では、JavaScriptは具体的にどのように役立つのでしょうか？JavaScriptを使用すると、WebアプリケーションやWebページを非常にインタラクティブにすることができます。現代の分野において、自己満足に浸っている余裕はありません。最初の数秒で視聴者の注意を引きつけ、惹きつけ続ける必要があります。面白くレスポンシブなWebデザインが、これを行うための最良の方法の1つであることは間違いありません。ありがたいことに、ほとんどのブラウザがJavaScriptをサポートしています。組み込みのエンジンを使用して、ブラウザ上で実行できます。
HTMLにJavaScriptを追加する
WebアプリでJavaScriptファイルを使用したい場合は、HTMLマークアップと並行して実行する必要があります。HTMLにJavaScriptを追加する方法は2つあります。1つのアプローチは、HTMLドキュメント内でインラインで実行することです。もう1つの方法は、別のファイルとして追加することです。このファイルは、HTMLドキュメントと一緒にダウンロードされます。
このチュートリアルでは、これら2つの方法を使用してHTMLにJavaScriptを追加する方法を詳しく説明します。
HTMLドキュメントにインラインでJavaScriptを追加する方法
まず、HTMLドキュメントにインラインでJavaScriptを追加する方法を見ていきます。これを行うには、専用のHTMLタグを使用する必要があります。それは <script> です。このタグでJavaScriptコードを囲みます。このタグは、HTMLマークアップ全体のどこにでも配置できます。どこに配置するかは、JavaScriptをいつロードしたいかによって異なります。
たとえば、<head> セクション、<body> セクション、あるいは </body> 閉じタグの後に配置することもできます。JavaScriptをHTMLコードのメインコンテンツから離しておきたい場合は、<head> セクションにタグを配置するのが最適です。ここにJavaScriptコードが含まれることになります。一方で、Webページのレイアウト内でJavaScriptコードを実行したい場合もあるでしょう。その場合は、<body> セクションにタグを配置する必要があります。たとえば、document.write を使用してコンテンツを生成する場合などがこれに該当します。
これを理解する最良の方法は、コードの例を通すことです。以下の空白のHTMLドキュメントを考えてみましょう。このドキュメントのブラウザタイトルは Today’s Date です：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Today's Date</title> </head> <body> </body> </html> |
ご覧のとおり、ここにはJavaScriptの形跡はありません。ドキュメントにはこれまでのところHTMLマークアップのみが含まれています。ここで、インラインでJavaScriptコードを追加して、同時にロードおよび実行されるようにします。以下のJavaScriptコードの一部を考えてみましょう。
|
1 2 |
let d = new Date(); alert("Today's date is " + d); |
上記のコードに従って、Webページに本日の日付のアラートを表示できるようにしています。そのため、訪問者がいつサイトを立ち上げても、ページには現在の日付が表示されます。
さて、このJavaScriptコードをHTMLドキュメントに追加するには、<script> タグを使用します。まず、<head> タグの間にJavaScriptコードを追加する必要があります。これにより、ページの他のコンテンツよりも前にこの特定のコードをロードする必要があることがWebページに伝わります。コードは <title> タグの下に追加できます。これを行う方法は次のとおりです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>今日の日付</title> <script> let d = new Date(); alert("今日の日付は " + d); </script> </head> <body> </body> </html> |
JavaScriptコードが追加されました。ウェブページが実行され、ページの残りの部分よりも前にこのスクリプトが読み込まれます。サイトを立ち上げると、現在の日付を示すアラートが以下のように表示されます。
これが、HTMLドキュメントの<head>セクションにコードを追加する方法です。別の方法としては、<body>タグの内部または外部にスクリプトを追加することです。以下の例に示すように、<head>セクションの後にコードを追加します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>今日の日付</title> </head> <body> <script> let d = new Date(); document.body.innerHTML = "<h1>今日の日付は " + d + "</h1>" </script> </body> </html> |
この変更の結果、ページを再読み込みすると以下のように表示されます。
外部JavaScriptファイルを使用してHTMLにJavaScriptを追加する方法
小規模なJavaScriptスクリプトは、HTMLファイルとうまく連携します。これは、スクリプト全体が1ページ以内で実行されるためです。複数ページにまたがるような大規模なスクリプトを扱う場合、ファイルが非常に難解になる可能性があります。そのため、別のJavaScriptファイルとして追加する必要があるかもしれません。そのファイルはHTMLドキュメントと同時に読み込まれます。
このセクションでは、別のファイルを使用してHTMLにJavaScriptを追加する方法について説明します。コードは通常、1つ以上の.jsファイルに格納されます。HTMLドキュメントは、他の外部アセットと同様にこれらのファイルを参照します。完全に別のJavaScriptファイルを使用したい理由はたくさんあります。主に、コードが非常に読みやすく、理解しやすくなります。言うまでもなく、ファイルを分けることでキャッシュされたページの読み込みが速くなり、メンテナンスも比較的容易になります。
これらのメリットを活かすには、JavaScriptファイルとHTMLドキュメントの2つをどのように接続するかを知る必要があります。理解を深めるために、小さなウェブプロジェクトの例を挙げます。この想定プロジェクトには、ルートにメインのindex.html、css/ディレクトリにstyle.css、js/ディレクトリにscript.jsが含まれています。こちらがその小さなプロジェクトです：
|
1 2 3 4 5 6 7 8 9 10 11 |
project/ ├── css/ | └── style.css ├── js/ | └── script.js └── index.html |
HTMLマークアップには、以前使用したドキュメントを使用します。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>今日の日付</title> </head> <body> </body> </html> |
2つのドキュメントが用意できたので、これらを接続してみましょう。日付に関するJavaScriptコードをscript.jsファイルに追加する必要があります。以下のように<h1>ヘッダーとして追加します。
|
1 2 |
let d = new Date(); document.body.innerHTML = "<h1>本日の日付は " + d + "</h1>" |
コードをHTMLドキュメントに接続するには、スクリプトへの参照を追加します。参照は、HTMLテンプレートの<body>セクション内、またはその下に配置する必要があります。ここで使用するコードは次のとおりです。
|
1 |
<script src="js/script.js"></script> |
ご覧のとおり、<script>タグを使用しています。このタグは、プロジェクトのjs/ディレクトリにあるscript.jsファイルを指しています。HTMLドキュメント内では、コードは以下のように表示されます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>本日の日付</title> </head> <body> </body> <script src="js/script.js"></script> </html> |
必要に応じて、ページを華やかにするためにいくつかのスタイル変更を加えることができます。たとえば、<h1>ヘッダーに背景色を追加してみましょう。この編集はstyle.cssファイルで行います。
|
1 2 3 4 5 6 7 8 |
body { background-color: #0080ff; } h1 { color: #fff; font-family: Arial, Helvetica, sans-serif; } |
この編集はヘッダーに反映されるため、HTMLドキュメントの<head>セクションで参照します。このCSSファイルへの参照は以下のように行います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>本日の日付</title> <link rel="stylesheet" href="css/style.css"> </head> <body> </body> <script src="js/script.js"></script> </html> |
必要な参照が完了したので、変更を確認できます。ブラウザでindex.htmlを読み込むと、次のようなページが表示されます。
コードを更新したい場合は、すべてのページを1つの場所から編集できます。これにより、ウェブページのメンテナンスが非常に簡単になります。これが、JavaScriptスクリプトに別のファイルを使用するメリットです。
まとめ
このチュートリアルが、HTMLにJavaScriptを追加するプロセスについての理解を深めるのに役立つことを願っています。HTMLドキュメント内にインラインで追加する方法と、.jsファイルとして追加する方法の両方を説明しました。基本を理解したところで、HTML内のJavaScriptを使ってさらに多くのことができるようになります。
JavaScriptをさらに活用するのに役立つ、当ブログのリソースをいくつかご紹介します。
- 独自のウェブアプリケーションを構築している場合は、最適なサーバー設定の選択方法に関するガイドをご覧ください.
- 学びたい場合は、Ghostでブログをセットアップする方法についてのこのチュートリアルをご覧ください.
- このチュートリアルを参照して、Ubuntu 18.04にNode.jsをインストールする方法を学んでください.
ハッピーコンピューティング！
コメント
コメントはまだありません。最初のコメントを投稿しましょう。