React(ES6)でif文内での変数宣言について

Question

ES6でReactをつかっているのですが、以下のような条件分岐ではletやconstではなく、varを使うのが最適でしょうか？

そもそも実装が良くないという指摘も含めて回答いただければと思います。

class Hoge extends React.Component{

   ~~

   ~~

   render() {
    // フォームの入力が成功だったときにメッセージがオブジェクト(this.state.message.job)に格納されます。デフォルトでは空です。
    const msgJob = this.state.message.job;  // 空またはオブジェクト

    // letやconstは使えない！？
    if (msgJob.length > 0) {
      var msgOfJob = msgJob.map(function(msg) {
        return (
          <p key={msg}>{msg}</p>
        );
      });
    } else {
      var msgOfJob = false;
    }
   }

  return (
      <div>
       {msgOfJob}
      </div>
   );
}

※変数名についてはご容赦ください・・・。

Answer 1

varとletの違いはスコープのみです。letはブロックスコープになるため、if文内で宣言した場合は、そのif文内でしか使用できません。逆にvarは関数スコープになるため、関数全体で使用する事が目的であれば、varを使っても問題ありません。どうしても、letにする場合は、スコープがif文の外側になるようにif文の外側で宣言しておきます。

let msgOfJob = false;
if (msgJob.length > 0) {
  msgOfJob = msgJob.map(function(msg) {
    return (
      <p key={msg}>{msg}</p>
    );
  });
}

この場合は、上記のように、予めfalseを入れておいて、if-elseではなくifのみにするように工夫することもできます。

constですと最初の宣言時にしか代入できないため、同じようにするには?:文を使う必要があります。

const msgOfJob = msgJob.length > 0
  ? msgJob.map(function(msg) {
    return (
      <p key={msg}>{msg}</p>
    );
  })
  : false ;

単文のみで書くことにこだわりがなければ、下記のように書いても良いでしょう。

const msgOfJobList = msgJob.map(msg => <p key={msg}>{msg}</p>);
const msgOfJob = msgOfJobList.length > 0 ? msgOfJobList : false;

そもそも、msgObJobは空配列[]であっても問題ないと思いますので思い切って、下記でも動くと思います。

const msgOfJob = msgJob.map(msg => <p key={msg}>{msg}</p>);

Comments

[twin_bird]

回答ありがとうございます。参考になりました！　falseを代入するやり方はvarでやっていたのですが、letでも問題ないのですね。
他に上げていただいたやり方を含め、試してみます！

Answer 2

Reactはこのエラーとは関わりがないです、ES2015の仕様です。

Babel Replで以下のコードを試したらエラーになります。
※constじゃなくてletでもエラーになります。

const x = 1;
if (x === 1) {
  const y = 2;
} else {
  const y = 2;
}

console.info(y);

letとconstはvarとはスコープが違いブロックスコープです。
ifブロックの中で使用された場合は、そのブロック内でしか使用できません。

Comments

[twin_bird]

回答ありがとうございます。
constやletでエラーが出るのは検証済みだったのですが、今回の場合はvarを用いてしまって良いのでしょうか？
再代入可能なvarはできるだけ避けた方が良いと認識しており、constやletを用いた別の方法を模索しております。