身の回りのものをオブジェクトとして認識してみる

(1)人間をオブジェクトとして、プロパティとメソッドをつけてみる

プロパティnameに『りんちゃん』という値を入れ、
りんちゃんの行動メソッド（関数）を定義してみる。

オブジェクト：person       プロパティ：name       メソッド：walk, speak, cooking


const person1 = {
    name: 'りんちゃん',//nameという名のプロパティにりんちゃんという値を入れる
    walk: function(step){//walkという名のメソッドを定義。引数にstepを取る
        console.log(person1.name + 'は'+ step + '歩歩けます');
        document.write(person1.name + 'は'+ step + '歩歩けます。');
    },
    speak:function(who){//speakと いう名のメソッドを定義。引数にwhoを取る
         console.log(person1.name + 'は'+ who + 'とおしゃべりします。');
         document.write(person1.name + 'は'+ who + 'とおしゃべりします。');
    },
    cooking:function(food){//cookingという名のメソッドを定義。引数にfoodを取る
        console.log('今日の'+ person1.name + 'は'+ food + 'を作りました。');
        document.write('今日の'+ person1.name + 'は'+ food + 'を作りました。');
        return food;//foodの値を次にも使えるようにする
    }
};
// オブジェクト定義が終わったあとに呼び出す！メソッドを呼び出し()内の引数を渡す
person1.walk(10)
person1.speak('うーろんくん')
person1.cooking('チキン南蛮')

(2)複雑な処理のオブジェクト

複雑な処理もメソッドで区切ることで、オブジェクトとして分かりやすく表すことができる。
(オブジェクトの中にオブジェクトを入れる)
大オブジェクト名: { ... } として中にまた {} に小オブジェクトを複数作ることで表わすことができる。

朝の準備オブジェクトを作ってみたよ！
論理値を用いて定義し、if文で朝の行動を表してみた。


const morningrutine = {  // ← モーニングルーティーンオブジェクトを内包
    wakeup: {
        time: '7:00',//7時に起きる
        boilwater: true,//お湯を沸かす
        washface: true,//顔を洗う
        drinkwater: true,//水を飲む
        doskincare: true,//スキンケアをする
    },
    
    breakfast: {
        drinkhotwater: true,//お湯を飲む
        eat: true,//食べる
        eatfruit: true,//果物を食べる
        takesupplements: true//サプリを飲む
    },
    ready: {
        changeclothes: true,//服を着る
        combhair: true,//髪の毛をとかす
        makeup: true,//メイクをする
        grabbag: true,//鞄を持つ
    },
    freetime: {
        study: true,//勉強をする
        readbooks: true,//本を読む
    }
}

//朝の準備が全てできたか
if(morningrutine.wakeup.time && morningrutine.wakeup.boilwater && morningrutine.wakeup.washface 
&& morningrutine.wakeup.drinkwater && morningrutine.wakeup.doskincare && morningrutine.breakfast.drinkhotwater 
&& morningrutine.breakfast.eat && morningrutine.breakfast.eatfruit && morningrutine.breakfast.takesupplements 
&& morningrutine.ready.changeclothes && morningrutine.ready.combhair && morningrutine.ready.makeup && morningrutine.ready.grabbag 
&& morningrutine.freetime.study && morningrutine.freetime.readbooks){
    console.log('朝の準備は完璧！');
}else{
    console.log();
};

//髪の毛とメイク
if(morningrutine.ready.makeup && morningrutine.ready.combhair){
    console.log('髪の毛サラサラにしてお化粧もしたよ〜');
};

//朝食
if(morningrutine.wakeup.doskincare &&  morningrutine.breakfast.eatfruit && morningrutine.breakfast.takesupplements){
    console.log('朝からビタミンCでお肌もピカピカ！');
};

//早起きできたか
if(morningrutine.wakeup.time && morningrutine.freetime.study ){
    console.log('早起きして勉強もした！');
}else if(morningrutine.wakeup.time && morningrutine.freetime.readbooks ){
    console.log('早起きして本も読んだ！');
}else if(morningrutine.wakeup.time ){
    console.log('今日は早起きした！');
}else{
    console.log('今日は寝坊しちゃった。。。');
};

//出勤日か否か
if(morningrutine.ready.changeclothes && morningrutine.ready.grabbag){
    console.log('じゃ、お仕事行ってくるね〜');
}else{
    console.log('でも今日はお仕事お休みなんだ〜');
};
実行結果がここに表示されます

(3)細かい動作を表す

複数引数を使う

引数を複数つけると、より複雑な動作を表せる。
marginやpadding設定と同じイメージ。


const person2 = {
    name: "りんちゃん",
    
    walk: function(forward, sideways) {
        console.log(`${this.name}は前に${forward}歩、横に${sideways}歩進んだよ！`);
        return forward + sideways;  // 合計歩数を返す
    }
};
// 呼び出し例
let totalSteps = person2.walk(10, 5);  // → りんちゃんは前に10歩、横に5歩進んだよ！
console.log(`合計${totalSteps}歩歩いたね！`);  // → 合計15歩歩いたね！
実行結果がここに表示されます

戻り値returnを使う

returnを使うと、次の処理でもその値を使えるようになる。
関数の処理を終わらせて、その値を返すことができる。


function eat(food) {
    console.log(`・食べ物「${food}」を食べました。`);
    console.log(`　出てきたもの：💩`);
    return "💩";  // 食べた結果
}

let result1 = eat("トマト");
// → ・食べ物「トマト」を食べました。
// → 　出てきたもの：💩


function selfControl() {
    console.log("・オナニーしました。");
    console.log("　出てきたもの：🤍");
    return "🤍";  // 処理の結果
}

let result2 = selfControl();
// → ・オナニーしました。
// → 　出てきたもの：🤍

(4)ライブラリを使う

ライブラリ：機能付きオブジェクトの集まり
「ライブラリ名.機能()」で、任意の機能を呼び出せる

ライブラリの種類

①自作ライブラリ：自分で便利な機能をまとめて作ったオブジェクト。
②標準ライブラリ：JavaScriptに最初から備わっている便利な機能群。
③外部ライブラリ：他人が作った便利な機能をCDNやnpmで読み込んで使うもの。

自作ライブラリとして、おやすみライブラリを作ってみたよ！


const OyasumiLib = {
    saynemui: function() {
        console.log("(｡•́︿•̀｡) もうねむい");
    },
    sweetDreams: function() {
        console.log("(ღ˘⌣˘ღ) 続きは夢でしよ♡");
    },
    sayGoodnight: function(name) {
        console.log(`(*˘︶˘*).｡.:*☆ おやすみ、${name}。また夢でね！`);
    }
};

// 呼び出し例
OyasumiLib.saynemui();                   // → (｡•́︿•̀｡) もうねむい
OyasumiLib.sweetDreams();                // → (ღ˘⌣˘ღ) 続きは夢でしよ♡
OyasumiLib.sayGoodnight("うーろんくん"); // → (*˘︶˘*).｡.:*☆ おやすみ、うーろんくん。また夢でね！

文字列型

同じ足し算でも、文字列型によって結果が違う

string型：10＋10＝1010 （文字列として認識されるから、数字としては計算されない）
int型      ：10＋10＝20
date型  ：2025/7/2＋10＝2035/7/12 （日付け型にすることで、1日足すと翌日に日付になる）


        // string型の例
        let str1 = "10";
        let str2 = "10";
console.log(`string型：${str1}＋${str2}＝${str1 + str2}`);
        // → 文字列連結になるので 1010

        // int型の例
        let int1 = 10;
        let int2 = 10;
console.log(`int型：${int1}＋${int2}＝${int1 + int2}`);
        // → 数値の計算になるので 20

        // date型の例
let dateObj = new Date("2025/07/02");
dateObj.setDate(dateObj.getDate() + 10);  // 10日後を計算
let y = dateObj.getFullYear();
let m = (dateObj.getMonth() + 1).toString().padStart(2, "0");
let d = dateObj.getDate().toString().padStart(2, "0");
console.log(`date型：2025/7/2＋10日＝${y}/${m}/${d}`);
        // → 10日後の日付を表示

for文を使ったループ処理

日付表示

日付は多重ループで表せる。


//for文の基本構文
for(初期化; 条件; 増減) {
    // 処理
}
        

/* ===============================
100日前くらいに配列を用いて書いたコード
=============================== */


const month_list = ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"];

//任意の日付をコンソール表示するために指定
const targetMonth = "7月";
const targetDay = 2;

// 月と日を組み合わせて表示
month_list.forEach((month) =>{// アロー関数：矢印（=>）を使うと短く書ける、「=>」は「この計算をするよ」という意味
    let month_days;
    
    // includes（）で各月の日数を設定配列の中に、指定した値が含まれているかどうかを確認
    if (["1月","3月","5月","7月","8月","10月","12月"].includes(month)) {
        month_days = 31;
    } else if (["4月","6月","9月","11月"].includes(month)) {
        month_days = 30;
    } else {  // 2月の場合
        month_days = 28;
    }
    
    /*1月1日〜12月31日まで表示させるには
    for (let day = 1; day <= month_days; day++) {
        console.log(month + day + "日");
    }*/

    //任意の日付をコンソール表示
    for (let day = 1; day <= month_days; day++) {
        if (month === targetMonth && day === targetDay) {
            console.log("見つけた！ " + month + day + "日！");
        }
    }
});
        

/* ===============================
   配列を使わずに書いてみたコード
=============================== */
//年月日分秒全てこのようにループで表せる
const year = (nth) => {           
    let count = 1;
    for(let i = 2025; i < 2100; i++){
        if (count === nth) {
            return i;
        }
        count++;
    }
    return "範囲外"; // ループを抜けた場合
};

let n = 3; // 3年後の西暦を表示したい
console.log(n + "年後の西暦は " + year(n) + "年です。"); // → 3年後の西暦は2027年です。

=============================== */
//2025年から2100年まで、年月日で表示するループ
for(let year = 2025; year < 2999; year++){
    for(let month = 0; month < 12; month++){
//まずは月毎の日数を設定
if(month === 4 || month === 6 || month === 9 || month === 11){
    month_days = 30; // 30日
}else if(month === 1 || month === 3 || month === 5 || month === 7 || month === 8 || month === 10 || month === 12){
    month_days = 31; // 31日
}else if(month === 2 && year % 4 === 0){ // 2月は閏年の場合29日、平年の場合28日
    month_days = 29;
}else if(month === 2 && year % 400 === 0){ // 400で割り切れる年もは閏年で29日
    month_days = 29;
}else{
    month_days = 28;
}
for(let day = 1; day < month_days; day++){
        }
    }console.log(year, month, day);
}

グラフィック表示

for文で看板風のグラフィックを作ってみた。


let text = "HELLO";

for (let y = 0; y < 5; y++) {
    let line = "";
    for (let x = 0; x < 10; x++) {
        if (y === 0 || y === 4) {
            // 一番上か一番下は全部枠
            line += "*";
        } else if (x === 0 || x === 9) {
            // 左右の枠
            line += "*";
        } else if (y === 2 && x >= 2 && x < 2 + text.length) {
            // y=2行目のx=2~6に文字を置く
            line += text[x - 2];
        } else {
            // それ以外は空白
            line += " ";
        }
    }
    console.log(line);
}