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