JavaScriptを基礎から始めてみる

2月中旬ごろから、Progateを始めてみました。アプリのキャラクターが可愛かったので続くかなと！
JavaScriptを分かるようになりたいので、少しずつ学習していきます。
腹落ちしたら次に進む、という感じでゆっくりペースの学習計画。

▼メモ

JavaScriptは通常、body閉じタグの直前に書く（読み込み完了後に実行されるため）

↑追記　コメントいただきました！
そういうときこそ type=module をつけましょうニュアンス onload 以後の処理になります。

<script type="module">

letで変数を定義する
constで定数を宣言する
例えば、

let count = 1;

count = 2;  // OK

const count = 1;

count = 2;  // ❌ エラー

const number = 5;

number += 1;

↑はエラーになる。

🔵 例：ログイン画面でconstを使うなら

const API_URL = "https://example.com/login";

🔵 でもログイン入力値は？

let email = "";
let password = "";

let	const
再代入できる	再代入できない

個人的なポイント8選

① JavaScriptは上から順番に実行される

JSは基本的に
上から順番に処理される
例えば：

let number = 1;

console.log(number);
number += 1;
console.log(number);

出力：

1
2

なぜなら、
console.log(number) → 1を表示
number += 1 → numberが2になる
もう一度表示 → 2
「あとで書いた処理が、前の処理に影響する」
という順番が重要。

② letで定義した変数は書き換えられる

let number = 1;
number = 5;  // OK

letで定義した変数は後から値を変更できる。
だから：

number += 1;

が可能。

③ number += 1 の意味

これは省略記法。

number += 1;

は

number = number + 1;

と同じ。
「今の値に1を足して更新する」という意味。

④ while文の仕組み

let number = 1;

while (number <= 3) {
  console.log(number);
  number += 1;
}

実行の流れ：
1.条件チェック
2.trueなら中を実行
3.また条件チェック

出力：

1
2
3

ポイントは：
条件チェック → 実行 → 更新 → 再チェック

⑤ 表示してから更新するか、更新してから表示するかで結果が変わる

while (number > 0) {
  console.log(number);
  number -= 3;
}

と

while (number > 0) {
  number -= 3;
  console.log(number);
}

では出力が変わる。
JavaScriptは「書いた順番通り」に実行される。

⑥ >= と > の違い

例：

while (number >= 0)

と

while (number > 0)

違いが出るのは
0にぴったり到達する場合だけ。
数の増減によっては、結果が同じになることもある。

⑦ for文の仕組み

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

構造：
for (初期値; 条件; 更新)
これは実質：

let i = 1;

while (i <= 3) {
  console.log(i);
  i++;
}

と同じ。

⑧ whileとforの違い

while	for
条件がtrueの間繰り返す	回数が決まっている繰り返しに向く
初期値や更新を外に書く	1行にまとまる

2月中旬にProgateで勉強したことまとめ
今回理解した大事なこと：
JavaScriptは上から順番に実行される
変数は更新できる
ループは「条件チェック → 実行 → 更新」の流れ
forはwhileを整理した形

Progateは引き続き学習。

2月下旬ごろから動画で学習を始めてみる

IBM SkillsBuildで動画で勉強しはじめる。
JavaScriptの発足〜、何の目的で作られたプログラミング言語なのか、フレームワークの種類、Webを作る上でのJavaScriptの役割が動画で一連の流れで説明されているので、わかりやすい。

① Variables（変数）
• 値を保存できる
• あとから値を更新できる
• データを一時的に管理できる

② Constants（定数）
• 値を固定できる
• 誤って書き換えるバグを防げる
• 設定値や変わらない情報を安全に管理できる

③ Data Types（データ型）
• 文字列・数値・真偽値などを区別できる
• 値の種類を理解して適切に扱える

④ Objects（オブジェクト）
• 関連するデータをまとめて管理できる
• 「名前＋年齢」などの情報をセットで扱える

⑤ Arrays（配列）
• データを順番付きで管理できる
• 複数の値をまとめて扱える

⑥ Functions（関数）
• 処理をまとめて再利用できる
• 同じ処理を何度も書かずに済む

⑦ Conditional Statements（条件分岐）
• 条件によって処理を変えられる
• 状況に応じた動きを作れる

⑧ Loops（繰り返し）
• 同じ処理を何度も実行できる
• 回数指定や条件付きの繰り返しができる

⑨ Switch Case
• 複数の条件を整理して分岐できる
• if文が多くなる場合をスッキリ書ける

Progateで手を動かしつつ、動画でJavaScriptの目的を知りながら学習するのを続けてみることに。
やっぱり座学も大事だなーと実感。
自分の場合は、手を動かしてから座学の方が理解が進みやすい。
引き続きコツコツ頑張ります。