講義1 ハンズオン 解答

解答

別解は複数あります！
解3は理解できなくても良いです！

helloworld.js

const hello = "Hello!";
const world = "World";

// 解1
const answer = hello.concat(world);
console.log(answer);

// 解2
console.log(hello + world);

introduce.js

const person = {name: "John", age: 24};

// 解1
console.log("私の名前は" + person.name  + "です。年齢は" + person.age + "歳です。");

// 解2
const introduceText = `私の名前は${person.name}です。年齢は${person.age}歳です。`;
console.log(introduceText);

// 解3 
const { name, age } = person;
console.log(`私の名前は${name}です。年齢は${age}歳です。`);

検索キーワード 「JavaScript 分割代入」

day_of_week.js

解1

let day = "火"; // 月火水木金土日のいずれかを入れる

switch (day) {
    case "月":
        console.log("平日");
        break;
    case "火":
        console.log("平日");
        break;
    case "水":
        console.log("平日");
        break;
    case "木":
        console.log("平日");
        break;
    case "金":
        console.log("平日");
        break;
    case "土":
        console.log("休日");
        break;
    case "日":
        console.log("休日");
        break;
    default:
        console.log("曜日を指定してください");
}

解2

let day = "火"; // 月火水木金土日のいずれかを入れる

switch (day) {
    case "月" :
    case "火":
    case "水":
    case "木":
    case "金":
        console.log("平日");
        break;
    case "土":
    case "日":
        console.log("休日");
        break;
    default:
        console.log(`${day}は曜日ではありません`); // テンプレートリテラル
}

解3

let day = "火"; // 月火水木金土日のいずれかを入れる

let answerText = "";
switch (day) {
    case "月":
    case "火":
    case "水":
    case "木":
    case "金":
        answerText = "平日";
        break;
    case "土":
    case "日":
        answerText = "休日";
        break;
    default:
        answerText = `${day}は曜日ではありません`; // テンプレートリテラル
}
console.log(answerText);

検索ワード 「JavaScript スコープ内の変数にアクセスする方法」

oddEvenIdentifier.js

解1

const numArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// 1-10の配列の全ての値を判定する(= for)
for (let num of numArray) {
    // 偶数か奇数かの条件で処理を変える(= if)
    // 偶数は2で割って余りが出ない
    if (num % 2 === 0) {
        console.log('偶数：' + num);
    // 奇数は余りが出る
    } else {
        console.log('奇数：' + num);
    };
};

解2　

// 配列を定義しない方法

// 1-10の配列の全ての値を判定する(= for)
for (let i = 1; i <= 10; ++i) {
    // 偶数か奇数かの条件で処理を変える(= if)
    // 奇数は余りが出る
    if (i % 2 !== 0) { // 2で割った余りが0でない場合
        console.log(`奇数：${i}`); // テンプレートリテラル
    // 偶数
    } else {
        console.log(`偶数：${i}`);
    };
};

解3

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// タグ関数の定義
const tagged = (literals, value) => {
  // 三項演算子
  const type = value % 2 === 0 ? '偶数' : '奇数';
  return `${type}：${value}`;
}

// 配列のmapメソッド　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　タグ付きテンプレートリテラル
const taggedStrings = numbers.map(number => tagged`${number}`).join('\n');

console.log(taggedStrings);

検索キーワード

• 「JavaScript 三項演算子」
• 「JavaScript mapメソッド」
• 「JavaScript　タグ付きテンプレートリテラル」

calculate.js

計算問題

解1

// 掛け算を行う関数
function multiply (a, b) {
    return a * b;
};

// 割り算を行う関数
function devide (a, b) {
    return a / b;
};

// 1.
// 333 * 334
const preAnswer1 = multiply(333, 334);
// ÷ 3
const answer1 = devide(preAnswer1, 3)

console.log(answer1);

// 2.
// 4857 × 4444
const prePreAnswer2 = multiply(4857, 4444);
// × 1111
const preAnswer2 = multiply(prePreAnswer2, 1111);
// ÷ 4
const answer2 = devide(preAnswer2, 4);

console.log(answer2);

解2

// 掛け算を行う関数 (アロー関数)
const multiply = (a, b) => a * b ;

// 割り算を行う関数 (アロー関数)
const devide = (a, b) => a / b;

// 1.
//             (333 × 334) ÷ 3
const answer1 = devide(multiply(333, 334), 3);
console.log(answer1);

// 2.
//                      {[(4857 × 4444) × 1111] ÷ 4}
const answer2 = devide(multiply(multiply(4857, 4444), 1111), 4);
console.log(answer2);

解3

// クロージャ
const calcurarFactory = (initvalue = 1) => {
    let value = initvalue;

    return {
        multipy (num) {
            value *= num;
            return this;
        },
        devide(num) {
            value /= num;
            return this;
        },
        getReult() {
            return value;
        },
        reset() {
            value = 1;
            return this;
        }
    };
};

const calculater = calcurarFactory();

// チェーンメソッド
// 1.
// 333 * 334
const answer = calculater.multipy(333).multipy(334).devide(3).getReult();
// 2.
// {[(4857 × 4444) × 1111] ÷ 4}
const answer2 = calculater.reset().multipy(4857).multipy(4444).multipy(1111).devide(4).getReult();

console.log(answer, answer2)

検索キーワード「JavaScript クロージャ」・「JavaScript　チェーンメソッド」

national.js

解1

const data1 = {place: "Japan", isMarried: true, food: ["mochi", "sukiyaki"]};
const data2 = {place: "America", isMarried: false , food: ["steak", "hamburger"]};
const data3 = {place: "France", isMarried: true , food: ["cheese", "quiche"]};

// 関数定義
const iAmFrom = place => console.log(`私は${place} 出身です`); // テンプレートリテラル

const isMarry = bool => {
    if (bool) {
        console.log("結婚してます");
    } else {
        console.log("結婚してません");
    };
};

const likeFood = foodArry => {
    for (const food of foodArry) {
        console.log(food);
    };
    console.log("が好きです");
};

// 関数をさらに関数でまとめる
const introduce = (data) => {
    iAmFrom(data.place);
    isMarry(data.isMarried);
    likeFood(data.food);
};

// 処理実行
introduce(data1);
console.log("");
introduce(data2);
console.log("");
introduce(data3);

解2

const data1 = {place: "Japan", isMarried: true, food: ["mochi", "sukiyaki"]};
const data2 = {place: "America", isMarried: false , food: ["steak", "hamburger"]};
const data3 = {place: "France", isMarried: true , food: ["cheese", "quiche"]};

// 関数定義
const iAmFrom = place => `私は${place}出身です`;

// 三項演算子
const isMarry = bool => bool ? "結婚してます" : "結婚してません";

// joinメソッド
const likeFood = (foodArry) => foodArry.join("\n");

const introduce = ({ place, isMarried, food }) => {
    const text = `${iAmFrom(place)}\n${isMarry(isMarried)}\n${likeFood(food)}\nが好きです`;
    console.log(text);
};

introduce(data1);
console.log("");
introduce(data2);
console.log("");
introduce(data3);

解3

const data1 = {place: "Japan", isMarried: true, food: ["mochi", "sukiyaki"]};
const data2 = {place: "America", isMarried: false , food: ["steak", "hamburger"]};
const data3 = {place: "France", isMarried: true , food: ["cheese", "quiche"]};

// 関数定義（分割代入）
const formatData = ({　place, isMarried, food　})  => `私は${place}出身です\n${isMarried ? '結婚してます' : '結婚してません'}\n${food.join('\n')}\nが好きです`;

// 処理実行
console.log(formatData(data1));
console.log('')
console.log(formatData(data2));
console.log('')
console.log(formatData(data3));

検索ワード

• 「JavaScript 三項演算子」
• 「JavaScript 分割代入」
• 「JavaScript 配列 joinメソッド」
• 「JavaScript 分割代入」

他に使用されるもの

スプレッド演算子

const array = [1, 2, 3];
const obj = {a: "あ", b: "い"};

console.log(...array);
// 1 2 3

console.log({...obj, c: "う"});
// {a: "あ", b: "い", c: "う"}

検索ワード

• 「JavaScript スプレッド演算子」

宿題

// Date型は「日曜日」が0のため
const DAYS_OF_WEEK = ["日", "月", "火", "水", "木", "金", "土"];
const today = new Date();

console.log(days[today.getDay()]);