JavaScript
画面が複数あったり、フォームの項目が多い場合に毎回最初から実行して試行錯誤するのは大変。以下のようなスニペットで、 REPL 環境を用意することで、DevTools でセレクタを調べたり、動きを確かめつつ、スクリプトに書き足していく。 const puppeteer = r…
きっかけ とある案件で、とあるサードパーティの SDK を利用していた。その SDK が提供するコンストラクタから生成したインスタンスを Vue.js のインスタンスのデータとして扱おうとしたら、Security Error のような例外が投げられて困った。 (回避するため…
追記: 2018/03/28 唯一イケてなかったのは、netlify のビルドタスクを実行する環境の Node のバージョンが古いこと。async/await が使えず、プリレンダリングに失敗してしまった。これは、しょうがないので、dist もバージョン管理対象にした。 NODE_VERSION…
前回の続き Node.js で Request Local なコンテキストを Zone.js で作る - kitak blog 本当に Request Local になってるのかなーと思って、以下のようなコードを書いて、ab (ab -n 1000 -c 100) にかけて確かめた。 import * as express from 'express'; imp…
これは Vue.js #3 Advent Calendar 2017 - Qiita の18日目の記事です。 Vue.js には、mixin という機能をコンポーネント間で再利用するための仕組みがあります。 今日は自分が mixin を作成する際に意識していること、気をつけていることを紹介しようと思い…
Request Local なコンテキストが欲しい理由 例えば、Request 毎に id を生成して、その id をログに書き出す内容に含めたい。こうすれば、障害や不具合の調査の際に、Request 単位で起きた事象の把握が容易になる。 Node.js での難しさ ログを出力する箇所が…
故あって、React + MobX なプログラムを読んでいたら、 runInAction(() => { this.state = "done"; }); といった runInAction の呼び出しを多く見かけて、なんだろこれ、と思ったのでメモ。MobX 1日目で変なこと書いているかもしれません。 Writing async ac…
Andoid Chrome で動くQRコード・バーコードを読み取るアプリを書いていて知った。 navigator.mediaDevices.getUserMedia でカメラを要求すると、デフォルトではフロントのカメラになるのだけど、以下のようにすることでバックカメラを要求することができる。…
初期ナビゲーションが終わった後のルーターオブジェクトにアクセスすればよい。onReady と currentRoute のコンボでいける。 router.onReady(() => { router.currentRoute; }); vue-router ひと通りドキュメントに目を通していたつもりだったのですが、ひさ…
小ネタ。 Webpack(というよりモジュールバンドラ) を使っていて、ディレクトリの階層が深くなってくると import や require でロードするファイルのパスを ../../../../foo.js のように ../ の数を正確に指定するゲームになってくる。 以下のように書くこと…
1回ハマったら体が覚えて、次回から気を付けるようになるのだけど、記事にしておく。 例えば、以下のように配列をスタックとして使い、トップを算出プロパティで定義したとき。1秒後にトップの id が 100 になると思いきやそうはならない。Vue は push, pop,…
タイトルが長い。 お仕事で vue-router 絡みのプラグインを書いていてアクセスしたくなった。 VueRouter のインスタンスが router として、以下のようにプロパティを参照することでできる。 router.currentRoute.matched[0].instances['default'] あくまで内…
ここ最近、ServiceWorker を使って色々試しているのだけど、その中のひとつ。 以下の内容を、エントリーの HTML や参照系の API に適用して、アプリケーションのオフライン対応を実現する。通常はネットワークから取得した最新の内容を使うが、オフラインや…
puppeteer という Headless Chrome を Node から操作するライブラリが今日発表されたので、以前、記事を書いた WebPagetest を使わずに Speed Index を算出する - kitak's blog を puppeteer でやってみた。 puppeteer の良さ Chrome Developer Tools の開発…
小ネタ。 要素が可視状態かどうか調べたくなって、そういや jQuery に :visible ってセレクタがあったな、と思い出し、おもむろにコードを読んでみた。 結論、こんなかんじで調べることができる( jquery/hiddenVisibleSelectors.js at 2d4f53416e5f74fa98e0c…
毎回混乱して、ドキュメントを読んでいるのでまとめ。 以下のようなスロットの機能を利用したコンポーネント child で考える。 <div> {{ foo }} <child> <span>{{ bar }}</span> </child> {{ baz }} </div> https://jp.vuejs.org/v2/guide/components.html#コンパイルスコープ に書いてある話ですが…
Kotlin 1.1 で JavaScript がサポートされたので、Your first Node.js app with Kotlin – Miquel Beltran – Medium を読みながら試してみました。仕事で JavaScript ばかり書いている背景があるので、気分転換で一見 JavaScript っぽくない別言語 で Node で…
散歩していたときにふと思いついたので書いてみた。 Vuex のゲッター、Vue の算出プロパティの実装は Observer パターンが適用されているので、Observer パターンが根底にある Rx で上手く実装できるんじゃないかな、という思いつきだったんですが、思いの外…
この間、現場で直面したやつの個人的なメモです。対象のバージョンはこの記事を書いている時の最新バージョン v2.3.0。 以下のようなリストレンダリングをおこなうコンポーネントがあるとして、 <script> export default { name: 'list', data() { return { items: [</script>…
題の通り。 Browserify を使ったプロジェクトでファイルサイズを大きくしているライブラリを探す - kitak.blog で moment がけっこうな割合を占めているということを書いたのだけど、少し前に moment から date-fns に乗り換えて、ファイルサイズを削減でき…
同僚に題の相談を受けていたんですが、そのときに「あんまりこの話、ググっても見かけないね」という話になったのでブログに書いておきます。 SPA でダイアログを実装する機会があると思うんですが、よくある事前にコンポーネントツリーのルート直下にダイア…
BroadcastChannel API を使ってみた。 同一オリジンのタブ・ウィンドウ・フレーム間でデータを送受信できる API。API の詳しい説明は BroadcastChannel API: A Message Bus for the Web | Web | Google Developers に譲ります。コードは、パッと見、Cross-Do…
Vue v1.0.15 から最新の v2.2.4 へアップデートしたのでメモ。かかった時間は2日程度だった(ついでにやった Browserify から Webpack への移行も含む)。 全体を通して、内部実装は大きく変わったが API 自体は v1 とある程度互換性があるので、vue-migration…
最新の dex.fm — Development at Mercari US で、Redux でのエラーの扱いについての言及があって、自分は Vuex (Redux インスパイアな Vue の状態管理ライブラリ)でどうやっていたっけな、というのを文章で簡単に書いておきます。あくまで個人の考えです。 …
webpack で Browserify で生成されたファイル( shim library )を import して生成されたファイルを実行したら、require を呼び出しているところで実行時エラーになった。 ファイルに require が含まれていて、それを webpack がパース(依存関係を解決)しよう…
題の通り。 TypeScript に慣れるために、TypeScript でちょっとした Node.js サーバーを書いていたときのメモ。 GitHub - TypeStrong/ts-node: TypeScript execution environment for node で TypeScript のコードを直接 Node.js で動かすことができるのだけ…
2016年に使った&来年使いそうな JavaScript 関連のもの 以下のカテゴリでなんとなく書いてみます。去年と比べて大きく変わらないかんじです。動きの早かった 2, 3年前から、年々、動きはゆっくりになってきているというのが個人的な印象。 トランスパイラ ビ…
題について、頭に浮かんだ考えや、手を動かして試したことのメモ。試行錯誤中なので、都度追記するか、そのときの考えを別途書く。 背景 モジュールバンドラに Browserify や Webpack を利用して一枚岩の bundle.js を生成している 機能追加を繰り返したこと…
この記事は Vue.js Advent Calendar 2016 の21日目です。 https://skyronic.com/blog/vuejs-internals-computed-properties の記事に算出プロパティのミニマムな実装例が示されているのですが、実際に Vue のコードでどのように実装されているか調べました(…
2016/2/1 追記: 単一ファイルコンポーネントでも、JSとテンプレートを分けて書くこと自体はできるので(refs: https://jp.vuejs.org/v2/guide/single-file-components.html#関心の分離について)、このプラグインは基本的に不要かもしれません。 作った。 gith…
