The Pragmatic Ball boy

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

JavaScript

electron-vueのproductionビルドで気をつけるところ

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

Electronに見えないwebviewを埋め込んで処理させる

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

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…