CSS Grid Layout の基礎について社内勉強会で発表した
先日、社内で定期的に開催されているフロントエンジニア向けの勉強会で発表する機会があり、CSS Grid Layoutについて興味があったので、基本的な使い方などを調べて発表しました。
スライドは下記になります。
CSS Grid Layoutのもっとも優れていると感じたところ
CSS Grid Layoutは、複雑なレイアウトが簡単に実現できるというのが大きな特徴ではありますが、実は一番すごいと感じたのは、HTML（構造）とCSS（見た目）を分離できるという点です。
もともとCSSが生まれた背景には、構造と見た目を分離するという目的があったのですが、なんだかんだでレイアウト用のdivを入れなければならなかったり、要素の順番を本来の順番にはできなかったことが多々ありました。
しかし今回、簡単ながらサンプルを作ってみて、そういったレイアウトのためにHTMLを何かしたということはありませんでした。ついにこのような形が実現できるようになったのかと感動しました。
下記がそのデモになります。良かったらHTMLコードを見てみてください。
とてもシンプルな構造というのが分かるかと思います。
CSS Grid Layout Demo
ブラウザの対応も進んできて、実際に案件で使える日もそう遠くないと思います。
個人プロジェクトなどでは積極的に使っていき使いこなせるようになっていきたいと思います。
【React】複数のProviderで1つのstoreを参照 ＆ React+Reduxの実装基礎まとめ
【JavaScript】Promiseを使った非同期処理
Promiseについてきちんと理解できていなかったので初歩から学ぶ。
- Promiseとは
- 使用できる環境
- 基本の構文
- Promise.prototype.then()
- Promiseの状態変化
- Promise.prototype.catch()
- catchメソッドのメリット
- 1. コードの見通しがよくなる
- 2. onResolved時にエラーが起きた場合でも拾うことができる
- インデント
- catchメソッドのメリット
- Promise.resolve()
- Promiseオブジェクトが渡された場合
- Thenableなオブジェクトが渡された場合
- それ以外の値が渡された場合
- Promise.reject()
- Promiseをつなげて使う
- thenは常に非同期であることに注意
- エラーハンドリング
- Promise.all()
- エラー発生時
- Promise.race()
- まとめ
- 参考
