The Pragmatic Ball boy

iOSを中心にやってる万年球拾いの老害エンジニアメモ

JavaScript

Prettierで.vueをフォーマット

Prettierのv1.10でVueのsingle file componentをformatできるようになりました。 それまではeslintででたエラーを人手でポチポチ直してたのでこの辺りが自動化できるのは最高です。 やることはすでにprettier導入済みであれば*.vueを対象のファイルにいれる…

ReactでESCキーを押したときにモーダルを閉じる

このようにdivにonKeyDownをつけた場合、キーを押してもonKeyDownは呼ばれません。 <div onKeyDown={this.onKeyDown} > tabIndexをつけて要素にフォーカスを持つことができるようにすれば解決します。 <div onKeyDown={this.onKeyDown} tabIndex="0" ></div></div>

Jestで環境変数を設定する

JestでテストするときにwebpackのDefinePluginなどで環境変数をセットしている場合、テスト時にもセットしたいときがあります。 package.jsonのjestのところにglobalsを追加することで設定できます。 Configuring Jest · Jest EXAMPLE package.json "jest": …

ルートVueインスタンスのプロパティ

こんな感じにroot Vue instanceのpropsを使って初期値とかを与えたい場合があったりします。 html <div id='root' props='initial-value'> javascript const vm = new Vue({ el: '#root', props: ['initialValue'], data: { value: '', }, beforeMount: function() { this.value = this.initialVal</div>…

Fetch APIを使ってRailsのAPIを叩く

JavaScript(es2015)でFetch APIを使ってRailsのAPIを呼ぶときの方法。 ポイントとしては、'credentials: same-origin'をつけることと、 CSRFを有効にしている場合はheaderにX-CSRF-Tokenをつける点です。 const getCsrfToken = () => { const metas = docume…