Vue.js日本語サイトを支える仕組み

このエントリはVue.js #4 Advent Calendar 2017の20日目です。

はじめに

Vue.js の良いところを聞くと、日本語サイトが充実しているといった点がよく挙げられます。
私も2017年2月からVue.js 日本語サイトのメンテナに加わり¹、継続的にドキュメントの翻訳などをしてきたので、嬉しく感じます

今エントリでは自分がメンテナになってから、
フロー改善について取り組んできたことを紹介していきます

気付き

• lintのエラーがちらほらあるな？
• これ本当に人間がやらなきゃいけない更新？

lintのエラーがちらほらあるな？

npm run lintすることで、lintエラー¹に引っかからないか確認できるのですが、
それが強制されておらず、ユーザー任せとなってしまっていたので、mergeのタイミングでlintエラーに気付くということがありました。

そのため、

• precommitでlintを強制
• pull request作成時にtopicブランチでもCircle CIでlintを行う

ように改善しました。

これ本当に人間がやらなきゃいけない更新？

本家の更新を見ていると、CSSのスタイル変更など翻訳とは関係ない更新も多くあることに気付きました。
こういった更新はcherry-pickして取り込んでいたのですが、このへんを自動化できないかな？と思うようになりました。

そこで、作ったのがche-tsumiです。²
https://github.com/re-fort/che-tsumi

che-tsumiでは、

1. 本家ドキュメントの更新を検知
2. 日本語サイトのGitHub repoにissueをたてる
3. cherry-pickしてみて、conflictが発生しないかチェック
4. conflictが発生しなければ、pushしてpull requestを作成する

といったようなことをやってくれます。
実際に投げられているissue/pull requestはこんな感じです。

che-tsumiを導入したことにより、conflictが発生しない更新は、
pull requestをマージするだけでよくなり、人間の負荷が軽減しました。

また、翻訳文をみていると、このドキュメントはどこまで最新の内容が反映されているんだろう？と思うことがありますが、
本家との差分はissueで確認できる³ため、より見る方にとって親切になったと思いますし、より貢献しやすくなったかなーと思います！

所感

今年はVue.js サーバサイドレンダリングガイドやelectron-vue⁴などの翻訳などもやっていたりしました。
しかし、翻訳がない状態から翻訳するのと、差分を定期的にメンテしていくのは、また別の熱意が必要だなーというのを強く感じました。

以上です

1. スタイルガイドとして、JTF日本語標準スタイルガイドをカスタマイズしたものを使用しています ↩ ↩²

2. cherry-pickと茶摘みをかけています ↩

3. この運用をしているのはVue.jsのドキュメントだけであり、vue-routerなどの周辺ツールは現状あてはまりません ↩

4. ひとりでやったのでめちゃ大変だった ↩