JavaScriptをWebページで動かすには、基本的に外部ファイルとして作成する方法がおすすめです。
ここではその手順と、ブラウザで動作を確認する方法をまとめます。
1. 外部ファイルとして作成する方法
概要
JavaScriptのコードを.jsファイルにまとめ、HTMLから読み込む方法です。
コードがHTMLと分離されるため、管理や再利用がしやすくなります。
手順
1. JSファイルを作成
例: script.js
// script.js
console.log("Hello, JavaScript!");
2. HTMLから読み込む
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>外部JSの例</title>
</head>
<body>
<h1>外部JS読み込み例</h1>
<script src="script.js"></script>
</body>
</html>
注意点
- HTMLとJSのファイルパスに注意
- 同じフォルダに置く場合は
src="script.js"でOK - フォルダが異なる場合は相対パスや絶対パスで指定する必要があります
例:src="./js/script.js"
- 同じフォルダに置く場合は
2. ブラウザでJavaScriptを確認する方法
1. HTMLファイルをブラウザで開く
- 作成したHTMLをダブルクリック、またはブラウザの「ファイルを開く」で表示
- 外部JSも自動で読み込まれる
2. 開発者ツールの「Console」を使う
- Chromeの場合：右クリック → 「検証」または
F12→ 「Console」タブ -
console.log()の出力やエラーを確認できる
3. 修正後はリロード
- JSを修正したらブラウザをリロード
- キャッシュが残る場合は強制リロード (
Ctrl + F5) が便利
まとめ
- 外部ファイルとしてJSを作る方法が基本でおすすめ
- 管理や再利用性が高く、大規模開発に向く
- ブラウザの開発者ツールで簡単に動作確認が可能
- JS修正後はリロードを忘れずに
💡 学習段階でも外部ファイルで書く癖をつけておくと、後々の管理や開発が格段に楽になります。