JavaScript、TypeScript、React、React Nativeの用語をまとめて検索
データを保存するための箱。let、const、varで宣言します。値を入れたり、取り出したり、変更したりできます。
例:
let name = "太郎";
const age = 25;
console.log(name); // "太郎"関連用語:
再代入できない変数を宣言するキーワード。一度値を設定したら変更できません。定数や変わらない値に使います。
例:
const pi = 3.14;
// pi = 3.15; // エラー！再代入できない
const user = { name: "太郎" };
user.name = "花子"; // OK！オブジェクトの中身は変更できる関連用語:
再代入可能な変数を宣言するキーワード。値が変わる可能性がある場合に使います。
例:
let count = 0;
count = 1; // OK！
count = count + 1; // OK！関連用語:
テキストデータを表す型。シングルクォート、ダブルクォート、バッククォートで囲みます。
例:
const name = "太郎";
const message = 'こんにちは';
const greeting = `私の名前は${name}です`;
console.log(greeting); // "私の名前は太郎です"関連用語:
数字を表す型。整数も小数も同じnumber型として扱います。計算に使えます。
例:
const age = 25;
const price = 1999.99;
const temperature = -5;
const total = price * 2; // 3999.98関連用語:
trueまたはfalseの2つの値のみを持つ型。条件判定に使います。「真」か「偽」かを表します。
例:
const isStudent = true;
const hasLicense = false;
if (isStudent) {
console.log("学生です");
}関連用語:
複数の値を順序付きで格納するデータ構造。[]で表します。インデックス（0から始まる番号）で要素にアクセスできます。
例:
const fruits = ["りんご", "バナナ", "オレンジ"];
console.log(fruits[0]); // "りんご"
console.log(fruits.length); // 3
fruits.push("ぶどう"); // 末尾に追加関連用語:
キーと値のペアを格納するデータ構造。{}で表します。関連するデータをまとめて管理できます。
例:
const person = {
name: "太郎",
age: 25,
city: "東京"
};
console.log(person.name); // "太郎"
console.log(person["age"]); // 25関連用語:
特定の処理をまとめたもの。何度も使える処理を定義できます。引数を受け取り、戻り値を返すことができます。
例:
function greet(name) {
return `こんにちは、${name}さん！`;
}
console.log(greet("太郎")); // "こんにちは、太郎さん！"関連用語:
関数を短く書ける記法。=>を使います。普通の関数とthisの扱いが異なります。
例:
// 普通の関数
function add(a, b) {
return a + b;
}
// アロー関数
const add = (a, b) => {
return a + b;
};
// さらに短く
const add = (a, b) => a + b;関連用語:
バッククォート（`）で囲んだ文字列。${}で変数を埋め込めます。複数行も書けます。
例:
const name = "太郎";
const age = 25;
const message = `私の名前は${name}で、
${age}歳です。`;
console.log(message);関連用語:
配列やオブジェクトから値を取り出して、個別の変数に代入する記法。コードをスッキリ書けます。
例:
// オブジェクトの分割代入
const person = { name: "太郎", age: 25 };
const { name, age } = person;
// 配列の分割代入
const colors = ["赤", "青", "緑"];
const [first, second] = colors;関連用語:
配列やオブジェクトを展開する記法。...を使います。コピーや結合に便利です。
例:
// 配列のコピー
const arr1 = [1, 2, 3];
const arr2 = [...arr1]; // [1, 2, 3]
// 配列の結合
const combined = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]
// オブジェクトのコピー
const person = { name: "太郎", age: 25 };
const updated = { ...person, age: 26 };関連用語:
配列の各要素に処理を適用して、新しい配列を作るメソッド。元の配列は変更しません。
例:
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]
const names = ["太郎", "花子"];
const greetings = names.map(name => `こんにちは、${name}さん`);関連用語:
配列から条件に合う要素だけを取り出して、新しい配列を作るメソッド。
例:
const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4, 6]
const users = [
{ name: "太郎", age: 25 },
{ name: "花子", age: 17 }
];
const adults = users.filter(user => user.age >= 20);関連用語:
配列の各要素に対して処理を実行するメソッド。新しい配列は作りません。
例:
const fruits = ["りんご", "バナナ", "オレンジ"];
fruits.forEach(fruit => {
console.log(`好きな果物：${fruit}`);
});
// "好きな果物：りんご"
// "好きな果物：バナナ"
// "好きな果物：オレンジ"関連用語:
条件分岐を1行で書ける記法。条件 ? 真の値 : 偽の値という形式です。
例:
const age = 25;
const status = age >= 20 ? "大人" : "子供";
console.log(status); // "大人"
// if文で書くと
let status;
if (age >= 20) {
status = "大人";
} else {
status = "子供";
}関連用語:
条件式で真/偽として扱われる値。falsy（偽）: false、0、""、null、undefined、NaN。それ以外はtruthy（真）。
例:
// falsyな値
if (0) { } // 実行されない
if ("") { } // 実行されない
if (null) { } // 実行されない
// truthyな値
if (1) { } // 実行される
if ("hello") { } // 実行される
if ([]) { } // 実行される（空配列もtruthy）関連用語:
他の関数に引数として渡される関数。「後で呼び出してね」という意味。配列メソッドやイベント処理で使います。
例:
// 配列メソッドでの使用
const numbers = [1, 2, 3];
numbers.forEach(function(num) {
console.log(num);
});
// タイマーでの使用
setTimeout(function() {
console.log("3秒後");
}, 3000);関連用語:
非同期処理の結果を表すオブジェクト。「将来的に値が返ってくる約束」を表します。
例:
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("成功！");
}, 1000);
});
promise.then(result => {
console.log(result); // "成功！"
});関連用語:
非同期処理を同期処理のように書ける記法。Promiseをより読みやすく扱えます。
例:
async function fetchData() {
const response = await fetch("/api/data");
const data = await response.json();
return data;
}
// 使用例
fetchData().then(data => {
console.log(data);
});関連用語:
変数や関数に型を明示的に指定すること。: の後に型名を書きます。
例:
let name: string = "太郎";
let age: number = 25;
let isStudent: boolean = true;
function greet(name: string): string {
return `こんにちは、${name}さん`;
}関連用語:
TypeScriptが値から自動的に型を推測すること。明示的に型を書かなくても型チェックが働きます。
例:
// 型推論が働く
let name = "太郎"; // string型と推論される
let age = 25; // number型と推論される
// 明示的に型を書く場合と同じ
let name: string = "太郎";
let age: number = 25;関連用語:
オブジェクトの型を定義するための構文。どんなプロパティを持つかを明示します。
例:
interface User {
name: string;
age: number;
email?: string; // オプショナル
}
const user: User = {
name: "太郎",
age: 25
};関連用語:
typeキーワードを使って型に名前をつける機能。複雑な型を再利用できます。
例:
type UserID = string;
type Age = number;
type User = {
id: UserID;
name: string;
age: Age;
};
const user: User = {
id: "user123",
name: "太郎",
age: 25
};関連用語:
複数の型のいずれかを表す型。| で区切って書きます。「AまたはB」という意味。
例:
type Status = "success" | "error" | "loading";
let currentStatus: Status = "loading";
currentStatus = "success"; // OK
// currentStatus = "pending"; // エラー！
type Result = string | number;
let value: Result = "hello"; // OK
value = 42; // OK関連用語:
具体的な値そのものを型として使う機能。stringやnumberより厳密に型を指定できます。
例:
// 文字列リテラル型
type Direction = "up" | "down" | "left" | "right";
let move: Direction = "up"; // OK
// move = "forward"; // エラー！
// 数値リテラル型
type DiceValue = 1 | 2 | 3 | 4 | 5 | 6;
let roll: DiceValue = 3; // OK関連用語:
型を引数のように扱える機能。<T>のような形式で書きます。再利用可能な型定義ができます。
例:
// 配列はジェネリクスの例
const numbers: Array<number> = [1, 2, 3];
const names: Array<string> = ["太郎", "花子"];
// 自分で定義する場合
function identity<T>(value: T): T {
return value;
}
const num = identity<number>(42);
const str = identity<string>("hello");関連用語:
TypeScriptに「この型だと信じて」と伝える機能。as キーワードを使います。
例:
// HTMLElementの取得
const input = document.getElementById("name") as HTMLInputElement;
input.value = "太郎";
// API レスポンス
const response = await fetch("/api/user");
const user = await response.json() as User;関連用語:
すべての型を許容する特殊な型。型チェックが無効になるため、なるべく使わないようにします。
例:
let value: any = "hello";
value = 42; // OK
value = true; // OK
value.anything.works(); // エラーにならない（危険！）
// unknownの方が安全
let value: unknown = "hello";
// value.toUpperCase(); // エラー！型チェックが必要関連用語:
anyと似ているが、より安全な型。使う前に型チェックが必要です。
例:
let value: unknown = "hello";
// 型チェックしてから使う
if (typeof value === "string") {
console.log(value.toUpperCase()); // OK
}
// anyとの違い
let anyValue: any = "hello";
anyValue.toUpperCase(); // OK（危険）
let unknownValue: unknown = "hello";
// unknownValue.toUpperCase(); // エラー！関連用語:
値を返さない関数の戻り値の型。「何も返さない」ことを明示します。
例:
function logMessage(message: string): void {
console.log(message);
// return文がない、またはreturnだけ
}
// Reactのイベントハンドラでよく使う
const handleClick = (): void => {
console.log("クリックされました");
};関連用語:
プロパティや引数が省略可能であることを示す記号。? をつけます。
例:
interface User {
name: string;
age: number;
email?: string; // 省略可能
}
const user1: User = {
name: "太郎",
age: 25
// emailは省略OK
};
function greet(name: string, title?: string): string {
if (title) {
return `こんにちは、${title} ${name}さん`;
}
return `こんにちは、${name}さん`;
}関連用語:
プロパティを読み取り専用にする修飾子。初期化後は変更できません。
例:
interface User {
readonly id: string;
name: string;
}
const user: User = {
id: "user123",
name: "太郎"
};
user.name = "花子"; // OK
// user.id = "user456"; // エラー！readonlyは変更不可
// 配列にも使える
const numbers: readonly number[] = [1, 2, 3];
// numbers.push(4); // エラー！関連用語:
要素数と各要素の型が固定された配列。位置によって型が異なります。
例:
// [string, number]型のタプル
let user: [string, number] = ["太郎", 25];
console.log(user[0]); // "太郎" (string型)
console.log(user[1]); // 25 (number型)
// user = [25, "太郎"]; // エラー！順序が違う
// user = ["太郎"]; // エラー！要素数が違う関連用語:
UIの部品。関数やクラスで定義します。再利用可能な独立したパーツとして扱えます。
例:
// 関数コンポーネント
function Greeting() {
return <h1>こんにちは！</h1>;
}
// 使用
function App() {
return (
<div>
<Greeting />
<Greeting />
</div>
);
}関連用語:
JavaScriptの中にHTML風の記法を書ける構文。Reactでよく使われます。
例:
// JSX
const element = <h1>こんにちは、世界！</h1>;
// 変数を埋め込める
const name = "太郎";
const greeting = <p>こんにちは、{name}さん</p>;
// JavaScriptの式も使える
const age = 25;
const message = <p>{age >= 20 ? "大人" : "子供"}</p>;関連用語:
コンポーネントに渡すデータ。親コンポーネントから子コンポーネントへ値を渡します。読み取り専用です。
例:
function Greeting(props) {
return <h1>こんにちは、{props.name}さん！</h1>;
}
// 分割代入でスッキリ
function Greeting({ name }) {
return <h1>こんにちは、{name}さん！</h1>;
}
// 使用
<Greeting name="太郎" />関連用語:
コンポーネントが持つ変化するデータ。useStateで管理します。変更すると再レンダリングされます。
例:
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>カウント: {count}</p>
<button onClick={() => setCount(count + 1)}>
増やす
</button>
</div>
);
}関連用語:
Reactで状態を管理するためのHook。状態とその更新関数のペアを返します。
例:
import { useState } from 'react';
function Example() {
// [現在の値, 更新関数] = useState(初期値)
const [count, setCount] = useState(0);
const [name, setName] = useState("");
return (
<div>
<p>{count}</p>
<button onClick={() => setCount(count + 1)}>+1</button>
</div>
);
}関連用語:
副作用を扱うためのHook。レンダリング後に実行される処理を定義します。
例:
import { useEffect, useState } from 'react';
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
// レンダリング後に実行される
document.title = `カウント: ${count}`;
}, [count]); // countが変更された時に実行
return <button onClick={() => setCount(count + 1)}>+1</button>;
}関連用語:
useEffectの第2引数。この配列の値が変わった時だけeffectが実行されます。
例:
// 空配列：最初の1回だけ実行
useEffect(() => {
console.log("マウント時のみ");
}, []);
// 配列なし：毎レンダリング時に実行
useEffect(() => {
console.log("毎回実行される");
});
// 値を指定：その値が変わった時に実行
useEffect(() => {
console.log("countが変わった");
}, [count]);関連用語:
useEffectから返す関数。コンポーネントがアンマウントされる時やeffectが再実行される前に実行されます。
例:
useEffect(() => {
// タイマーを設定
const timer = setInterval(() => {
console.log("1秒ごと");
}, 1000);
// クリーンアップ関数
return () => {
clearInterval(timer); // タイマーを解除
};
}, []);関連用語:
クリックや入力などのイベントが発生した時に実行される関数。onClickなどで指定します。
例:
function Button() {
const handleClick = () => {
console.log("クリックされた");
};
return <button onClick={handleClick}>クリック</button>;
}
// 直接書くこともできる
<button onClick={() => console.log("クリック")}>
クリック
</button>関連用語:
条件によって表示内容を変える技術。&&演算子や三項演算子を使います。
例:
function Greeting({ isLoggedIn }) {
// && 演算子
return (
<div>
{isLoggedIn && <p>ようこそ！</p>}
</div>
);
}
// 三項演算子
function Status({ isOnline }) {
return (
<p>{isOnline ? "オンライン" : "オフライン"}</p>
);
}関連用語:
配列のデータを繰り返し表示すること。mapメソッドとkey属性を使います。
例:
function FruitList() {
const fruits = ["りんご", "バナナ", "オレンジ"];
return (
<ul>
{fruits.map((fruit, index) => (
<li key={index}>{fruit}</li>
))}
</ul>
);
}
// オブジェクトの配列
const users = [
{ id: 1, name: "太郎" },
{ id: 2, name: "花子" }
];
<ul>
{users.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>関連用語:
リスト表示で各要素を識別するための属性。Reactが効率的に更新するために必要です。
例:
// 良い例：一意なIDを使う
{users.map(user => (
<li key={user.id}>{user.name}</li>
))}
// 悪い例：indexを使う（並び替えや削除で問題が起きる）
{users.map((user, index) => (
<li key={index}>{user.name}</li>
))}関連用語:
Reactのstateでフォームの値を管理する方式。valueとonChangeを使います。
例:
function Form() {
const [name, setName] = useState("");
return (
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>
);
}関連用語:
コンポーネントの外部に影響を与える処理。API呼び出し、タイマー、DOM操作など。useEffectで管理します。
例:
// 副作用の例
useEffect(() => {
// API呼び出し
fetch('/api/data')
.then(res => res.json())
.then(data => setData(data));
// DOM操作
document.title = "新しいタイトル";
// タイマー
const timer = setTimeout(() => {}, 1000);
return () => clearTimeout(timer);
}, []);関連用語:
コンポーネントが再度実行されて画面が更新されること。stateやpropsが変わると発生します。
例:
function Counter() {
const [count, setCount] = useState(0);
console.log("レンダリング！"); // stateが変わるたびに実行
return (
<div>
<p>{count}</p>
{/* クリックでstateが変わり、再レンダリング */}
<button onClick={() => setCount(count + 1)}>+1</button>
</div>
);
}関連用語:
複数の要素をグループ化するための特殊なタグ。DOMに余分な要素を追加しません。<>...</>で書けます。
例:
// Fragmentを使う
function List() {
return (
<>
<li>項目1</li>
<li>項目2</li>
</>
);
}
// または明示的に
import { Fragment } from 'react';
<Fragment>
<li>項目1</li>
<li>項目2</li>
</Fragment>関連用語:
React Nativeの基本的なコンテナコンポーネント。HTMLの<div>に相当します。レイアウトの土台になります。
例:
import { View } from 'react-native';
function App() {
return (
<View style={{ flex: 1, padding: 20 }}>
<Text>ここにコンテンツ</Text>
</View>
);
}関連用語:
テキストを表示するコンポーネント。React Nativeでは必ずTextコンポーネントを使います。
例:
import { Text } from 'react-native';
function Greeting() {
return (
<Text style={{ fontSize: 20, color: 'blue' }}>
こんにちは！
</Text>
);
}
// 入れ子にできる
<Text>
外側のテキスト
<Text style={{ fontWeight: 'bold' }}>太字部分</Text>
</Text>関連用語:
スタイルを定義するためのAPI。CSSライクな記法でスタイルを書けます。
例:
import { StyleSheet, View, Text } from 'react-native';
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
padding: 20,
},
title: {
fontSize: 24,
fontWeight: 'bold',
color: 'blue',
},
});
<View style={styles.container}>
<Text style={styles.title}>タイトル</Text>
</View>関連用語:
React Nativeのレイアウトシステム。要素を柔軟に配置できます。デフォルトは縦方向（column）です。
例:
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column', // デフォルト（縦）
justifyContent: 'center', // 主軸（縦）の中央
alignItems: 'center', // 交差軸（横）の中央
},
row: {
flexDirection: 'row', // 横方向
gap: 10,
},
});関連用語:
スクロール可能なコンテナ。画面に収まらないコンテンツを表示できます。
例:
import { ScrollView, Text } from 'react-native';
function LongList() {
return (
<ScrollView style={{ flex: 1 }}>
<Text>項目1</Text>
<Text>項目2</Text>
{/* たくさんのコンテンツ */}
<Text>項目100</Text>
</ScrollView>
);
}関連用語:
大量のリストデータを効率的に表示するコンポーネント。表示される部分だけレンダリングします。
例:
import { FlatList, Text } from 'react-native';
function UserList({ users }) {
return (
<FlatList
data={users}
renderItem={({ item }) => <Text>{item.name}</Text>}
keyExtractor={item => item.id}
/>
);
}
const users = [
{ id: '1', name: '太郎' },
{ id: '2', name: '花子' },
];関連用語:
テキスト入力フィールド。ユーザーからテキスト入力を受け取ります。
例:
import { TextInput, useState } from 'react-native';
function Form() {
const [text, setText] = useState('');
return (
<TextInput
style={{ borderWidth: 1, padding: 10 }}
value={text}
onChangeText={setText}
placeholder="名前を入力"
/>
);
}関連用語:
シンプルなボタンコンポーネント。プラットフォームのネイティブボタンを表示します。
例:
import { Button } from 'react-native';
function App() {
const handlePress = () => {
console.log('ボタンが押された');
};
return (
<Button
title="押してね"
onPress={handlePress}
color="blue"
/>
);
}関連用語:
タッチ可能な領域を作るコンポーネント。押すと透明度が変わります。カスタムボタンに使います。
例:
import { TouchableOpacity, Text } from 'react-native';
function CustomButton() {
return (
<TouchableOpacity
onPress={() => console.log('押された')}
style={{
backgroundColor: 'blue',
padding: 15,
borderRadius: 5,
}}
>
<Text style={{ color: 'white' }}>カスタムボタン</Text>
</TouchableOpacity>
);
}関連用語:
画像を表示するコンポーネント。ローカル画像とネットワーク画像の両方に対応します。
例:
import { Image } from 'react-native';
// ローカル画像
<Image
source={require('./assets/logo.png')}
style={{ width: 100, height: 100 }}
/>
// ネットワーク画像
<Image
source={{ uri: 'https://example.com/image.jpg' }}
style={{ width: 100, height: 100 }}
/>関連用語:
ノッチや画面の端を避けて安全な領域にコンテンツを表示するコンポーネント。
例:
import { SafeAreaView, Text } from 'react-native';
function App() {
return (
<SafeAreaView style={{ flex: 1 }}>
<Text>画面の安全な領域に表示されます</Text>
</SafeAreaView>
);
}関連用語:
プラットフォーム（iOS/Android）を判定するAPI。環境によって処理を変えられます。
例:
import { Platform, Text } from 'react-native';
// OSを判定
if (Platform.OS === 'ios') {
console.log('iOSです');
}
// スタイルを分ける
const styles = StyleSheet.create({
text: {
fontSize: Platform.OS === 'ios' ? 18 : 16,
paddingTop: Platform.OS === 'ios' ? 20 : 0,
},
});
// Platform.selectも使える
const padding = Platform.select({
ios: 20,
android: 10,
});関連用語:
画面のサイズを取得するAPI。デバイスの幅や高さを取得できます。
例:
import { Dimensions } from 'react-native';
const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;
console.log(`幅: ${windowWidth}, 高さ: ${windowHeight}`);
// スタイルで使う
const styles = StyleSheet.create({
container: {
width: windowWidth * 0.8, // 画面幅の80%
},
});関連用語:
キーボードが表示された時にコンテンツを自動的に上に移動させるコンポーネント。
例:
import { KeyboardAvoidingView, Platform } from 'react-native';
function Form() {
return (
<KeyboardAvoidingView
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
style={{ flex: 1 }}
>
<TextInput placeholder="入力してね" />
</KeyboardAvoidingView>
);
}関連用語:
画面上部のステータスバー（時計、バッテリーなど）の見た目を制御するコンポーネント。
例:
import { StatusBar } from 'react-native';
function App() {
return (
<>
<StatusBar
barStyle="dark-content"
backgroundColor="#fff"
/>
{/* アプリのコンテンツ */}
</>
);
}関連用語:
React NativeのコンポーネントをWebブラウザで動かすライブラリ。このサイトのレッスンでも使われています。
例:
// 注意：完全互換ではない
// 使えない機能：
// - ネイティブモジュール
// - カメラ、位置情報など
// - 一部のアニメーション
// 使える機能：
// - 基本的なコンポーネント（View, Text等）
// - StyleSheet
// - Flexboxレイアウト関連用語:
タッチ可能な領域を作る新しいコンポーネント。TouchableOpacityより柔軟です。
例:
import { Pressable, Text } from 'react-native';
function Button() {
return (
<Pressable
onPress={() => console.log('押された')}
style={({ pressed }) => [
{ padding: 10, backgroundColor: 'blue' },
pressed && { opacity: 0.5 }
]}
>
<Text style={{ color: 'white' }}>ボタン</Text>
</Pressable>
);
}関連用語:
JavaScriptをブラウザ外で実行できる環境。Reactの開発に必要です。
例:
// コマンドラインでJavaScriptを実行
node script.js
// バージョン確認
node --version
// npmも一緒にインストールされる
npm --version関連用語:
Node.jsのパッケージマネージャー。ライブラリのインストールや管理ができます。
例:
// パッケージをインストール
npm install react
// 開発サーバーを起動
npm start
// プロジェクトを作成
npm create vite@latest関連用語:
プロジェクトの設定ファイル。依存パッケージやスクリプトを管理します。
例:
{
"name": "my-app",
"version": "1.0.0",
"scripts": {
"dev": "vite",
"build": "vite build"
},
"dependencies": {
"react": "^18.0.0"
}
}関連用語:
モジュールをインポート・エクスポートする構文。ファイル間でコードを共有できます。
例:
// エクスポート（utils.js）
export function add(a, b) {
return a + b;
}
export const PI = 3.14;
// デフォルトエクスポート
export default function greet() {
return "Hello";
}
// インポート（app.js）
import greet, { add, PI } from './utils';関連用語:
独立した機能を持つファイル。コードを分割して管理できます。
例:
// math.js（モジュール）
export function add(a, b) {
return a + b;
}
// app.js（別のモジュール）
import { add } from './math';
console.log(add(2, 3));関連用語:
npmでインストールしたパッケージが保存されるフォルダ。削除しても npm install で復元できます。
例:
// フォルダ構造
my-app/
├── node_modules/ ← ここにパッケージが保存される
├── src/
└── package.json
// 削除しても大丈夫
// npm install で復元される関連用語:
値をコンソールに出力するデバッグ用の関数。開発中の動作確認に使います。
例:
const name = "太郎";
console.log(name); // "太郎"
const user = { name: "太郎", age: 25 };
console.log("ユーザー:", user);
// 複数の値を出力
console.log("名前:", name, "年齢:", 25);関連用語:
コードを変更すると自動的にブラウザが更新される機能。開発効率が上がります。
例:
// ファイルを保存すると...
// → 自動的にブラウザが更新される
// → 状態は保持される（Fast Refresh）
// 注意：エラーがある場合は更新されない
// エラーを修正してから保存する関連用語:
プログラムの問題を知らせるメッセージ。赤い文字で表示されることが多いです。
例:
// よくあるエラー
// 1. 構文エラー
Unexpected token
// 2. 型エラー（TypeScript）
Type 'string' is not assignable to type 'number'
// 3. 未定義エラー
Cannot read property 'name' of undefined
// エラーを読むコツ：
// - ファイル名と行番号を確認
// - 最初のエラーから直す関連用語:
プログラムのバグ（不具合）を見つけて修正すること。console.logなどを使います。
例:
// console.logで値を確認
function add(a, b) {
console.log("a:", a, "b:", b);
return a + b;
}
// ブラウザの開発者ツールで確認
// - コンソールタブでログを見る
// - Elementsタブで DOM を確認
// - Networkタブで通信を確認関連用語: