92
Help us understand the problem. What are the problem?

posted at

updated at

TypeScriptで条件分岐時の可読性の高い変数設定

本記事を対象とする人

  • TS,JSで極力letではなくconstを使うべきと思っている人

結論 ts-patternが便利

解説

何かのオブジェクトを参照して場合分けして、変数を定義したい場合があると思います

  let platform = '';
  if (game.name === 'ff3') {
    platform = 'fc';
  } else if (game.name === 'ff4') {
    platform = 'sfc';
  }

このケースでletは使いたくないため、こうする

  const platform = (() => {
    if (game.name === 'ff3') {
      return 'fc';
    } else if (game.name === 'ff4') {
      return 'sfc';
    }
    return '';
  })();
//---or
  const platform = (() => {
    switch (game.name) {
      case 'ff3':
        return 'fc';
      case 'ff4':
        return 'sfc';
    }
    return '';
  })();

このようなケースの場合、nameの一つの変数だけ参照すればよいためまあよいか、となるが
2つ変数の参照が必要になった場合一気に可読性が悪くなる

  const gameName = (() => {
    if (game.genre === 'rpg') {
      if (game.company === 'enix') {
        return 'dq1';
      } else if (game.company === 'nintendo') {
        return 'pokemon';
      }
      return 'ff1';
    } else if (game.genre === 'simulation') {
      if (game.company === 'maxis') {
        return 'simcity';
      }
      return '';
    }
    return '';
  })();

ts-patternを使う

ぱっと見でwithで何を判定して何を返すかわかりやすくなり
かつ、constにできました。

  const gameName = match(game)
    .with({ genre: 'rpg', company: 'enix' }, () => 'dq1')
    .with({ genre: 'rpg', company: 'nintendo' }, () => 'pokemon')
    .with({ genre: 'rpg' }, () => 'ff1')
    .with({ genre: 'simulation', company: 'maxis' }, () => 'simcity')
    .otherwise(() => '');

ということで、分岐して変数を設定する場合にはts-patternを積極的に活用していこうかと考えています。

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
Sign upLogin
92
Help us understand the problem. What are the problem?