kazupon-blog

[kazupon-blog]

ブログ移転

かずぽんブログは、Mediumに移転しました。

こちらのブログはそのままにしておきます。

[kazupon-blog]

2017 IN REVIEW

いつもの感じで、2017年振り返ってみました。

GitHub の草 (contributions)

2017年の草はこんな感じになりました。2016年の草も比較のために載せておきます。

2017 GitHub contributions

2016 GitHub contributions

contributions は今年は 4151 で、去年は 3505。

去年と同じく、Vue.js の OSS によるレビューや公式ドキュメント、awesome-vue のメンテなどによる活動がほとんど。後は、Storybook とか、個人の vue-i18n といった感じでしょう。

今年は去年より増えていますが、OSS の方では、そんなにガリガリコード書いてコミットしてないので、業務で新規開発プロジェクトがあったからその開発コミット数で膨らんでいるんという感じでしょうか。

イベントでの発表

今年の発表は以下の 5 件 でした。

Vue.js vue build

イベント: DIST.14 「事例で見るVue.jsとJavaScript LT」

Vue.js Single File Components++

イベント: Meguro.es x Gotanda.js #1 in Drecom

Vue on Storybook

イベント: Node学園 26時限目

Vue.js Extend with Compiler

イベント: ToKyoto.js ― Kyoto.js in Tokyo

Future of Vue.js

イベント: Vue.js Tokyo v-meetup #6

去年と比べると落ち着いた感じです。去年のふりかりで断言したとおり控えることができました。

イベント主催

自分、Vue.js 日本ユーザーグループの organaizer ですが、今年は以下の Meetup イベント 4 件開催しました。

Vue.js Tokyo v-meetup="#3" (参加申し込み数: 251)

Vue.js Tokyo v-meetup #4 (参加申し込み数: 294)

Vue.js Tokyo v-meetup #5 (参加申し込み数: 243)

Vue.js Tokyo v-meetup #6 (参加申し込み数: 270)

去年は2件だったのに、今年は4件。先日のブログで書いたとおり、これは完全 Vue.js 人気の余波です。参加申し込み人数が常に200人オーバーで、募集開始から1時間もかからないうちに定員達する人気ぶり。

去年まで初期メンバーのVue.js 日本ユーザーグループスタッフと私で運営していましたので、この規模になるとフルスタックでは手に負えなくなったので、途中から新規に運営メンバーを募集して今はイベント当日は12〜15名ぐらいで運営できるようになって大分楽になった感じです。100名規模が集まるMeetupイベントの運営を支えれるようになったのは、スタッフの皆さんのおかげなので大変感謝です🙏 。

OSS 活動

去年に引き続き、 Vue.js のコアチームメンバーとして活動しています。主に以下の活動をしました。

vuejs/jp.vuejs.org: Vue.js 日本語公式ドキュメントの翻訳メンテ

vuejs/vue-ssr-docs: Vue.js サーバサイドレンダリングのドキュメント翻訳とメンテ

vuejs/awesome-vue: Vue.js ��連のライブラリやエコシステムの素晴らしいリスト

その他の以下レポジトリのドキュメント翻訳メンテ

vuejs/vue-router

vuejs/vuex

vuejs/vue-loader

vuejs/vue-test-utils

去年は Vue 2.0 のリリースのために、Vue コアの単体テストといったドキュメント以外に実装にもコミットできていたんですけど、今年はドキュメントのコミットとなった感じです。

vuejs/vue-ssr-docs は新規ドキュメントの翻訳だったので大変だったので、Vue 2.0 のドキュメント翻訳と同様に、Vue.js コミュニティの力と、GitLocalizeの力を借りてやりました。

中でも、GitLocalizeはホント助かりました。翻訳の一番大変なのは、原文の更新の追跡なので、GitLocalizeで追跡して検出してくれるのは大変助かりました。GitLocalizeの中の人には大変感謝です。

今回の翻訳では、GitLocalize を利用させて頂きました。GitLocalize にも大変感謝です！https://t.co/2yaQv2qxoY

— 🐤kazuya kawaguchi🐤 (@kazu_pon) 2017年7月11日

vuejs/jp.vuejs.org のドキュメントメンテは、コミュニティの方が参加してくれるようになったので、去年とくらべて楽になりました。中でも、re-fort さんの che-tsumi という bot の投入は、GitHub Issues で翻訳内容が Issue という形でチケット化され、そしてそのまま取り込めるものは Pull Request にしてくれるようになったので、大分運用負荷と管理が低減されるようになりました。日本の Vue.js コミュニティには大変感謝です🙇。

他に、Vue.js 関連で自分がメンテしているものとして、vue-i18n と vue-validator を持っているのですが、これらについても活動しています。

多言語化ライブラリの vue-i18n については、以下のメジャーリリースをしています。

6.0.0

7.0.0

そして、ここ直近の 7.3.0 のリリースでは、パフォーマンスを最大化できるように対応しましたが、この時このリリース対応の内容がどんなものであるかどうか分かってもらえるよう、初めて英語でブログ記事書きました。普段ブログもそんなに書かないの上、さらに英語なので大変でしたが、書いてみて意外と英語で書けるもんなんだなあと実感しました。海外の人に読みやすいものかどうか分かりませんが。

vue-validator については、去年Vue.js公式から取り下げてからメンテできていないのと、今後 i18n にフォーカスしていきたいため、残念がらつい最近開発を停止することを決意し、リポジトリを archive しました。

I archived vue-validator ✅ repository, due to I'll focus to vue-i18n 🌐 maintanance and new ideas of i18n architechture for WebAssembly. Thank you for everything you have done for vue-validator. /cc @vuejs https://t.co/MhNTZrqpGx

— 🐤kazuya kawaguchi🐤 (@kazu_pon) 2017年12月25日

最後に、Vue.js 以外の OSS 活動に取り組みとして、Storybook で Vue をサポートするために、メンバーに加わって活動しました。

つい先日のブログ記事にも書きましたが、Storybook はコンポーネントといったUI開発環境を提供するツール的なものですが、React.js、Raact Native といった React 関連ののみしかサポートしていませんでした。同様なものとして、vue-playがありますが、作者のegoist氏が vue-play に対して活動がアクティブではおらず、Storybook と同等のものが利用できる状態ではありませんでした。

そんな中、Storybook で Vue.js をサポートするために Storybook のメンバーといっしょに自分も開発を進めてリリースできたことは、大変エキサイティングであったし、Vue.js コミュニティが Storybook を使って効率的なコンポーネント開発を可能になるのは、開発体験(DX: Development Experience)がよくなるので、ホントよかったと思っています。また、Storybook のチームメンバとして参加することによって、他の OSS の文化を体験することができてよかったと思っています。

ポッドキャスト

2017 年は初めてポッドキャストに出演した。しかも、いきなり 5 件も。

genba.fm: #1 Awesome Vue

soussune: 28. コアコミッターが語るVue.jsの話

soussune: 32. Vueでワイワイやっていき

soussune: 33. Vueでワイワイやっていき Aftershow

しがないラジオ: sp.9a【ゲスト: kazu_pon】楽しい廃人格闘ゲーマーがWeb系CTOになるまで

しがないラジオ: sp.9b【ゲスト: kazu_pon】楽しいOSSコアチームメンバーへの道

ポッドキャストは中々難しいですね。話すシナリオは予め show notes などで考えているんですが、実際にはパーソナリティと対話形式みたいな感じで進めていくので、リスナーのみなさんを意識した喋る必要がありますので。

来年はもう少しリスナーに聴きやすい話し方にしていきたいところです。

仕事関係

今年も引き続き、CTO として会社のシステム全般をリードしながら開発しつつ、CFO 的な会社の予算計画やキャッシュフロー周りをみながらやっていますが、今年は採用周りの人事もやっています。

開発は、今年は新規プロジェクトが立ち上がり無事終えて、次回に向けて進めることができてよかったのですが、それに伴い開発力を強化するためにエンジニアが必要になってきています。今年は自分の目標としては新しい仲間を増やしたかったのですが、現時点の結果としては採用できていないので、なぜ採用できなかったのか、いろいろと反省してみて、引き続き新しい仲間と共にいっしょにやっていけるようにしたいところです。

来年度にむけて (まとめ)

今年も、OSS の方は去年に引き続き Vue.js コアチームとして OSS 活動し、他に Storybook のメンバーとして OSS 活動しました。

イベントの方は新たに加わったスタッフと共にいっしょにやることで定期的に開催し、役割分担することで運営することができました。

仕事の方は、引き続き CTO & 開発、経営企画しながら、さらに人事周りの経験してきました。

来年度ですが、OSS の方は、Vue.js のミッションに向けて引き続きコアチーム、そして Storybook のメンバーとして OSS 活動していきますが、翻訳以外に OSS 開発する時間を増やしていきたいと考えています。

具体的には、WebAssembly 時代を想定した i18n の新しいアーキテクチャのプロトタイプを実装していきたいと考えています。

WebAssembly の方は今年主要ブラウザでサポートするようになり、それに伴い AssemblyScript にような WebAssembly をサポートするような言語も出現しつつあります。また、WebAssembly は GC などの次に向けた仕様や、Web 以外での動作も想定した仕様が策定されつつあります。

これまで、vue-i18n を通して多言語化ライブラリを作成してきましたが、そのライブラリ開発や ECMA-402 の仕様、そしてこの"i18n ライブラリ、フレームワークは新しい todo apps?"という記事"にもある通り、特定のプログラミング言語や、ライブラリ、フレームワークに依存しない、i18n のアーキテクチャを考えて仕組みを提供したいと思うようになりました。

WebAssembly の将来性を考えると、i18n はまさにユースケースにピッタリだと考えています。

来年度は、WebAssembly 関係の技術をウォッチしつつ、i18n の新しいアーキテクチャの PoC をやっていきたいところです。

イベントの方は、日本で Vue.js カンファレンス開催に向けて、スタッフといっしょに頑張ります！💪

仕事の方は、何としてでも新しい仲間といっしょにやっていきたいところです。

それでは、皆様、良いお年を。来年もよろしくお願いいたします。

[kazupon-blog]

Vue.js 2017年まとめ & 今後

この記事は、Vue.js #1 Advent Calendar 2017の25日目最後の記事です。

Vue.js 2.0 のリリースされた2016年10月から1年以上経過しました。今年はメジャーリリースは特にありませんでしたが、バグ対応、機能追加そして改善を通じて着実にのリリースを積み重ねて進化してきました。

この記事では、2017年の Vue.js 界隈における状況、出来事をまとめつつ、最後に Vue.js の今後について紹介して、4つもある Vue.js アドベンドカレンダの最後を締めくくりたいと思います。

Stats

2017年 Vue.js はどうであったか。Stats を色々見ていきましょう。

まずは、Google Trend から。

2016年と比較して、2017年は常に人気が高い状態が続いているのがわかります。

次に、The State Of JavaScript の Front-end の調査結果を見てみましょう。比較のために2016年のものを上げておきます。

2017年度の調査結果がパーセンテージで掲載されていないので、マウスオーバーで表示される数値を元に算出して2016年と比較すると以下のようになります。

I've USED it before, and WOULD use it again (使ったことがあり、また使いたいか): 2016年10%、2017年20%

I've HEARD of it, and WOULD like to learn it (聞いたことがあり、学習したいか): 2016年33%、2017年51%

I've HEARD of it, and am NOT interested (聞いたことがあり、興味がない): 2016年34%、2017年22%

上記調査結果より、明らかに2016年に比べて知名度が高くなり、興味をもって学習したいというのがわかるでしょう。また、もう一度使いたいという満足度も伸びているのがわかります。

statsの最後として、GitHub Stars の状況を見ていきましょう。ここでも比較のために2016年のものを上げておきます。

去年2016年と比べて、star される加速度が React に迫る勢いで伸びていることがわかります。

こうした stats の結果から、Vue.js は2017年は急激に知名度が高くなった年といえるでしょう。

4つのリリース

今年2017年、Vue.js は以下のように 2.x 系において、4つのマイナーバージョンのリリースをしました。

これらのリリースによって、いくつか機能されたり、改善されたりしましたが、これらリリースの中で注目すべきものとして以下のものになるでしょう。

TypeScript の型定義の改善

サーバサイドレンダリングの改善

エラーハンドリングの改善

SFCでの関数型コンポーネントのサポート

TypeScript の型定義の改善

一番大きなものとしては v2.5 でリリースされた TypeScript の型定義の改善でしょう。

Vue.js の API はオブジェクトベースであるため、従来の TypeScript では this の型の推論は簡単ではなく、TypeScript を使って Vue.js で型の恩恵を受けるためには、vue-class-component とデコレータを利用して従来の Vue.js が提供する API と少し異なるものを利用しなければなりませんでした。

しかし、TypeScript の進化に伴いオブジェクトリテラルベースの型を理解できるようになったため、Vue.js のオブジェクトリテラルベースの API において型推論できるよう、型定義を改善することによって、vue-class-component のクラスベースの API とデコレータを使用せずとも、型推論が可能になりました。

同時に VSCode において vetur拡張機能と同時に利用することによって、自動補完がかなり改善されることで、開発の生産性を高めることが可能になっており、他のエディタにおいても、vue-language-serverによって language server protocol をサポートしていれば、VSCode + vetur と同等の恩恵を受けることが可能になっています。

サーバサイドレンダリングの改善

Vue.js 2.0 ではサーバサイドレンダリングをサポートしていますが、マイナーバージョンにリリースの度に改善を行う Evan 氏には目をみはるものがあります。

レンダラへtemplateオプション、runInNewContextオプションを新規追加によるサーバサイドレンダリングのレンダラの改善以外に、サーバサイドレンダリング向けに最適化されたwebpackプラグインの作成、prefetch による読み込み高速化、そして非同期コンポーネントをサポートやvue-template-compiler、vue-loaderといった Vue.js コア本体、関連ライブラリにも最適化を施すことでかなりパフォーマンスの最適化を行っています。

サーバサイドレンダリングのパフォーマンス改善は、Nuxt.jsにも恩恵を与えており、Next.js とのパフォーマンスのベンチマークのこの騒動にも影響を与えるほどです。

さらに、v2.5 では、Node.js 以外の環境でもサーバサイドレンダリングできるよう対応し、PHP V8Js のような JavaScript 実行環境で動作できるようにクレイジーな対応をしています。興味ある方はこちらのドキュメントを参照しながら、試してみるとよいでしょう。

エラーハンドリングの改善

マイナーバージョンのリリースによって、Vue.js におけるエラーハンドリングが改善されています。

v2.2 では、Vue.config.errorHandlerオプションと、renderErrorコンポーネントオプションでエラーハンドリングできるよう改善しています。

Vue.config.errorHandlerオプションは、アプリケーション内で発生した予期しないエラーを以下のようにハンドリングできるようになっています。

renderErrorコンポーネントオプションでは、render関数で発生したエラーをハンドリングして特別のレンダリング処理を以下のようできるようになっています。

さらに、v2.5 で、さらにコンポーネント単位でエラーハンドリングできるよう、errorCaptureフックが追加されています。これにより、以下のような子コンポーネントで発生したエラーをハンドリングするような汎用コンポーネントを作成することもできます。

こうした、エラーハンドリングの対応により、Vue.js においてもより堅牢なアプリケーションを作成することが可能になっています。

SFCでの関数型コンポーネントのサポート

Vue.js ではコンポーネントのレンダリングパフォーマンスを最大化するために、以下のような関数型コンポーネント(functional components)をサポートしています。

v2.5 と vue-loader (v13.3.0 以降)によって、SFC(single file components: 単一ファイルコンポーネント)において、<template>ブロック内のテンプレートから以下のようにして、render関数でレンダリングするよう実装しなくても、テンプレートベースで関数型コンポーネントを作成することができるようになっています。

さらに繁栄するエコシステム

Vue.js の成長とともにエコシステムが形成し成長してきましたが、2017年においてはメジャーなライブラリやUIフレームワークはVue 2.0 対応がひと通り完了して安定化してきた1年と言えるでしょう。特に Nuxt.js は Vue.js のサーバサイドレンダリングの改善とともに精錬されて、現在 1.0 のリリース可能な状態までになってきている状況です。

今年2017年において、Vue.js 周りのエコシステムの拡大した出来事で一番大きいのは、Storybook v3.2 で Vue.js をサポートしたことでしょう。

Storybook はコンポーネントといったUI開発環境を提供するツール的なものですが、React.js、Raact Native といった React 関連ののみしかサポートしていませんでした。同様なものとして、vue-playがありますが、作者のegoist氏が vue-play に対して活動がアクティブではおらず、Storybook と同等のものが利用できる状態ではありませんでした。

そんな中、上記の Issue 投稿をきかっけに、Storybook で Vue.js をサポートするために Storybook のメンバーといっしょに自分も開発を進めてリリースできたことは、大変エキサイティングであったし、Vue.js ユーザーが Storybook を使って効率的なコンポーネント開発を可能になるのは、開発体験(DX: Development Experience)がよくなるため、Vue.js にとっても大変良いことです。

今回の対応は、Storybook も Vue.js にとってもどちらとも Win-Win になれて、双方のエコシステムを拡大できた出来事であったことに間違いないでしょう。

さらに成長するコミュニティ

Meetup

去年 2016 年、Veu.js の成長に伴いコミュニティもかなり成長しましたが、今年 2017 年は去年よりもさらにコミュニティが成長しています。

世界規模の Meetup イベントサービスのMeetup、このクエリで検索するとかなりの数のコミュニティグループが見つかり、Meetup イベントが開催されています。

日本では、今年は自分が主催する Vue.js 日本ユーザーグループ主催による Meetup イベントを 4 回開催しました。

Vue.js Tokyo v-meetup="#3" (参加申し込み数: 251)

Vue.js Tokyo v-meetup #4 (参加申し込み数: 294)

Vue.js Tokyo v-meetup #5 (参加申し込み数: 243)

Vue.js Tokyo v-meetup #6 (参加申し込み数: 270)

今年 2017 年に入ってから、常に参加申し込み(connpassの管理ダッシュボードで確認できる統計)が 200 オーバーしており、ここ最近開催された Vue.js Tokyo v-meetup #6 では、申込み受付開始から 13 分で定員になってしまうほどの状況です。(このようにイベント参加倍率が高い状況になっており、今後、Vue.js 日本ユーザーグループスタッフ一同、一人でも多くの方が参加できるように努力していきたいです🙇)

connpassで、キーワードVue.jsを指定してイベント検索すると明らかに 2016 年と、2017 年とでは、検索にひっかかるイベント数今年 2017 年の方が圧倒的強さです。

2016 年の検索クエリ

2017 年の検索クエリ

チャット

今年 2017 年の 6 月、Vue.js が公式で運営するチャットを、gitter から discord (Vue Land) に運営を移行しました。discord は、以下のような slack ライクなチャットサービスとなっているため、チャンネルで話したいトピックをグループ化できるため、gitter よりかなりよいです。Discord に移行してから、さらにチャットによるコミュニケーションは活発になっています。

日本においては、去年 2016 年開設した Vue.js 日本ユーザーグループが公式に運営する Slack がありますが、去年の同じ時期では登録者数が 212 人だったのが、今年 2017 年のこの記事執筆段階では 1000 人を超えた状況で、日本も slack を通してコミュニケーションが活発になっています。

Vueの日本ユーザーグループのslack、1000に達した。🎉 pic.twitter.com/bnK381ddqL

— 🐤kazuya kawaguchi🐤 (@kazu_pon) December 15, 2017

初の公式カンファレンス開催

今年2017年の Vue.js における最大の出来事としては、なんといっても、初の公式カンファレンス VueConf 2017 が開催されたことでしょう。

公式カンファレンスのサイトを見てもらえれば分かると思いますが、コアチームと各分野のスペシャリストが集結した豪華スピーカーによるカンファレンスです。

各スピーカーの発表は、YouTube で動画が公開されているので、興味ある方は、こちらの動画一覧から見てみると良いでしょう。

また、このカンファレンスに、コアチームの ktsn さんが参加してレポート記事を書いているので、どんな感じだったのか雰囲気をつかむこともできると思います。

Vue.js の今後

これまでに今年2017年 Vue.js 界隈における状況、出来事をまとめてきました。特に Vue.js のメジャーバージョンのリリースはありませんでしたが、4つのリリースを経ることで、Vue.js は Progressive に着実に進化してきました。

Vue.js は現在、コアチーム、そしてコミュニティパートナーの体制で Vue.js 本体や、Vue Router や Vuex などの公式で提供する関連ライブラリ開発や、ドキュメントのメンテナンス、翻訳、そして Vue.js を取り巻く Nuxt.js、Storybook のようなエコシステムと連携しあって活動しています。

Vue.js プロジェクトロードマップ

そんな中、2017年9月26日に HashNode で Vue.js コアチームによる AMA (Ask Me Anything: 何か質問ある?) を開催しました。その中で、Vue.js コミュニティユーザーから Vue.js の今後についていろいろと質問と回答のやり取りがあった後、将来に向けたロードマップが公開されました。

ロードマップの内容については、Vue.js Tokyo v-meetup #6 で私の発表した下記のスライドで確認することができます。また動画も公開されているので、そちらでも確認できます。

このロードマップをベースに、Vue.js のプロジェクトとして Evan 氏を筆頭にコアチームの各メンバーによって、ドキュメントの改善、関連ライブラリなどの開発が進められている状況です。来年2018年も引き続き、コアチーム体制でロードマップに従ってコミュニティベースのオープンソースプロジェクトとして進めていくでしょう。

2018 年のカンファレンス

2018年、今年以上にカンファレンスが予定されています。現時点で以下が予定されています。

Vue.js Amsterdom: 2018年2月16日

VueConf US: 2018年3月26日〜2018年3月28日

Vue.js London: 2018年4月以降予定

VueConf EU: 2018年9月予定

Vue.js Conference Japan (仮): 2018年7月末、8月初旬で調整中

現在調整中ですが、日本でも開催するために、Vue.js 日本ユーザーグループスタッフで今進めています。海外からも Evan 氏を筆頭に、コアチーム、Vue コミュニティパートナーの方を呼んで、公演してもらうよう調整中です。来年2018年早々、カンファレンス専用サイトを公開する予定ですので、楽しみにして頂ければと思います！

おわりに

Vue.js #1 Advent Calendar 2017 の最終日、そして4つのアドベンドカレンダの取りまとめとして、Vue.js の統括的な内容を書きましたが、いかがでしたでしょうか？

2018年も引き続き、Vue.js コアチームのメンバとともに、

We are on a mission to help more frontend devs enjoy building apps for the web

という、Vue.js のミッションに従って、Web フロントエンド開発者の開発体験をよくするためにオープンソースソフトウェアの活動に取り組んでいきますのでの、よろしくお願いします。

それでは、みなさんよいお年を!

[kazupon-blog]

2016 IN REVIEW

2016年振り返ってみました。

GitHub の草 (contributions)

2016年の草はこんな感じなった。比較のために2015年の草も載せておく。

2016 GitHub contributions

2015 GitHub contributions

contributions は 3379 で気がついたら365日全部埋まっていた。

まあ、ほとんど Vue.js の OSS による活動がほとんど。GitHub、今年から private な contributions も表示できるようになったのはもちろん、レビューしたのも contributions に数えられるようになったので、かなり草生えやすくなっているのもあるかもしれない。

contributions は去年の 5216 と比べると今年は減っているけど、これは今年は業務の開発が落ち着いて新規開発のようにガリガリコード書く開発がなかったという感じでしょうか。(仕事していないという意味ではない。)

イベントでの発表

今年は 9 件 も発表した。詳細は以下な感じ。

Vue.js 大規模アプリケーションの構築

イベント: Gotanda.js #2 〜JS新年会〜 in Gaiax

Vue.js Recent Trends

イベント: Node学園 20時限目

Vue.js New Team

イベント: フロントエンド LT & 座談会（freee x みんなのウェディング）

Next Vue.js 2.0

イベント: Gotanda.js #4 in Retty

conventional-changelog

イベント: Node学園 22時限目

The Progressive framework

イベント: Gotanda.js #5 in TORETA

自分が作ったものを見せてみよう

イベント: Ginza.rb 第40回 自分の作ったものをみせてみよう

Vue.js 2.0 Server Side Rendering

イベント: 東京Node学園祭2016

FDD による Vue.js コンポーネント開発

イベント: Gotanda.js #6 in Oisix

今年はめっちゃ狂ったように発表した。隔月ペースで発表してたような気がする。Vue.js のコアチームにも入ったりしたのもあって情報共有したくて、とにかく発表したかったんでしょう。

今年の発表の中で一番の印象に残っているのは、やはり東京Node学園祭に登壇したこと。CFPでまさか採用されるとは思っていなかったのと、初めて大きいカンファレンスでの発表は少し緊張した。反省点としては中身をもうちょっとしぼればよかったなあと。メインのサーバサイドレンダリングについて最後ら辺駆け足になってしまって、来て頂いた方に申し訳なかったなあと。反省ありありの発表でしたが、大きいカンファレンスで発表できたのはいい経験になったと思います。

イベント主催

Vue.js 日本ユーザーグループの organaizer として今年は以下の 2 件開催しました。

Vue.js Tokyo v-meetup="#1"

Vue.js Tokyo v-meetup="#2" 祝 2.0 リリース記念

イベントの運営は、運営メンバーと事前にあったり飲み物の手配、段取り等して計画的にできたのですが、人集めがあまりできていなかったなあと思っています。この辺は他のイベント運営を参考にして今後も改善していきたいところです。開催したイベントは、Vue.js 作者の Evan 氏に参加してもらったりして盛り上がったので、参加された方に楽しんでもらえて結果的にはよかったです。

#vuejs #vmeetjp1 Q & A session With Evan You pic.twitter.com/DBlaFswOgF

— 🐤kazuya kawaguchi🐤 (@kazu_pon) 2016年5月31日

OSS 活動

先の GitHub の 草に結果として現れているように、今年は OSS の活動はかなりアクティブでした。

これまで Vue.js の vue-validator のメンテナとして orgnaization のメンバーとして活動していましたが、3月からコアチームメンバーとして正式に活動するようになってから、かなりアクティブになりましたね。

中でも大きいのは、Vue 2.0 ローンチに向けた開発。多国籍なチームメンバーで一体になって同じゴールに向かって活動できたのは非常にエキサイトでした。Vue.js が今まさに急成長している中で、こういった経験をできるのは、生まれてはすぐ廃れる OSS においては中々できないと思うので、貴重な体験をしているんだなあと実感させられます。

ただ、残念なこともあって、自分がメンテしていた vue-validator 、全然開発リソースが割くことができなくなってしまったこと。ユーザーには大変申し訳ないと思っています。

執筆活動

今年は、技術評論社さんのWeb記事連載で、執筆活動しました。

Vue.js入門 ―最速で作るシンプルなWebアプリケーション

大手技術メディアでの記事執筆は初めてでしたが、執筆させて頂いて非常にいい経験させて頂いたと思っています。決められた連載回数と文字数という制限環境での記事執筆とそして記事の企画。ブログや論文とは違って読者を意識した執筆方法については非常に勉強になったと思っています。

仕事関係

今年も引き続き、CTO として会社のシステム全般をリードしながら開発に携わっています。

去年のこの時期、まさに進んでいたプロジェクトでは、開発計画(ロードマップ)や予算計画、開発しているプロダクトのプライシング(価格設定)していた時期でした。自分としては、CTO としてこういったことを初めてだったので、無事プロジェクトを成功できるかどうか不安でしたが、無事取引先とプロダクトの契約をすることができローンチできたのでよかったと思っています。

その他として、CTO の枠を超えていますが、CFO 的な経営企画の役割の仕事も現在やっており、会社の予算を計画したりキャシュフロー周りも見たりして、お金周りも現状やっています。

プライベート

第2子が誕生しました！👶

来年度にむけて (まとめ)

今年は、OSS の方は去年に引き続き Vue.js に没頭しました。2.0ローンチに貢献することはもちろん、OSS の活動のおかげで副次的なアウトプットとしてさまざまなイベントでたくさん発表しました。仕事の方は、CTO はもちろんさらにCFO的な立場で仕事することでキャリアを経験してきました。

来年度ですが、仕事の方は、今進めているプロジェクトは引き続きもちろん、今度は人の採用とそれに伴う社内環境の整備が必要になってくるので、それに向けた取り組みを頑張っていきたいです。去年同様、テクノロジーカンパニーとしてエンジニアが幸せになれるような環境を目指して。

OSS の方ですが、現状の Vue.js の成長具合から、来年度は Vue.js のコントリビュートに集中したいと思います。もちろん、Vue.js Meetup イベントの開催も。ただ、イベントでの発表については、少し控えたいと思います。vue-validator の反省もあるんで。なので、Vue.js コアチームとして開発の方に集中したいと思います。

それでは、皆様、良いお年を。来年もよろしくお願いいたします。

[kazupon-blog]

Vue.js 2016年まとめ & 今後

この記事は、Vue.js Advent Calendar 2016の25日目最後の記事です。

フロントエンド界隈の技術、ここ最近何も進歩していないと言われてますが、Vue.js では今年2016年はいろいろとあり激動でした。

そんな Vue.js 界隈における出来事を Vue.js コアチームメンバ & Vue.js 日本ユーザーグループの orgnaizer の立場でまとめつつ、最後に Vue.js の今後について少し話して、Vue.js Advent Calendar の最後を締めくくりたいと思います。

2.0 リリース！

一番の大きな出来事といったら、やはり、Vue.js 2.0 のリリースでしょう！

Behold! Vue 2.0 is officially out! https://t.co/OVgGo4epCO

— Vue.js (@vuejs) 2016年9月30日

今年の4月末にVue.js公式ブログで「これから 2.0 を出すぜ!」的な発表をして当初は今年の6月上旬のリリースされる予定でしたが、少しVue.jsのユーザーには待たせてしまいましたが、今年の8月にRCバージョンをアナウンスし、今年10月1日に無事リリースというリリースのロードを歩みました。

Vue 2.0 での技術的な一番の目玉は、Virtual DOM の採用です。これまでのバージョン1.x までは、生の DOM ベースによるレンダリングでしたが、2.0 では Virtual DOM を採用してレンダリング周りを刷新しました。これに伴う効能として、パフォーマンスの改善はもちろんなのですが、従来では難しかったサーバサイドレンダリングが出来るようになり、HTMLテンプレートによる宣言的なレンダリングだけでなく、HyperScript/JSXによる命令的なレンダリングも可能になってレンダリング手段が柔軟になり、そして React Native と同様にクロスプラットフォーム対応という風に、Vue.js として様々な可能性を広げられるようになりました。

2.0 リリース後、様々なバグ修正や機能改善など経て、この記事執筆時点では 2.1.7 が最新バージョンとなっている状況です。

ちなみに、Vue.js はコードネームがアニメのものから付けられることで有名ですが、今年リリースされたもののコードネームは以下のとおりです。

2.0: Ghost in the Shell (攻殻機動隊)

2.1: Hunter X Hunter

爆発的な成長

下記のVue.js公式Tweetからも分かるように、2016年は急速に成長したとも言えるでしょう！

…and we thought 2015 was an explosive year! pic.twitter.com/Dn1UsDQRgw

— Vue.js (@vuejs) 2016年12月19日

2015年4月に PHP Web アプリケーションフレームワーク "Laravel" に Vue.js が標準搭載を決定するのを機会に Laravel コミュニティの間で普及して成長していきましたが、今年 2016年はそれ以上に急速に成長しました。

GitHub の star も今年1月初めには 10K ちょっとだったのが、この記事執筆時点では���37K 超えという状況になっています。

他に Vue.js公式サイトのページビュー数、NPM ダウンロード数などの数値的なものは、今年の8月のものでちょっと古いですが、Vue.js 公式ブログのこちらにあります。(最新の数値的なものは近々 Evan 氏がレビュー的なブログで公開すると思います。追記: 公式ブログ記事公開されました。)

今年これだけ成長した要因は、これまでに自分自身、Twitter、GitHub などの SNS、Web メディア、そして Vue.js コアチームメンバー内のやり取りを見てきた感じからすると、肌感覚でふわっとした感じになりますが、以下が要因なのではないかと考えています。

1. Evan 氏出身の中国の JavaScript フロントエンドユーザーの間ではほとんど利用していること

10億オーバーの人口を持つ中国。その数のうちの0.1%がフロントエンドエンジニアがいたとしても、100万強のオーダーなので、GitHub の start の数、NPM のダウンロード数、ページビュー数に与える影響は半端ないと考えています。ちなみに、Evan 氏が今年の中国での今年のJSConfの時にどれだけ Vue.js について利用状況について公演時に聴講者に聞いたところ、イベント参加者ほぼ全員利用していたとのことです。

2. Evan 氏が今年かなりの数の各国の JavaScript コミュニティのイベントに登壇したこと

Evan 氏は以下で列挙したスライドの数だけ、今年はかなりの数の各国の JavaScript コミュニティにイベントに登壇しているので、PR になったんではないかと思います。

スライド

Laracon US: Vue.js Make Frontend Development Great Again!

Laracon EU: Modern Frontend Development with Vue.js

Midwest JS: Vue.js: The Progressive Framework

NingJS: Vue.js: the Past and the Future

Nordic.JS: Demystifying Frontend Framework Performance

dotJS: Reactivity in Frontend JavaScript Frameworks

発表動画

Laracon EU: Modern Frontend with Vue.js

Midwest JS: Vue.js: the Progressive Framework

NingJS: Vue.js: the Past and the Future

Nordic.JS: Demystifying Frontend Framework Performance

dotJS: Reactivity in Frontend JavaScript Frameworks

3. Web メディアで計画的に PR をしたこと

Twitter では Vue.js 関連のキーワードをウオッチしてリツイート/コメントしたりして日々マメに対応しているのと、メジャーリリースにおいてときは、ブログ記事はもちろん、必ず HackerNews や Reddit に投稿したりしてかなり意識的に PR していたんではないかと思います。

Evan 氏の Vue.js フルタイム化

今年は、Evan 氏が Vue.js にフルタイムで開発できるようになりました!

Evan 氏は Meteor で働いていましたが、2015 年の Vue.js の成長に伴い Meteor を辞めて自分の会社を設立しました。その後、Vue.js フルタイム開発を行うために今年の 3 月に Patreonで $6,000/manth を目標に支援を募集開始しました。

In particular: I have started a Patreon campaign seeking funding to focus on Vue fulltime. https://t.co/pukJfFk5eX

— Vue.js (@vuejs) 2016年3月14日

募集開始後、今年の 6 月には、3 ヶ月足らずで 目標の $6,000/month にあっという間に達成して、現在では $9,000/month 以上 Patreon で支援を受けています。また、最近 Alibaba のWeex プロジェクトの技術顧問になり、Weex プロジェクトの開発にもコミットメントしている状況です。

コアチームによる Vue.js OSS 開発

今年は、コアチームメンバー体制による Vue.js OSS 開発が正式開始しました!

従来 vue.js の開発は、Vue.js orgnaization メンバー 6 名で Vue.js プロジェクトを活動してきたのですが、基本は Evan 氏を中心に、Vue.js 本体、関連プラグイン、ドキュメント、コミュニティサポートをほとんど一人でやっていました。ですが、2015 年に先に説明した Laravel の採用に伴う急速な成長に伴い、助けが必要になってきました。そこで、今年の 3 月の Patreon による支援の開始とともに、Evan 氏がコアチーム用の Slack を立ち上げる形で正式に Vue.js コアチームをキックオフしました。

コアチームスタート時は、17名の体制でスタートしましたが、その後もコアチームメンバーはどんどん増えていって、現在は30名弱の体制で活動しています。コアチームメンバーは、アメリカ、ドイツ、フランス、イギリス、ロシア、インド、ベトナム、中国、日本などというようにグローバルな多国籍メンバー構成になっています。ちなみに現時点の日本人のコアチームメンバーは、

@kazupon (私)

@tejitak さん

@ktsn さん

@kaorun343 さん

の4名が在籍しています。

コアチームメンバーの役割

チームメンバーの役割としては以前イベントで発表したこちらの資料に記載していますが、主に

GitHub Issues のトリアージュ

バグレポートのチェック (本当にバグなのか?ただ単の質問のなのか?)

新機能要望リクエストのチェック (ユースケースは何のか?メリットはあるのか?)

放置された Issues のクリーニング (質問待ちしていてもレスポンスが5日以内に来ない場合)

Pull Request のレビュー

バグ修正または新機能の実装

他のコアチームメンバのサポート

フォーラムまたはGitterのコミュニティサポート

のようなことをして Vue.js を OSS として運用・開発しています。

コアチームメンバーの開発体制

開発体制としては、特に明文化したものはないのですが、大半は Evan 氏で仕様策定、実装、バグ修正はしているのですが、コアチームメンバが自主的にバグ修正、機能改善はもちろん、ツールなどを作成などをすることで、Evan 氏がこれまで全てやっていたことが徐々に負荷分散される形の開発体制になってきています。

今年リリースした Vue 2.0 のような大きい開発のケースを上げると、仕様策定・実装は Evan 氏が大方やって pre-alpha な状態まで開発し、API の互換性などの仕様が一人で決められない場合は、コアチームメンバ内部で議論して、その後 GitHub の issue として公開して、ユーザーからフィードバックを得るようなスタイルで開発してきています。pre-alpha リリース後は、引き続き足りない機能などの実装は Evan 氏が実装し、単体テスト、公式サイトのドキュメント整備、マイグレーションツール、そして TypeScript 対応はコアチームメンバーが自主的に取り組んで開発していったという状況です。

エコシステムの成長

Vue.js 周りのエコシステムも引き続き成長し続けています!

vue-awesomeが公開されて以降、これに Vue.js 関連のフレームワーク、ライブラリ、ツールなどが登録されてエコシステムが形成されて来ましたが、2.0 のリリース以降も引き続き成長しています。バージョン 2.0 リ��ース以降、現在は以下のようなものが注目されています。

Weex: Vue.js のシンタックスで Web だけでなく iOS/Android といった Native 向けへのアプリを開発できるクラスプラットフォーム向けのフレームワーク

Nuxt.js: Next.jsの Vue.js 版のサーバサイドレンダリングに向けの Web アプリケーションフレームワーク

vuelidate: model ベースなシンプルなバリデーションライブラリ

eva.js: choo と elm architecture にインスパイアされた Web アプリケーションフレームワーク

Element: Web 向けの UI ツールキット

vuetify: Material Design ベースのコンポーネントフレームワーク

Quasar Framework: Vue.js のコードでNativeのようなモバイルアプリとレスポンシブなWebサイトを構築できるフレームワーク

翻訳活動の活発化

Vue.js ドキュメント関連の翻訳も世界各国を通して活発化しています!

Vue.js 公式ドキュメントは、バージョン 1.x のときは翻訳され公式サイトにリンクされていたのは、日本語、中国語、イタリア語しかありませんでした。バージョン 2.0 では、日本語と中国語の他に、ロシア語、韓国語も翻訳されており公式サイトから参照できるようになっています。

In case you haven’t noticed: Vue 2 docs are now also available in Chinese, Japanese, Russian and Korean, all contributed by the community! pic.twitter.com/DAXVMOpg0b

— Vue.js (@vuejs) 2016年12月15日

Vue.js 公式ドキュメントの翻訳は、現状他にもフランス語といった翻訳も活発です。

Vue.js 公式ドキュメント以外にも、vue-router、vuex、vue-loaderといった公式プラグイン・ツールのドキュメントも活発に翻訳されて続けています。

コミュニティの成長

Vue.js の爆発的な成長に伴い、コミュニティも成長しています！

Meetup イベント

Vue.js の成長とともに、ユーザーコミュニティ主導の Meetup イベントがパリ、ロンドンといったように世界各国で活発に開催されています。以下は最近開催された Evan 氏も直接参加したパリの Meetup の様子です。

Vue.js Paris meetup right now! pic.twitter.com/VxM23gbuVy

— Vue.js (@vuejs) 2016年12月3日

日本でも自分が orgnaize する Vue.js 日本ユーザーグループ主催による Meetup イベントを 2 回開催しました。

Vue.js Tokyo v-meetup="#1"

Vue.js Tokyo v-meetup="#2" 祝 2.0 リリース記念

Meetup イベントの 1 回目のイベントである v-meetup="1" では、Evan 氏に Skype で参加してもらい、Q & A 形式で参加者といっしょに非常にエキサイティングな時間を過ごしました。以下のその時の様子です。(写真ボヤケてすいません。。。)

#vuejs #vmeetjp1 Q & A session With Evan You pic.twitter.com/DBlaFswOgF

— 🐤kazuya kawaguchi🐤 (@kazu_pon) 2016年5月31日

また、会社主催によるVue.js Meetup イベントも開催され、そこでも Evan 氏が Skype で参加してくれて、Q & A セッションをやって盛り上がりました。

ABEJA Meetup「Vue.js: Revolutionary Front-end #1 With Evan You!」レポート

日本ユーザー向けの Slack の開設

日本 Vue.js ユーザー向けに Slack を5月に開設しました。この Slack では、Vue.js 関連の情報配信されていたり、Vue.js ユーザー同士で分からないことを Q & A などして、活発にコミュニケーション出来る場になっています。Slack の登録者数は、この記事執筆時点で 212 人で今もなお登録者数が増えて続けており、コミュニケーションが活発になっています。

公式ライブラリの整理

Vue.js はこれまでに以下のライブラリを公式プラグインとしてサポートしてきましたが、バージョン 2.0 以降では公式にはサポートしなくなりました。

vue-resource

vue-validator

vue-resource については以下の Vue.js 公式ブログの記事でアナウンスしており、今後は pagekit のプロジェクトでメンテナンスされます。vue-validator について公式にはアナウンスはしていませんが、こちらは、これまで自分が開発 & メンテナンスしていましたが、vue-resource と同じ理由でこちらから願いでてリタイアしました。引き続き vue-resource と同様に自分の個人プロジェクトとして対応していきます。

Vue.js の今後

今年2016年 Vue.js 界隈における出来事をまとめてきましたがいかがでした? Vue.js はフロントエンドの技術において革命的なものをリリースして「これ凄い！」というものはありませんでしたが、フロントエンドユーザーに受け入れられるものに進化していった1年だったということが分かります。

Vue.js の今後ですが、現在確定しているものとしては以下があります。

VueConf 開催決定!

���年2017年夏に、ポーランドで初の Vue.js 公式カンファレンス「VueConf」を開催することになりました。

It is happening! First @vuejs conference is now officially ON! Will you join us? https://t.co/MTnxaSdmzH #vuejs pic.twitter.com/kUA1oeY3Ji

— VueConf (@VueConf) 2016年12月21日

ついここ最近ランディングページをオープンし、CFP も開始しています。スケジュールや内容についての詳細は今後明らかになっていくでしょう。

awesome-vue に変わる新しい Vue.js エコシステムのキューレションサイト

現在コアチームメンバー主導で新しい Vue.js のエコシステムのキューレションサイトのオープンを予定しています。

awesome-vue は Vue 0.12 の頃に公開されて今日まで運用してきましたが、情報が古いものや、登録されたライブラリ、フレームワーク、ツールといったものがメンテナンスされずVueの最新のバージョンに対応していなかったりと決して品質が良い状態とはいえません。また長年の運用により登録リストが膨大なため探しにくく、どれが Vue.js ユーザーにとって有用なのか評価される仕組みもありません。

こうした経緯から、現在 awesome-vue に変わる新しいエコシステムのキューレションサイトを作成しています。プロトタイプレベルのものは大方できているので、そんなに時間がかからずにオープンされるでしょう。

Vue.js 本体と周辺ライブラリについて

一番気になると思われる Vue.js の今後ですが、正直に言うとコアチームメンバーである自分も、Evan 氏が特に今のところ今後について明言されているものはないので、確定したロードマップは分かりません。2.0 の時のように突然ゴニョゴニョと作りだして、何かリリースするかもしれません。

Vue.js の GitHub レポジトリには、GitHub projects で共有されているので、このロードマップと Vue.js orgnaization にある PoC レベルのレポジトリから想定すると以下になるでしょう。

Vue.js core

keep-alive コンポーネント周りの改善

サーバサイドレンダリングの改善 (code spliting / デバッギング周り)

CLI / ビルドツール (vue-cli)

コンポーネントテストユーティリティ

配布可能なコンポーネントのテンプレートとベストプラクティス

Electron ベースの playground (React Storybook 的なもの?)

Webpack 2.0 ベースのテンプレート

開発ツール (vue-devtools?)

編集可能な state インスペクタ

コンポーネントレンダリングパフォーマンスのプロファイリングツール

Vuex store のロックモード

Vuex ユーザーセッションレベル?のレコード&再生ツール

RxMarbleスタイルのような視覚化されたアクション/ミューテションログ

vue-router

route 定義方法の改善

vuex

vuex-observable

おわりに

Vue.js Advent Calendar 2016 の最終日として、Vue.js の統括的な内容を書きましたが、いかがでしたでしょうか？

コアチームメンバーとして来年度の Vue.js も頑張って引き続きフロントエンドフレンドリーなフレームワークとして進化させていきますので、ぜひフィードバックとかくれたら助かります。

Vue.js 日本ユーザー向けの MeetUp も2月か3月に計画していますので、ぜひ楽しみにしていてください。会場提供したいという方がいましたら私まで声かけて頂けるとありがたいです。ゆくゆくは、日本版の VueConf Japan みたいなものも開催して、Evan 氏呼べたらいいですね！

Happy Holidays !! 🎅

[kazupon-blog]

2015 IN REVIEW

2015 年を振り返ってみました。

書いたコードの数字

我らソフトウェアエンジニア、コード書いてなんぼなので書いたコードの数字で振り返ってみました。まずは、トータルの結果から。

コミット数 追加行数 削除行数 編集行数 (追加+削除) 2082 403112 148338 551450

追加、削除を合わせて編集行数としては，だいだい 55 万ってところですね。

フリーザ様の戦闘力を越えたところといった感じでしょうか。仕事と OSS (プライベート) でちょっとブレイクダウンしてみましょう。

仕事で書いたコードの数字

仕事で書いたコード数はこんな感じになります。

2015 年に仕事で書いたコード数

コミット数 追加行数 削除行数 編集行数 (追加+削除) 1249 319333 83926 403259

比較のため、2014 年に書いたコード数も載せておきます。

2014 年に仕事で書いたコード数

コミット数 追加行数 削除行数 編集行数 (追加+削除) 1193 101836 50650 152486

前年度と比べると3倍近く書いてますね。今年はいろいろと機能等指向錯誤したりここ最近の方向転換で、狂ったようにコード書いたからなあ。コミット数が去年とそんなに変わらないのに、追加行数が大体3倍になっているのは、その徴候が現れている成果だと思います。

OSS / プライベートで書いたコードの数字

次に今年のOSSで貢献する際に書いたコード数を見てみましょう。こんな感じになります。

リポジトリ コミット数 追加行数 削除行数 編集行数 (追加+削除) vuejs/vue-validator 304 19184 21670 40854 vuejs/vue 8 120 74 194 vuejs/vuejs.org 21 54 34 88 vuejs/vue-router 59 1579 403 1982 vuejs/vuex 18 1226 255 1481 vuejs/awesome-vue 4 11 1 12 vuejs/jp.vuejs.org 290 33310 32099 65409 vuejs-jp/discussion 5 19 5 24 vuejs-jp/home 4 29 0 29 dekujs/deku 1 1 1 2 yyx990803/semi 2 10 6 16 kazupon/vue-i18n 76 11591 9436 21027 kazupon/vue-plugin-boilerplate 30 1189 425 1614 kazupon/vue-define-reactive-demo 1 139 0 139 kazupon/vue-server-express-demo-example 3 362 1 363 kazupon/vue-router-hackernews 7 14955 2 14957 計 833 83779 64412 148191

コミット数 833 、編集コード行数148191 。前年度のデータすぐに出せないのであれですが、今年2015年は、Vue.js 関連プロジェクト(vuejs.org/vue-router/vuex)の翻訳とか、Vue.js の orgnaization の一員として vue-validator のメンテ・開発、個人の vue-i18n の Vue.js 1.0 対応 とかで、相当コード書いたので、この数字は前年度の数値で比較せずとも、実感している感じです。

GitHub の草

次に GitHub の草 こと contributions を見てみましょう。

public 版の表示はこんな感じです。

public contributions

仕事の private なものが入ったものはこんな感じになります。

public + private contributions

濃い色の部分と public のみの草と比較しながら見ると、どこで仕事のコードいっぱい書いたかどうかすぐに分かりますね。2月〜7月まで濃い部分が多いので、この辺り確かにガリガリコード書いてデプロイしてたなあ。まあこの状況は今も変わりませんが。

public の方では、5月以降草が多くなっています。これは、Vue.js の orgnaization の一員として vue-validator のメンテ・開発していて活動はしていましたが、これに日本語公式サイトが入ってきたのが草の数が多くなった結果ですね。6月に Vue.js 日本語版の公式サイトを公開してから、逐次本家サイトの方が更新があると、すぐに日本語翻訳して日本語サイトの方にデプロイといった感じが、Vue.js 1.0 の公開まで続き、現状も引き続きという感じでしょうか。

勉強会での発表

以下 2 件。

Railsで作られたサービスにVue.jsを導入したというお話

イベント: Vue.js Meetup

Next Vue.js 0.12

イベント: Data Binding JS Night

少ない。。。来年は、勉強会発表はもっと多くしたいところです。

今年の総括

一言でいうと、仕事では キャリアアップ と OSS では Vue.js という感じでしょうか。

キャリアアップ

今の会社には、肩書的にはリードアーキテクト的な役割として2014年1月に入社し、入社以降弊社サービスcuusooのシステム全般の開発面で社内のエンジニアとリードしてきたんですが、2015年6月から体制が変わり、CTO になったことでしょうか。

まさに今進んでいるプロジェクトで、開発計画(ロードマップ)や予算計画、開発しているプロダクトのプライシング(価格設定)したり、お客様のところにいって色々とデモや働きかけをお願いしたりと。まさに、CTO 的な仕事しつつ、コードをガリガリ書いて感じです。

Vue.js

今年はついに Vue.js 1.0 (CodeName:Evangelion) がリリースされました:tada: 。Vue.js 1.0 のリリースは、公式サイトvuejs.orgのドキュメント1.0 の内容を Vue.js の作者Evan氏といっしょに連携しながら、日本語版公式サイトjp.vuejs.orgをほぼ同時にリリースできたので、OSS プロジェクトとしてかなりエキサイトしたのを覚えています。GitHub のトレンド や、HackerNewsにもランクインしましたし。

これについて振り返ってみると、事の始まりは Vue.js Meetup のイベントを開催だったと思っています。このイベントのおかげで公式サイトの翻訳しようという話がでてきて、翻訳プロジェクト が立ち上がり、6月に日本語公式サイト jp.vuejs.org のサイト公開することができたので。改めて、翻訳に関わってくださった方に感謝でいっぱいです。

来年度

仕事面の方では引き続き CTO として今の���ロジェクトを頑張っていこうと思います。これが成功すると面白いことになるのはもちろん、自分の思い描いているテクノロジーカンパニーとしてエンジニアが幸せになれるような環境を作っていけそうなので。

OSS の方は、今までどおりいろんな方面にアンテナを張りつつ、引き続き Vue.js の方にしていきたいと思います。自分が担当している vue-validator はもちろんのこと、vue 本体やエコシステム周りの方にもいろいろとコントリビュートしていきたいです。Evan 氏、日本の何かのイベントで呼べたらいいですね。

それでは、皆様、良いお年を。来年もよろしくお願いいたします。

[kazupon-blog]

Vue.js 作者が出演したポッドキャスト

この記事は、Vue.js Advent Calender 2015 5日目の記事です。

ちょっと Vue.js のプログラミングとは関係ありませんが、ここ最近、Vue.js の作者 Evan 氏がポッドキャストに出演したようなので、Coffee Break 的に軽く紹介だけしたいと思います。

JavaScript Jabber - 187 JSJ Vue.js with Evan You

The Changelog - 184: Discussing Vue.js and Personal Projects With Evan You

Full Stack Radio - 30: Evan You - Diving Deep into Vue.js

どのエピソードも内容的には、なぜ Vue.js を作ったのか？、Comparison with Other Frameworks(他のフレームワークとの比較(日本語訳)) の内容をさらに踏み込んだものを話していたりといった感じです。

全て、英語で敷居が高いかもしれませんが、Evan 氏がどんな人なのか気になる方は、ぜひ、ポッドキャストを聴いてみてはいかがでしょうか。 (JavaScript Jabber のエピソードは、Transcript があるのでお勧めです。)

[kazupon-blog]

Vue.js公式サイトの日本語訳をリリースしました

Vue.js 公式サイト(http://vuejs.org) を日本語訳したサイト(http://jp.vuejs.org) をリリースしました。

公式サイトの翻訳は下記 Github のリポジトリで行っています。

vuejs-jp/vuejs.org

翻訳はつい先日公開された最新バージョン 0.12.1 まで翻訳しています。

問題点の指摘や翻訳の改善、大歓迎です。 issues または pull-request でお願いします。

末筆ですが、今回ご協力頂いた有志のみなさま、ありがとうございました！ そしてお疲れさまでした！！

[kazupon-blog]

Vue.js Meetup を開催しました

つい先日、Vue.js Meetup を開催しました。

いつもこういったイベントは参加者の方なんですが、実はイベントを主催するというのは初めて。 なのでちょっと少しドキドキな感じだったので、初めてで不安があるというのと、会場で使ったうちの会社のキャパを考えて10名という人数で開催させて頂きました。

開催した目的としては、Vue.js、ネット上で、入門記事とか、業務で使ってます的な記事、ちょくちょく見かけるんですけど、実際に使っている人たちの生の声を聞いたりして、いろいろと知見や情報をみんなで共有したかったというのが目的です。

自分が発表した内容

Railsで作られたサービスにVue.jsを導入したというお話

弊社の Rails で作られたサービスに Vue.js を導入したときについて発表させて頂きました。サーバサイドは Rails ですが、クライアントサイドは、ほとんどの現場では jQuery を使っていると思うので、まさに弊社と同じように、jQuery で作られたコード資産を活かしたいと検討している方の参考になるんじゃないかと思っています。 また、Vue.js をどんな感じで使っているかどうかもスライドに書いてあるので、Vue.js 使っている方の参考になればと。自分はこうしてるぜ！っていうのがあれば Twitter でハッシュタグでつぶやいてくれる方が増えれば、みんな幸せになれるかもしれないのでいいかもしれません！:)

飛び込みライトニングトーク

Vivaldi + Vue.js ネタ (すいません、タイトル詳細メモし忘れました。。。)

@hashedrockさんのライトニングトーク。スライドはこちらにあるようです。

発表後のみんなで語りあった？内容

自分の発表が終わった後の、発表に対する質問や、語りあった内容について、ゆるふわな口調な議事録っぽい羅列で恐縮ですが、共有しておきます。(間違いや足りない部分があったら Twitter @kazu_pon 当てにご指摘していただけると助かります＞＜！！)

参加者の方からの質問: Vue.js 、CSS とかいじるデザイナーさん困りせんでした？

自分: うちでは、コードも書けるので、特に問題ならなかったw。もし協業するのなら、vueify 使えば CSS とか stylus とかいろいろと他のテンプレートやメタCSS記法も使えてコンポーネント化できるから幸せになれるかも。

参加者の方: デザイナーさんといっしょにプロトタイピングツールとして、vueify を使っている。(こんな感じかな？)

自分: 参加者の方で業務で使っている方はどんな感じで使っています？

参加者の方: Rails で普通にサーバーサイドのテンプレートに書いて使っている。今回の発表のような、Vue.jsで作ったものをビルドして、既存のサーバーサイドのテンプレートにscriptタグで組み込むという発想は、Rails ユーザーからすると斬新的だった。

参加者の方: うちも、Rails ですが、Backbone.js + Vue.js という形で使っています。Backbone.js は Router しか使っていなくて、他は Vue.js 。

参加者の方: フロントにVue.js、バックは Go で実装された REST な API という形で使っています。典型的な SPA 的な使い方。

参加者の方: IE8 で動かないのがつらい。。。

参加者の方: 他の候補としては、Knockout.js がいいかも。

参加者の方: BtoB には向いてないですねw。どちらかというと、プロトタイプ的なサービスみたいな常に進化する BtoC 向けですよね。

参加者の方: Vue.js 使いたいんだけど、ドキュメントが英語なんで、メンテや引き継ぎの関係で採用できない。。。

自分: 英語の壁が。。。

参加者の方: Vue.js の公式サイト、日本語版があった方がいいかも。誰か作ってw

参加者の方: Vue.js 0.10 から 0.11 系にマイグレーションした時、Android (2.x系?) が動かなくてつらかった。結局、断念して、0.10 に戻した。

自分: 0.10 から 0.11 へのアップグレードって、以外と大変ですよね。うちもやっているんですけど、1日で終わらなくて。。。結局まだ 0.10 のまま。

自分: 今回の発表で触れなかったんですけど、クライントサイドのUIのテストどうしてます？うちは、UI仕様がコロコロ変わるので開発環境やQAなどで確認するという方針です。

参加者の方: phantom.js (casper.js)なヘッドレスブラウザ上で、mocha などで走らせるという感じでしょうね。

参加者の方: うちもテストやってないですね。UIのテスト、重いですよね。

参加者の方: Vue.js で開発するとき、Rails みたいのディレクトリに規約ないよね。あったらいいのに。誰かプラグインか何か作ってw

参加者の方: みなさん、Browserify 派？それとも、Webpack派?

自分: Vue.js のプラグイン作ったときは、Webpack 使ってます。AMD、CommonJS 、複数のモジュールシステム、パッケージマネージャ、サポートしたいんで。

Browserify、Webpack 半々と言った感じでした。

参加者の方: Vue.js の作者、Evan氏、最近あまり動きないよね。

参加者の方: Meteorにjoin したから忙しいのかも。Meteor で何やってるんだろう。

自分: うーん、そうですねw。ロードマップのissuesに今後のことが書いていないので聞いてみます。

参加者の方: 作者一人で開発しているけど、他の人も巻き込んで開発しないんですかね。

自分: その辺も、聞かないとよく分からないですね。自分最近、orgnization に入れて貰えたけど、自分の作った vue-validator だけしかタッチできないです。

参加者の方: ひょっとしたら、今後もうメジャーバージョンアップとかしないのかも。(全員www)

参加者の方: 最近 React.js が話題になっているせいか、Vue.js 影薄くなりましたよねw

自分: そうですねw。Virtual-Dom や Flux で技術的に面白いし、夢がひろがりんぐな可能性がありますからね。

参加者の方: Vue.js 、シンプルでサクッとすぐに使えるから、ホントいいですよね。

自分: そう思います。API もよくできていて使いやすいんで、押していきたいですね。

参加者の方: ペラいちなWebアプリ、すぐ作れますからね。

参加者の方: うちの会社では別プロジェクト?では、プロトタイプに Vue.js 、本開発のときは、React.js ていう感じです。

自分: Vue.js 、サーバーサイドでもレンダリングしたい。個人的には Isomorphic が夢なんで！でも、完全にブラウザの生DOM依存しているからできない＞＜

謝辞

当日の進行とかイベントの準備とかイベントページの説明に不備があったりして、参加された方に不敏な思いをさせてしまったかもしれないですが、参加された方全員といっしょに、Vue.js についていろいろと話す事できたと思うので、開催してホントよかったと思っています！ 来て頂いた皆さん、ありがとうございました！

次回については、ちょっと今後の様子を見てから、やるかどうか決めます！！

[kazupon-blog]

vue-validatorをv0.11のVue.jsに対応した

この記事は Vue.js Advent Calendar 2014 の13日目の記事です！

以前本家から fork した vue-validator を実装したんですが、v0.11 系では全くとも動作しないため、v0.11 系でも動作するよう対応したので、軽く紹介したいと思います。

Vue.jsの詳細対応バージョン

Vue.js の v0.11.2 以降が必要。v0.11.2 より前は、v0.11.2 で新たに公開になった API を利用しているため、動作しないので注意。

インストール

以前のバージョンでは、component と bower しかサポートしていませんでしたが、今回はこれらを含む以下をサポート。

browserify (npm)

bower

component

duo

webpack

使い方

以前のバージョンと同じく、Vue.use でプラグインをセットする形で利用可能になる。

var Vue = require('vue') var validator = require('vue-validator') Vue.use(validator)

上記により、v-validate という directive が有効になり、この directive を使って以下のように利用することでバリデーションしていくことになる。

<form id="blog-form"> <input type="text" v-model="comment" v-validate="minLength: 16, maxLength: 128"> <div> <span v-if="validation.comment.minLength">too long your comment.</span> <span v-if="validation.comment.maxLength">too short your comment.</span> </div> <input type="submit" value="send" v-if="valid"> </form>

注意としては、v-validate は v-model と同じ element でないと動作しない。必ず、v-model といっしょに使う必要がある。

ちなみに以前バージョンでは、v-validate という directive はあったが基本何もせず、フィルタを駆使して Hack っぽいやり方で対応していた。

バリデーション結果

以前のバージョンでは、バリデーションの結果は data で管理していたのではなく、Viewmodel インスタンスに $validation、$valida、など生やしたりして対応していた。このバージョン以降では、dataにバリデーション結果を反映するようにしている。以下をサポートしている。

validation

valid

invalid

dirty

ビルドインバリデータ

以下をバリデータをサポートしている。

required

pattern

minLength

maxLength

min

max

ユーザーカスタムバリデータ

以前のバージョンと同様サポートしている。v0.11では Viewmodel のインスタンス生成時、もしくは Vue.extend など、以下のようなオプションにする形で対応可能。

var MyComponent = Vue.extend({ data: function () { return { name: '', address: '' } }, validator: { validates: { email: function (val) { return /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(val) } } } }) new MyComponent().$mount('#user-form')

オプション

名前空間

今回対応した vue-validator では、バリデーション結果は、内部で inherit オプションをしているため、data` の名前空間と conflict する可能性がある。

以下のように、validator オプションで、conflict しないようにすることが可能。

var MyComponent = Vue.extend({ //... validator: { namespace: { validation: 'myValidation', valid: 'myValid', invalid: 'myInvalid', dirty: 'myDirty' } } //... })

レポジトリ

https://github.com/kazupon/vue-validator

対応し終えて感想

最初は、v-component を使った完全にコンポーネントベースで作っていたんだけど、v0.11.1 でこの v-component の動作が変わってしまって、はじめから作り直しになってつらかった。。。だけど、v0.11.2 でいろいろと内部の API が公開されたおかげで、楽になったので結果的にはよかったかと。

こんな、そんなで Vue.js のバージョンアップで振り回されて対応が遅れに遅れた vue-validator 、使ってかわいがって頂けると大変ありがたいです。:)

[kazupon-blog]

golang勉強会に参加してきた

HDEさん主催のgolangの勉強会に参加してきたので、ライトな感想的なものを書いておこうと思う。

去年辺りから、自分の周りで頻繁に開催されるgolangの勉強会がどんな雰囲気のもんか気になっていたのと、かなりgolangを使いこなしている@lestrratさんのお話が聞きたかったということで、golangの勉強会に参加してみました。

HDEさんのセミナーの会場ですが、快適な椅子で有名なオカムラさんの椅子が準備されてて、勉強会始終すごい快適。後、ドクターペッパーが0円で飲める販売機があって、正直昔ドクターペッパー飲んだときはまずくて、もう二度と飲むもんかと思っていたんですが、0円ということで飲んでみると、あらま、最近のドクターペッパー以外とおいしいじゃありませんか！なんで、2本飲んでしまいました。HDEさんドクターペッパーありがとうございました！

勉強会で個人的におもしろかった話は、@yuroyoroさんのcgoの話、@nabekenさんのライセンス周りの話、そしてメイン@lestrratさんの話、3つ。

cgoのお話は、何だかんだいってパフォーマンス上げたりや既存のものをさくっと使って何か作りたいときは、cで作った関数を呼び出すところがでてきそうだと思うし。goのソースコードに import "C" の上にコメントでcを書くと動くと呼び出せれるのはいろいろとゴニュゴニョとできそうなのでオモロイなと思った。luaとかmrubyとか組み合わせると何かヤバイことができそう！

ライセンス問題のお話は、プロダクト作る上ではかなり重要。LLな言語でパッケージマネジャーとか使って開発していると、ライセンスはいっしょにくっついて来たりするんであまり意識していなかったんですけど、golangの場合は、1つのファイルにコンパイルされてしまいますからね。LLに毒づけされてしまった自分にとって、改めて気付きの話でよかった。

最後のメインの@lestrratさんのお話。 自分のようにA Tour of Goや、golang公式docなどである程度ひと通り触ってる人や初心者でも分かるような人をターゲットにしたお話でした。panic/recover、error、そしてgoroutin/chanelについていろいろと話があったんですが、中でも一番よかったのが、構造体とinterface。ひと通り触ってみて構造体とinterfaceの設計について他の言語にはない素晴らしさを味わっていたのですが、どう表現したらいいのかもやもや抱いていていました。そんなところに、ピンポイントで構造体とinterfaceの設計について具体的に話してくださったので、もやもやを解消できてほんとによかったと思います。

今回の勉強会でかなりgolangへの信仰が深まりました！うちの会社のサービス(back-endの部分)でプロダクションに投入できるよう、今後も引き続きいろいろとgolangとたわむれて遊んでいきたいと思います。

[kazupon-blog]

天下一クライアントサイドJS MV*フレームワーク武道会でLTしてきた

つい先日、「天下一クライアントサイドJS MV*フレームワーク武道会」に行ってきました。いろんなMV*なフレームワークの話が聞けて楽しかったです。パネルディカッションは酒が入りながらだったので、パネラーの本音？的なぶっちゃけトークが聞けて、とても面白いイベントだったと思います。

自分が話したLT (ライトニングトーク)

最近話題のVue.jsについて軽く説明した感じです。

Vue.js

Vue.js の濃い話をしてもよかったんですけど、たくさんあるフレームワークの選別に悩める人たちに参考になるようなことを話したほうがいいと思ったので、無難な内容にしました。

ちなみに LT は実は初めて。時間内に話すことができたのはいいんですが、仕込んたジョジョねたが。。。LT、奥が深いです。

パネルディカッションについて自分が思うこと

SPA (Single Page Application)

SPA を採用するかはユースケース次第だと思う。管理画面、Full な Web アプリケーションなどは、SPA に向いていて、CMS などの SEO が必要がものは向いていないと思うし。これ、この前mozaic.fmでも話してましたね。

Isomorphic

昨今の API ファーストというか、API ベースとしたサービス設計が主流になってきていることを考えると厳しいかなと。ただ、こういったフラストレーションを考えると、ニーズがあると思うんで、Web の UI レイヤを担うフロントエンドを実装するための Rendr のような Isomorphic なフレームワークがあってもいいのかなと。

WebComponents

自分も Polymer 自体にはあまり興味がない。HTML/CSS/imagesといったものがモジュール化できて、Web 開発が幸せになれればいい。

モジュールのロードについて

現状、CommonJS でいい。将来的には ES6 の module。

テンプレートエンジン

handlsbar。そこそこ速いし mustache と互換あるし。

さいごに

このイベントを企画した @yousuke_furukawa さん & @mizchi さんには感謝。ありがとうございました！

[kazupon-blog]

ZeroMQでSocket.IO関連のモジュールを作ってみた

Socket.IO MeetUp

まず、本題に入る前に。

昨日のSocket.IO MeetUp に行って来たのですが、socket.ioの作者 Guillermo Rauch 氏から直々に、socket.ioを作るに至った背景や、今後のsocket.ioの関連の話、それと今話題の MQTT と Socket.IO を使った話を聞くことができて、楽しかったです。

"Web 上の EventEmitter" というようなプラットフォーム的な感じで今後盛り上がるといいですね。 :)

モチベーション

さて、本題。

ここ最近、

Socket.IO 1.0 のリリース

東京Node学園13時限目での Socket.IO 1.0 に関する話

そして今回のSocket.IO Meetup

ということで、いろいろと進化している Socket.IO に興味が湧いたので、ZeroMQ で複数の Socket.IO サーバ間にメッセージをブロードキャストするためのモジュールを Node で作ってみました。(本当は、LTで発表したかったんですけど、ちょっと間に合いそうになかったので、今回はパスしました。>< )

Socket.IO Meetup でヒートアップした折角の機会なので、紹介したいと思います。

作ったモジュール

作ったのは、以下の3つ。

socket.io-zeromq

socket.io-zeromq-emitter

socket.io-zeromq-server

socket.io-zeromq

socket.io-zeromq は socket.io-adapter を ZeroMQ で実装した adapter です。

この adapter により、ZeroMQ の pub/sub を実装したサーバと通信することができ、メッセージを複数の Socket.IO サーバに分散することがきるようになります。

socket.io-zeromq-emitter

socket.io-zeromq-emitter は Socket.IO によってブラウザにイベントを送るための ZeroMQ で実装した emitter です。

socket.io-emitter も同じブラウザにイベントを送るための emitter ですが、こちらはサーバが Redis しか使えないので、新たにモジュールを ZeroMQ 向け専用に作りました。

socket.io-zeromq-server

socket.io-zeromq-server は、ZeroMQ の pub/sub (正確にはxpub/xsub) で実装したサーバです。探せば ZeroMQ で pub/sub を備えたサーバは探せばありそう?ですが、今回はとりあえず動けばよかったので、自分で実装しました。

イメージ

これらの作ったモジュール、ざっくり、どんな感じにメッセージがやり取りするのかイメージにするとこんな感じになります。

動作を確認できるサンプル

興味がある人のために、動作を確認できるサンプルも作って以下の Github のリンク先においてあります。

socket.io-zeromq-sample

感想

久々に Socket.IO に触った自分でも adatper を作ることで Redis 以外でもメッセージを複数の Socket.IO サーバに分散できるものを作れるようになったのはすごいなあと思いました。それぞれのコードをみてもらえれば分かるんだけど、adapter と emitter は、100行前後で実装できました。Socket.IO の各ノードに対して pub/sub するサーバ側なんですけども、こちらは今回は特に手抜きで作りましたが、実装次第では、Redis よりハイパフォーマンスなリアルタイムでスケーラブルなシステムを作れそうですね！:)

いけてないなあと思ったのは、socket.io-emitter 。これクライアントの指定が Redis 縛りになってるので、adapter　のように抽象化してくれれば、socket.io-zeromq-emitter を作らなくてよかったかもしれないです。まあ、pub/sub 側のサーバが違うと、そのアーキテクチャによって違うから、勝手に emitter 作ってくださいというスタンスなのかもしれないし、昨日の話を聞いている感じだといろいろと事情、計画があって、わざとそうしているのかもしれないと勝手に予測。

おわりに

いろいろと触ってみて、完成度がよいい感じで実践投入しても良さそうなので、今後、とりあえず適当に作った socket.io-zeromq-server 、まじめに実装したり、Engine.IO とかのちょいとレイヤが低い部分のコードやドキュメントを見ながら何か作って、きたる実戦投入に向けて Socket.IO とたわむれていこうと思います。

[kazupon-blog]

Vue.js向けのvalidatorを作ってみた

Vue.js には vue-validator という plugin で validation 機能を、界王拳まではいかずとも Vue の戦闘能力を増幅させるものがあるんだけど、開発が全然進まないので、fork して自分で勝手に作ってみた。

インストール

vue-validator は component を使えば、簡単にインストールできる。

$ component install kazupon/vue-validator

bower という七面鳥みたいな変な鳥のキャラで有名なパッケージ管理ツールでも対応する予定。

使い方

説明するより、サンプルコードを見た方がどんなもんか理解するのが速いと思うので、以下のコードを載せておく。

html

<form id="blog-form" v-validate> <input type="text" v-model="comment | length min:16 max:128"> <div> <span v-show="$validation.comment.length.max">too long your comment.</span> <span v-show="$validation.comment.length.min">too short your comment.</span> </div> </form>

js

// import(s) var Vue = require('vue'); var validator = require('vue-validator'); // install validator Vue.use(validator); new Vue({ el: '#blog-form', data: { comment: '' } });

上記は、ブログなどの Form でコメントを入力する際の、よくあるコメントの validation のサンプル。

v-validate という directive を validation の対象となる form や div などのコンテナ的なタグに指定する。指定すると実行時に

$validation が ViewModel インスタンスに生える

$valid が ViewModel インスタンスに生える

v-model で validation filters が使えるようになる

v-model の validation filter によって validation の結果が $validation の保持されるようになる

というように Vue に validation 機能を拡張する感じになる。

$validation

$validation は、各 v-model ごとの validation 結果を以下ようなフォーマットで保持する。

$validation.model.filter[.filter_param]

required validation filter の場合は、以下のようになる。

<form id="user-form" v-validate> Password: <input type="password" v-model="password | required"><br /> <div> <span v-show="$validation.password.required">required your password.</span> </div> </form>

$valid

$valid は、v-validate の全 validation の結果を true | false で保持する。ユースケースとしては、以下のような Form で submit ボタンを v-if で動的に表示するような、全ての validation がパスしていないと駄目なケースで利用するとよい。

<form id="user-form" v-validate> ID: <input type="text" v-model="id | required | length min:3 max:16"><br /> Password: <input type="password" v-model="password | required | length min:8 max:16"><br /> <input type="submit" value="send" v-if="$valid"> <div> <span v-show="$validation.id.required">required your ID.</span> <span v-show="$validation.id.length.min">too short your ID.</span> <span v-show="$validation.id.length.max">too long your ID.</span> <span v-show="$validation.password.required">required your password.</span> <span v-show="$validation.password.length.min">too short your password.</span> <span v-show="$validation.password.length.max">too long your password.</span> </div> </form>

validation filters

vue-validator で利用できる validation filter は以下に示す5つ。

required

pattern

length

numeric

validator

1. required

required は値が入力されているかどうか validate する validation filter。

<form id="user-form" v-validate> Password: <input type="password" v-model="password | required"><br /> <div> <span v-show="$validation.password.required">required your password.</span> </div> </form>

2. pattern

pattern は入力された値がパラメータとして指定した正規表現のフォーマットどおりかどうか validate する validation filter。

<form id="user-form" v-validate> Zip: <input type="text" v-model="zip | pattern /^[0-9]{3}-[0-9]{4}$/"><br /> <div> <span v-show="$validation.zip.pattern">Invalid format of your zip code.</span> </div> </form>

3. length

length は入力された文字列の長さを validate する validation filter。length validate filter には以下のようなパラメータ

min: 文字列の最小の長さ

max: 文字列の最大の長さ

を指定することができる。

<form id="blog-form" v-validate> <input type="text" v-model="comment | length min:16 max:128"> <div> <span v-show="$validation.comment.max">too long your comment.</span> <span v-show="$validation.comment.min">too short your comment.</span> </div> </form>

4. numeric

length は入力された文字列が数値かどうか validate する validation filter。numeric validate filter には以下のパラメータを指定できる。

min: 入力した値の最小

max: 入力した値の最大

入力した値が、numeric ではない場合は、value が true になる。

<form id="config-form" v-validate> <input type="text" v-model="threshold | numeric min:0 max:100"> <div> <span v-show="$validation.threshold.numeric.min">too small threshold.</span> <span v-show="$validation.threshold.numeric.min">too big threshold.</span> <span v-show="$validation.threshold.numeric.value">Invalid threshold value.</span> </div> </form>

5. validator

validator はパラメータ���指定したカスタムな validation 関数を実行して validate する、validate filter。特殊な validation が必要な場合に利用すると便利。

html

<form id="blog-form" v-validate> <input type="text" v-model="comment | validator validateCustom"> <div> <span v-show="$validation.comment.validator.validateCustom">invalid custom</span> </div> </form>

js

new Vue({ el: '#blog-form', data: { comment: '' }, methods: { // Specify custom validate function validateCustom: function (val) { // write custom validation here as follows this.$validation['comment.validator.validateCustom'] = !(0 < val.length & val.length < 3) return val; } } })

TODO

今後のTODOとしては以下のとおり。

bower のサポート

v-model 毎の $valid、$dirty

validation filter name の変更オプション

$validation プロパティ名の変更オプション

おわりに

vue-validator ですが、やっつけでエイ、ヤッ!っていう感じで実装した部分もあるので、バグがあるかもしれません。ひと通り、validation の基本的なものを実装したので、fork 元のオリジナルの方に PullRequest 送って、見てもらっているところです。

興味がある人は、ぜひ使ってみて、フィードバック送ってもらえればと。:)

宣伝

vue-validator は一部、業務の時間を使ってるので、ちょいと会社の宣伝。

弊社CUUSOO SYSTEM ではいっしょに cuusoo.com のUI/UXの改善をお手伝いしてくれるデザイナーさんを募集しております。フルタイムな社員でなくても、フリーの方でも歓迎です。

このブログの読んでいる人で知り合いにデザイナーさんがいたら、紹介してくれると大変ありがたいです！

興味がある方は、かずぽんまで連絡をば。お待ちしております。

[kazupon-blog]

Vue.js向けのi18nなplugin作ってみた

Vue.js を使ったプロジェクトで i18n 対応が必要になるので、vue-i18n というプラグイン作ってみた。

使い方

使い方はそんなに難しくない。以下のように Github の README.md に書いてあるとおりにコード読んでやればいい。

インストール

$ component install kazupon/vue-i18n

javascript

// imports var Vue = require('vue'); var i18n = require('vue-i18n'); // ready translated resources var resources = { en: { message: { hello: 'the world' } }, ja: { message: { hello: 'ザ・ワールド' } } }; // set plugin Vue.use(i18n, { lang: 'ja', // set translate target language, default 'en' resources: resources // set localization resources }); // create instance new Vue({ el: '#test-i18n' });

Javascript 側としては、translate に必要なリソースを準備して、Vue.use でインポートしたプラグインをセットして、後はインスタンス化するだけ。

テンプレート

テンプレートはこんな感じ。

<div id="test-i18n" class="message"> <p v-t="message.hello"></p> </div>

vue-i18n で拡張した v-t という directive を使って、Rails のような感じで localize するリソースのパスを指定するような感じで設定する。

実行結果

上記モロモロ、ブラウザで動作させるとこんな感じになる。

<div id="test-i18n" class="message"> <p>ザ・ワールド</p> </div>

このサンプルのコード

vue-i18n の example においてあります。

注意事項

vue-i18n で拡張した v-t は literal な directive です。なので、v-text といっしょに使ってしまうと、そっちで上書きされてしまうので、いっしょに使わない方がいい。 テストコードにも一応どんな動作になるかどうか、書いておいた。

v-text でもできるのになんでわざわざ作ったの?

DBなどのデータソースからひっぱてきた Model 的なデータと明示的に分けたいから。v-text でやると、どれが Model のデータで、どれが i18n なデータがごちゃごちゃして分かりにくくなってメンテナンス性がよくないですよね？だから作りました。

おしまい

興味がある人は、使ってみてフィードバックくれたら嬉しいです。:)　こんなクソコードよりいいものがあれば、PullRequest ください。

[kazupon-blog]

休業、復職のおしらせ

一部の方はご存じかと思いますが、今年度1月から CUUSOO SYSTEM にシステムアーキテクトとして join することになりました。 なので、昨年12月末日をもって、フリーランスとして活動していた Frapwings を暫くの間、休業します。

Frapwings として活動してからこれまでにお世話になったみなさま、いろいろとエキサイティングな仕事をいっしょにさせて頂いてありがとうございました。この場を借りましてお礼を申し上げます。

CUUSOO SYSTEM とはどんな会社なの？

CUUSOO という、モノづくりへの情熱を持ったクリエイターやデザイナーやユーザーさんと、商品化を実現するパートナー（ブランドオーナーやメーカー）をマッチングして、商品化を実現するための Web サービスを作っているベンチャーな会社です。

なんで復職するの？

CUUSOO SYSTEM との出会いは、Frapwings で活動しているときに、ちょっとした経由でお手伝いの話をかけて頂いたのがきっかけです。それを機に、CUUSOO のシステム開発のお手伝いをいっしょにさせて頂いておりました。CUUSOO は LEGO CUUSOO をベースにスクラッチから作っていて、自分が開発に参加したときは、まさに開発中のときでした。開発では、Github、TravisCI の他に、HipChat、CoverAlls、NewRelicといった自分が使ったことがないモダンなものを採用していて、いろいろと刺激的でした。

と、開発のお手伝いしているそんな中、ある時「かずぽんさん、社員として働きませんか？」とラブコールを頂きました。最初はあまり社員として働くことは興味がなかったのですが、いろいろと話していくうちに、システムを俯瞰できて開発をリードできる CTO 的なエンジニアが CUUSOO SYSTEM で必要としていて、自分のこれまでのキャリア・スキルを買ってくれているんだなあと理解し興味が湧いてきました。

決め手となったのは「開発は好きにやってもいいですよ」というのを頂いたこと。システムを一気通貫で俯瞰できて、コードが書ける匠な CTO 的なエンジニアなキャリアを目指す自分には、この責任重大で挑戦的なチャンスは、まさにうってつけです。しかもベンチャーで。これが決め手で join することを決意しました。

CUUSOO SYSTEM でチャレンジしていきたいこと

自分が今作っている、OSS のプロダクトである Fend(余裕があったらBend) で OSS、Node コミュニティはもちろん、CUUSOO に貢献できたらいいなと思っています。そして、社名の語源である"空想"。まさにユーザーが"空想"するものを提供できるようなサービス、プロダクトをユーザーさんに提供して貢献できたらいいなと思っています。

[kazupon-blog]

2013ふりかえり

2013 年も残すところ、今日となりました。 いかがお過ごしでしょうか？

だいたいの方は、実家や海外で年末年始を過ごす人が多いと思いますが、かずぽん一家は去年同様、今の自宅、関東でのんびりと過ごしている予定です。

今年について振り返ってみたのですが、一番の出来事は、やっぱり、子供が生まれて家族が増えたというのにつきます。

息子の成長

2月に生まれて早いもんで、うちの息子はもうそろそろ11ヶ月になります。生まれたてのころは、宇宙人というかお猿さんというか、そんな風貌で泣くことしかできかったのに、今はもうヨチヨチ、ハイハイして、つかまり立ちもできるようになって、離乳食食べてるときに「うま、うま〜」とか「まんまー」とか喋って感情豊かに子供らしくなってきている姿を見ると、癒されるの同時に成長に驚かされます。

はじめての育児

出産前に本やネットで育児についていろいろと準備していたのですが、実際に経験してみるとほんと大変だなあと実感します。生まれた最初の頃は、妻の母がこっちに来てくれていろいろと教えてくれたりして助けて頂いたのですが、妻と自分、二人だけになってからは自分たちだけでやらなくちゃいけなので大変でした。いろいろと育児でやらなくちゃいけないことはあるのですが、一番大変だったのが、お風呂。今はもう普通に息子といっしょにお風呂に入っていますが、最初の3ヶ月間ぐらいは、首が座っていなかったので、ガクンガクンしないよう頭から首の辺り支えながら、恐る恐る体を洗っていたのを覚えています。

来年に向けて

今年はこんな感じで、初めての育児の大変さを味わいつつ、日々成長する息子に癒されながら、いろいろと頑張った一年だったと思います。

来年は、引き続き家庭と両立しながら、ソフトウェアエンジニアとして、個人プロ��ェクトFendや、新しい仕事環境で頑張っていきたいと思います。

最後に

本年度はいろいろお世話になりました。来年もよろしくお願いいたします。 それでは、よい年末年始を！