翻訳から始めるVue.js 入門

翻訳から始める

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

2016/05/31

var Goope = new Vue({ el: '#aboutme’, data: { nickname: ‘バーチー’, company: ‘GMO Pepabo’,

twitter: ‘@hypermkt’, github: ‘hypermkt’

}});

https://www.anikore.jp/

http://vuejs.github.io/vue-validator/ja/index.html

vue-validator 日本語ドキュメント

昨日(2016/05/30)リリースされました！

間に合ってよかった。。。

* Vue.js楽しい！もっと詳しくなりたい。

* Vue.js 日本語ドキュメントのおかげである

* 何か貢献できないものか・・・

天からのメッセージ

vue-validator

* @kazupon さん開発

* Validator component for Vue.js* 英語/中国語のドキュメント有り

2026行(サンプルコード含む)InstallationGetting startedValidation result structureValidator syntaxv-model integrationReset validation resultsForm validatable elementsValidation classes

GroupingError messagesEventsLazy initializationCustom validatorValidation timing customizationAsync validationAPI

翻訳の進め方

Vue.js 公式サイト日本語翻訳ガイド

* JTF日本語標準スタイルガイド（翻訳用） に準拠

* 「だである」ではなく「ですます」調

* 半角スペースでアルファベット両端を入れて読みやすく！

* 原則、一語一句翻訳、ただ日本語として分かりにくい場合は読みやすさを優先

* 単語の統一 (特に技術用語)

https://github.com/vuejs-jp/jp.vuejs.org/blob/lang-ja/CONTRIBUTING.md

textlint : Markdownなどテキスト向けのLintツール

textlint-rule-preset-JTF-style: textlint用JTF日本語標準スタイルガイド

$ 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 公式サイト向けに一部カスタマイズ

翻訳手順

* 上から順番に翻訳する

* Vue.js公式、関連ライブラリの日本語翻訳と比較

* textlint

翻訳時に困った事

挙動が分からない

自分でコードを書いて確認する

<input type="text"　v-validate:id="{required: we_can_set_here_anything_because_it_is_dummy,minlength: 3,maxlength: 16 }">

単純に翻訳できない・・・

This is useful, when you need to suppress the validation (like the server-side validation) with async validation feature (explain later).

英語力、JavaScript力...

これは非同期的な特徴のバリデーション(サーバーサイドバリデーションのような)を抑制する必要がある場合に便利です。

handle success?:ちょうど良い翻訳が思いつかない・・

成功/エラー時にハンドルする？対応する？

英和辞典

ダスティン先生!!

ちょっとしたニュアンスで理解度が変わる

成功/エラー時にハンドルする？対応する？（何に対して何をするか分かりづらい）

↓成功/エラー時の対処をする

（問題に対して何かすることが鮮明となる）

* 最後にまとめて最新をmerge* log を見ながら変更点を反映

* あまり時間が開き過ぎると差分を追うのが大変

ライブラリは常に更新される

25日後...

ついに完了！！

翻訳をして良かったこと

* vue-validatorの挙動がだいたい学べた

* Vue.js/OSSに貢献出来てよかった

* 会社の同僚/友人から褒められた

* 時間がかかる

* ライブラリを使ったことがなくても翻訳は出来る

* 25日経って気づいたが、翻訳してもVue.jsに詳しくはならない

* 全くVue.js入門の話はしていなかった

* 次も挑戦したい vue-loader?

翻訳の感想

終わり