rollup で Vue コンポーネントの npm パッケージを作る時に SSR も考慮する

お手伝いしている会社で、対応したやつのメモ。

Vue のコンポーネントを複数のプロジェクトで共有するために npm パッケージ化しているときに遭遇した問題。 Vue コンポーネントを npm パッケージ化する — Vue.js 等を参考にパッケージを作っている場合は、ブラウザで動作させる前提のバンドルファイルが生成されるので、これを SSR に利用すると、documentなどのブラウザのAPIにアクセスしてエラーになる。

対応としては、SSR 用のバンドルファイルを別に用意して、実行するプラットフォームに応じて利用するバンドルファイルを切り替える。 具体的には、rollup の場合、Examples | Rollup Plugin Vue に書かれているオプションを指定すると SSR 用のバンドルファイルが生成される。

切り替えは nuxt の場合、以下のようにプラットフォームごとにプラグインのファイルを用意して

foo-ui-client.js

import Vue from 'vue'
import FooUI from 'foo_ui'
Vue.use(FooUI)

foo-ui-server.js

import Vue from 'vue'
import FooUI from 'foo_ui/dist/ssr'
Vue.use(FooUI)

プラグインの設定で、作成したファイルに対して適切な mode を指定する。

plugins: [
  ....,
  { src: '@/plugins/foo-ui-client.js', mode: 'client' },
  { src: '@/plugins/foo-ui-server.js', mode: 'server' },
 ],

七都市物語(4)を読んだ

七都市物語(4) (ヤンマガKCスペシャル)

七都市物語(4) (ヤンマガKCスペシャル)

前巻に引き続き、今回もノルトくんががんばる。
この作品は、登場人物のキャラが立っているし、都市間の攻防の戦略・戦術も読んでいて感心する。原作者が同じ銀英伝もそうだけど、三国志的な面白さを近未来SFに持ってきたらこんなかんじになるだろうな、という作品。七都市だからひょっとしたら春秋戦国時代とかが元になっているのかも。 次が最終巻らしいのだけど、めっちゃ面白いので寂しい。

2019年3月4日

鹿児島3日目。足が棒のようになっていて痛い。

最終日は観光をする。まち巡りバスに乗って、城山、西郷洞窟、仙巌園に行った。雨の日で景色はちょっと微妙だったけど、桜島の大きさに感嘆する。 ちょっと駆け足で3時間程度で回った。

お昼は、とんかつ川久に行こうとしたが、行列がすごく一時間待つということだったので夕方に行くことにして、鹿児島中央駅構内のお寿司を食べた。アラやキンメダイなど、白身のお魚をいただく。ねっとりと甘い味でよかった。

身体を休めるために夕方まで天文館近くのスパでのんびりする。足をマッサージしてもらった。痛気持ちいいかんじで、声を出すのをなぜか必死でこらえてしまった。 サウナがフィンランド式っぽい本格的なやつで、ロウリュウのサービスがあると書いてあり期待したが、時間になってもロウリュウは始まらなかった。残念。

鹿児島中央駅に戻って、とんかつ川久へ。17時の開店10分前についたが、既に3,4人並んでいた。開店と同時にぞろぞろ人がやってきてあっという間に席が埋まる。上黒豚ロースカツをいただく。トンカツでこんなレアっぽいのあるの!とびっくりした。箸を入れると脂が流れて、慌てて口に運ぶと口いっぱいに旨味が広がって、うほぉ、となった。とんかつをいつでも食えるぐらいの人間であり続けたい。

とんかつをいただいた後はバスで空港へ。本を読みながら、ぼんやりしていた。飛行機のトラブルで到着が遅れて、家についたのは日付が変わった後。
録画しておいたビジャレアルvsアラベスを見る。前半が終わったぐらいのところで疲れて寝た。

2019年3月3日

鹿児島マラソンに参加。天気はレース中は曇りで、絶好のマラソン日和だった。
4時間半が目標で、最初はゆっくりのペースで始めて、15km毎にペースを上げていくプランだったが、35km地点で急に足が重くなり、勾配のアップダウンが続いたこともあって、ペースダウン。 最終的に4時間44分21秒でフィニッシュ。 直前に30kmLSDもやったのでいけるかなーと思ったけど、甘くなかった。40~50kmのLSDをやるか、長距離ランの最後にビルドアップ走を加えて、終盤にスパートをかけることができる足を作らないとだめだなーという反省。

ラソンの後は、ホテルに戻って次の予定まで休息。

18時から前職の同期のNと、アミュプラザの「いちにぃさん」でご飯を食べる。蒸ししゃぶしゃぶが野菜がホクホク、豚肉の旨味が染みていておいしかった。

2019年3月2日

鹿児島マラソンに参加するために鹿児島へ。

早朝に足に刺激を与えるために6:30~7:00/kmぐらいのペースで5kmを走る。 その後、飛行機で羽田空港から鹿児島空港へ。鹿児島は雨。鹿児島空港から鹿児島中央駅へバスで移動する。大体40分くらい。

移動中「親切すぎるiPhoneアプリ開発の本」を読んでいた。コードをいじくって実験をしながらSDKの解説をしている本で、簡単なチュートリアルをこなした後に読むと自分の中でブラックボックスになっていたアプリの起動の過程とかUIKitのクラスヒエラルキーが頭の中で整理されてよかった。逆に何も知らない状態で読むと、きつそう。

ホテルにチェックインした後に鹿児島中央駅から市電で天文館へ。公園でナンバーカードを受け取る。雨のせいで露天や催し物はガランとしていた。
友人のIさんと落ち合って、むじゃきでしろくまを食べる。

移動で疲れてしまったので、ホテルに戻って、2時間ぐらい横になる。明日がクラシコなので、WOWOWでやっていたクラシコ直前特集(契約なしで見れる)をなんとなく見ていた。鹿児島にいるので、リアルタイムで見れないのが残念。

その後、普段、仕事をしていて、今回マラソンに一緒に参加する福岡の会社のOさん、Hさんと鹿児島中央駅近くの吾愛人で豚しゃぶを食べる。脂が甘くておいしかった。

明日は7時集合なので、早めに寝る。

2019年2月28日

有休を取った。

3日後の鹿児島マラソンに備えて、3kmを5:00/kmのペースで走って足に刺激を与える。若干、足が硬い感じもしたけれど、途中、気がついたら 4:27/km のペースを楽に走っていて、いいかんじだな、と思った。

走った後は近所のコーヒー屋で店員と雑談。その後、部屋の掃除をしたり、鹿児島行きの旅のしおりを作ったりしていた。
当日は雨が降ることがほぼ確実なので、雨対策にポンチョ、ワセリン、ランニングキャップを購入。翌日に届けてくれる Amazon 便利。

TypeScript で p5js のスケッチを書くための雛形を作った

Nature of Code -Processingではじめる自然現象のシミュレーション-

Nature of Code -Processingではじめる自然現象のシミュレーション-

を読みながら、手を動かすために作った。

なんで p5js ?

個人的にとっつきやすいから。

なんで TypeScript ?

VSCode で補完が効くのと、凡ミスを防ぐため。最近は、特に理由がなければ基本的に TypeScript で書いている。

FuseBox を使う

ビルド環境の構築に時間をかけたくなかったので、なるだけ設定を書かずに済むモジュールバンドラを探した。最低限、コンテンツの配信(ウェブサーバー)と、ファイルを変更したらビルド&リロードしてくれたらOK 。 いろいろ探したら、FuseBox がよさそうだった。TypeScript ファーストなのが決め手。

設定はこんなかんじ。

const { FuseBox, WebIndexPlugin } = require("fuse-box");

const fuse = FuseBox.init({
  homeDir: "src",
  output: "dist/$name.js",
  plugins: [
      WebIndexPlugin({path: "."})
  ]
});

fuse.bundle('app')
    .instructions(`> sketch.ts`)
    .watch()
    .hmr({reload: true});

fuse.dev();

fuse.run();

node fuse で起動できる。必要に応じて、npm scripts に移動する。

スケッチ( src/sketch.ts )

こんなかんじ。draw に必要なコードを書き足していけばOK。 バンドルの過程で、setupdraw が関数スコープに入るので、明示的に window オブジェクトのプロパティとして生やす必要がある。

/// <reference types="p5/global" />

import 'p5';

function setup() {
  createCanvas(720, 720);
  noCursor();
}

function draw() {
  clear();
  ellipse(50, 50, 80, 80);
}

window['setup'] = setup;
window['draw'] = draw;