JavaScript：まず動かすための最小セット

投稿日：2026-01-13

音声

※ AI音声で読み上げます

目次

  1. scriptの書き方（HTMLとJSのつなぎ方）
  2. console.logで動作確認する
  3. コメント・改行・セミコロンの基本
  4. エラーの読み方（まずここを見る）
  5. 小さく作って小さく直すコツ
  6. 注意（ここだけ）
  7. 要約

scriptの書き方（HTMLとJSのつなぎ方）

ブラウザでJavaScriptを動かしてConsoleと画面の両方で結果を確認していきます。HTML内に<script>を書く方法と、外部ファイル（またはCodePenのJS欄）を使う方法を説明します。基本は「HTMLに要素を置く→JSで参照して操作する」です。ここでは簡単なボタンで数を増やし、画面表示とConsole出力を両方行う最小の例を示します。

最小コード：

<!-- HTML欄（CodePenのHTML欄へ貼る） -->
<button id="btn">クリック</button>
<div id="out">0</div>

// JS欄（CodePenのJS欄へ貼る）
const btn = document.getElementById('btn');
const out = document.getElementById('out');
let count = 0;

btn.addEventListener('click', function () {
  count += 1;
  out.textContent = count;             // 画面に表示
  console.log('クリック数:', count);   // Consoleで確認
});

貼り付け場所として、CodePenを想定する場合はHTML欄に上のHTMLを、JS欄に最小コードのJavaScriptを貼ります。ローカルで試す場合はHTMLに<script>でJSを直接書くか、外部.jsを読み込みます。

console.logで動作確認する

console.logは動作確認の第一歩で、値や変数の中身、関数の呼び出し順を確かめるのに向いています。

Browserの開発者ツール（DevTools）のConsoleタブを開き、クリックなどの操作をしてログが出るか確認します。

長いオブジェクトはconsole.tableやconsole.dirで見やすくなりますが、まずはconsole.logで期待する値が出るかを確認します。

ログは先に仕込んで後から消す習慣が便利です。

実行方法は、CodePenなら画面左下のConsoleを押し開いておき、画面右上のRunで実行。ローカルならHTMLをブラウザで開きます。

CodePenでRunボタンがない場合は、右上のSettings → Behavior → Auto-Updating PreviewをOffにします。

ボタンをクリックするなどでイベントを発生させると、JavaScriptが動きます。

コメント・改行・セミコロンの基本

JavaScriptのコメントは//と/* ... */の二種類で、コードの説明や一時無効化に使います。改行は可読性のために積極的に使い、ステートメントの区切りにセミコロン（;）は不要な場面もありますが、自動セミコロン挿入（ASI）の挙動で意図しない結合が起きることがあります。慣れないうちは短い行ごとにセミコロンを付けるルールにするとトラブルが減ります。短い関数や変数は一行でなく改行して書くと読みやすくなります。

よくあるミスとして、DOM要素を取得する前にスクリプトが走ってnullを参照することが多いです。対処法は<script>を</body>直前に置くか、DOMContentLoadedイベントで処理を実行することです。

エラーの読み方（まずここを見る）

エラーが出たら、まずブラウザのConsoleで赤いメッセージの先頭を見ます。そこに「種類（例：TypeError）」「エラーメッセージ」「ファイル名:行番号」が表示されます。行番号をクリックするとソースが開くので、該当行の前後を確認して変数が未定義か関数名が誤っているかを判断します。stack（呼び出し履歴）を辿ると、どの関数経由で来たかが分かります。最初はエラーメッセージ全文と行番号だけで、問題の大半が分かります。

確認方法としては、Consoleでログとエラーメッセージを確認し、必要ならSourcesタブでブレークポイントを置いて動作を追います。画面表示も同時に見て、DOMの状態とログを比べます。

小さく作って小さく直すコツ

大きな機能を一気に作らず、ボタン一つ、関数一つといった小さな単位で作り、動作を確認してから次へ進むと修正が楽になります。

テストは手動でもconsole.logで十分で、失敗したら戻して別のアプローチを試します。

Gitやスナップショットを使うと差分で何が変わったか追いやすくなります。

使い分けの基準として、ループは単純な数値反復ならforを選び、配列の要素を逐一処理して新配列を作るならmapを使い、条件で絞るならfilterを使うと整理しやすいです。

オブジェクトのキー操作や参照を多用するならfor...inやObject.keysを検討すると運用しやすくなります。

配列は順序と繰り返し処理に強く、オブジェクトはキーによる参照に向くため、この違いで使い分けると分かりやすいです。

注意（ここだけ）

  • 社内情報や認証情報は外部サービスに貼らず（ログ出力も含む）、社内PCでは通信や社内システム操作をするコードは実行せず、DOMへは外部入力を innerHTML で入れないようにしましょう。

要約

  1. HTMLに要素を置き、JavaScriptで参照して操作する流れが基本です。
  2. console.logで値を出力して動作を確かめる習慣を付けます。
  3. コメントと改行で可読性を上げ、セミコロンは慣れるまで付けると安全です。
  4. エラーはConsoleの赤いメッセージと行番号をまず見ると原因が分かりやすいです。
  5. 小さく作って小さく直し、適切なループ・配列・オブジェクトの使い分けを意識します。