Vue.js用バリデータコンポーネント vue-validatorを25日掛けて翻訳したお話です。

1. 翻訳から始める
Vue.js入門
Vue.js Tokyo v-meetup="#1"
2016/05/31

2. var Goope = new Vue({
el: '#aboutme’,
data: {
nickname: ‘バーチー’,
company: ‘GMO Pepabo’,
twitter: ‘@hypermkt’,
github: ‘hypermkt’
}
});

3. https://www.anikore.jp/

4. http://vuejs.github.io/vue-validator/ja/index.html
vue-validator 日本語ドキュメント
昨日(2016/05/30)リリースされました！
間に合ってよかった。。。

5. * Vue.js楽しい！もっと詳しくなりたい。
* Vue.js 日本語ドキュメントのおかげである
* 何か貢献できないものか・・・

6. 天からのメッセージ

7. vue-validator
* @kazupon さん開発
* Validator component for Vue.js
* 英語/中国語のドキュメント有り

8. 2026行(サンプルコード含む)
Installation
Getting started
Validation result structure
Validator syntax
v-model integration
Reset validation results
Form validatable
elements
Validation classes
Grouping
Error messages
Events
Lazy initialization
Custom validator
Validation timing
customization
Async validation
API

9. 翻訳の進め方

10. Vue.js 公式サイト日本語翻訳ガイド
* JTF日本語標準スタイルガイド（翻訳用） に準拠
* 「だである」ではなく「ですます」調
* 半角スペースでアルファベット両端を入れて読みやすく！
* 原則、一語一句翻訳、ただ日本語として分かりにくい場合は
読みやすさを優先
* 単語の統一 (特に技術用語)
https://github.com/vuejs-jp/jp.vuejs.org/blob/lang-ja/CONTRIBUTING.md

11. textlint :
Markdownなどテキスト向けのLint
ツール
textlint-rule-preset-JTF-style:
textlint用JTF日本語標準スタイルガイ
ド

12. $ cat .textlintrc
{
"rules": {
"preset-jtf-style": {
"1.1.3.箇条書き": false, // 敬体(です・ます)・常体(だ・ある)が統一されているか
"2.1.5.カタカナ": false, // 正しいカタカナ用語か、全角カタカナか
"2.1.6.カタカナの長音": false, // ?
"3.1.1.全角文字と半角文字の間": false, // 全角文字と半角文字の間にスペースを入れない
"3.1.2.全角文字どうし": false, // 全角文字どうしの間にスペースを入れない
"4.2.6.ハイフン(-)": false, // 和文ではハイフン(-)を使用しません。
"4.2.7.コロン(：)": false, // コロン(：)を使用する場合は「全角」で表記します。
"4.3.1.丸かっこ（）": false, // 全角のかっこ（）を使用してください。
"4.3.2.大かっこ［］": false, // 全角の大かっこを使用します
}
}
}
Vue.js 公式サイト向けに一部カスタマイズ

14. 翻訳手順
* 上から順番に翻訳する
* Vue.js公式、関連ライブラリの日本語翻訳と比
較
* textlint

15. 翻訳時に困った事

16. 挙動が分からない

17. 自分でコードを書いて確認する
<input type="text" v-validate:id="{
required: we_can_set_here_anything_because_it_is_dummy,
minlength: 3,
maxlength: 16 }">

18. 単純に翻訳できない・・・
This is useful, when you need to suppress the
validation (like the server-side validation) with
async validation feature (explain later).
英語力、JavaScript力...
これは非同期的な特徴のバリデーション(サーバーサイドバリデーションのような)を
抑制する必要がある場合に便利です。

20. handle success?:
ちょうど良い翻訳が思いつかない・・
成功/エラー時にハンドルする？対応する？

21. 英和辞典

22. ダスティン先生!!

23. ちょっとしたニュアンスで理解度が変わる
成功/エラー時にハンドルする？対応する？
（何に対して何をするか分かりづらい）
↓
成功/エラー時の対処をする
（問題に対して何かすることが鮮明となる）

24. * 最後にまとめて最新をmerge
* log を見ながら変更点を反映
* あまり時間が開き過ぎると差分を追うのが大変
ライブラリは常に更新される

25. 25日後...

26. ついに完了！！

27. 翻訳をして良かったこと
* vue-validatorの挙動がだいたい学べた
* Vue.js/OSSに貢献出来てよかった
* 会社の同僚/友人から褒められた

28. * 時間がかかる
* ライブラリを使ったことがなくても翻訳は出来る
* 25日経って気づいたが、翻訳してもVue.jsに詳しく
はならない
* 全くVue.js入門の話はしていなかった
* 次も挑戦したい vue-loader?
翻訳の感想

29. 終わり