jsdomを使ってテストしていたらたまに[Symbol(SameObject caches)]と言われてテストが落ちる

なんだか、とりとめもない、解決したけど結局よくわからなかったことを書いておく。これはメモ書きです。 jsdomを使ってDOMの様子を再現するテストを書いていてハマった。テストライブラリはAVAでやっているのでAVAを例に書く。 こんな感じのことを言われた …

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

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

Node.jsのアップデートをするとnpmのグローバルモジュールが消える

タイトルのことで困っていた。 僕はNode.jsのパッケージマネージャにnodebrewを使っているのだけど、先日使おうと思ったノードモジュールが動かなかったのでNodeのバージョンかもしれないと思ってv8.4.0からv9.5.0に変えた。それでその時に気付いたけどタイ…

Travis CIでデプロイ処理でprovider: scriptするとき、複数の処理がうまくいかない

デプロイ処理でprovider: scriptしているときに複数のスクリプト処理をしたいがコケる deploy: provider: script skip_cleanup: true script: - yarn run build - yarn run test - yarn run deploy on: branch: master tags: true なぜ? Issue情報 github.c…

Travis CIで"SH: 1"とか言われnpm scriptsがコケる

sh: 1: gulp: not found と言われてコケる。原因はpackage.jsonのnpm scriptsに "scripts: { "build": "gulp hoge --production" } としつつ、.travis.ymlで deploy: provider: script skip_cleanup: true script: yarn build # run省略 on: branch: master …

Netlifyには連携先のリポジトリURLを格納している環境変数がある

Netlifyはデプロイ時にprocess.envにREPOSITORY_URLというキーでgitリポジトリを格納している。 process.env.REPOSITORY_URL // 連携先がGitHubならGitHubのリポジトリURLが入っている なのでNetlifyでのビルド時だけリポジトリURLを参照してなんかやりたい…

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

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

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

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

VS Codeでコードスニペット補完の順番を優先させる

VS Code使っていてコードスニペットの順番が気に入らなくて困っていた。 【Visual Studio Code】Stable版 1.4リリースノート意訳しました – 好きな技術を好きと言える幸せ – AYA TOKURA BLOG 調べていたらどうもスニペットのソート順を決める設定があるっぽ…

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

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

Chrome DevToolsであれどうやるんだっけのメモ

DevToolsの便利APIリファレンスどこ コマンドライン API リファレンス | Tools for Web Developers | Google Developers イベントを探したり調査したい イベントの監視 | Tools for Web Developers | Google Developers やってる様子 Get and debug event li…

JavaScriptでオブジェクトの値(value)を条件で絞り込んで新規オブジェクトを作りたい

タイトルわかりにくいシリーズ 元オブジェクトから条件に合うvalueのものだけを絞り込んだ新規オブジェクトを作りたい。 const dataObject = { hoge: 'hoge', fuga: 'fuga', piyo: 'piyo', empty: '', none: '', gogo: 'gogo' } // ↓ 空文字('')じゃないもの…

最近書いた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…

Array.prototype.map()で非同期処理する方法

Async/Await使ったりしている中でハマった。 結論 ここを読む。 2ality.com そしてPromise.allでラップする。 async function AsyncFetch(urls) { const fetchArray = urls.map( url => fetch(url) ); return Promise.all(fetchArray); } こういう感じ。 Fet…

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

dotfilesをgitで管理するようにした

github.com dotfilesをgitで管理してなかったのでしてみたいという気持ちになって、置いてみた。 参考にしたのは 最強の dotfiles 駆動開発と GitHub で管理する運用方法 - Qiita ミニマルに始めるDotfiles自動化計画 - Qiita このあたり。 あとgithubで色ん…

Local by Flywheelなどと合わせてすばやくWordPressテーマを開発するボイラープレート『wp-attach-dev』作った

作ったというか昔作っていたものを公開しただけではある。 github.com https://github.com/1natsu172/wp-attach-dev もともとはあまり公開する気がなかったのだけど世の中ではまだWPは人気だし実際に仕事で使われているっぽいし、Local by Flywheelのユーザ…

babel+webpackな環境でESM(import構文)とCJS(module.exports構文)を混在させると『Cannot assign to read only property ‘exports’ of object ‘#<Object>’』と怒られる

前提 babel6以降 babel-plugin-transform-runtime をつかってポリフィルしている webpack2以降 自分がこういう構成なので…ほかにもなにか条件下あるかもしれない エラー内容 Cannot assign to read only property ‘exports’ of object ‘#<Object>’ webpackのコンパイ</object>…

gulp+Browsersyncな開発環境でwatchしてリロードは効くのに内容が反映されない、キャッシュを切ると反映されるという現象が起きた

めっちゃ特定条件下だけどうまく動かなくて困っていた。 Local by Flywheel gulp: v3.9.1 browsersync: v2.18 gulpベースのWPの開発キットを使っている。Local by Flywheel(以下Local)でWPのサイトをプロビジョニングして、gulpベースの開発キットで.phpをwa…