陰陽師のミコマラ中手持ち無沙汰だったので、9年前MooToolsを使ってこさえたやつ、
[MooTools] 診断テスト作成スクリプト Diagnosizm
これをライブラリ依存なしで書き直してみた。
なにぶん周回中にやった落書きなのでバグは普通にあると思います。
IEは動きません。
Class
当時MooToolsを愛してたのは並行して覚えようとしてたPHPと似てて分かりやすかったのが大きいんだけど、
クラスが使えたからと言っても過言ではないです。とにかく多機能で便利すぎたんだよなあ。
そのクラス構文が今は素でかけるようになったわけです。といっても根はJavaScriptなので見せかけにすぎないですが。
それでもprototypeを延々書き連ねる必要がなくなっただけ御の字だと思う。
querySelectorとquerySelectorAll
$('#element-id') という書き方が出て何年たったかなー。
覚えてないくらいお世話になったけど、もうライブラリなくてもquerySelectorで一発ですよ。
指定したやつ全部欲しいならquerySelectorAllで。
querySelectorAllはNodeListが返されるが、配列に見えて配列じゃないのでmapとか使えないのが地味に厄介だと思う。
配列に変換するならArray.from()で。
classList
要素のクラスを操作するならclassList。
classList.toggle('show', false);でclassList.remove('show')と同じ意味になります。
テンプレート文字列
`string text ${expression} string text`
+で繋げなくていいからめっちゃ楽だし見やすい。
Fetch API
これまでGETリクエストするのに色々なものを使ってきましたが、もう素でイケる時代が来たんだなあと。
Promiseのおかげでコールバック地獄からも開放されてソースが見やすくなったと思う。
スプレッド構文
デフォルト値入れたオブジェクトとユーザーが設定したオプションを結合するやつで使ってる
this.options = { ...defaultOptions, ...options };
Object.assign(defaultOptions, options)でも同じ結果になるが、上のほうがよりナウい。
その他雑多なもの
const, let, アロー関数などはもう空気になってる。