Closed18

JavaScript初級

kokikoki

JavaScriptファイルの読み込みはbodyタグの最後に記述していく

  • htmlは上からコードを読み込んでいくため上部に記述していたら、コンテントの表示が遅くなってしまうため

JavaScriptで変数名命名ルール

  1. 予約語は使えない
  2. 数字から始まる変数名は使えない
  3. スペース、ハイフン(-)を含めることができない
  4. キャメルケースで命名していく
  5. 変数 let 定数 const

値の型

プリミティブ型

let fruit = "apple";    // string

let age = 31;             // int
let circleRatio = 3.14 // float

let isActive = true;     // bool

let color;                    // undefined 

let box = null;            // null

オブジェクト型

let product = {
    name: "りんご",
    price: 200,
};
console.log(product)

// 値の変更方法
// .で繋ぐ
product.name = "みかん";
console.log(product.name);

// スクエアブラケットで指定
product["price"] = 300;
console.log(product["price"]);

型のチェック

console.log(typeof fruit);
kokikoki

配列

  • スクエアブラケット([])で囲む
  • []内を要素と呼び、インデックス番号が割り振られている(0始動)
let fruits = ["りんご", "みかん"]

配列の要素変更

  • インデックス番号で変更したい要素を指定し代入する。
fruits[0] = "バナナ";
console.log(fruits[0]);

配列の要素追加

fruits[2] = "パイナップル";
console.log(fruits);

配列の要素数取得

  • .lengthを使用
console.log(fruits.length);

// 要素の追加
const fruits = ["りんご", "みかん"];
fruits.push("パイナップル", "バナナ"); // 要素を後ろに追加
console.log(fruits);

fruits.unshift("いちご", "メロン"); // 要素を前に追加
console.log(fruits);

// 要素の削除
fruits.pop();  // 後ろの要素を削除
console.log(fruits);
fruits.shift();  // 前の要素を削除
console.log(fruits);

// 配列のインデックス番号を取得
console.log(fruits.indexOf("りんご")); // 1
console.log(fruits.indexOf("柿")); // -1 (存在しない場合は-1)

console.log(fruits.includes("みかん")); // true
console.log(fruits.includes("ぶどう")); // false

const products = [
    { id: 1, name: "りんご"},
    { id: 2, name: "みかん"},
    { id: 3, name: "バナナ"}
];

const product1 = products.find((product) => product.id === 1);
console.log(product1); // { id: 1, name: "りんご"
const product2 = products.find((product) => product.id === 4);
console.log(product2); // undefined (存在しない場合はundefined)

// スプレッド構文で配列をコピーすることも可能
const cloneProducts = [...products];
console.log(cloneProducts);

// forEachメソッドで配列の要素をループ処理
cloneProducts.forEach((product) => console.log(product));
cloneProducts.forEach((product, index) => {
    console.log(index);
    console.log(product);
});

// joinメソッドで配列を文字列に変換
console.log(fruits.join(","));

// everyメソッドで全ての要素に対して条件をチェック
const numbers = [1, 2, 3, 4];
console.log(numbers.every((number) => number > 0)); // true (全ての要素が0より大きい)
console.log(numbers.every((number) => number > 2)); // false (2以下の要素があるため)

// someメソッドで一部の要素に対して条件をチェック
console.log(numbers.some((number) => number > 2)); // true (3と4が条件を満たす)
console.log(numbers.some((number) => number > 5)); // false (全ての要素が5以下)

// filterメソッドで条件を満たす要素を抽出
const evenNumbers = numbers.filter((number) => number % 2 === 0);
console.log(evenNumbers); // [2, 4] (偶数のみを抽出)

// mapメソッドで配列の要素を変換
const doubledNumbers = numbers.map((number) => number * 2);
console.log(doubledNumbers); // [2, 4, 6, 8]
kokikoki

関数

// 関数の定義
const outputProductInfo = () => {
    console.log("こんにちは");
    console.log("みかんの値段は200円です！")
}
// 関数の呼び出し
outputProductInfo();

// 引数を使用した関数の定義
const outputProductInfo2 = (productName, productPrice) => {
    console.log("こんにちは");
    console.log(`${productName}の値段は${productPrice}円です！`); // テンプレートリテラル
}

outputProductInfo2("りんご", 500);

// 返り値を定義した関数
const add = (a, b) => {
    return a + b;
}
console.log(add(1, 2));
kokikoki

演算子

  • インクリメントの方法には2つの表現方法がある
// 演算子
let x = 10;
let y = 5;
console.log(x + y);
console.log(x - y);
console.log(x * y);
console.log(x / y);
console.log(x % y);
console.log(x ** 2);

// インクリメント
console.log(++x);  // 元々のxの値 +1
console.log(x); // 11
console.log(x++); // 次のxの値に +1 される 11
console.log(x); // 12
// デクリメント
console.log(--x); // 11
console.log(x); // 11
console.log(x--); // 11
console.log(x); // 10

// 代入演算子
x += 5;
console.log(x); // 15

x -= 5;
console.log(x); // 10
// 「*」と「/」も同様の演算子が使用できる

// 関係演算子
console.log(x > 5); // true
console.log(x > 20); // false

console.log(x >= 10); // true

console.log(x < 5); // false
console.log(x < 20); // true

console.log(x <= 10); // true

console.log(x === 10); // true
console.log(x === 11); // false

console.log(x !== 10); // false
console.log(x !== 11); // true

console.log(1 === "1"); // false
console.log(1 == "1"); // true == は型が違う場合でも右辺側の値の型変換をして値が一致しているか判定する

// 三項演算子
let userAge = 25;
let userType = userAge > 20 ? "adult" : "child"; // ? true : false で ?以前の条件式の結果によって格納される値が変わる
console.log(userType); // adult
userAge = 15;
userType = userAge > 20 ? "adult" : "child";
console.log(userType); // child

// 論理演算子
console.log(x > 5 && x < 20); // true
console.log(x > 5 && x > 20); // false
// && は左辺の条件式がfalseの場合右辺の条件式の評価がされない

console.log(x > 5 || x > 20); // true
console.log(x < 5 || x > 20); // false
// || は左辺の条件式がtrueの場合右辺の条件式の評価はされない

console.log(!(x > 15)); // true

// falsyな値
undefined;
null;
0;
("");
NaN;

console.log(true && "a"); // a
console.log(false && "a"); // false
console.log(true || 1); // true
console.log(false || 1); // 1
kokikoki

if文

let age = 25;
if (age >= 20) {
    console.log("大人です");
} else if (age >= 12 && age <= 15) {
    console.log("中学生です");
} else {
    console.log("子供です");
}
kokikoki

switch文

switch (age) {
    case 20:
        console.log("成人おめでとうございます");
        break;
    case 12:
    case 15:
    case 18:
        console.log("卒業おめでとうございます");
        break;
    default:
        console.log(`${age}歳です`);
}
kokikoki

for文

for (let i = 0; i < 5; i++) {
    console.log("こんにちは");
}
kokikoki

while文

let i = 0;
while (i < 5) {
    console.log("こんばんは");
    i++;
}
kokikoki

for in文

  • オブジェクトのキーを取得し、object[key]で値にアクセス
let product = {
    name: "りんご",
    price: 100,
}
for (let key in product) {
    console.log(key);
    console.log(product[key]);
}

for of文

  • 配列の要素を全件取得
let fruits = ["りんご", "みかん", "ぶどう"];
for (let fruit of fruits) {
    console.log(fruit);
}
kokikoki

オブジェクトの基本的な使い方

// オブジェクトリテラル
const product = {
    name: "りんご",
    price: 100,
    sayDescription: () => {
        console.log("とっても甘いです");
    },
};

product.sayDescription();

// クラス
class Product { // classはパスカルケースで命名
    constructor(name, price) { // コンストラクター
        this.name = name;
        this.price = price;
    }

    sayInfo() { // インスタンスメソッド
        console.log(`${this.name}の値段は${this.price}円です`);
    }

    static sayFuncDetail() { // 静的メソッド
        console.log("productのオブジェクトを作るコンストラクターです");
    }
}

const p1 = new Product("りんご", 100);
const p2 = new Product("みかん", 150);
const p3 = new Product("ぶどう", 200);

p1.sayInfo();
p2.sayInfo();
p3.sayInfo();


Product.sayFuncDetail();

// オブジェクトはconstで定義した場合でもプロパティの追加・変更・削除は可能
product.stock = 5;
console.log(product);

product.price = 120;
console.log(product);

delete product.stock;
console.log(product);
kokikoki

プリミティブ型、オブジェクト型の違い

  • プリミティブ型の変数は値をコピーした際に、元の値を上書きしても、コピー先は変わらない。constで定義したものは変更できない。
  • オブジェクト型の変数は値をコピーした際に、元の値（keyや要素)を変更した際に、コピー先も変わる。constで定義しても、keyや要素を変更することができる。
kokikoki

スプレッド構文

スプレッド構文とは

...（ドット3つ）を使って、配列やオブジェクトを展開する構文です。

基本的な使い方

1. 配列のコピー 

const fruits = ["りんご", "みかん"];
const newFruits = [...fruits];  // ["りんご", "みかん"]

// 従来の方法

const oldWay = fruits.slice();  // 同じ結果だが記述が長い

2. 配列の結合 

const fruits = ["りんご", "みかん"];
const vegetables = ["にんじん", "たまねぎ"];
const foods = [...fruits, ...vegetables];  
// ["りんご", "みかん", "にんじん", "たまねぎ"]

3. 配列に要素追加 

const fruits = ["りんご", "みかん"];
const newFruits = [...fruits, "ぶどう"];  
// ["りんご", "みかん", "ぶどう"]

4. オブジェクトのコピー 

const product = { name: "りんご", price: 100 };
const newProduct = { ...product };  
// { name: "りんご", price: 100 }

5. オブジェクトのプロパティ追加・更新 

const product = { name: "りんご", price: 100 };
const updatedProduct = { ...product, price: 120, category: "果物" };
// { name: "りんご", price: 120, category: "果物" }

関数での活用

6. 関数の引数として 

const numbers = [1, 2, 3];
Math.max(...numbers);  // Math.max(1, 2, 3) と同じ

なぜスプレッド構文を使うのか

❌ 直接変更（避けるべき） 

const product = { name: "りんご", price: 100 };
product.price = 120;  // 元のオブジェクトを直接変更
console.log(product); // { name: "りんご", price: 120 }

✅ スプレッド構文（推奨） 

const product = { name: "りんご", price: 100 };
const updatedProduct = { ...product, price: 120 };  // 新しいオブジェクト作成
console.log(product);        // { name: "りんご", price: 100 } ← 元は変更されない
console.log(updatedProduct); // { name: "りんご", price: 120 } ← 新しいオブジェクト

配列でも同様 

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

// ❌ 直接変更
fruits.push("ぶどう");  // 元の配列を変更

// ✅ スプレッド構文
const newFruits = [...fruits, "ぶどう"];  // 新しい配列作成

なぜ変更しないことが重要？

1. 予期しないバグ防止 

const originalData = { name: "商品A", price: 100 };
const processedData = originalData;
processedData.price = 200;

console.log(originalData.price);  // 200 ← 意図せず変更されている！

2. React開発での必須概念

Reactでは状態の不変性が求められるため、スプレッド構文は必須です。

3. デバッグのしやすさ

元のデータが保持されているため、変更前後の比較が容易です。

重要なポイント

✅ シャローコピー
元の配列/オブジェクトを変更せずに新しいものを作成

✅ 簡潔な記述
従来のconcat()やObject.assign()より短く書ける

✅ Reactでよく使用
状態更新時に元の状態を変更せず新しい状態を作る

覚え方

「...」= "中身を展開してバラバラにする"

スプレッド構文は不変性を保ちながらデータを操作できる、現代JavaScript開発の必須テクニックです！この「不変性を保つ」という概念は、現代のJavaScript/React開発で非常に重要なので、必ず理解しておく必要があります。

kokikoki

実務でよく使うMathオブジェクト

console.log(Math.random());
console.log(Math.random());
// Math.random()は0以上1未満のランダムな数値を生成

console.log(Math.round(1.6)); // 四捨五入 2
console.log(Math.ceil(1.6)) // 切り上げ 2
console.log(Math.floor(1.6)) // 切り捨て 1

console.log(Math.max(1, 2, 3)); // 最大値 3
console.log(Math.min(1, 2, 3)); // 最小値 1
kokikoki

実務でよく使うStringメソッド

const message = "こんにちは";
// const message = new String("こんにちは"); オブジェクトとして生成する場合の書き方
console.log(message.length); // 文字列の長さ 5

console.log(message[1]) // 文字列のインデックス 1番目の文字 "ん"

console.log(message.includes("こん")); //true

console.log(message.indexOf("ち")); // 引数の文字列の最初のインデックス 3

console.log(message.replace("ん", "に")); // こににちは 第一引数を第二引数に置き換える

console.log("a,b,c,d".split(",")); // ["a", "b", "c", "d"] 文字列を分割して配列にする
kokikoki

Dateオブジェクト

const now = new Date();
console.log(now); // 現在の日付と時刻を表示

const date1 = new Date("2023-01-01");
console.log(date1); // 2023年1月1日を表示

const date2 = new Date(2023, 3, 1);
console.log(date2); // 2023年4月1日を表示（注意: 月は0から始まるので4月は3）

console.log(date2.getFullYear()); // 年を取得 2023
console.log(date2.getMonth()); // 月を取得 3（4月）
console.log(date2.getDate()); // 日を取得 1
console.log(date2.getDay()); // 曜日を取得 6（土曜日） 日曜は0始まり
kokikoki

エラーハンドリング

const splitString = (str) => {
    return str.split(",");
}
console.log(splitString("a,b,c,d")); // ["a", "b", "c", "d"]
// console.log(splitString(1, 2, 3)); // TypeError: str.split is not a function

// try-catch文でエラーをキャッチ
try {
    console.log(splitString(1, 2, 3));
} catch (e) {
    alert(e)
}
kokikoki

演習

// 演習
// 1 number1という変数に3、number2という変数に5を格納し、2つの変数を掛け算した値をコンソールに出力しましょう。その後、number1の値を7に上書きして、再度掛け算した値をコンソールに出力しましょう。
let number1 = 3;
let number2 = 5;
console.log(number1 * number2);
number1 = 7;
console.log(number1 * number2);

// 2 pointという変数に数値型の値を格納して、pointが80以上の場合は素晴らしい、80より小さく60以上の場合は合格です、60より小さい場合は不合格ですとコンソールに出力するように、処理を条件分岐しましょう。
let point = 70;
if (point >= 80) {
    console.log("素晴らしい");
} else if (point >= 60 && point < 80) {
    console.log("合格です");
} else {
    console.log("不合格です");
}

// 3 id、firstName、lastName、ageのプロパティと、私の名前は firstName lastNameです。とコンソールに出力するメソッドを持つ、Userオブジェクトを生成するコンストラクーを作成しましょう。

class Human {
    constructor(id, firstName, lastName, age) {
        this.id = id;
        this.firstName = firstName;
        this.lastName = lastName;
        this.age = age;
    }
    sayHello() {
        console.log(`私の名前は${this.firstName}${this.lastName}です`);
    }
}
const human1 = new Human(1, "太郎", "山田", 20);
human1.sayHello();

// 4 配列から最大値を返却する関数を作成しましょう。ただし、もしその最大値が3の倍数の場合は、その最大値を3で割った値を返却しましょう。
const maxNumber = (a) => {
    let maxNum = Math.max(...a);
    if (maxNum % 3 === 0) {
        return maxNum / 3;
    } else {
        return maxNum;
    }
}

console.log(maxNumber([1, 2, 3, 4, 5])); // 5
console.log(maxNumber([3, 6, 9])); // 3

// 5 let message = 'This is a pen'をThis-is-a-penとコンソールに出力するように加工してみましょう。

const message = "This is a pen";
console.log(message.split(" ").join("-"));

// 6 [1,2,3,4,5,6,7,8,9,10]という配列から偶数のみを抽出して、抽出した値に5を掛けた値の配列を作成しましょう。
let numList = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let evenNumList = [];
for (let num of numList) {
    if (num % 2 === 0) {
        evenNumList.push(num * 5);
    }
}
console.log(evenNumList);
kokikoki

ブラウザーAPI

window オブジェクト

  • ブラウザーのAPIを提供するオブジェクト
  • window. は省略して記述することができる
console.log(window);

window.documentオブジェクト

  • ブラウザーのドキュメントを表すオブジェクト
console.log(document);
document.querySelector(); // querySelector() は、CSSセレクターを使って要素を取得するメソッド
document.querySelector().innerHTML // innerHTML は、要素の内容を取得・設定するプロパティ
document.querySelector().style // style は、要素のスタイルを取得・設定するプロパティ

document.querySelector("#pokemon").innerText = "ポケモンゲットだぜ！";
document.querySelector("#pokemon").style.backgroundColor = "#000";

主要なwindowオブジェクト

setTimeout()

  • 指定した時間後に関数を実行するメソッド 引数を2つ取り第一引数には関数、第二引数にはミリ秒単位の時間を指定する
setTimeout(function(){
    alert("Hello");
}, 1000);

HTML要素取得

  • classnameで取得した際は配列で取得。インデックス番号を指定して操作をする
document.querySelector("#foo")
document.querySelectorAll(".bar")
// idであれば#foo classnameであれば .barのように指定する必要がある

document.getElementById("foo")
document.getElementsByClassName("bar")
// #, . は必要ない

プレフィックスとは

  • クラス名や変数名の冒頭になんらかの文字列を付与すること
$foo = document.querySelectorAll(".bar");
$foo[0].innerHTML = "<div>Hello</div>";

// $ は変数がHTML要素を格納していることを明示するプレフィックス
  1. 定数は大文字
const DOMAIN = "https://pokemon.com";
  1. true/falseで状態を表す系の変数 = isXXX

イベント

  • ユーザーの操作やWebページの状態の変化など何らかのきっかけによって発生するものを指す
  • 個々のHTML要素やwindow、documentオブジェクトのaddEventListenerというメソッドを使用して設定
  • 引数を2つ持つ。第一引数にイベントのタイプ、第二引数にイベント時に実行する関数
  • windowオブジェクトではWebページ全体、documentオブジェクトではボタンや画像など個々のHTML要素に関するイベントを設定する
window.addEventListener("load", function(){
    alert("読み込み完了");
});

window.addEventListenerで使用できるイベントタイプ例

  1. load
  2. scroll
  3. resize

document.addEventListenerで使用できるイベントタイプ例

  1. click
  2. keydown
  3. mouseover
  4. touchstart
  5. touchmove
このスクラップは2ヶ月前にクローズされました