JavaScript（シューティング制作）

このページの使い方

1. まずは「JavaScriptの実行」を読み、Consoleに出力できる状態にする
2. 例をそのまま打って動くことを確認する（コピペでもOK）
3. 慣れてきたら、数値や文字を自分で変えて結果がどう変わるか確かめる
4. 最後に「モジュール（export/import）」を読み、ファイル分割の考え方を覚える

準備するもの

• ブラウザ（Chrome / Edge 推奨）
• テキストエディタ（VS Code 推奨）

よく使う操作（ブラウザ）

• 開発者ツールを開く：F12（ノートPCだと Fn + F12 の場合あり）
• Consoleを表示：開発者ツール内の「Console」タブ
• 画面を更新：F5 / Ctrl + R

つまずきやすいポイント

• エラーが出たら、赤い表示の先頭行（例：Uncaught ...）を読む
• 全角記号（“ ” や ＝ など）が混ざると動かないことがある（半角にする）
• ファイルを分ける場合、HTML側の <script type="module"> が必要

JavaScriptの実行

JavaScriptを実行するためには、ブラウザを立ち上げて開発者ツールを開き、「Console」画面を表示します。

基本ルール（C言語と同じ感覚）

文字列と変数

文字列は "（ダブルクォーテーション）で挟みます。変数は変数名をそのまま書きます（""で囲まない）。

// 文字列の例
console.log("Hello World!");

// 変数の例（""で囲まない）
let hensu = 10;
console.log(hensu);

JavaScript独自のルール

変数の宣言方法

• let：変数を宣言する（基本はこれ）
• const：定数を宣言する（後から変えない値）
• var：現在はあまり使われないが宣言に使える

let a = 5;
const b = 10;

ゲームを作る前に

HTMLは文字や枠を表示する。CSSは見た目を変える。JavaScriptは動きをつける。

プログラムを分割しよう（モジュール）

大きなプログラムは見づらくなるので、機能ごとにファイルを分けます。これを「モジュール」と呼びます。

export（外に出す）

他のファイルから使えるように、関数や値を外に出します。

import（取り込む）

他のファイルから関数や値を読み込みます。

// util.js（外に出す）
export function add(a, b) {
  return a + b;
}

// main.js（取り込む）
import { add } from "./util.js";
console.log(add(2, 3));

ブラウザで import/export を使う場合、HTMLは次のようにします。

<script type="module" src="main.js"></script>

次にやること

• 変数・条件分岐（if）・繰り返し（for）を使って簡単な処理を書いてみる
• ゲーム制作では「表示」「入力」「当たり判定」「更新（ループ）」を分けて考える
• 次は learning に進んで Step1 から作り始める

1. メッセージを表示する（console.log）

プログラムは基本的に上から順番に実行されます。

console.log("Hello world");
console.log("冒険に出かけよう");

• console.log()：データを表示する命令（関数）
• 丸カッコの中の値は 引数
• 文字は "..." で囲む
• 行末は基本 ;

2. よくあるエラー（見つけ方）

Console の赤い行（エラーメッセージ）を読んで原因を確認します。

// つづりミス（×）
console.lo("Hello world");

// セミコロンじゃなくて :（×）
console.log("Hello world"):

// ダブルクォーテーションが閉じていない（×）
console.log("Hello world);

// 全角記号が混ざる（×）
console.log("Hello world"）;

3. コメント

コメントは実行されません。説明を書いたり、一時的に無効化（コメントアウト）できます。

// 1行コメント
console.log("Hello world");

/* 複数行コメント
   ここまでコメント */
console.log("Hello paiza");

// コメントアウト
// console.log("この行は表示されない");

4. 計算と文字列

ダブルクォーテーションが ない と計算、ある と文字列です。

console.log(100 + 30);    // 130
console.log("100 + 30");  // 文字列としてそのまま

console.log(100 + 30 * 2);   // 掛け算が先
console.log((100 + 30) * 2); // カッコの中が先

5. 変数（データの入れ物）

let greeting = "Hello world";
console.log(greeting);

let message = "Hello";
console.log(message);
message = "Welcome";
console.log(message);

• 変数名：アルファベット / _ / 数字（先頭は数字NG）
• 慣習：先頭は小文字、2語目以降は大文字（camelCase）
• let などの予約語は使えない

6. テンプレートリテラル

let userName = "paiza";
console.log(`${userName}さん、冒険にようこそ`);

7. 条件分岐（if）

let name = "JavaScript";
console.log(`Hello ${name}`);

if (name == "JavaScript") {
  console.log("Welcome");
} else {
  console.log("Goodbye");
}

よく使う比較演算子：== / != / > / < / >= / <=

注意：= は代入、== は比較です。

8. 繰り返し（for）

for (let i = 0; i < 3; i++) {
  console.log(i);
}

i のような回数を表す変数を カウンタ変数 と呼びます。

確認問題

問題を開く

1. 次のプログラムの表示内容を書きなさい。

   console.log("Hello");
   console.log("paiza");

2. 次のうち正しい説明をすべて選びなさい。
   • A. JavaScript は主に Web ブラウザで動作する
   • B. JavaScript はスクリプト言語である
   • C. JavaScript は日本語だけでプログラムを書く言語である
   • D. JavaScript はサーバ側のプログラミングにも使われる
3. 次のプログラムの表示内容を書きなさい。

   console.log(50 + 20);
   console.log("50 + 20");

4. テンプレートリテラルを使って「Taroさん、こんにちは」と表示するようにしなさい。

   let name = "Taro";
   console.log(`(ここに何を書く？)さん、こんにちは`);

解答例を開く

1. Hello / paiza（2行）
2. A・B・D
3. 70 / 50 + 20（2行）
4. ${name}