2016-12-12

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

JavaScript Vue

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

作った。

github.com

Vue.js を使っていて、vueify や vue-loader で .vue を書くのは大げさだけど、コンポーネントを作って、JSとテンプレートを分けて管理したい、ということがあります。コードだと以下のようなイメージです。

<!-- app.html -->
<div class="app">
  <p>{{ text }}</p>
  <button type="button" @click="log">Log</button>
</div>

// app.js
import template from './app.html'

export default {
  template
  data () {
    return {
      text: 'Example text'
    }
  },
  methods: {
    log () {
      console.log('output log')
    }
  }
}

Vue.js 1.x までは、Browserify を使っている場合 partialify や stringify 等のプラグインでこれが実現できていましたが、Vue.js 2.x ではこのままでは動きません。

動かない理由、2.xのビルドプロセスと2種類のビルド

以下の２つが動かない理由です。

2.x では、レンダリングの過程で、テンプレートを VirtualDOM のインスタンスを返す render関数にコンパイルする必要がある
2.x では、コンパイルロジックが含まれているスタンドアローンビルドと含まれていないランタイム限定ビルドの2種類のビルドがあり、npmパッケージでmainに指定されているのはランタイム限定ビルドである

つまり、単純にvar Vue = require('vue')やimport Vue from 'vue'で Vue.js をインポートして、template オプションにテンプレート文字列を渡した場合は、テンプレートのコンパイルが実行されないまま、ブラウザで動作させることになり、エラーになってしまいます。 vueify や vue-loader を利用している場合は、バンドルの過程で、テンプレートを render関数にコンパイルしているため、問題ありません。 ( Vue.js 2.x のレンダリングプロセスについては、kazuponさんのスライドが分かりやすいのでおすすめです。Vue.js 2.0 Server Side Rendering // Speaker Deck )

この問題を解決するには、２つ方法があります。

ランタイム限定ビルドではなく、スタンドアローンビルドを利用する
テンプレートを render関数にコンパイルするBrowserifyやWebpackのプラグインを利用する

前者は公式のドキュメントで方法が紹介されています( https://jp.vuejs.org/v2/guide/installation.html#スタンドアロン-vs-ランタイム限定ビルド )。後者は、あくまでランタイム限定ビルドを使う道です。微々たるものかもしれませんが、コンパイルロジックが無い分ファイルサイズが小さいのでロード時間と、render関数へのコンパイル時間が削減できます。

（前置きが長いね…）

vue-templatify

Webpackではテンプレートを render関数にコンパイルするプラグイン vue-template-loaderを @ktsn さんが作られていましたが、Browserify にはなかったので今回開発しました。ホットモジュールリプレースメントにも対応しているので、テンプレートを編集したら、ページのリロード無しで自動的に内容が更新されます。

GitHub - kitak/vue-templatify: Browserify transform for Vue.js 2.0 template

プラグインを利用した場合、JSのコードは以下のように変更する必要があります。テンプレートは、「コンポーネントのオプションを受け取って、render関数をマージした新しいオプションを返す関数」に変換されます。

// app.js
import withRender from './app.html'

export default withRender({
  data () {
    return {
      text: 'Example text'
    }
  },
  methods: {
    log () {
      console.log('output log')
    }
  }
})

2016-12-05

上品で心地よい一杯 - 金色不如帰

Diary Food

大きな仕事が終わったので、有休をとった。特に予定もないので、来年のオフィス移転に合わせた引っ越し先の検討がてら、ラーメンの人気店にいくことに。

来年からオフィスは新宿になる。検討している引っ越し先のひとつが京王新線の初台、幡ヶ谷あたり。そのあたりで人気なのが金色不如帰。

幡ヶ谷駅から歩いて数分。六号通り商店街を少し奥まで行って、路地に入ったところにある。自分が入ろうとしたときに若者3人組が出てきて「あーおいしかった」と言いながら出てきたので期待で胸が高鳴る。

12時半ごろだったが、平日だからか並ばずにすぐに入ることができた。店の中は清潔感があり、おもったよりこじんまりとしている。出汁の良い香りが店中に漂っている。醤油そばがこのお店の主力のようなので、その中で一番グレードの高そうな煮豚醤油そばを注文した。

出来上がるまで、お店を何となく見渡すと、神棚や他のラーメン屋からのお祝いメッセージに目がいく。どうやら10周年のお祝いらしく、思ったより歴史の長いラーメン屋であることがわかる。

醤油そばが届いた。

とりあえず、スープを一口。ハマグリの味がグワっとくる。はー... 麺もつるつるで、喉越し良し。

このラーメンの特徴は、左右にちょこんと乗っているポルチーニのオイル・フレークと黒トリュフソース。
「ラーメンにポルチーニとトリュフ？」と思われるかもしれないが、それぞれをちょっとずつ溶かし、麺をすすると、口いっぱいに芳醇な香りが広がって、その後にハマグリの旨味がやってくる。
自然と笑みがこぼれる。至福のひととき。

癖になって、麺をすすっすすっ。食べていて、自分がラーメンではない別の料理を食べているような錯覚を引き起こす。あまりに良すぎて、巧妙に仕組まれた何かにハメられているような気もするんだけど、いいじゃないか、美味しいんだから、ということで自分を納得させた。

あっという間に完食。ご馳走様でした。

2016-11-28

Hammerspoon と Karabiner Elements でキーカスタマイズした

Tech

新しいMacBook Proが届いたんだけど、Karabiner(旧 KeyRemapForMacBook)が動かない。そこで、Karabiner 使えない対策: Hammerspoon で macOS の修飾キーつきホットキーのキーリマップを実現する - Qiitaを参考にしながら、以前のMacBookでおこなっていた「Vim のインサートモードから抜ける時にIMEを英数に切り替える」というのをHammerspoonとKarabiner Elementsで実現した。

Karabiner Elementsで、EscをF13にリマップした後に、以下のHammerspoonのlua スクリプトを書いた。Control + Shift + ; はGoogle日本語入力で英数に切り替えるショートカット。

local function keyCode(key, modifiers)
   modifiers = modifiers or {}
   return function()
      hs.eventtap.event.newKeyEvent(modifiers, string.lower(key), true):post()
      hs.timer.usleep(1000)
      hs.eventtap.event.newKeyEvent(modifiers, string.lower(key), false):post()      
   end
end

local function keyCodeSet(keys)
   return function()
      for i, keyEvent in ipairs(keys) do
         keyEvent()
      end
   end
end

local function remapKey(modifiers, key, keyCode)
   hs.hotkey.bind(modifiers, key, keyCode, nil, keyCode)
end

remapKey({}, 'f13', keyCodeSet({
    keyCode('escape', {}),
    keyCode(';', {'ctrl', 'shift'})
}))

気持ちよく作業するために致し方ないのだけど、なんか面倒くさいね... Hammerspoon、lua スクリプトを書くことでウィンドウをリサイズしたり、メニューバーに何か出したりとか、結構色々なことが実現できるようなので、時間があったらもうちょっと遊んでみたい。

おまけで、上のスクリプトを書くために、入力しているキーを調べたくなって、以下のようなlua スクリプトも書いたので乗っけておく。モードを用意して、そのモードに切り替えると入力したキーの内容がアラートとして表示される。

local function showKeyPress(tapEvent)
    local charactor = hs.keycodes.map[tapEvent:getKeyCode()]
    hs.alert.show(charactor, 1.5)
end

local keyTap = hs.eventtap.new(
  {hs.eventtap.event.types.keyDown},
  showKeyPress
)

k = hs.hotkey.modal.new({"cmd", "shift", "ctrl"}, 'P')
function k:entered()
  hs.alert.show("Enabling Keypress Show Mode", 1.5)
  keyTap:start()
end
function k:exited()
  hs.alert.show("Disabling Keypress Show Mode", 1.5)
end
k:bind({"cmd", "shift", "ctrl"}, 'P', function()
    keyTap:stop()
    k:exit()
end)

2016-11-07

Charlesの Map Local のバグ？を Map Remote で回避する

Tech

題の通りなんだけど、すぐに忘れそうなので個人用メモ。

Debugging Proxy の Charles には、Map Local という特定の通信のレスポンスボディをローカルファイルで置き換える機能がある。production のサーバーで配信している script や画像に問題があって、原因の特定をおこなうときに便利。

で、この Map Local、script でやっているとちょいちょい構文エラーが起きることがあって、調べてみると、やたら長い行があると途中でぶった切っているようだった。そんなやたら長い行になるのが問題なのでは、と突っ込まれそうだが、Browserify でビルドしたり、Uglifyをかけたりとやっていると1行が長くなることはよくある。

困って途方に暮れていたんだけど、Map Local していたファイルを配信するサーバーをローカルで適当な方法で立てて、そのサーバーに対して Map Remote すれば回避できることに気づいた。

CharlesのMap Local、やたら長い行とかあると途中でぶった切るバグがあるっぽくて困ってたんだけど、ローカルサーバー用意してMap Remoteすれば回避できることに気づいた
— きたけー/Keisuke KITA (@kitak) November 6, 2016

2016-10-30

天才を読んだ

Book Diary

田中角栄の一人称で書かれている自伝的な小説。
読みやすいのだけど、田中角栄を取り上げた番組や記事に書かれているような逸話を取ってくっつけた印象があって、この人物が持っていたであろう凄みや底が見えない深さが感じられなかったのが残念。

天才

作者: 石原慎太郎
出版社/メーカー: 幻冬舎
発売日: 2016/01/22
メディア: 単行本
この商品を含むブログ (20件) を見る

2016-10-26

Browserify を使ったプロジェクトでファイルサイズを大きくしているライブラリを探す

azuさんのQiitaの記事をなぞっただけなんですが、便利だったのでメモ。

きっかけ

Browserify でバンドルされるファイル(未圧縮)のサイズが気づいたらIMを超えていて、どのライブラリがボトルネックになっているのか調べることに(個人的にPCだと1M, SPだと300kを超えたらサイズを見直すようにしている)。

調べる手順

browserify の full-paths オプションを有効にしてビルドする。上の記事だとコマンドのオプションとして指定していますが、JS APIでも指定可能なので gulp や grunt plugin でも問題ない。
ビルドされたファイルを discify に食わせて、ブラウザで可視化された依存関係を眺めて、ボトルネックとなっているライブラリを探す。
- cat bundle.js | discify —open

こんなかんじで可視化される(アニメーションでけっこう酔う) f:id:kitak:20161026123150p:plain

減らす

調べてみたら lodash がけっこうな割合を占めていたんですが、実際に使っている関数は片手で数えるぐらいだったのと、lodash は関数ごとにパッケージを分割してnpmに公開されているので( https://www.npmjs.com/browse/keyword/lodash-modularized )、lodash を丸ごと使わずに必要な関数のパッケージをインストールして使うことにしました(自分で書いちゃってもよさそうですが)。これで約400k減らすことができました。

他にも core.js とか moment がけっこうな割合を占めているという印象。なんとかして減らせないかな。

2016-10-25

世界のドキュメンタリーオバマのホワイトハウスを見た

Diary

見た。

www.nhk-ondemand.jp

4回に分けて、オバマ政権8年の軌跡を描くドキュメンタリー。リーマンショック、医療保険改革、中東の春、シリア問題、ISの台頭、銃規制、移民制度改革といった国内外の問題に大統領が立ち向かう様子を取り上げている。

演説の名手の民主党の大統領。リベラルな政策で保守派とぶつかり、下院の多数派が共和党になり妥協を強いられる。昔見た「The West Wing」というポリティカルな海外ドラマと重なる。巧みな言葉使いで人々をリードし、大胆かつ粘り強く物事を進めていく、本当に何かの映画かドラマを見ているような気持ちになるドキュメンタリーだった。