JavaScript: JavaScriptをはじめよう
最終更新：2026-10-13
WebページにJavaScriptを追加する方法は、思っているよりも簡単です。手軽なものから本番環境向けまで、3つの方法があります。
1. JavaScriptを追加する3つの方法
HTML要素のイベント属性に直接JSコードを記述します。例えばonclick="..."のようにします。
これが最も簡単な方法ですが、実際のプロジェクトでは使用しないでください。HTMLとJSが混在すると、メンテナンスが困難になります。
(2) 内部（<script>タグ）
HTMLファイル内に<script>タグを挿入し、その中にJSコードを記述します。小さなページに適しており、学習やテスト中にもっともよく使われる方法です。
<script>タグは<head>内にも<body>内にも配置できますが、ページ描画をブロックしないよう、</body>の直前に配置することが推奨されます。
(3) 外部（.jsファイル）
JSコードを別の.jsファイルに記述し、<script src="xxx.js"></script>で読み込みます。これが実際のプロジェクトでの標準的な方法です。関心の分離、再利用が可能になり、ブラウザがファイルをキャッシュして読み込みが高速化されます。
▶ サンプル：インラインJavaScript
▶ 試してみよう▶ サンプル：内部JavaScript
▶ 試してみよう▶ サンプル：外部JavaScript
▶ 試してみよう2. おすすめのVS Code拡張機能
VS Codeを使っている場合（強く推奨）、以下の2つの拡張機能があれば十分です：
- Live Server — HTMLファイルを右クリックして「Open with Live Server」を選択すると、保存時に自動更新され、手動でF5を押す必要がなくなります
- ESLint — 文法の問題をリアルタイムで検出します。コードのスペルチェックのようなものです
3. Chrome DevToolsでJSを実行する
F12キーを押してDevToolsを開き、Consoleパネルに切り替えれば、直接JSコードを入力してEnterキーで実行できます。HTMLファイルを作成せずにコードスニペットを試せる、最も高速なテスト方法です。
ヒント：Consoleで↑キーを押すと、前回のコマンドを呼び出せるので、入力し直す手間が省けます。
4. scriptタグのdeferとasync属性
<script>タグが<head>内にある場合、ブラウザはHTMLの解析を一時停止してJSのダウンロードと実行を優先します。これによりページが固まったように感じることがあります。deferとasync属性がこの問題を解決します：
| 属性 | 動作 |
|---|---|
| なし | すぐにダウンロード・実行し、HTML解析をブロックする |
defer |
バックグラウンドでダウンロードし、HTML解析完了後に実行する（順序保証あり） |
async |
バックグラウンドでダウンロードし、ダウンロード完了次第すぐに実行する（順序保証なし） |
ベストプラクティス：外部JSファイルにはdeferを追加するのが最も安全な選択です — <script src="app.js" defer></script>。
❓ よくある質問
<script>をheadに置くのとbodyの最後に置くのでは、何が違いますか？deferを使いましょう。HTML解析完了後にスクリプトが順番に実行されることが保証されるので、DOM要素が常に利用可能です。asyncは他のスクリプトやDOMに依存しないスタンドアロンの分析スクリプト（Google Analyticsなど）に適しています。<script>タグはいくつ使えますか？📖 まとめ
- JSを追加する3つの方法：インライン
onclick（非推奨）、内部<script>（学習向き）、外部.jsファイル（業界標準） </body>の直前に<script>タグを配置して、ページ描画のブロックを回避する- 外部JSファイルには
defer属性を使う — ブロックなしで実行順序が保証される - ChromeのF12 Consoleが最も高速なJSプレイグラウンド
- VS Code + Live Server + ESLintが標準的なフロントエンドツールキット
- インラインJSは便利だがHTMLとJSが密結合になる — 早い段階で分離の習慣をつける
📝 練習問題
- 初級：内部
<script>を持つHTMLページを作成し、ページ読み込み時に「JavaScriptへようこそ！」というアラートを表示してください（ヒント：alert()を使用）。 - 中級：HTMLページと別個の
main.jsファイルを作成してください。<script src="main.js" defer></script>でJSファイルを読み込み、ボタンのクリックでページの背景色を変更する機能を実装してください。 - 上級：3つのボタンを持つページを作成し、それぞれが3つの読み込み方法（インライン、内部、外部）を表すようにしてください。ボタンがクリックされると「このJSはXXX方式で読み込まれました」とページに表示し、異なる色で区別してください。
