⚡
JavaScript基礎
2週間 初級ボタンを押したら文字が変わる。動きを作る。
概要
これは何？
JavaScriptはWebページに動きを付ける言語です。
なぜ重要？
静的なページから、インタラクティブなアプリへ。
何を学ぶか
- 変数とデータ型
- 関数の書き方
- DOM操作
- イベント
詳細解説
変数（const, let）
データを覚える箱です。constは再代入不可、letは再代入可能。今はvarは使いません。
例:
- const name = '太郎';
- let count = 0;
Tips:
- 基本はconstを使い、変わる値だけletにする
よくある間違い:
- constで宣言したものに別の値を入れようとしてエラーになる
条件分岐（if文と三項演算子）
「もし〜なら」という処理を作ります。簡単な分岐なら、三項演算子（条件 ? 真の時 : 偽の時）が便利です。
例:
- if (age >= 18) { console.log('成人'); }
- const result = score >= 60 ? '合格' : '不合格';
Tips:
- === は型まで含めた厳密な等価なので、== より === を使う
よくある間違い:
- if (a = 1) のように == ではなく = にしてしまう
繰り返し（forループ）
同じ処理を何度も繰り返します。配列の処理によく使われます。
例:
- for (let i = 0; i < 5; i++) {\n console.log(i);\n}
Tips:
- 配列の中身を1つずつ取り出すときは map や forEach が便利
よくある間違い:
- 無限ループを作ってブラウザを固まらせる
関数とアロー関数
処理のまとまりです。最近は `() => {}` という短い書き方（アロー関数）がよく使われます。
例:
- function greet() { return 'Hello'; }
- const double = (x) => x * 2;
Tips:
- 1行のアロー関数は return を省略できる
よくある間違い:
- 波括弧 {} を書いたのに return を忘れて undefined が返る
文字列操作とテンプレートリテラル
文字をつ繋ぐには + を使いますが、バッククォート（`）で囲むと変数を直接埋め込めて便利です。
例:
- const msg = `こんにちは、${name}さん`;
Tips:
- バッククォートはShift+@（JISキーボード）
よくある間違い:
- シングルクォートで囲んで ${name} がそのまま表示される
配列とその操作（map, filter）
複数の値を1つにまとめます。mapは全要素を変換、filterは条件に合うものだけを抽出した新しい配列を作ります。
例:
- const arr = [1, 2, 3];
- const doubled = arr.map(n => n * 2);
Tips:
- 元の配列は変更されない（非破壊的メソッド）
よくある間違い:
- インデックスは1ではなく0から始まるのを忘れる
実践手順
- 1 scriptタグを追加してログを出す 2分
JSを書いてブラウザの開発者ツールに文字を出力します。
- </body>直前に<script>タグを書く
- console.log('Hello'); と記述
- F12でConsoleタブを開いて確認
<script> console.log('Hello'); </script> - 2 変数を使って計算する 3分
データを入れておく箱（変数）を作り、簡単な計算をさせます。
- const price = 1000; を宣言
- 消費税をかけた値を計算して表示する
<script> const price = 1000; const tax = 1.1; console.log(`税込価格は ${price * tax}円 です`); </script> - 3 配列とループ処理 5分
複数のデータをまとめて扱い、繰り返し処理（for）で全て表示します。
- 果物の配列を作る
- for文を使って順番にconsole.logへ流し込む
<script> const fruits = ['Apple', 'Banana', 'Orange']; for (let i = 0; i < fruits.length; i++) { console.log(fruits[i]); } </script>
よくある質問
- 0.1 + 0.2 が 0.3 にならないんだけど…バグ？
- プログラミングあるある第1位！これはJSのバグじゃなくて「IEEE 754」っていう業界標準の計算ルールのせいで起こる丸め誤差です。お金の計算する時は、一回10倍して整数にしてから足して、後で10で割るみたいな泥臭いことやって回避します。
- なんでvar使っちゃダメなの？普通に動くじゃん。
- 普通に動くからタチが悪いんです…。varは「スコープ（有効範囲）」が広すぎて、全然関係ない場所の同名変数を上書きして大事故を起こす天才なんです。letとconstは「このブロック（{}内）だけ！」って閉じ込められるから安全。varは歴史の闇に葬り去りましょう。
- 「==」と「===」って何が違うんスか？
- 「===」は型まで厳密にチェックする超真面目なやつ。「==」はお人好しすぎて文字列の '0' と 数字の 0 を勝手に同じとみなして true を返しちゃう激ヤバ野郎です。マジで予測不能なバグ生むんで、実務では一生「===」だけ使ってください！
- thisの中身が勝手に変わってエラー吐くんですけど…
- 出た、JS最大の闇「thisの挙動が変わる問題」。JSの this 君は「関数がどうやって呼ばれたか」でコロコロ気分（中身）を変えるサイコパスです。最近はアロー関数 (() => {}) を使って、thisを親から引き継いで固定させるのが主流になって平和になりました。
① 解説を読んだ。次は② 演習する。
JavaScriptの基本を押さえました。
次はレイアウト（Flexbox、Grid）を学びましょう。
関連ツール: JSON整形