【JavaScript 小ネタ】JSXなどのテンプレート上でクラス名に入る無駄な空白（スペース）をよしなに削除する方法
ちょっとした小ネタを思いついたので書いておきたいと思います。
JSX上などで、クラス名の出し分けとかによくある下記のような記述をすると、場合によっては無駄な空白（スペース）が開発者ツール上で見えたりして気になったりしないでしょうか？
<a href="#" className={`foo ${isActive ? "is-active" : ""} ${isHidden ? "is-hidden" : ""}`}>test</a>
▼ Chromeの開発者ツールでの見え方
foo の後ろに、無駄な空白が入ってしまっています。
こういう時皆さんはどうしていますか？
自分の場合は今まで、挙動には問題ないのでそのまま無視するか、下記のように空白が入ることを想定した書き方をしていました。
<a href="#" className={`foo${isActive ? " is-active" : ""}${isHidden ? " is-hidden" : ""}`}>test</a>
${...} の前に空けていた空白を削除して詰めれば、無駄な空白は生まれなくなります。
しかし 可読性が低下 してしまうので良い方法とは言えません。
何かスマートに解決できる方法があればいいなーとなんとなく思っていました。
【JavaScript】ちゃんと理解しておきたいPromiseの勘所など
以前下記の記事でPromiseについて調べたことをまとめましたが、どうもすっきりと腹落ちしていませんでした。
ようやく最近になってふと腹落ちして理解できたと思うので、改めて自分の頭の整理のためにまとめておきたいと思います。
- Promiseとは
- Promiseの勘所
- 絶対に必要な基礎知識
- Promise.resolve() は渡す引数によって返されるPromiseオブジェクトが変わる
- then() は 非同期で行われるPromise.resolve() とほぼ同じ役割
- Promiseオブジェクトを渡した例
- Promiseでの逐次（直列）処理
- Array.prototype.reduce() と組み合わせて見やすく書く
- Promise.race() を使ったタイムアウト処理
- まとめ
- 参考
【JavaScript基礎】Array.prototype.reduce() をしっかり理解する＆サンプル集
CSS Grid Layout の基礎について社内勉強会で発表した
先日、社内で定期的に開催されているフロントエンジニア向けの勉強会で発表する機会があり、CSS Grid Layoutについて興味があったので、基本的な使い方などを調べて発表しました。
スライドは下記になります。
CSS Grid Layoutのもっとも優れていると感じたところ
CSS Grid Layoutは、複雑なレイアウトが簡単に実現できるというのが大きな特徴ではありますが、実は一番すごいと感じたのは、HTML（構造）とCSS（見た目）を分離できるという点です。
もともとCSSが生まれた背景には、構造と見た目を分離するという目的があったのですが、なんだかんだでレイアウト用のdivを入れなければならなかったり、要素の順番を本来の順番にはできなかったことが多々ありました。
しかし今回、簡単ながらサンプルを作ってみて、そういったレイアウトのためにHTMLを何かしたということはありませんでした。ついにこのような形が実現できるようになったのかと感動しました。
下記がそのデモになります。良かったらHTMLコードを見てみてください。
とてもシンプルな構造というのが分かるかと思います。
CSS Grid Layout Demo
ブラウザの対応も進んできて、実際に案件で使える日もそう遠くないと思います。
個人プロジェクトなどでは積極的に使っていき使いこなせるようになっていきたいと思います。
