EnglishEnglish العربيةالعربية PortuguêsPortuguês 日本語日本語
404 Not Found

404 Not Found

nginx

JavaScriptをはじめよう

WebページにJavaScriptを追加する方法は、思っているよりも簡単です。手軽なものから本番環境向けまで、3つの方法があります。

JavaScriptを追加する3つの方法

1. インライン（onclick属性）

HTML要素のイベント属性に直接JSコードを記述します。例えばonclick="..."のようにします。

これが最も簡単な方法ですが、実際のプロジェクトでは使用しないでください。HTMLとJSが混在すると、メンテナンスが困難になります。

2. 内部（<script>タグ）

HTMLファイル内に<script>タグを挿入し、その中にJSコードを記述します。小さなページに適しており、学習やテスト中にもっともよく使われる方法です。

<script>タグは<head>内にも<body>内にも配置できますが、ページ描画をブロックしないよう、</body>の直前に配置することが推奨されます。

3. 外部（.jsファイル）

JSコードを別の.jsファイルに記述し、<script src="xxx.js"></script>で読み込みます。これが実際のプロジェクトでの標準的な方法です。関心の分離、再利用が可能になり、ブラウザがファイルをキャッシュして読み込みが高速化されます。

実例：インラインJavaScript

HTML 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JS入門 - インライン</title>
  <style>
    body { font-family: Arial, sans-serif; text-align: center; margin-top: 80px; }
    #msg { font-size: 22px; color: #333; }
    button { padding: 10px 24px; font-size: 16px; border: none; border-radius: 6px; background: #FF9800; color: #fff; cursor: pointer; }
    button:hover { background: #F57C00; }
  </style>
</head>
<body>
  <p id="msg">下のボタンをクリックしてください</p>
  <button onclick="document.getElementById('msg').textContent='インラインJSが実行されました！'; document.getElementById('msg').style.color='#FF9800';">クリック</button>
  <p style="margin-top:30px; color:#999; font-size:14px;">👆 このJSはonclick属性に直接記述されています</p>
</body>
</html>

実例：内部JavaScript

HTML 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JS入門 - 内部</title>
  <style>
    body { font-family: Arial, sans-serif; text-align: center; margin-top: 60px; }
    .box { display: inline-block; width: 150px; height: 150px; background: #9C27B0; border-radius: 12px; transition: all 0.4s; line-height: 150px; color: #fff; font-size: 20px; }
    .box.round { border-radius: 50%; }
    button { display: inline-block; margin: 20px 8px; padding: 10px 24px; font-size: 16px; border: none; border-radius: 6px; cursor: pointer; color: #fff; }
    #toggleBtn { background: #9C27B0; }
    #resetBtn { background: #999; }
  </style>
</head>
<body>
  <div class="box" id="shapeBox">四角</div>
  <br>
  <button id="toggleBtn">形を切り替え</button>
  <button id="resetBtn">リセット</button>

  <script>
    var box = document.getElementById("shapeBox");
    var isRound = false;
    document.getElementById("toggleBtn").onclick = function() {
      isRound = !isRound;
      if (isRound) {
        box.classList.add("round");
        box.textContent = "丸";
      } else {
        box.classList.remove("round");
        box.textContent = "四角";
      }
    };
    document.getElementById("resetBtn").onclick = function() {
      isRound = false;
      box.classList.remove("round");
      box.textContent = "四角";
    };
  </script>
</body>
</html>

実例：外部JavaScript

HTML 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JS入門 - 外部</title>
  <style>
    body { font-family: Arial, sans-serif; text-align: center; margin-top: 60px; }
    #counter { font-size: 48px; font-weight: bold; color: #2196F3; }
    button { padding: 10px 24px; font-size: 18px; border: none; border-radius: 6px; cursor: pointer; color: #fff; margin: 4px; }
    #addBtn { background: #4CAF50; }
    #subBtn { background: #f44336; }
    #resetCount { background: #999; }
  </style>
</head>
<body>
  <h2>カウンター</h2>
  <p id="counter">0</p>
  <button id="addBtn">+1</button>
  <button id="subBtn">-1</button>
  <button id="resetCount">リセット</button>

  <!-- 実際のプロジェクトでは、下のJSは別のcounter.jsファイルに保存すべきです -->
  <!-- <script src="counter.js"></script> -->
  <!-- デモ目的で、ここでは内部スクリプトを使用しています -->
  <script>
    var count = 0;
    var counterEl = document.getElementById("counter");
    document.getElementById("addBtn").onclick = function() {
      count++;
      counterEl.textContent = count;
    };
    document.getElementById("subBtn").onclick = function() {
      count--;
      counterEl.textContent = count;
    };
    document.getElementById("resetCount").onclick = function() {
      count = 0;
      counterEl.textContent = count;
    };
  </script>
</body>
</html>

おすすめのVS Code拡張機能

VS Codeを使っている場合（強く推奨）、以下の2つの拡張機能があれば十分です：

Chrome DevToolsでJSを実行する

F12キーを押してDevToolsを開き、Consoleパネルに切り替えれば、直接JSコードを入力してEnterキーで実行できます。HTMLファイルを作成せずにコードスニペットを試せる、最も高速なテスト方法です。

ヒント：Consoleで↑キーを押すと、前回のコマンドを呼び出せるので、入力し直す手間が省けます。

scriptタグのdeferとasync属性

<script>タグが<head>内にある場合、ブラウザはHTMLの解析を一時停止してJSのダウンロードと実行を優先します。これによりページが固まったように感じることがあります。deferとasync属性がこの問題を解決します：

属性 動作
なし すぐにダウンロード・実行し、HTML解析をブロックする
defer バックグラウンドでダウンロードし、HTML解析完了後に実行する（順序保証あり）
async バックグラウンドでダウンロードし、ダウンロード完了次第すぐに実行する（順序保証なし）

ベストプラクティス：外部JSファイルにはdeferを追加するのが最も安全な選択です — <script src="app.js" defer></script>。

📖 まとめ

  1. JSを追加する3つの方法：インラインonclick（非推奨）、内部<script>（学習向き）、外部.jsファイル（業界標準）
  2. </body>の直前に<script>タグを配置して、ページ描画のブロックを回避する
  3. 外部JSファイルにはdefer属性を使う — ブロックなしで実行順序が保証される
  4. ChromeのF12 Consoleが最も高速なJSプレイグラウンド
  5. VS Code + Live Server + ESLintが標準的なフロントエンドツールキット
  6. インラインJSは便利だがHTMLとJSが密結合になる — 早い段階で分離の習慣をつける

❓ よくある質問

Q <script>をheadに置くのとbodyの最後に置くのでは、何が違いますか？
A headに置いた場合、ブラウザはスクリプトのダウンロードと実行のために処理を中断します。その時点ではページはまだ空白です。bodyの最後に置けば、ページが先に描画されるのでユーザーは「固まり」を体験しません。食事を出してから冗談を話すようなもの — ゲストを空腹にさせないようにしましょう。
Q deferとasync、どちらを使うべきですか？
A ほとんどの場合はdeferを使いましょう。HTML解析完了後にスクリプトが順番に実行されることが保証されるので、DOM要素が常に利用可能です。asyncは他のスクリプトやDOMに依存しないスタンドアロンの分析スクリプト（Google Analyticsなど）に適しています。
Q 1ページに<script>タグはいくつ使えますか？
A いくつでも制限はありません。ただし、実際にはHTTPリクエストを減らすために、いくつかの外部ファイルにまとめることをおすすめします。

📝 演習

  1. 初級：内部<script>を持つHTMLページを作成し、ページ読み込み時に「JavaScriptへようこそ！」というアラートを表示してください（ヒント：alert()を使用）。
  2. 中級：HTMLページと別個のmain.jsファイルを作成してください。<script src="main.js" defer></script>でJSファイルを読み込み、ボタンのクリックでページの背景色を変更する機能を実装してください。
  3. 上級：3つのボタンを持つページを作成し、それぞれが3つの読み込み方法（インライン、内部、外部）を表すようにしてください。ボタンがクリックされると「このJSはXXX方式で読み込まれました」とページに表示し、異なる色で区別してください。
100%