Vueの年

Vueを触り始めたのは2017年末だと記憶していますが、今年一年はほとんどVueでしか開発をしない、Vueの年であったと言えます。Happy Vue Yearってわけですね。HAHAHA

Vueは流行っているか

個人的なプロジェクトでは勿論の事、新規プロジェクトで自分で技術選択が出来ると知るや即Vueをねじ込むといった、ややもすればエゴとも言える姿勢で臨んでいると、別方向から大変ありがたいことにVueプロジェクトの話が降ってきたりしました。

これがシンクロニシティと言われる物なのか、それとも単純にVueが流行っているという事なのかはわかりかねますが、おかげさまではじめは拙かったVueの扱いも手に馴染んで参りました。（一方で相変わらずReactは苦手意識があります。）この導入のし易さがVueの魅力のひとつでありましょう。

Vueの何が良い？

Vueと言えばまずは学習コストの低さがよく挙げられますが、低いと言っても、Vueの書き方やデータバインディングの仕組みや癖など、学ばなければならない事は決して少なくはありません。恐らく競合であり先輩であるReactと比較した上で、そのように評価されているのだと思っています。

それ以上に個人的に推したい点は、コンポーネントデザインという時流に非常にマッチしているという事です。Vueには「単一ファイルコンポーネント」という仕組みがあり、コンポーネントを構成するHTML・JavaScript・CSSを単一のファイルに、コンポーネント毎に書いていけます。

単一ファイルコンポーネントの例 :

（公式のサンプルコードをちょっといじっただけの物です。）

コンポーネントの構成要素が1ファイルでカプセル化される事で管理が容易になると同時に、プロジェクトのディレクトリ構成に頭を悩ませる時間を大きく削ってくれることでしょう。また、ファイルの構成がHTMLの構成にほぼほぼ則っているので、初学者にとっても取っつきやすいのではないでしょうか。

ちょっと脇道にそれますが、「単一ファイルコンポーネント」は “Single File Component” 略して “SFC” と呼ばれる事があります。しかしながら、わたしの年代ではSFCといえばスーパーファミコンですし、わたしの地元ではSFCといえば慶応大学湘南藤沢キャンパスですので、この略称には些か抵抗を感じざるをえません。（極めて個人的な感想です）

SVG+Vue+TypeScript に感じるノスタルジー

もう少しVueの話です。今年の前半にVueでグラフを描画する案件に携わり、描画部分でSVGを使ったのですが、そこでちょっとしたノスタルジーを感じました。また、同じく後半にVueをTypeScriptで書くプロジェクトがあったのですが、そこでも同じ種の感覚が彷彿とされました。

それは、ActionScript3のMovieClipです。以前の記事（時間を計測する装置について考えてみる） でも軽く取り上げた話ですが、SVGベースのコンポーネントはMovieClipクラスで部品を作る感覚と非常に類似しています。そこでさらにTypeScriptで const val: SomeClass = new SomeClass() の様な型指定をしはじめると、それはもう完全にソレです。

懐かしさを感じると同時に、インラインSVGベースのコンポーネントに表現の可能性を感じたので、今後積極的に使っていきたいという気持ちになりました。勿論、セマンティックの許す範囲内で。

メンターの年

今年の中盤から12月までにかけて、在る方の技術的なメンターを務めさせていただく機会がありました。松風のサイト で掲載されている様に、以前から個人として教育事業に興味があり、それが小さいながらも実を結んだ形となりました。

Web制作講座としてではなく、明確な目標を達成する為のアドバイスを中心とする、いわゆる「メンター」であったため、カリキュラムなどはなく、都度必要に応じて資料を作成して説明などをしつつ、なんとか年内に目標を達成する事ができました。

生徒さんが抱く疑問点にレスポンシブに対応する事に難しさを覚えつつ、初学者がどこで躓くのかという経験が得られた事、どのタイミングでどの知識が必要になってくるのかという「先読み」の知見が得られた事が収穫であったと言えます。

それはそれとして

松風のサイト の情報は古く、未だに横浜市は山手で活動している事になっていますが、現在の拠点は藤沢市です。医者の不養生と言うか灯台下暗しと言うか、2019年早めのリニューアルに向け目下準備中です。

リモートワークの年

2018年はリモートワークでプロジェクトに参画する事が多かった年でした。最も感じたのは、物理的な距離はリモートワークと言えど重要な要素であるという事です。

遠方リモートワークの難しさ

前半は都内のクライアントであったため月次のミーティングなどは直接参加したのですが、後半は遠方のクライアントであったために月一で出張する訳にもいかず、ビデオチャットでの参加となりました。ビデオチャットでのミーティングというのは、難しい物です。その場にいないが故の喋るタイミングの測りづらさ、ほぼ均一に聞こえてくる音声は誰の発言か判断しづらく、また、こちらの音声がちゃんと届いているのかという不安もあります。

ミーティングのみならず実作業においても、実際に物理的に対面したことのない方々とコードを共にしていくというのは何とも表現しようのない難しさがあります。現場の空気が分かっているかどうかが肝なのかもしれません。

先んじて顔合わせを

難しさばかりを書き連ねてしまいましたが、年末に現地に赴いてミーティング参加と少々作業をしたところ、それまで感じていた障壁の様な物が幾分かは払拭出来たように感じました。つまり、遠方のリモートワークに参画する場合は、キックオフの段階で現地で直接話をするのが肝要なのだと思います。きっとその後に続く開発がよりスムーズに進行するでしょう。

まとめ

地元藤沢に戻って久しぶりに年間通して過ごしてみたわけですが、なかなかに面白い一年となりました。来年もまた、小さな実をひとつずつ結んでいきたいと思います。

みなさんにとって2018年はどんな年でしたか？ それでは、良いお年を。

SVG Colk Board を作った話

SVG Colk Board

これは何？

Illustrator 上で図をコピーしてテキストエディタにペーストすると、SVGが出力されます。 しかし、そこで出力されるSVGは不要な記述も多く、末尾に付加されている謎文字のおかげで正常に表示されません。

これらをクリーンに最適化する為に作ったのが SVG Colk Board です。

使い方

1. Illustrator上で図をコピーする
2. それを SVG Colk Board 上でペーストする
3. 配置された図を選択すると「SVG」「DataURI」ボタンが表示される
4. 「SVG」「DataURI」のボタンをクリックすると、それぞれ最適化された結果がクリップボードにコピーされる
5. 結果をテキストエディタにペースト

• ペーストした図のデータは localStorage に保存されるので、ブラウザを閉じた後も保持されます
• つまり貼り付けられる図の数は localStorage の容量依存です
• もちろんブラウザをまたいでは保持されません

SVG Colk Board の中身

このアプリケーションは Vue.js で作られています。 そして Vue と共に利用しているのが Vuex と vuex-persistedstate です。

Vuex

ここでは詳しい説明を省きますが、 Vuexとは、中規模以上のアプリケーション開発向けの状態管理ライブラリで、 公式ではこのように説明されています。

Vuex は Vue.js アプリケーションのための 状態管理パターン + ライブラリです。 これは予測可能な方法によってのみ状態の変異を行うというルールを保証し、アプリケーション内の全てのコンポーネントのための集中型のストアとして機能します。
https://vuex.vuejs.org/ja

簡潔に言うと、状態管理にストア（store）という概念を導入する為のライブラリです。 以下、ものすごくざっくりとした説明をします。

Vue.js のコンポーネントは各々が持つ data の値を基にビューを構築・描画し、必要に応じて処理を行います。 store というのはその data に似た振る舞いをしますが、 data が値へのアクセスで直接変更出来るのに対し、 store はセッターのようなメソッドを介してのみ値を変更する事ができ、 それにより値を保護し、変更を集中管理する事ができます。

ざっくりしすぎていてあまりイメージし辛いかと思いますので、下記ページを参考にしてください。

• 状態管理 — Vue.js

先に述べた通り、中規模以上のプロジェクトでなければあまり恩恵にあずかれず、冗長になるだけと感じるかもしれません。 しかし、Vue.js を採用するという事は、ある程度の規模のあるプロジェクトとなる予測が立つとも言えるので、 転ばぬ先の Vuex を問答無用で入れてしまうのも選択肢の一つだと考えられます。

vuex-persistedstate

今回作った様なミニマムなアプリケーションでは正直Vuexは不向きな気がします。 それでもVuexを導入したのは、半分はVuexで習作してみるため、 もう半分はこの vuex-persistedstate を使うためです。

• robinvdvleuten/vuex-persistedstate: Persist Vuex state with localStorage.

vuex-persistedstate は、Vuexのストアの中身（state）をまるっとlocalStorageに保存してくれるプラグインです。 Vuexでストアを書く時にちょっとインポートしてやれば簡単に導入できます。 （下記はREADMEのコードそのままです）

import createPersistedState from "vuex-persistedstate";

const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState()]
});

これで（同じブラウザで見る限りは）ページの状態を永続化できるという寸法です。 なんて便利なんでしょうか！

まとめ

もともとはイラレが吐き出すSVGを最適化する事しか考えてなかったのですが、 ちょうどよいお題だと思って Vuex を使って習作してみたというお話でした。 このアプリで使用している netlify の知見も少しずつたまり始めたので、それはまたいずれ。