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 での難しさ ログを出力する箇所が…

ロジ・コミックスとラッセル幸福論

最近の100分de名著でバートランド・ラッセルの幸福論を取り上げているので読んでいる。という話を友人にしたら、「ラッセルといえば、ロジ・コミックスのイメージだった」という話を聞いたので、合わせて読んでみた。 ラッセルの幸福論はラッセルが50代の頃…

MobX の runInAction とは

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

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

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

THE INCAL を読んだ

読んだ。 DUNE で出会ったアレハンドロ・ホドロフスキーとメビウスが再びタッグを組んで作ったフレンチSFコミック。 街の一角のありふれた場面からビッグバンのように爆発して、宇宙を覆い尽くさんばかりに物語が膨らんでいく。読んでいて圧倒される作品。 …

Ethereum トークン (ERC20 Token Standard) の残高を取得する

8月頃にプレセールで買ったとあるトークンが最近発行されて、Etherscan や My Ether Wallet でトークンが発行されたことを確認したのだけど、自分用の Wallet App を作ってみたくなったので、プログラムからトークンの残高を取得する方法を調べてみた。 web3…

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 から操作するライブラリが今日発表されたので、以前、記事を書いた WebPagetest を使わずに Speed Index を算出する - kitak's 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#コンパイルスコープ に書いてある話ですが…

プロフェッショナル 仕事の流儀「天職は、生涯かけて全うせよ~うなぎ職人・金本兼次郎」を見た

土用の丑の時期だからか、NHK オンデマンドのおすすめに出ていたので見た。 江戸時代からの鰻の老舗「野田岩」の五代目 金本兼次郎さんを取り上げている。 http://www.nhk-ondemand.jp/goods/G2013050750SA000/?capid=sns002 個人的に刺さった部分。 常日頃…

now での bot の 24 時間運用

最近、bot を now で運用しているのでメモ。 PaaS の free plan というと、一定時間アクセスがないと sleep したり、24時間連続で動かすことができないものが多く、bot を 24 時間稼働させるためにあの手この手を使って、中々苦労する印象がありますが、now …

最近 2017年7月

一年前に書いたブログ( これからの1日の過ごし方 - kitak blog )がスターされて、「この記事を書いてから一年か。そういえば今年も半分が終わったな」と思ったので、適当に最近あったことを書いておきます。 最近の1日の過ごし方 ここ最近は これからの1日の…

Kotlin の JavaScript サポートを試す

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

シンプルな PaaS 「Now」で Go で書いたアプリのデプロイを試した

けっこう前に存在を知ったんですが、全然触っていなかったので試してみました。 Now 自体の説明は、公式サイト( Now – Realtime global deployments )や中の人の翻訳( http://qiita.com/nkzawa/items/8bf62549f79ebbcaafd8 )を読むのがいいと思います。 Now …

デヴィッド・リンチ監督作品 ストレイト・ストーリー を観た

観た。脳卒中で倒れた兄に会いにトラクターで560kmを移動したアルヴィン・ストレイトというおじいさんの実話を基に作られた映画。 ストレイト・ストーリー リストア版 [Blu-ray]出版社/メーカー: パラマウント ホーム エンタテインメント ジャパン発売日: 20…

雪花の虎 を読んだ

読んだ。 雪花の虎 4 (ビッグコミックススペシャル)作者: 東村アキコ出版社/メーカー: 小学館発売日: 2017/01/12メディア: コミックこの商品を含むブログ (1件) を見る 上杉謙信が女性だったら、そんな大胆な仮説に基いて書かれた漫画。登場する資料だけでは…

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

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

かくかくしかじか を読んだ

読んだ。 かくかくしかじか 5 (マーガレットコミックスDIGITAL)作者: 東村アキコ出版社/メーカー: 集英社発売日: 2015/06/25メディア: Kindle版この商品を含むブログ (7件) を見る 東京タラレバ娘、海月姫の東村アキコの伝記的な漫画。高校時代から始まり、…

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

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

ウェブアプリのパフォーマンスに対する共通の捉え方を持つ

最近、一緒に仕事をしている企画者に「ブラウザAでページBを開いたら重かったです」と言われたことがあって、そのときに思ったこと。 「重かったです」と言ってくるということは何か良からぬことが起きている気がするけれど、それだけだと何が起きているのか…

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

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

誰が音楽をタダにした? を読んだ

読んだ。 mp3 が世の中に普及して音楽業界を変えるに至った話をストーリー仕立てでまとめた一冊。 mp3 を生み出した研究者、音楽業界、「シーン」と呼ばれるインターネットの地下コミュニティ、この3つの糸が絡み合いながら、物語が進行していく。自分にとっ…

ルパート・サンダース監督 Ghost in the Shell を観た

今日の午前中に、渋谷の TOHO シネマズで観た。 都市や街並みの映像が良かった。単純にきれいだし、アニメ映画版、イノセンスと続く、ブレードランナーの DNA の系譜を継いでいるように感じた。 また、ひとつひとつのシーンの撮り方や、各所に散りばめられた…