Help us understand the problem. What is going on with this article?

4歳娘「パパ、constしか使わないで?」

休日ワイ

ワイ「(カタカタカタカタカタ・・・)」
ワイ「(ッターーーーン!!!)」
ワイ「あっ、ぜんぶ消えてもうた

娘(4歳)「パパ?」
娘「私のお願いしたシステム、作ってくれた?」
娘「曜日によって色々なメッセージが表示されるシステム」

ワイ「おお、鋭意製作中やで(震え声
ワイ「今、休日かどうかを表示する機能のコーディングを開始したところや」

JavaScript
// 曜日番号を取得。
const dayNumber = new Date().getDay();

ワイ「まず、↑ここで曜日の番号を取得して」
ワイ「dayNumberっていう名前を付けてんねん」
ワイ「ちなみに、番号と曜日の対応は・・・」

0 → 日曜日
1 → 月曜日
2 → 火曜日
3 → 水曜日
4 → 木曜日
5 → 金曜日
6 → 土曜日

ワイ「↑こんな感じやな」
ワイ「つまり、06土日やからお休みやねん」

娘「うんうん」

ワイ「せやから・・・」

JavaScript
const isHoliday = dayNumber === 0 || dayNumber === 6;

ワイ「dayNumberが、0または6の場合は」
ワイ「変数isHolidaytrueになるようにしてんねん」

娘「なるほどね」
娘「逆に06以外の場合はisHolidayfalseになるんだね」

ワイ「せや」
ワイ「それで、isHolidaytrueなのかfalseなのかによって」
ワイ「表示する文字列を変えるんや」

JavaScript
let dayText;

if (isHoliday) {
  dayText = "お休み";
} else {
  dayText = "平日";
}

ワイ「↑こうやな」

娘「パパ、letを使わないで?

ワイ「え・・・・・?」

娘「constしか使わないで?

ワイ「なんで・・・・・?」

娘「constなら再代入されないから多少の安心感があるけど」
娘「letだと、どこかで変な値が再代入されそうで」
娘「とっても不安なの・・・

ワイ「ええ・・・・・?」

娘「コードを読むときも、変数の中身が変わる可能性を意識して読まないといけないから」
娘「疲れちゃうし・・・」

ワイ「ああ・・・」

娘「もっと言うと、constでも不安なくらいなの」
娘「constで宣言した変数でも、オブジェクトのプロパティは上書きできちゃうからね」
娘「だから、letなんてもう耐えられないの

ワイ「そうなんか・・・・・」

条件分岐したい時はどうする

ワイ「でもな、娘ちゃん・・・」

JavaScript
let dayText;

if (isHoliday) {
  dayText = "お休み";
} else {
  dayText = "平日";
}

ワイ「↑こんな感じで、if文で条件分岐して」
ワイ「それによって代入する値を変えたい時はどうすんの・・・?」

JavaScript
const dayText = if (isHoliday) {
  "お休み";
} else {
  "平日";
}

ワイ「↑こんな感じか?」

娘「いや、それだとエラーが出ちゃうね」
娘「if文は、だから値を返せないの

ワイ「ほえぇ・・・」

娘「だから、そういう場合は・・・」

JavaScript
const dayText = isHoliday ? "お休み" : "平日";

娘「↑これでいいんじゃない?」

ワイ「いや、三項演算子は・・・」
ワイ「宗教上の理由で使えへんねん」

娘「そっか」
娘「じゃあ・・・」

JavaScript
const dayText = (() => {
  if (isHoliday) {
    return "お休み";
  } else {
    return "平日";
  }
})();

娘「↑これはどう?」

ワイ「何これ」

娘「関数をその場で作って実行して、"お休み"または"平日"と言う文字列を返してるの」
娘「isHolidaytrueなのかfalseなのかによって」
娘「返す文字列が変わる・・・」
娘「そんな関数だね」

ワイ「関数をその場で作って実行・・・?」
ワイ「ぐぬぬ・・・」
ワイ「こんなんを頻繁に書く自信ないわ・・・」

娘「仕方ないなぁ」
娘「じゃあ」
娘「値を返せるifみたいな関数を作ってあげるね」

関数iff

娘「はい、どうぞ!」

JavaScript
const iff = condition => {
  const thenMethod = thenFunc => {
    const elseMethod = elseFunc => {
      return condition ? thenFunc() : elseFunc();
    }
    return { else: elseMethod };
  };
  return { then: thenMethod };
};

娘「ifは予約語だからiffって名前にしたよ」

ワイ「何これ」
ワイ「ぜんぜん読めへんけど」

娘「うーん」
娘「とりあえずね・・・」

JavaScript
const dayText =
  iff(isHoliday)
    .then(() => "お休み")
    .else(() => "平日");

娘「使い方は↑こんな感じ」

ワイ「おお、使い方は割とシンプルやな」
ワイ「なんか、Elmif式に似てるな」

Elm
dayText =
    if isHoliday then
        "お休み"

    else
        "平日"

ワイ「Elmだと↑こうやもんな」
ワイ「そうか、Elmのifだから値を返せるんやな」

娘「うん」
娘「おんなじ感じだね」
娘「っていうか真似したんだけどね」

ワイ「でも娘ちゃん」
ワイ「なんか処理した結果を返したい場合はどうするん?」
ワイ「例えばif文で言うと・・・」

JavaScript
let dayText;

if (isHoliday) {
  const a = "";
  const b = "";
  const c = "";

  const holidayText = a + b + c;

  dayText = holidayText;
} else {
  const a = "";
  const b = "";

  const weekdayText = a + b;

  dayText = weekdayText;
}

ワイ「↑こんな感じで」
ワイ「文字列を結合してから使いたい場合とか」

娘「そういう場合は・・・」

JavaScript
const dayText =
  iff(isHoliday)
    .then(() => {
      const a = "";
      const b = "";
      const c = "";

      const holidayText = a + b + c;

      return holidayText;
    })
    .else(() => {
      const a = "";
      const b = "";

      const weekdayText = a + b;

      return weekdayText;
    });

娘「↑こんな感じだね」

ワイ「そうか」
ワイ「thenメソッドやelseメソッドに渡す関数の中で」
ワイ「returnで値を返せばええんやな」

娘「そうそう」

これでletなしで行けそうだが・・・?

ワイ「ありがとうやで娘ちゃん」
ワイ「これでletなしで行けそうや」
ワイ「次は曜日に合わせたメッセージを表示する機能や」
ワイ「(カタカタカタカタ・・・)」
ワイ「・・・あれ!?

JavaScript
let dayMessage;

switch (dayNumber) {
  case 0:
    dayMessage = "日曜日やで!ゆっくり休んでや!";
    break;
  case 1:
    dayMessage = "月曜日やで!今週も頑張ろうな!";
    break;
  case 2:
    dayMessage = "火曜日やで!";
    break;
  case 3:
    dayMessage = "水曜日やで!";
    break;
  case 4:
    dayMessage = "木曜日やで!";
    break;
  case 5:
    dayMessage = "金曜日やで!もう少しで休みや!";
    break;
  case 6:
    dayMessage = "土曜日やで!明日も休みやで!";
    break;
  default:
    dayMessage = "曜日番号がおかしいで!";
    break;
}

ワイ「↑この部分どうしよ・・・」
ワイ「let使ってもうたわ・・・」
ワイ「switch文のときは使いたくなるなぁ・・・」

娘「仕方ないなぁ」
娘「じゃあ」
娘「switchっぽくて値を返せる関数も作るね」

関数switchf

娘「はい、できたよ!」

JavaScript
const switchf = switchVal => {
  const caseMethod = (funcToDo) => caseVal => {
    const isFixedNow = !funcToDo && switchVal === caseVal;
    const thenMethod = (funcToDo, isFixedNow) => thenFunc => {
      const defaultMethod = (funcToDo) => defaultFunc => {
        return (funcToDo || defaultFunc)();
      };
      return {
        case: caseMethod(isFixedNow ? thenFunc : funcToDo),
        default: defaultMethod(isFixedNow ? thenFunc : funcToDo)
      };
    };
    return { then: thenMethod(funcToDo, isFixedNow) };
  };
  return { case: caseMethod() };
};

娘「switchも予約語だからswitchfって名前にしたよ」

ワイ「これまた訳わからんコードやな」

娘「使い方は↓こんな感じ」

JavaScript
const dayMessage =
  switchf(dayNumber)
    .case(0).then(() => "日曜日やで!ゆっくり休んでや!")
    .case(1).then(() => "月曜日やで!今週も頑張ろうな!")
    .case(2).then(() => "火曜日やで!")
    .case(3).then(() => "水曜日やで!")
    .case(4).then(() => "木曜日やで!")
    .case(5).then(() => "金曜日やで!もう少しで休みや!")
    .case(6).then(() => "土曜日やで!明日も休みやで!")
    .default(() => "曜日番号がおかしいで!");

ワイ「ほええ、今回も使い方は簡単なんやな」

娘「うん」

ワイ「でもさ、それくらいならただのオブジェクト配列でも良くない?」

JavaScript
const dayMessageMap = {
  0: "日曜日やで!ゆっくり休んでや!",
  1: "月曜日やで!今週も頑張ろうな!",
  2: "火曜日やで!",
  3: "水曜日やで!",
  4: "木曜日やで!",
  5: "金曜日やで!もう少しで休みや!",
  6: "土曜日やで!明日も休みやで!"
};

// または
const dayMessages = [
  "日曜日やで!ゆっくり休んでや!",
  "月曜日やで!今週も頑張ろうな!",
  "火曜日やで!",
  "水曜日やで!",
  "木曜日やで!",
  "金曜日やで!もう少しで休みや!",
  "土曜日やで!明日も休みやで!"
];

ワイ「↑これでも、曜日番号を元にメッセージを取得できるで」

娘「まあね」
娘「でもswitchf関数ならdefaultメソッドもあるよ」

ワイ「ああ、なるほど」
ワイ「どのケースとも一致しなかった場合のことも指定できるわけか」
ワイ「それはええかもね」
ワイ「ありがとうやで、娘ちゃん!」

これで何とかなりそう

ワイ「これで何とかconstだけで行けそうや・・・」
ワイ「それにしても」
ワイ「娘ちゃんの『再代入できる隙を作らない』という強いこだわり・・・」
ワイ「感動したわ・・・!」

娘「てへへ」

ワイ「関数も、2つも作ってくれてありがとうな」
ワイ「お礼にこのお菓子とジュースをあげるから、向こうの部屋で飲んできいや?」

娘「わーい、ありがとうパパ!」

ワイ「ゆっくり飲んで来てな!」

娘「うん!」

ワイ「・・・よし、行ったな」
ワイ「これで再代入し放題や!!!
ワイ「手続き大好きや!!!」
ワイ「副作用?そんなん知らんわ!!!」

よめ太郎「(クズやん)」

〜おしまい〜

この記事もよろしくやで!

4歳娘「パパ、懐かしいJavaScript書いてるね!」

yumemi
みんなが知ってるあのサービス、実はゆめみが作ってます。スマホアプリ/Webサービスの企画・UX/UI設計、開発運用。Swift, Kotlin, PHP, Vue.js, React.js, Node.js, AWS等エンジニア・クリエイターの会社です。東京(三軒茶屋)/京都(四条烏丸)/札幌/大阪/福岡に展開中!Twitterで情報配信中https://twitter.com/yumemiinc
http://www.yumemi.co.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした