kitak's blog

Kみたいなエンジニアになりたいブログ

JavaScript

Puppeteer でページを自動操作するスクリプトを書く時に使うスニペット

画面が複数あったり、フォームの項目が多い場合に毎回最初から実行して試行錯誤するのは大変。以下のようなスニペットで、 REPL 環境を用意することで、DevTools でセレクタを調べたり、ひとつひとつの操作の挙動を確かめつつ、スクリプトにコードを書き足し…

Vue.js で特定のプロパティを変更の追跡の対象外にする

きっかけ とある案件で、とあるサードパーティの SDK を利用していた。その SDK が提供するコンストラクタから生成したインスタンスを Vue.js のインスタンスのデータとして扱おうとしたら、Security Error のような例外が投げられて困った。 (回避するため…

個人サイトを nuxt で書き換え、netlify で公開するようにした

追記: 2018/03/28 唯一イケてなかったのは、netlify のビルドタスクを実行する環境の Node のバージョンが古いこと。async/await が使えず、プリレンダリングに失敗してしまった。これは、しょうがないので、dist もバージョン管理対象にした。 NODE_VERSION…

Node.js で Request Local なコンテキストを Zone.js で作る (2)

前回の続き Node.js で Request Local なコンテキストを Zone.js で作る - kitak blog 本当に Request Local になってるのかなーと思って、以下のようなコードを書いて、ab (ab -n 1000 -c 100) にかけて確かめた。 import * as express from 'express'; imp…

Vue.js の mixin を作る時に意識していること

これは Vue.js #3 Advent Calendar 2017 - Qiita の18日目の記事です。 Vue.js には、mixin という機能をコンポーネント間で再利用するための仕組みがあります。 今日は自分が mixin を作成する際に意識していること、気をつけていることを紹介しようと思い…

Node.js で Request Local なコンテキストを Zone.js で作る

Request Local なコンテキストが欲しい理由 例えば、Request 毎に id を生成して、その id をログに書き出す内容に含めたい。こうすれば、障害や不具合の調査の際に、Request 単位で起きた事象の把握が容易になる。 Node.js での難しさ ログを出力する箇所が…

MobX の runInAction とは

故あって、React + MobX なプログラムを読んでいたら、 runInAction(() => { this.state = "done"; }); といった runInAction の呼び出しを多く見かけて、なんだろこれ、と思ったのでメモ。MobX 1日目で変なこと書いているかもしれません。 Writing async ac…

getUserMedia でバックカメラを要求する

Andoid Chrome で動くQRコード・バーコードを読み取るアプリを書いていて知った。 navigator.mediaDevices.getUserMedia でカメラを要求すると、デフォルトではフロントのカメラになるのだけど、以下のようにすることでバックカメラを要求することができる。…

vue-router で初期表示後に、どのルートで解決されたか知りたい

初期ナビゲーションが終わった後のルーターオブジェクトにアクセスすればよい。onReady と currentRoute のコンボでいける。 router.onReady(() => { router.currentRoute; }); vue-router ひと通りドキュメントに目を通していたつもりだったのですが、ひさ…

Webpack を使っていてファイルの相対パスを書くのがつらくなったとき

小ネタ。 Webpack(というよりモジュールバンドラ) を使っていて、ディレクトリの階層が深くなってくると import や require でロードするファイルのパスを ../../../../foo.js のように ../ の数を正確に指定するゲームになってくる。 以下のように書くこと…

Vue で配列を使った算出プロパティの値が変わらないとき

1回ハマったら体が覚えて、次回から気を付けるようになるのだけど、記事にしておく。 例えば、以下のように配列をスタックとして使い、トップを算出プロパティで定義したとき。1秒後にトップの id が 100 になると思いきやそうはならない。Vue は push, pop,…

vue-router でパスにマッチしたコンポーネントの Vue インスタンスにアクセスする

タイトルが長い。 お仕事で vue-router 絡みのプラグインを書いていてアクセスしたくなった。 VueRouter のインスタンスが router として、以下のようにプロパティを参照することでできる。 router.currentRoute.matched[0].instances['default'] あくまで内…

ServiceWorker で、ネットワークから取得しようして失敗したらキャッシュにフォールバックするやつ

ここ最近、ServiceWorker を使って色々試しているのだけど、その中のひとつ。 以下の内容を、エントリーの HTML や参照系の API に適用して、アプリケーションのオフライン対応を実現する。通常はネットワークから取得した最新の内容を使うが、オフラインや…

puppeteer で Speed Index を算出

puppeteer という Headless Chrome を Node から操作する API が今日発表されたので、以前、記事を書いた WebPagetest を使わずに Speed Index を算出する - kitak blog を puppeteer でやってみた。 puppeteer の良さ Chrome Developer Tools の開発チーム…

DOM 要素が可視状態か調べる

小ネタ。 要素が可視状態かどうか調べたくなって、そういや jQuery に :visible ってセレクタがあったな、と思い出し、おもむろにコードを読んでみた。 結論、こんなかんじで調べることができる( jquery/hiddenVisibleSelectors.js at 2d4f53416e5f74fa98e0c…

Vue.js の scoped slot の理解

毎回混乱して、ドキュメントを読んでいるのでまとめ。 以下のようなスロットの機能を利用したコンポーネント child で考える。 <div> {{ foo }} <child> <span>{{ bar }}</span> </child> {{ baz }} </div> https://jp.vuejs.org/v2/guide/components.html#コンパイルスコープ に書いてある話ですが…

Kotlin の JavaScript サポートを試す

Kotlin 1.1 で JavaScript がサポートされたので、Your first Node.js app with Kotlin – Miquel Beltran – Medium を読みながら試してみました。仕事で JavaScript ばかり書いている背景があるので、気分転換で一見 JavaScript っぽくない別言語 で Node で…

RxJS を使って、Vuex のようなものを書いた

散歩していたときにふと思いついたので書いてみた。 Vuex のゲッター、Vue の算出プロパティの実装は Observer パターンが適用されているので、Observer パターンが根底にある Rx で上手く実装できるんじゃないかな、という思いつきだったんですが、思いの外…

Vue.js のリストレンダリング( Virtual DOM 実装 )と相性の悪いデータの変更

この間、現場で直面したやつの個人的なメモです。対象のバージョンはこの記事を書いている時の最新バージョン v2.3.0。 以下のようなリストレンダリングをおこなうコンポーネントがあるとして、 <script> export default { name: 'list', data() { return { items: [</script>…

date-fns に乗り換えて、スクリプトのファイルサイズを削減した

題の通り。 Browserify を使ったプロジェクトでファイルサイズを大きくしているライブラリを探す - kitak.blog で moment がけっこうな割合を占めているということを書いたのだけど、少し前に moment から date-fns に乗り換えて、ファイルサイズを削減でき…

Vue.js v2 で揮発性の現象を扱う(ダイアログ等を実装する)

同僚に題の相談を受けていたんですが、そのときに「あんまりこの話、ググっても見かけないね」という話になったのでブログに書いておきます。 SPA でダイアログを実装する機会があると思うんですが、よくある事前にコンポーネントツリーのルート直下にダイア…

BroadcastChannel API を使ってみた

BroadcastChannel API を使ってみた。 同一オリジンのタブ・ウィンドウ・フレーム間でデータを送受信できる API。API の詳しい説明は BroadcastChannel API: A Message Bus for the Web | Web | Google Developers に譲ります。コードは、パッと見、Cross-Do…

Vue v1.x から v2.x へアップデートした

Vue v1.0.15 から最新の v2.2.4 へアップデートしたのでメモ。かかった時間は2日程度だった(ついでにやった Browserify から Webpack への移行も含む)。 全体を通して、内部実装は大きく変わったが API 自体は v1 とある程度互換性があるので、vue-migration…

Vuex でのエラーの扱いについての個人的な考え

最新の dex.fm — Development at Mercari US で、Redux でのエラーの扱いについての言及があって、自分は Vuex (Redux インスパイアな Vue の状態管理ライブラリ)でどうやっていたっけな、というのを文章で簡単に書いておきます。あくまで個人の考えです。 …

Browserify が生成したファイルを webpack で扱おうとしてハマった

webpack で Browserify で生成されたファイル( shim library )を import して生成されたファイルを実行したら、require を呼び出しているところで実行時エラーになった。 ファイルに require が含まれていて、それを webpack がパース(依存関係を解決)しよう…

TypeScript で書いている Node.js サーバーをファイルが変更されたときに自動で再起動したい

題の通り。 TypeScript に慣れるために、TypeScript でちょっとした Node.js サーバーを書いていたときのメモ。 GitHub - TypeStrong/ts-node: TypeScript execution environment for node で TypeScript のコードを直接 Node.js で動かすことができるのだけ…

2016年に使った&来年使いそうな JavaScript 関連のものと所感

2016年に使った&来年使いそうな JavaScript 関連のもの 以下のカテゴリでなんとなく書いてみます。去年と比べて大きく変わらないかんじです。動きの早かった 2, 3年前から、年々、動きはゆっくりになってきているというのが個人的な印象。 トランスパイラ ビ…

JavaScript のサイズを減らすことと効率良くキャッシュさせるためのメモ

題について、頭に浮かんだ考えや、手を動かして試したことのメモ。試行錯誤中なので、都度追記するか、そのときの考えを別途書く。 背景 モジュールバンドラに Browserify や Webpack を利用して一枚岩の bundle.js を生成している 機能追加を繰り返したこと…

Vue.js 2.0 の算出プロパティ周辺のコードリーディング

この記事は Vue.js Advent Calendar 2016 の21日目です。 https://skyronic.com/blog/vuejs-internals-computed-properties の記事に算出プロパティのミニマムな実装例が示されているのですが、実際に Vue のコードでどのように実装されているか調べました(…

vue-templatify という Browserify プラグインを作った

2016/2/1 追記: 単一ファイルコンポーネントでも、JSとテンプレートを分けて書くこと自体はできるので(refs: https://jp.vuejs.org/v2/guide/single-file-components.html#関心の分離について)、このプラグインは基本的に不要かもしれません。 作った。 gith…