【テンプレートリテラル】JavaScriptで文字列結合がうまくいかない

簡単にいうとバックスラッシュで記載すべきところをシングルクオートで記載していたのが原因でした。

間違っていたコード

以下のように時間を表示しようとしていたのですが、これでは動きません。

class Clock extends React.Component{
  render(){
    this.now = new Date();
    this.time = '${this.now.getHours()}:${this.now.getMinutes()}:${this.now.getSeconds()}';
    return <p> {this.time}</p>
  }
}

ちなみに以下のように書くことも可能ですが、できるだけ新しい書き方（ES6以降）で書きたかったがためにはまりました。

class Clock extends React.Component{
  render(){
    this.now = new Date();
    this.time = this.now.getHours()+':'+this.now.getMinutes()+':'+this.now.getSeconds();
    return <p> {this.time}</p>
  }
}

正しいコード

以下のようにシングルクオートをバッククオートにするだけです。

class Clock extends React.Component{
  render(){
    this.now = new Date();
    this.time = `${this.now.getHours()}:${this.now.getMinutes()}:${this.now.getSeconds()}`;
    return <p> {this.time}</p>
  }
}

まとめ

これからもハマった箇所についてはログをまとめて行きますので、参考にして下さい。

フリーランスを目指すなら【テックパートナーズカレッジ】

未経験者向けWEBスクール【SHElikes】