$ echo {1..200} みたいなブレースで囲うrange展開をしたかったんですよ自分は。 結論 fishではシュッとやるの無理っぽいので echo (seq 200) でやる。自分はシュッとやりたかった。 そういうわけで例えば連番フォルダをfishでつくりたいときは mkdir hoge(s…

結論 bashにはこういう文化があって便利。 shuzo-kino.hateblo.jp fishでもやりたかったけど、なんだか面倒だったので&& cd $_形式でやるのは諦めた。 qiita.com のでこの方のQiita記事のものを使わせていただいてこれからはmkcd hogeでやっていくことにした…

zshからfishに移行していて、rbenvの移行で手こずったのでメモ 結論 fisher rbenv は使わない このプラグインメンテ止まってるっぽい ので、公式のreadmeに従って ~/.config/fish/config.fish に # rbenv set -x PATH $HOME/.rbenv/bin $PATH status --is-in…

を書いたんですよ qiita.com DEMO そういうわけでなんとなくこっちにもリンクを貼っている次第です。 余談 モバイルアプリによくある引っ張って更新するPulltoRefreshという文化があるんですが、アレ実装しようとしたらRVの仕様に足元を取られてとにかく厳し…

React Refsとは https://reactjs.org/docs/refs-and-the-dom.html ReactでDOMを参照するアレ. この記事ではv16.3から実装されたReact.createRef()を使うrefsのことを指している。 そんなプロパティないとか怒られる 型がない 例えばこういう風にinputタグにr…

3行 .envファイルで 配列ライクに環境変数を持って JSで配列として展開したい .env書く CLIENT_ORIGIN='http://localhost:3000 http://192.168.0.99:3000' localhostとIPアドレスの2種類を持った環境変数を例に 文字列で半角スペース空けでもつ。 これをJSで…

partial<T> TSのmapped typesを利用して提供されている便利な型partial<T>がある type Partial<T> = { [P in keyof T]?: T[P]; }; これが提供されているので 例えば以下のようなfoo型のプロパティをすべてオプショナル(?:の形式)にしたかったらこうすればよい。 inter</t></t></t>…

表題どおり paramsにネストの深いオブジェクトを設定してGETメソッドでサーバーとやりとりしたかった。 普通にやるとJSONにされるのでサーバーで受け取ったとき string になってしまってオブジェクトとして取り扱えない。 qsを使ってparamsSerializerに設定…

主にExpress v4でのはなし。 Expressでのエラー処理全然わからなくて困っていたけど、ちょっとわかってきた気がするのでメモついでに書く。 Expressのミドルウェアのだいたいの挙動はわかっている くらいの人向けを想定して書いている。 便利なモジュール bo…

tl;dr 手元で開発中のモジュールをローカルの別のプロジェクトで使いたいときに便利 いまあなたは『my-great-module』というすごい便利なモジュールを作っているとする すごい便利なモジュールなのだけど一部未完成なのでnpmにパブリッシュするのはまだため…

Firebase Cloud FunctionsをTSで書いて使おうとしていて $ firebase init functions したあとにとりあえずHello Worldしようと思ってハマった。 以下のgetting-startedをのindex.tsをコピーして github.com $ firebase deploy --only functions したところts…

オブジェクトの分割代入(Destructuring assignment)をするときに、変数名を自分の好きな名前に変更したいと思って調べたら、方法があった。 MDN developer.mozilla.org 異なる名前を持つ変数への代入 var o = {p: 42, q: true}; var {p: foo, q: bar} = o; c…

FormikというReactのフォームライブラリがあり、それでFormを組んでいてハマったのでメモ。 github.com 欲求 Formの中にButtonを配置せず、『外側にサブミットボタンを配置したい』 ようはフォームの外側にonSubmitなボタンコンポーネントを作って、それを押…

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

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

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

デプロイ処理で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…

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

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

[追記:] TypeScriptでESLintを使う方法も書きました tech-1natsu.hatenablog.com TSLintではなくESLintを使いたい方はこちらもあとで読んでみてください。 なお JS with ESLint TS with TSLint この構成をお求めの方は当記事(下記)です。 Prettier導入するに…

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

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

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

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

昨日書いた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(…

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…

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

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

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