知見

jsdomを使ってMutationObserverをテストする方法

github.com JavaScriptでブラウザのAPIを使ったコードをテストするときはjsdomを使うと思う。大抵のDOMのAPIは揃ってるのでテストできるけどMutationObserverをテストしようとしたところjsdomはMutationObserverを持ってないのでテストできなくて困った。「M…

CSS variablesで変数をマイナス値で出力したい

(当記事は2018-01-20現在の情報です、仕様が変わって情報が古くなっているかもしれません) CSS variablesを触っていて、定義した変数の値をマイナス値(negative value)で扱いたかった。 こんな感じでいけるだろうと思ったが… :root {--block-position-top: 5…

ESLint(あるいはTSLint)とPrettierを併用する

Prettier導入するにあたって色々絡み合うものがあるので調べたりしたことをまとめておく。 基本的にリントとフォーマッタのどちらか片方しか使わないという場面は、リリースを意識したプロジェクトではないと思うので実質この組み合わせは必須になってくる気…

最近書いたES2015+を駆使したJavaScriptのFizzBuzz③

tech-1natsu.hatenablog.com ↑前回 前回、とにかく短縮という気持ちでやっていたけど、わかりやすさという面を考慮すると全然わかりにくかったので、可読性も意識してちょっと変えた。 可読性考慮したFizzBuzz // range関数 const range = (start, end) => […

最近書いたES2015+を駆使したJavaScriptのFizzBuzz②

昨日書いたFizzBuzz、今日も書いて改善した。 これは昨日のFizzBuzz。 function fizzbuzz(num) { return num%3 === 0 ? num%5 === 0 ? 'fizzbuzz!' : 'fizz~' : num%5 === 0 ? 'buzz~' : num } // range関数 function range(start, end) { return [...Array(…

最近書いたES2015+を駆使したJavaScriptのFizzBuzz

function fizzbuzz(num) { return num%3 === 0 ? num%5 === 0 ? 'fizzbuzz!' : 'fizz~' : num%5 === 0 ? 'buzz~' : num } // range関数 function range(start, end) { return [...Array(1 + end - start)].map((v, i) => start + i); } const oneHundredArra…

JavaScriptのFetch APIで返ってきたものをDOMとして扱う

結論から fetch(url) .then(res => res.text()) .then(text => new DOMParser().parseFromString(text, "text/html")) 返ってきた値にnew DOMParser().parseFromString(text, "text/html"))する!! 経緯 XMLHttpRequestと似たものにFetchAPIがある。 develo…

JavaScriptでDOM生成後に動的に一定量のスタイルシートをCSSの記法で適用する

タイトルわかりづらいシリーズ。 TL;DR いわゆるdocument.querySelector()したりして、そのDOMに対してelement.styleなりelement.setAttribute したりしてインラインスタイルを当てることはできる。でもこの方法だとJSの記法だしスタイル当てる対象のDOMが多…

修正や変更に強いSassのカラー変数管理について書いた

Qiitaに書いた。 qiita.com Sassで色を管理してどう利用するのがベストなのか以前悩みまくっていて、色々考えてこの方法になった。なのでこれは経験から悩んでひらめいた結果の知見で、もしかするともっといい方法があるのかもしれない。 つらくなるときはど…