2019-04-04

Ruby Haml タグやコンテンツが色々入る要素にはまる。 SyntaxError - Illegal nesting

Haml Ruby

Hamlテンプレートでタグやテキスト要素が混在したコンテンツを作成していてSyntaxErrorになったのでメモ。

エラーになる例

%div 2019年4月11日から
  %strong<> アイカツ！
  が再放送だよ!!
  %a(href="aikatsu")<
    %i.icon-help>
    詳しくはコチラ！

👇

Haml::SyntaxError - Illegal nesting: content can't be both given on the same line as %div and nested within it.

Haml はタグ内の要素はインデントかタグの直後に書くかで併用することができない

中に別のタグが入るようなコンテンツ要素はインデントを揃える必要がある

%div
  2019年4月11日から
  %strong<> アイカツ！
  が再放送だよ!!
  %a(href="aikatsu")<
    %i.icon-help>
    詳しくはコチラ！

👇

<div>
  2019年4月11日から  <strong>アイカツ！</strong>が再放送だよ!!
  <a href="aikatsu"><i class="icon-help"></i>詳しくはコチラ！</a>
</div>

　
pugに似たもんやろ。くらいにしか思ってなかったので何故エラー？って結構ハマってしまいました。
改行のコントロール持っ結構めんどいし… pugって超柔軟だったんだなーって改めて認識。(HamlがあってそこからSlimやpugができたからかもですが

[参考]

丸大食品煌彩ハムギフト GT-303 【丸大食品ハム詰め合わせお中元お歳暮ギフトセット】

出版社/メーカー: 丸大食品
メディア: その他
この商品を含むブログを見る

これはハム

2019-04-01

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

JSX React JavaScript HTML

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.

[参考]

コメントする力

作者: 竹田圭吾
出版社/メーカー: PHP研究所
発売日: 2013/08/27
メディア: 単行本（ソフトカバー）
この商品を含むブログ (3件) を見る

2019-04-01

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

Aikatsu! Blog

春ですねー。

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

↓↓↓動画↓↓↓https://t.co/VGGdN1lTTR pic.twitter.com/u41SelzjxC
— ピンキーポップヘップバーン🍿🐏 (@PinkyPopHepburn) 2019年1月17日