2017-01-01から1年間の記事一覧

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…