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

Hurry Coderと魔法の数字

登場人物

  • ハリー先輩・・・忙しい先輩。「ハリー・コーダー」と呼ばれている。
  • ワイ・・・・・・ワイ

とあるシステム開発会社にて

ハリー先輩「なあ、やめ太郎」

ワイ「なんでっか、ハリー先輩?」

ハリー先輩「去年お前が構築したマンガ販売サイトあるやろ?」
ハリー先輩「その修正作業を今やってるんやけど」

ワイ「あー、あの案件、ハリー先輩が引き継いでくれたんでっか」
ワイ「おおきにです」

ハリー先輩「それはええねんけど、ちょっと分からへんことがあんねん」

ワイ「なんでっか?」

ハリー先輩「あのな・・・」

const campaignMessage = (campaignStatus: number): string => {
  switch (campaignStatus) {
    case 0:
      return "もうすぐコミック半額キャンペーンが始まるよ!"

    case 1:
      return "キャンペーン開催中!対象コミックスはこちら!"

    case 2:
      return "次回キャンペーンもお楽しみにね!"

    default:
      return "エラーが発生しました。サイト管理者にお問い合わせください。"
  }
}

ハリー先輩「↑この関数についてやねん」
ハリー先輩「campaignStatusという引数の値によって」
ハリー先輩「画面に表示するメッセージを出し分けてるみたいなんやけど」

ワイ「はい」

ハリー先輩「このcampaignStatusっていう数値、何なん?」
ハリー先輩「キャンペーンの状態を表してるとは思うんやけど」
ハリー先輩「0とか1とか2って、何なん?」

ワイ「ああ、それなら・・・」

0 -> キャンペーン開催前
1 -> キャンペーン開催中
2 -> キャンペーン終了後

ワイ「↑こういう意味ですわ」
ワイ「APIから取得した数値なんですわ」

ハリー先輩「ああ、そうなんか」
ハリー先輩「初めてこのソースを見る人は、数値だけだとよう分からんから」
ハリー先輩「一応コメントとか書いといてや」

ワイ「何を言うてはるんですか」
ワイ「ちゃんと社内Wikiのどっかに書いてありまっせ」

ハリー先輩「どっかて」
ハリー先輩「どこがちゃんとやねん」
ハリー先輩「貴様も把握しとらんやないかい」

ワイ「ぐぬぬ」

ハリー先輩「ええか?」
ハリー先輩「こういう数値はマジックナンバーいうねん」

ワイ「マ、マジックナンバーでっか?」

マジックナンバーとは

ハリー先輩「マジックナンバーいうんはな・・・」

保守担当「さあ、修正するためにコード読んでいこか」
保守担当「ん?campaignStatus === 0・・・?」
保守担当「なんやこの0って」
保守担当「何を表しとるかよう分からんけど、プログラムはちゃんと動いとるな」
保守担当「なんか魔法の数字みたいやな」

ハリー先輩「↑こんな感じや」

ワイ「上手いこと言うたもんですな」
ワイ「ほな、どう書けばええんですか」

ハリー先輩「せっかくTypeScriptを導入してんねやから」
ハリー先輩「enum型でも使えばええやろ1

enum CampaignStatus {
  BeforeStart = 0,
  IsStarted = 1,
  IsEnd = 2
}

ハリー先輩「↑こうや」

ワイ「へえ」
ワイ「それぞれの数値に名前を付けてやった感じでっか」

ハリー先輩「せや」
ハリー先輩「そんで、関数の方は・・・」

const campaignMessage = (campaignStatus: CampaignStatus): string => {
  switch (campaignStatus) {
    case CampaignStatus.BeforeStart: // <- 変更
      return "もうすぐコミック半額キャンペーンが始まるよ!"

    case CampaignStatus.IsStarted: // <- 変更
      return "キャンペーン開催中!対象コミックスはこちら!"

    case CampaignStatus.IsEnd: // <- 変更
      return "次回キャンペーンもお楽しみにね!"

    default:
      return "エラーが発生しました。サイト管理者にお問い合わせください。"
  }
}

ハリー先輩「↑こうや」

ワイ「あー、確かに」
ワイ「さっきまでのコードは・・・」

0だったら」
"もうすぐコミック半額キャンペーンが始まるよ!"って表示してや!」

ワイ「↑こんな感じでしたけど」

CampaignStatus.BeforeStartだったら」
"もうすぐコミック半額キャンペーンが始まるよ!"って表示してや!」

ワイ「↑こっちの方が説明的で良いかもしれまへんな」
ワイ「初めてこのコードを読んだ人でも分かりそうですわ・・・」

ハリー先輩「せやろ」
ハリー先輩「『リーダブルコード2でいう説明変数みたいなもんや」

ワイ「なるほどー」

「この数値は、こんな意味でっせ!」

ワイ「ってことを命名で表現するわけでんな」

まとめ

  • マジックナンバーやめよう
  • 説明変数を使おう
  • enumは、名前と数値の対応表みたいに使える3

ワイ「ってことでんな!」

ハリー先輩「そんなとこや!」

ワイ「ハリー先輩、今日も勉強になりましたわ!」

〜おしまい〜


  1. 型安全性的には、readonlyなオブジェクトから生成したUnion型を使用するほうが良いかもです。 

  2. 有名な本です。 

  3. 今回の場合、数値を書かなくても同じように動きます。また、文字列も指定できます。 

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