HTMLからJavascriptを読み込んで動作確認しよう
Javascriptをブラウザで動かす場合、テキストエディタ1つあるだけで組めるため、特別な環境構築は不要です。
目次
ブラウザでJavascriptを動かす方法
ブラウザでJavascriptを動かすには、
- HTMLからJavascriptを読み込む
- HTML内に直接書く
の2種類があります。基本的には前者が多いですが、Wordpressでスクリプトを埋め込むなどで後者を書くことも時々あります。
Javascriptが書けること前提で進めています。
Javascriptやプログラミング入門についての記事は下のページを参考にしてください。
HTMLからJavascriptを読み込む
まずはファイルを用意しましょう。index.htmlとapp.jsを同じフォルダに用意します。
console.log("Hello, Javascript World!!");
<!DOCTYPE html>
<html lang="ja">
<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">
<!-- ここの読み込みファイルは, 上で作成したJavascriptのファイルの名前にしてください -->
<script src="app.js"></script>
<title>Document</title>
</head>
<body>
<p id="message">Hello, World!!</p>
</body>
</html>
この例ではhead内に書いていますが、実際にはbodyの終わりの方に書くことが頻繁にあります。
Javascript読込中は画面の続きが読み込まれないため、画面を出してからスクリプトを読み込むようにして、表示速度を改善するためです。
HTML内に直接書く
同じようにscriptタグを利用しますが、src属性は指定せず、要素の中にスクリプトを書きます。
<!DOCTYPE html>
<html lang="ja">
<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">
<!-- scriptタグ内に動作させるスクリプトを書く -->
<script>
console.log("Hello, Javascript World!!")
</script>
<title>Document</title>
</head>
<body>
<p id="message">Hello, World!!</p>
</body>
</html>
大昔はscript要素内のスクリプトをHTMLのコメントアウトで囲っていましたが、何年も前から不要になっています。
動作確認
HTMLとJavascriptを書いたら、読み込めているか確認してみましょう。
開発者ツール
動作確認の前に知っておくべきこととして、ブラウザには開発者ツールというものが存在します。ブラウザ上でF12キーを押す、またはメニューから開いてください。
そうすると、ブラウザの下か横に画面が出ます。
開発者ツールでは, HTMLの構造を確認したり、javascriptをステップ実行したり、ブラウザが行っている通信を表示したりすることができます。コンソールは画像の位置にあり、console.logなどの情報はここに出力されます。
また、このconsoleではJavascriptのコードを打ち込むとその場で実行してくれるため、簡易的な検証にもうってつけです。
開発者ツールでは、HTMLを直接操作することもできます。
この画面上で直接表示内容を変更したり、ノードを増やしたり、属性の値を変更したり削除したりと言った操作が可能です。
console.logの出力確認
console.logを実行したときの出力は、ブラウザ上では開発者ツールのconsoleに出力されます。
実際にHTMLのページを開いて、上で準備したスクリプトが実行されているか確認しましょう。
出力されていたら成功です!
おすすめエディタ
メモ帳でコードを書くのはかなり辛いです。入力補完もなく、タブはタブ文字で入ってしまいます。
私は、Web開発にはVisual Studio Codeをおすすめします。Microsoftの最高傑作です😍
まとめ
HTMLからJavascriptを読み込む際は、<script src="スクリプトのURL"></script>と書きます。
スクリプトの動作チェックには画面の挙動も見ますが、その時の値やエラーなどをconsoleに出力して確認することは頻繁にあります。開発者ツールの基本的な触り方を知っておくことを推奨します!
