Day1 練習問題
Day1 の内容
「JavaScriptとは」「ブラウザで動く仕組み」「HTMLとの関係」「VS Code導入」「scriptタグ」「Hello World」
これらをしっかり理解できたか確認するための練習問題です。
すべて 自分の手で書いて動かす ことを前提にしています。
書いて、保存して、ブラウザで開いて、コンソールを見る。
この流れを体に染み込ませていきましょう。
練習問題1：Hello World を自分で再現する
問題内容
自分で index.html を作り、
ブラウザのコンソールに Hello World と表示させてください。
解答例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello</title>
</head>
<body>
<script>
console.log("Hello World");
</script>
</body>
</html>
解説
JavaScript を動かすには、
ブラウザが <script> タグを読み込む必要があります。
console.log() は「コンソールにメッセージを出す」命令です。
画面には表示されないため、
開発者ツール → Console を必ず確認します。
練習問題2：自分の名前を表示してみる
問題内容
コンソールに 自分の名前 を表示してください。
文字列は " "（ダブルクォーテーション）で囲むこと。
解答例
<script>
console.log("Taro");
</script>
解説
JavaScript では、文字列は " " または ' ' で囲みます。
囲み忘れるとエラーになります。
例：console.log(Taro); → エラー（Taro という変数がないため）
練習問題3：計算結果を表示する
問題内容
コンソールに 10 + 20 の計算結果 を表示してください。
解答例
<script>
console.log(10 + 20);
</script>
解説
数字はクォーテーションで囲みません。
囲むと「文字列」になってしまいます。
例："10" + "20" → 文字列の結合になり "1020" になる
練習問題4：HTML と JavaScript の関係を理解する
問題内容
次の HTML に JavaScript を追加して、
ページを開いたときにコンソールへ 「ページを読み込みました」 と表示させてください。
<h1>JavaScriptの練習</h1>
解答例
<h1>JavaScriptの練習</h1>
<script>
console.log("ページを読み込みました");
</script>
解説
HTML の要素（h1）と JavaScript（script）は役割が違います。
HTML：画面に表示する
JavaScript：動きをつける
<script> タグは HTML のどこに書いても動きますが、
初心者は body の最後 に書くのが安全で確実です。
練習問題5：エラーを体験して修正する
問題内容
次のコードにはエラーがあります。
どこが間違っているか見つけて修正してください。
<script>
console.log("Hello World";
</script>
解答例
<script>
console.log("Hello World");
</script>
解説
エラーの原因は カッコの閉じ忘れ です。
エラー文は次のように表示されます。
Uncaught SyntaxError: missing ) after argument list
意味：
「引数のリストの後に閉じカッコがないよ」
エラーは“怒られている”のではなく、
“どこを直せばいいか教えてくれるヒント”です。
練習問題6：コメントを書いてみる
問題内容
次のコードに「これは挨拶のメッセージです」というコメントを追加してください。
<script>
console.log("こんにちは");
</script>
解答例
<script>
// これは挨拶のメッセージです
console.log("こんにちは");
</script>
解説
コメントはコードの説明を書くためのものです。
JavaScript はコメントを無視して実行します。
コメントを習慣にすると、
後で読み返したときに理解しやすくなります。
練習問題7：scriptタグの位置を変えてみる
問題内容
次の HTML の <head> に <script> を書いて、
コンソールに「headで実行されました」と表示させてください。
<h1>テスト</h1>
解答例
<head>
<script>
console.log("headで実行されました");
</script>
</head>
<body>
<h1>テスト</h1>
</body>
解説
<head> に書いても JavaScript は実行されます。
ただし、HTML が読み込まれる前に実行されるため、
HTML の要素を操作するコードを書くとエラーになります。
初心者は body の最後 に書くのがベスト。
練習問題8：外部ファイルを読み込む
問題内容
main.js というファイルを作り、
その中に console.log("外部ファイルから実行"); と書いてください。
そして HTML から読み込んで実行してください。
解答例（HTML）
<script src="main.js"></script>
解答例（main.js）
console.log("外部ファイルから実行");
解説
JavaScript が長くなると、
HTML と分けて書く方が圧倒的に読みやすくなります。
外部ファイルを読み込むときは src を使います。
Day1 練習問題まとめ
Day1 の練習で身につくこと：
<script>タグの役割console.log()の使い方- HTML と JavaScript の関係
- コメントの書き方
- エラーの読み方
- 外部ファイルの読み込み
これらは JavaScript を学ぶ上で一生使う基礎です。