KDE BLOG

バイブス

【JavaScript 小ネタ】JSXなどのテンプレート上でクラス名に入る無駄な空白(スペース)をよしなに削除する方法

ちょっとした小ネタを思いついたので書いておきたいと思います。

JSX上などで、クラス名の出し分けとかによくある下記のような記述をすると、場合によっては無駄な空白(スペース)が開発者ツール上で見えたりして気になったりしないでしょうか?

<a href="#" className={`foo ${isActive ? "is-active" : ""} ${isHidden ? "is-hidden" : ""}`}>test</a>

Chromeの開発者ツールでの見え方

f:id:jinseirestart:20181104163937p:plain

foo の後ろに、無駄な空白が入ってしまっています。

こういう時皆さんはどうしていますか?

自分の場合は今まで、挙動には問題ないのでそのまま無視するか、下記のように空白が入ることを想定した書き方をしていました。

<a href="#" className={`foo${isActive ? " is-active" : ""}${isHidden ? " is-hidden" : ""}`}>test</a>

${...} の前に空けていた空白を削除して詰めれば、無駄な空白は生まれなくなります。
しかし 可読性が低下 してしまうので良い方法とは言えません。
何かスマートに解決できる方法があればいいなーとなんとなく思っていました。

続きを読む

【JavaScript】ちゃんと理解しておきたいPromiseの勘所など

以前下記の記事でPromiseについて調べたことをまとめましたが、どうもすっきりと腹落ちしていませんでした。

kde.hateblo.jp

ようやく最近になってふと腹落ちして理解できたと思うので、改めて自分の頭の整理のためにまとめておきたいと思います。

  • Promiseとは
  • Promiseの勘所
    • 絶対に必要な基礎知識
    • Promise.resolve() は渡す引数によって返されるPromiseオブジェクトが変わる
    • then() は 非同期で行われるPromise.resolve() とほぼ同じ役割
    • Promiseオブジェクトを渡した例
  • Promiseでの逐次(直列)処理
    • Array.prototype.reduce() と組み合わせて見やすく書く
  • Promise.race() を使ったタイムアウト処理
  • まとめ
  • 参考
続きを読む

【JavaScript基礎】Fetch APIの基礎

これまでFetch APIをなんとなくで使っていてちゃんと理解できていなかったので、改めて調べ直して使い方を理解していこうと思います。

  • Fetch API概要
  • 対応ブラウザ
  • 構文
    • 第一引数(input)
    • 第二引数(init)
    • 戻り値
  • 基本的なリクエスト&レスポンスの取得
    • fetch() から返されるPromiseは404でもrejectされない
  • Response オブジェクト
    • プロパティ
    • メソッド
    • Response オブジェクトが得られるタイミング
  • まとめ
  • 参考
続きを読む

【ES2015】スプレッド演算子の基礎まとめ

ES2015から使えるスプレッド演算子Spread Operator)について理解がまとまっていないので、きちんとまとめておきたいと思います。

  • 構文
  • 関数呼び出しでの例
  • 配列リテラルでの例
    • 配列のコピー
  • Objectリテラルでの例
  • レスト構文
    • 分割代入でプロパティをまとめる
    • 分割代入で配列を分割する
    • 可変長引数の関数を作る
  • その他の使い方
    • 文字列を配列に分割
    • NodeListやHtmlCollectionを配列化
  • まとめ
  • 参考
続きを読む

【JavaScript基礎】Array.prototype.reduce() をしっかり理解する&サンプル集

配列のメソッドの中でも個人的にとっつきにくくて苦手意識のあった Array.prototype.reduce()
しかしAPIから取得したデータを扱いやすいように整形できたりと、使いこなせればとても強力なツールになることは間違いなく、この苦手意識を克服するために理解を深めつつ、いくつかのサンプルを作ってみたいと思います。

  • Array.prototype.reduce() の概要
    • 構文
    • 原則、初期値はつけた方が良い
  • サンプル集
    • 配列をオブジェクトにする
    • 配列をインデックス付きのオブジェクトにする
    • 配列内の要素から不要な値を削除する
    • 二次元配列を一次元配列にする
    • 多次元配列を一次元配列にする(再帰
    • 条件にマッチする要素から値を出す
    • 配列内の重複している値を除外する
    • filter() + map() の代わりに使う
    • テンプレートリテラルのタグ関数で文字列の組み立てに使う
  • まとめ
  • 参考
続きを読む

【ES2015】テンプレートリテラルのタグについての基礎

今更ながらES2015のテンプレートリテラルに、タグ という機能があることを知ったので、それについて調べてみようと思います。

  • テンプレートリテラルとは
  • タグとは
    • タグを使ってテンプレートリテラル内の変数を大文字にする例
  • 生の文字列にアクセスする
    • String.raw()メソッド
      • 構文
      • 使いどころ
  • まとめ
  • 参考
続きを読む

CSS Grid Layout の基礎について社内勉強会で発表した

先日、社内で定期的に開催されているフロントエンジニア向けの勉強会で発表する機会があり、CSS Grid Layoutについて興味があったので、基本的な使い方などを調べて発表しました。
スライドは下記になります。

CSS Grid Layoutのもっとも優れていると感じたところ

CSS Grid Layoutは、複雑なレイアウトが簡単に実現できるというのが大きな特徴ではありますが、実は一番すごいと感じたのは、HTML(構造)とCSS(見た目)を分離できるという点です。

もともとCSSが生まれた背景には、構造と見た目を分離するという目的があったのですが、なんだかんだでレイアウト用のdivを入れなければならなかったり、要素の順番を本来の順番にはできなかったことが多々ありました。

しかし今回、簡単ながらサンプルを作ってみて、そういったレイアウトのためにHTMLを何かしたということはありませんでした。ついにこのような形が実現できるようになったのかと感動しました。 下記がそのデモになります。良かったらHTMLコードを見てみてください。 とてもシンプルな構造というのが分かるかと思います。
CSS Grid Layout Demo

ブラウザの対応も進んできて、実際に案件で使える日もそう遠くないと思います。
個人プロジェクトなどでは積極的に使っていき使いこなせるようになっていきたいと思います。