electron-vueでアプリを作ってみて、npm run devで開発環境で動かしたときは動いたけど、npm run buildで本番向けにビルドしたときは動かないみたいなことがちょいちょいあったので、それの対応方法です。 ファイルが見つからない productionビルドの場合はw…

すでにWeb版が存在してるけどショボいのでネイティブアプリでいい感じにしたいときがあったりすることもあります。 これを、Electronで作ったネイティブアプリの画面上に見えないwebviewを置くことで実現します。 方法 見えないwebviewの埋め込み Electronア…

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

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

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

こんな感じに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>…

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