👋

学習アウトプット：JavaScript Lab 〜セミコロン自動挿入の落とし穴を体験する〜

に公開
JavaScript
tech

1. JavaScript_Lab作成の背景の説明

1日1アウトプットチャレンジとの出会い

100日アウトプットに触発され、「学んだことを形にして残す」という習慣の価値を改めて共感しました。（といっても今回のツールはほぼClaude Codeにより開発されていますが）

「現代のJavaScriptチュートリアル」での学習

学習の題材として選んだのは、「現代のJavaScriptチュートリアル」です。このチュートリアルは、JavaScriptの基礎から応用まで体系的に学べる優れた教材で、以下の内容を学習しました

1. 導入

  • 1.1 JavaScript入門（エンジンの仕組み、実行環境）
  • 1.2 マニュアルと仕様（ECMA-262、MDN活用）
  • 1.3 コードエディタ（エディタの選び方、機能）
  • 1.4 開発者コンソール（コンソールの使い方、デバッグ）

2. JavaScript の基礎

  • 2.1 Hello, world!（scriptタグの基本、外部ファイル、実行方法）
  • 2.2 コード構造（セミコロン、文の区切り、コメント）

特に「2.2 コード構造」で学んだ内容が今回のツールのテーマになっています。

セミコロン自動挿入（ASI）の落とし穴

JavaScriptには**セミコロン自動挿入（Automatic Semicolon Insertion: ASI）**という仕組みがあります。これは改行を暗黙のセミコロンとして解釈する機能ですが、実は落とし穴があります。

例えば、以下のようなコードは意図しない動作を引き起こします

// ❌ エラーが発生
alert("Hello")
[1, 2, 3].forEach(num => console.log(num))

このコードは、JavaScriptエンジンによって以下のように解釈されてしまいます

alert("Hello")[1, 2, 3].forEach(num => console.log(num))

alert() の戻り値（undefined）に対して配列アクセスを試みるため、意図しない動作になってしまうのです。

この問題を体験的に理解できるツールがあれば、もっと理解できるのでは？
というの今回のツールの出発点です。

JavaScript_Labの開発

アウトプットの形として、以下の2つの機能を統合したWebアプリ「JavaScript Lab」を開発することにしました

  1. JavaScript Playground - コードをその場で実行できる環境
  2. JavaScript Code Structure Visualizer - コード構造を解析し、セミコロンの問題を検出するツール

開発にあたっては、Claude Codeの力を借りて実装を進めました。約2-3時間で、CodeMirrorとAcornを統合した本格的な学習支援ツールが完成しました。

完成したツールは、GitHubで公開しています
JavaScript_Lab on GitHub

2. JavaScript_Labのサンプル

JavaScript Labには、学習に役立つ4つのサンプル問題が用意されています。ドロップダウンメニューから選択するだけで、コードエディタに自動的に読み込まれます。

サンプル1: Hello World

最もシンプルな例です。JavaScriptの基本であるconsole.log()を使ってメッセージを出力します。

// Hello World の例
console.log('Hello, World!');
console.log('JavaScriptへようこそ！');

学習ポイント:

  • console.log() の基本的な使い方
  • 文字列リテラルの書き方
  • 複数の文を実行する流れ

サンプル2: セミコロン問題

最も重要なサンプルです。セミコロン自動挿入（ASI）の落とし穴を実際に体験できます。

// セミコロン問題の例
// ⚠️ この例は意図しない動作を引き起こす可能性があります

alert("エラーが発生する例")
[1, 2, 3].forEach(num => console.log(num))

// 👆 上記は以下のように解釈されます:
// alert("エラーが発生する例")[1, 2, 3].forEach(...)

// 正しい書き方:
alert("正しい例");
[1, 2, 3].forEach(num => console.log(num));

学習ポイント:

  • セミコロンがないと、次の行の [ が配列アクセスと解釈される
  • JavaScript Labの「Semicolon Analysis」タブで警告が表示される
  • なぜセミコロンを書くべきか、実例で理解できる

サンプル3: 配列操作

JavaScriptの配列メソッド（forEach, map, filter）の使い方を学べます。

// 配列操作の例
const numbers = [1, 2, 3, 4, 5];

// forEachで各要素を処理
numbers.forEach(num => {
    console.log('数値:', num);
});

// mapで新しい配列を作成
const doubled = numbers.map(num => num * 2);
console.log('2倍:', doubled);

// filterで条件に合う要素を抽出
const evens = numbers.filter(num => num % 2 === 0);
console.log('偶数:', evens);

学習ポイント:

  • forEach: 各要素に対して処理を実行
  • map: 各要素を変換して新しい配列を作成
  • filter: 条件に合う要素だけを抽出
  • アロー関数の書き方

サンプル4: 関数定義

JavaScriptにおける様々な関数定義の方法を学べます。

// 関数定義の例

// 関数宣言
function greet(name) {
    return `こんにちは、${name}さん！`;
}

// 関数を呼び出し
console.log(greet('太郎'));

// アロー関数
const add = (a, b) => a + b;
console.log('3 + 5 =', add(3, 5));

// 高階関数
function repeat(fn, times) {
    for (let i = 0; i < times; i++) {
        fn(i);
    }
}

repeat(num => console.log(`実行 ${num + 1}回目`), 3);

学習ポイント:

  • 関数宣言: function キーワードを使った定義
  • アロー関数: => を使った簡潔な書き方
  • 高階関数: 関数を引数として受け取る関数
  • テンプレート文字列: バッククォート ` と ${} を使った文字列補間

3. サンプル問題と学習メモの照合

JavaScript Labの4つのサンプル問題は、「現代のJavaScriptチュートリアル」の学習内容を実践的に体験できるように設計されています。ここでは、各サンプルがどの学習内容と対応しているかを整理します。

サンプル1「Hello World」 ⇔ 現代のJavaScriptチュートリアル「2.1 Hello, world!」

学習内容:

  • JavaScriptの基本的な実行方法
  • console.log() の使い方
  • scriptタグの基本、外部ファイルの読み込み

JavaScript Labでの体験:

  • ブラウザ上で即座にコードを実行
  • console.log() の出力を確認
  • 開発者ツールを開かなくても、画面上で結果が見られる

学びの深化:
初心者が最初に書くシンプルなコードですが、JavaScript Labでは「Structure View」タブでコードの構造を確認でき、文がどのように認識されているかを視覚的に理解できます。

サンプル2「セミコロン問題」 ⇔ 現代のJavaScriptチュートリアル「2.2 コード構造」

学習内容:

  • セミコロンの仕組み: 改行を暗黙のセミコロンとして解釈（自動セミコロン挿入: ASI）
  • 自動挿入されないケース: 角括弧 [ で始まる行の前には挿入されない
  • 実例:
    // ❌ エラーが発生
alert("There will be an error")
[1, 2].forEach(alert)

// エンジンは以下のように解釈
// alert("There will be an error")[1, 2].forEach(alert)

JavaScript Labでの体験:

  1. 実行結果パネル: エラーが発生することを確認
  2. Semicolon Analysisタブ:
    • セミコロンなしの行を検出
    • 次の行が [ で始まる場合に警告を表示
    • 「セミコロンを追加してください」という修正提案
  3. ASTタブ: コードがどう解釈されているかを抽象構文木で確認

学びの深化:
学習メモで理論を学び、JavaScript Labで実際に体験することで、「なぜセミコロンを書くべきなのか」を腹落ちレベルで理解できます。

サンプル3「配列操作」 ⇔ 現代のJavaScriptチュートリアル（今後学習予定の内容）

想定される学習内容:

  • 配列の基本操作
  • forEach, map, filter などの高階関数
  • アロー関数の書き方

JavaScript Labでの体験:

  • 各メソッドの動作を実際に確認
  • console.log() で段階的な処理結果を確認
  • 実行時間も計測されるため、パフォーマンスの違いも意識できる

学びの深化:
配列メソッドは「読むだけ」では理解しづらいですが、実際に動かすことで、各メソッドの違いや使い分けが明確になります。

サンプル4「関数定義」

想定される学習内容:

  • 関数宣言とアロー関数の違い
  • 高階関数の概念
  • テンプレート文字列の使い方

JavaScript Labでの体験:

  • 異なる関数定義方法の動作を比較
  • 高階関数がどのように動くかを確認
  • テンプレート文字列による柔軟な文字列生成を体験

学びの深化:
関数は、JavaScriptの中心的な概念です。実際に書いて動かすことで、それぞれの書き方の特徴や使いどころが体感的に分かります。

📝 学習メモとの相互参照マップ

JavaScript Lab サンプル 学習メモの該当箇所 学習の重点
Hello World 2.1 Hello, world! JavaScriptの基本実行
セミコロン問題 2.2 コード構造 ASIの落とし穴（最重要）
配列操作 (今後学習予定) 配列メソッド、アロー関数
関数定義 (今後学習予定) 関数の定義方法、高階関数

最も重要な対応関係: 「セミコロン問題」サンプルと「2.2 コード構造」です。この組み合わせにより、理論と実践が完全に結びつき、深い理解が得られます。

4. まとめ

このメモでは、「1日1アウトプット」チャレンジの一環として作成したJavaScript Labについて、その背景から実装内容まで詳しく記録しました。

学習の流れ

  1. インプット: 「現代のJavaScriptチュートリアル」でJavaScriptの基礎を学習
  2. 気づき: セミコロン自動挿入（ASI）の落とし穴に興味を持つ
  3. アイデア: 学習内容を体験できるツールを作りたい
  4. 実装: Claude Codeと協力して、約3時間でWebアプリを完成
  5. アウトプット: GitHubで公開、ブログ記事として発信

JavaScript Labの価値

JavaScript Labは、単なる「コードを実行するツール」ではありません。以下の3つの価値を提供します：

  1. 体験的学習: 理論を読むだけでなく、実際に動かして理解を深める
  2. 可視化: コード構造やAST（抽象構文木）を視覚的に確認できる
  3. 問題発見: セミコロンの問題を自動検出し、修正提案を表示

特にセミコロン自動挿入の落とし穴については、学習メモで理論を学び、JavaScript Labで実践することで、「なぜセミコロンを書くべきなのか」を深く理解できました。

学んだこと

学習姿勢

  • アウトプット駆動学習の効果を実感
  • 「作りながら学ぶ」ことで、理解が格段に深まる
  • ツールを使って学習内容を形にすることで、記憶に残りやすい

今後の展開

「1日1アウトプット」の実践により、学習が一方通行ではなく、循環するサイクルになることを実感しました。今後もこのスタイルを継続していきたいと思います。
今回はClaude Codeにかなり頼っているので、今後は自力で開発できるよう努めます。

5. 参考リンク

プロジェクト関連

学習リソース

アウトプットの着想元

技術リファレンス

ライセンス・クレジット

この記事は以下のリソースを参考に作成した個人的な記事です。

この記事も同じCC BY-NC-SA 4.0ライセンスで公開しています。

Discussion