React JSX コメントを書きたい！

ReactのJSXでコメントを書く方法のメモ

JSX Comment

JSXの{ }の中はJavaScriptが動作するので{ }で囲ってコメントを書くことができる

{/*  一行コメント */}

{/*
  複数行
  コメント
*/}

// も使えるが{ }の閉じタグの前に改行が必要。

{// 一行コメント
}

改行がないと、最後の}もコメントアウトされてエラーになる

{// 一行コメント}
// => Parsing error: Unexpected token

JSXの{/**/}コメントアウトはHTML側には出力されない

render(
  <p>コメントアウトは
    {/* ばーかばーか！ */}
    HTMLには
    {/*
      ウェーイwwww
      べろべろゔぁあー ⁽⁽ଘ(｡•ө•｡)ଓ⁾⁾
    */}
     出力されない
  </p>
);

👇

<p>
  コメントアウトは
  HTMLには
  出力されない
</p>

<!-- --> HTMLコメントアウトの出力

JSX上だけにコメントをするのは上記の方法で可能ですが、HTMLコメントを出力するのは少し大変でした。(必要性があるのか？という部分は置いておいて

直接<!-- --> を書くとエラー

render(
<div>
  <!-- comment -->
</div>
);
// => Parsing error: Unexpected token

{<!-- -->}もエラー

render(
<div>
  {<!-- comment -->}
</div>
);
// => Parsing error: Unexpected token

{"<!-- -->"}はエスケープされて文字列として出力される。変数にしても同じ

const comment = "<!-- comment -->";
render(
<div>
  {<!-- comment -->}
  {comment}
</div>
);
// 👇
<div>
  &lt;!-- comment --&gt;
  &lt;!-- comment --&gt;
</div>

dangerouslySetInnerHTML={{__html: ""}} を使う

dangerouslySetInnerHTML={{__html: ""}}という構文をDOMエレメントにつければ、そのnode内に__htmlの値が出力されるようです。

render(
  <div dangerouslySetInnerHTML={{__html: '<!-- comment -->'}} />
)

👇

<div>
  <!-- comment -->
</div>

※ dangerouslySetInnerHTMLを使う際はnode内に要素を記述できないので表示したい要素全てを__htmlの値に渡す必要がある

render(
  <div dangerouslySetInnerHTML={{__html: '<!-- comment -->'}}>
    HTML Comment is here!
  </div>
);
// => Can only set one of `children` or `props.dangerouslySetInnerHTML`.

React.FragmentにdangerouslySetInnerHTMLでコメントを付けても出力されない

単にコメントを入れたいだけならReact.Fragment使えばできそうと思ったのですが、出力されませんでした。

render(
  <React.Fragment
    dangerouslySetInnerHTML={{__html: '<p>comment?</p><!-- fragment comment -->'}}
  />
);

👇

React.Fragmentそのものは出力されないからDOMを出力後にdangerouslySetInnerHTMLの値をセットするのとができないのからなのかな？と思いました。

e. g.

See the Pen React Comment by KIKIKI (@chaika-design) on CodePen.

---

[参考]

• Babel, JSX, and Build Steps – React
• Conditional ie comments in react.js - Notes of Maks Nemisj
• DOM Elements – React
• React の dangerouslySetInnerHTML を使用する際に最低限気にするべきこと - Qiita

コメントする力

新しい元号なんてどうでもいい。アイカツ！を観ろ！

春ですねー。

すきなものについて全力投球した！！
みんな推しをすころうな！！！！
╰( ^o^)╮-｡･*･:=͟͟͞͞🍣

↓↓↓動画↓↓↓https://t.co/VGGdN1lTTR pic.twitter.com/u41SelzjxC

— ピンキーポップヘップバーン🍿🐏 (@PinkyPopHepburn) 2019年1月17日

こんにちは。こころに女児を、人生の大切なことはだいたいアイカツ!から学びました。

表題のとおりです。
アイカツを観ましょう。

MXで2019年4月11日 19:00〜 アイカツ！が再放送されますから、
忘れずに履修しましょう。
僕も記憶を消し去って最初から観たい。

1. アイカツを観れば物語を通して「Team GEEK」で言われるところの HRT (Humility / Respect / Trust)を学ぶことができます。
2. 次回予告後にある「アイカツ格言」では技術でも絵でも成長に必要なこころを示してくれます。
3. そして、人生を「これもアイカツだね。」と思うことで困難にもチャレンジできるこゝろを持つことができます。

もっと早くにアイカツ！と出逢っていればよかった。
そんな思いをしてほしくありません。

つまり、アイカツを観ろ！
新しい元号なんてどうでもいい。アイカツを観ろ！

MXが映らない？
dアニメストアに登録すればTVシリーズに加えて映画も見放題です。
つまり、実質無料ですね。
登録してアイカツを観ましょう。

こちらからは以上です。

これがアイカツおじさんの SHINING LINE*....

---

[参考]

• [アイカツ！] TOKYO MXにて「アイカツ！」再放送決定！｜作品紹介｜サンライズ
• 【アイカツ】私のアツいバーチャル活動！始まります！ﾌﾌｯﾋ - YouTube
• 『Team Geek』を読んだメモ - Qiita

劇場版アイカツ! 通常版 [DVD]

Lucrea(ルクリア) アイカツ! 星宮いちご ピンクステージコーデ 約22cm PVC製 塗装済み完成品フィギュア

Team Geek ―Googleのギークたちはいかにしてチームを作るのか

JavaScript (ES2015) Object の色々メモ

キーの名前とプロパティの変数名が同じなら省略できる

ES5

var cute = '星宮いちご';
var cool = '霧矢あおい';
var sexy = '紫吹蘭';

var soleil_es5 = {
  cute: cute,
  cool: cool,
  sexy: sexy,
};
console.log( soleil_es5 );
// { cute: '星宮いちご', cool: '霧矢あおい', sexy: '紫吹蘭' }

👇

ES2015

const cute = '星宮いちご';
const cool = '霧矢あおい';
const sexy = '紫吹蘭';
let soleil_es2015 = { cute, cool, sexy };
console.log( soleil_es2015 );
// { cute: '星宮いちご', cool: '霧矢あおい', sexy: '紫吹蘭' }

省略してるのとしてないのが入り交じるとﾁｮｲ混乱しそうだから各初期化で書き方統一したほうが良さそうな気もする。

メソッドの定義の方法

ES5までは method_name: function() { ... } の形でオブジェクトにメソッドを定義していたのが、ES2015からは method_name() { ... } という書き方で定義できる。

ES5

var soleil_es5 = {
  cute: cute,
  cool: cool,
  sexy: sexy,
  toString: function() {
    return 'ES5 Soleil ' + this.cute + ', ' + this.cool + ', ' + this.sexy;
  }
};
console.log( soleil_es5.toString() );
// ES5 Soleil 星宮いちご, 霧矢あおい, 紫吹蘭

👇

ES2015

const soleil_es2015 = {
  cute,
  cool,
  sexy,
  toString() {
    return `ES2015 Soleil ${this.cute}, ${this.cool}, ${this.sexy}`;
  }
};
console.log( soleil_es2015.toString() );
// ES2015 Soleil 星宮いちご, 霧矢あおい, 紫吹蘭

Objectのkeyを変数で指定する

ES5までは動的なkeyを使いたい時は、一度オブジェクトを作成してobj[key] = valueの形にする必要があったが、ES2015からは {[key]: value} の形で定義することができるようになった。

ES5

var key = 'pop';
var value = '夏樹みくる';

var es5Obj = {};
es5Obj[key] = value;
console.log('ES5', es5Obj);
// ES5 { pop: '夏樹みくる' }

👇

ES2015

const key = 'pop';
const value = '夏樹みくる';

const es2015Obj = {
  [key]: value,
};
console.log('ES2015', es2015Obj);
// ES2015 { pop: '夏樹みくる' }

キーを定義している [] 内で計算することもできる
e. g.

let i = 0;
const myObj = {
  [`index-${++i}`]: i * i,
  [`index-${++i}`]: i * i,
  [`index-${++i}`]: i * i,
};
console.log( myObj);
// { 'index-1': 1, 'index-2': 4, 'index-3': 9 }

ポエム

お仕事で関わってるプロジェクトで初めてのTypeScriptに触れてて

const hash = {[key: string]: number} = {foo: 1};

既存のコードでこんなのが出てきて、こはいかに？となり調べたらES2015で使えるObjectのkeyを変数で指定する方法で型指定してるとあり、keyを変数で指定するこの書き方を知らなかったので改めてES2015的なObjectを調べました。結果良い機会になりました。

しかし今関わっているプロジェクトがフロントだけでもReact + Redux + TypeScriptで通ってきてない技術が複合的にあるので一度に理解しようとしたり、ステップを抜かして学習しようとしたら挫折するパターンなんで着実に理解していきたいという思いがある一方、仕事できてねーって焦りがあるので学びが合って楽しいのですが心が折れないように気をつけないとという感じの日々です。

何かを変えたいと思ったらやはり関わる人を変えるか、環境を変えるかですね。
モダンフロントエンドマンになるぞー！と、春らしい意気込みするのであった。

---

[参考]

• ES2015以降のJavaScriptでObjectのkeyに変数を使う - Qiita
• 次にJSガッツリ書くときはTypeScriptで - Qiita

響け! ユーフォニアム 北宇治高校吹奏楽部、波乱の第二楽章 前編 (宝島社文庫)

響け! ユーフォニアム 北宇治高校吹奏楽部、波乱の第二楽章 後編 (宝島社文庫)

リズと青い鳥でドハマリして積んでたユーフォの小説一気読みしました🐡
大変良かった。なかよしコンビマジ尊い… 新作劇場版も楽しみ⭐