JavaScript基礎 - AIでWebアプリ開発を学ぼう

変数（データを保存する箱）

変数は、データを一時的に保存しておくための「箱」です。

// letは後から変更できる変数
let count = 0;
count = 1;  // 変更OK

// constは変更できない変数（定数）
const name = "田中";
// name = "佐藤";  // エラーになる

// 基本的にはconstを使い、変更が必要な場合だけletを使う

ポイント：迷ったらconstを使いましょう。変更が必要になったらletに変えればOKです。

データ型

文字列（String）

const message = "こんにちは";
const name = '太郎';
const greeting = `${name}さん`;

テキストを表す。`（バッククォート）を使うと変数を埋め込める

数値（Number）

const age = 25;
const price = 1980.5;
const total = age + 10;  // 35

整数も小数も同じNumber型

真偽値（Boolean）

const isActive = true;
const isCompleted = false;

true（真）またはfalse（偽）の2値のみ

配列（Array）

const fruits = ["りんご", "バナナ", "みかん"];
fruits[0];  // "りんご"
fruits.length;  // 3

複数の値をまとめて管理。インデックスは0から

オブジェクト（Object）

const user = {
  name: "田中太郎",
  age: 25,
  isAdmin: false
};

user.name;      // "田中太郎"
user["age"];    // 25

キーと値のペアでデータを管理。JSONもこの形式

条件分岐（if文）

条件によって処理を変えたいときはif文を使います。

const age = 20;

if (age >= 20) {
  console.log("成人です");
} else if (age >= 13) {
  console.log("中高生です");
} else {
  console.log("子供です");
}

比較演算子

===	等しい（厳密比較）	a === b
!==	等しくない	a !== b
>	より大きい	a > b
>=	以上	a >= b
<	より小さい	a < b
<=	以下	a <= b

繰り返し（ループ）

for文

// 0から4まで5回繰り返す
for (let i = 0; i < 5; i++) {
  console.log(i);  // 0, 1, 2, 3, 4
}

配列のループ（forEach, map）

const fruits = ["りんご", "バナナ", "みかん"];

// forEach: 各要素に対して処理を実行
fruits.forEach((fruit) => {
  console.log(fruit);
});

// map: 各要素を変換して新しい配列を作る
const upperFruits = fruits.map((fruit) => {
  return fruit + "！";
});
// ["りんご！", "バナナ！", "みかん！"]

Next.jsでよく使う：Reactではmapを使ってリストを表示することが多いです。

関数

関数は、処理をまとめて名前をつけたものです。何度も使う処理を関数にしておくと便利です。

通常の関数

function greet(name) {
  return `こんにちは、${name}さん！`;
}

greet("太郎");  // "こんにちは、太郎さん！"

アロー関数（現在主流の書き方）

// 通常の書き方
const greet = (name) => {
  return `こんにちは、${name}さん！`;
};

// 1行で書ける場合は省略形
const greet = (name) => `こんにちは、${name}さん！`;

// 引数が1つなら括弧も省略可能
const double = x => x * 2;

ポイント：Next.jsやReactでは、アロー関数がよく使われます。

非同期処理（async/await）

APIからデータを取得するなど、時間がかかる処理を「非同期処理」と言います。

// APIからデータを取得する例
const fetchTodos = async () => {
  // awaitでデータが届くまで待つ
  const response = await fetch("http://localhost:8000/todos");
  const data = await response.json();
  return data;
};

// 使い方
const todos = await fetchTodos();

覚えておくこと

async：この関数は非同期処理を含むという印
await：結果が返ってくるまで待つ
API通信やファイル読み込みなど、時間がかかる処理で使う

コードの読み方のコツ

1. 上から順に追う

基本的にコードは上から下に実行されます。まずは全体の流れを把握しましょう。

2. 変数名から意味を推測

userNameなら「ユーザー名」、isCompletedなら「完了したか」のように、名前から意味がわかります。

3. console.logでデバッグ

わからない値があったらconsole.log()で出力して確認しましょう。

console.log("userの値:", user);

4. 開発者ツールのConsoleタブ

ブラウザのF12 → Consoleタブで、console.logの出力やエラーを確認できます。

練習問題

Q1. 次のコードの出力結果は？

const numbers = [1, 2, 3];
console.log(numbers[1]);

A. 1 B. 2 C. 3

Q2. 次のアロー関数と同じ意味のものは？

const add = (a, b) => a + b;

A. function add(a, b) { return a + b; } B. function add(a, b) { a + b; } C. function(a, b) => a + b

Q3. asyncとawaitを使う場面は？

A. 計算処理をするとき B. 変数を宣言するとき C. APIからデータを取得するなど、待つ必要がある処理

まとめ

✓ 変数はconst（変更不可）とlet（変更可）で宣言
✓ データ型：文字列、数値、真偽値、配列、オブジェクト
✓ 条件分岐はif、繰り返しはforやmap
✓ アロー関数() => {}が現在の主流
✓ 非同期処理はasync/awaitを使う