【JavaScript】オブジェクト指向を意識したカルーセルスライダーの実装
これまでオブジェクト指向という言葉は知っていましたが、ほとんどその詳細について考えたり、勉強したりしたことがありませんでした。
しかしそれではいかんと思いいくつか入門記事を読んでみて、なんとなくオブジェクト指向がどういったものなのか、少し掴めてきたように感じました。
そのイメージを形にしてみようと、久しぶりに vanila.js でベーシックなカルーセルスライダーを実装してみました。
オブジェクト指向のプロの方たちから見たら全然かと思いますが、一応備忘録と、自分の頭の中の整理として。
- 完成物
- カルーセルの仕様
- 実装の考え方
- プロパティとメソッドをちゃんと意識して考えると簡単かもしれない
- アプリケーションをオブジェクトの集合として考える
- 実装ハマりポイント
【ES2017】async/await の基礎（前編）
Promiseの理解はできたので async/await について基礎から学んでいきたいと思います。
- async/await とは
- 簡単なサンプル
- Promiseを使った例
- Async Functionを使った例
- 簡単なサンプル
- Async Functionの定義方法
- Async Function の役割
- Async Functionは常にPromiseインスタンスを返す
- await 式について
- Async Functionでのエラーハンドリング
- Async Function呼び出し元をcatch メソッドでつなぐ
- try-catch を使う
- エラー処理は呼び出し元に記述するべきか、呼び出し先に記述すべきか
- awaitは常にPromiseを受け取る
- awaitはAsync Functionの直下のみ使用可能
- Async Functionでのエラーハンドリング
- Async Function 利用パターン
- 非同期の逐次処理
- 1. then をつなぐ
- 2. Array.prototype.reduce() を使う
- 3. Async Fuction を使う
- 非同期の並列処理
- Promiseの結果を再利用したい場合
- 非同期の逐次処理
- ここまでのまとめ
- 参考
【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() を使ったタイムアウト処理
- まとめ
- 参考
