JavaScriptが人気
JavaScriptは、HTMLに動的な処理を加えるスクリプト言語です。例えば、画面にダイアログメッセージ（alert）を表示したり、ページ全体をリロードせずに、一部分のHTMLだけロードするajax処理など、現在のWEBサイト制作には欠かせない存在です。
最近は、2D および 3Dなどのゲームも。JavaScriptで作成されているものがあります。さらに、JavaScirptは、ブラウザの世界を離れてスマホアプリや、車載器（カーナビ）アプリの制御など、Webアプリ以外でも活躍しています。
「StackOverflow」で行われた人気プログラミング言語のランキングでも、6年連続JavaScriptは首位に輝いています。
この記事では、HTMLでJavaScriptを使用する方法を解説します。
HTMLへJavaScriptを書く方法
HTML文書内に、JavaScriptを記述する方法を解説します。JavaScriptをHTMLに書く方法には、次の2つの方法があります。
インラインスクリプト
インラインスクリプトは、HTML文書内に直接JavaScriptを埋め込む方法です。<head>または**<body>タグ内の任意の場所にJavaScriptを埋め込めます。
■ <head>タグに埋め込む
<head>
<script type="text/javascript">
alert("Hello JavaScript!!");
</script>
</head>■ <body>タグ内の任意の場所に埋め込む
<body>
<p>サンプルHTML</p>
<script type="text/javascript">
alert("Hello JavaScript!!");
</script>
</body>外部スクリプト
外部スクリプトとは、拡張子「.js」のスクリプトファイルを別で用意し、それをHTML内のscriptタグで読み込む方法です。Web制作現場では、外部スクリプトでJavaScriptを読み込む方法が一般的に用いられています。
外部スクリプトを読み込む場合は、scriptタグのsrc属性に読み込むファイルのパスを指定します。
<head>
<script type="text/javascript" src="sample_script.js"></script>
</head>Scriptタグで使える属性
HTML文書にJavaScriptを読み込むScriptタグには、いくつかの属性が指定可能です。この章では、Scriptタグで使用できる属性について解説します。
type
スクリプト言語の種類（MIMEタイプ）を指定します。スクリプトをJavaScriptで記述する場合は「type=”text/javascript”」と指定します。HTML5では、type属性を省略した場合は「type=”text/javascript”」みなされるようになりました。スクリプトをJavaScript以外の言語で記述することは、ほとんど無いため、実質的にtype属性は省略できるようになりました。
■ HTML5からは以下のようにtype属性が省略できる
<!DOCTYPE html>
<html>
<head>
<script>
alert("Hello JavaScript!!");
</script>
</head>
</html>src
先述したように、外部スクリプトのファイルパス（URL）を指定します。
async
非同期にスクリプトをロードします。スクリプトのロードはHTMLの解析と同時に行われます。スクリプトのロードが完了すると、スクリプトの実行が行われます。
HTMLの解析が終了していない状態でも、スクリプトのロードが完了したタイミングでスクリプトが実行されます。HTMLの解析後にスクリプトを実行したい場合は、後述する「defer」属性を使用します。
defer
非同期にスクリプトを読み込みます。スクリプトのロードとHTMLの解析が同時に行われるのは「async」属性と同じですが、「defer」属性は、HTMLの解析後にロードしたスクリプトを実行します。
integrity
スクリプトが改竄されてないことを証明するハッシュ値を指定します。jQueryなどのライブラリをCDN経由で読み込む時は、以下の通り「integrity」が付きます。
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
CDNからスクリプトを読み込む時は、なるべく「integrity」属性を指定することをお勧めします。例えば、CDNが攻撃を受けて、スクリプトが改竄された場合、「integrity」属性でハッシュチェックを行っていないと、改竄されたスクリプトが読み込まれ、自身のサイトにまで被害が及んでしまします。
crossorigin
CDN上にホストされた外部ドメインのスクリプトから、「window.onerror」にアクセスできるようにする場合に指定します。通常（crossoriginを指定していない時）、外部ドメインのスクリプトが、「window.onerror」にアクセスすると、限定的な情報しか返さず、それ以上の情報を取得しようとすると、エラーになります。
JavaScriptの開発環境
JavaScriptはブラウザ上で動作する言語のため、JavaScriptを記述したHTMLファイルを用意して、PC上のブラウザでファイルを開けば、簡単に実行できます。
また、ブラウザだけでJavaScriptの開発ができる、クラウド開発環境もおすすめです。おすすめの、クラウド開発環境を2つ紹介します。
Web Maker
Web Makerは、ブラウザがあればHTML / CSS / JavaScriptが実行できるクラウド開発環境です。コードを編集すると、すぐさまプレビュー画面にリアルタイム反映されます。また、ログイン不要のため、サイトにアクセスするだけで、すぐに使えます。
CodePen
CodePenも、ログイン不要でHTML / CSS / JavaScriptが実行できるクラウド開発環境です。SNSへのシェア機能や、ブログなどの自分のWebサイトに、作成したコードを埋め込み、公開できることが特徴です。
※SNSへのシェアや、コードの埋め込みを行う為にはログインが必要です。
現在のWEB制作では、JavaScriptが必須！
HTMLでJavaScriptを使用する方法を解説してきました。最近のWEBサイトには、ほとんどJavaScriptが使用されています。WEB制作の現場でも、当然のようにJavaScirptの知識が求められます。
HTML、CSSと共に、この機会にJavaScriptも学んでみて下さい。
インラインスクリプトは、記述するJavaScriptの量が増えると、HTMLとJavaScriptのコードが混在し可読性が悪くなります。なるべく外部スクリプトの方法で、JavaScriptを読み込むようにしましょう。