【JavaScript】オブジェクト指向を意識したカルーセルスライダーの実装
これまでオブジェクト指向という言葉は知っていましたが、ほとんどその詳細について考えたり、勉強したりしたことがありませんでした。
しかしそれではいかんと思いいくつか入門記事を読んでみて、なんとなくオブジェクト指向がどういったものなのか、少し掴めてきたように感じました。
そのイメージを形にしてみようと、久しぶりに vanila.js でベーシックなカルーセルスライダーを実装してみました。
オブジェクト指向のプロの方たちから見たら全然かと思いますが、一応備忘録と、自分の頭の中の整理として。
- 完成物
- カルーセルの仕様
- 実装の考え方
- プロパティとメソッドをちゃんと意識して考えると簡単かもしれない
- アプリケーションをオブジェクトの集合として考える
- 実装ハマりポイント
gistを使ってJSONを返す超簡易的なAPIサーバを作る
APIモックサーバというと、json-server や swagger などが有名ですが、ただ fetch
をしたいということであれば、gist を使うのが一番お手軽かもしれないのでメモしておきます。
作り方
とても簡単です。
Githubアカウントがなければ作成して、https://gist.github.com にアクセス
̚右上にある「New gist」をクリック
ファイル名と、discription(任意)、内容を入力して「Create public gist」をクリック
ファイルが出来上がるので、右端の「Raw」をクリック
そのRawファイルが表示されているURLをfetch用のURLとして使う (下記は
fetch
でそのURLをした結果)
「クロスドメインで使えない」ということがなく、とても簡単に使えるので開発時の手助けとなるかもしれません。
以上です。
【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>
${...}
の前に空けていた空白を削除して詰めれば、無駄な空白は生まれなくなります。
しかし 可読性が低下 してしまうので良い方法とは言えません。
何かスマートに解決できる方法があればいいなーとなんとなく思っていました。