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

4,865 views

Published on

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

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,865
On SlideShare
0
From Embeds
0
Number of Embeds
2,190
Actions
Shares
0
Downloads
5
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

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

  1. 1. 翻訳から始める Vue.js入門 Vue.js Tokyo v-meetup="#1" 2016/05/31
  2. 2. var Goope = new Vue({ el: '#aboutme’, data: { nickname: ‘バーチー’, company: ‘GMO Pepabo’, twitter: ‘@hypermkt’, github: ‘hypermkt’ } });
  3. 3. https://www.anikore.jp/
  4. 4. http://vuejs.github.io/vue-validator/ja/index.html vue-validator 日本語ドキュメント 昨日(2016/05/30)リリースされました! 間に合ってよかった。。。
  5. 5. * Vue.js楽しい!もっと詳しくなりたい。 * Vue.js 日本語ドキュメントのおかげである * 何か貢献できないものか・・・
  6. 6. 天からのメッセージ
  7. 7. vue-validator * @kazupon さん開発 * Validator component for Vue.js * 英語/中国語のドキュメント有り
  8. 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. 9. 翻訳の進め方
  10. 10. Vue.js 公式サイト日本語翻訳ガイド * JTF日本語標準スタイルガイド(翻訳用) に準拠 * 「だである」ではなく「ですます」調 * 半角スペースでアルファベット両端を入れて読みやすく! * 原則、一語一句翻訳、ただ日本語として分かりにくい場合は 読みやすさを優先 * 単語の統一 (特に技術用語) https://github.com/vuejs-jp/jp.vuejs.org/blob/lang-ja/CONTRIBUTING.md
  11. 11. textlint : Markdownなどテキスト向けのLint ツール textlint-rule-preset-JTF-style: textlint用JTF日本語標準スタイルガイ ド
  12. 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 公式サイト向けに一部カスタマイズ
  13. 13. 翻訳手順 * 上から順番に翻訳する * Vue.js公式、関連ライブラリの日本語翻訳と比 較 * textlint
  14. 14. 翻訳時に困った事
  15. 15. 挙動が分からない
  16. 16. 自分でコードを書いて確認する <input type="text" v-validate:id="{ required: we_can_set_here_anything_because_it_is_dummy, minlength: 3, maxlength: 16 }">
  17. 17. 単純に翻訳できない・・・ This is useful, when you need to suppress the validation (like the server-side validation) with async validation feature (explain later). 英語力、JavaScript力... これは非同期的な特徴のバリデーション(サーバーサイドバリデーションのような)を 抑制する必要がある場合に便利です。
  18. 18. handle success?: ちょうど良い翻訳が思いつかない・・ 成功/エラー時にハンドルする?対応する?
  19. 19. 英和辞典
  20. 20. ダスティン先生!!
  21. 21. ちょっとしたニュアンスで理解度が変わる 成功/エラー時にハンドルする?対応する? (何に対して何をするか分かりづらい) ↓ 成功/エラー時の対処をする (問題に対して何かすることが鮮明となる)
  22. 22. * 最後にまとめて最新をmerge * log を見ながら変更点を反映 * あまり時間が開き過ぎると差分を追うのが大変 ライブラリは常に更新される
  23. 23. 25日後...
  24. 24. ついに完了!!
  25. 25. 翻訳をして良かったこと * vue-validatorの挙動がだいたい学べた * Vue.js/OSSに貢献出来てよかった * 会社の同僚/友人から褒められた
  26. 26. * 時間がかかる * ライブラリを使ったことがなくても翻訳は出来る * 25日経って気づいたが、翻訳してもVue.jsに詳しく はならない * 全くVue.js入門の話はしていなかった * 次も挑戦したい vue-loader? 翻訳の感想
  27. 27. 終わり

×