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

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

Upload: makoto-chiba

Post on 16-Apr-2017

5.062 views

Category:

Technology


0 download

TRANSCRIPT

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

翻訳から始める

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

2016/05/31

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

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

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

}});

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

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

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

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

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

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

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

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

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

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

天からのメッセージ

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

vue-validator

* @kazupon さん開発

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

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

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

GroupingError messagesEventsLazy initializationCustom validatorValidation timing customizationAsync validationAPI

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

翻訳の進め方

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

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

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

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

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

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

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

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

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

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

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

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

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

Page 13: 翻訳から始めるVue.js 入門
Page 14: 翻訳から始めるVue.js 入門

翻訳手順

* 上から順番に翻訳する

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

* textlint

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

翻訳時に困った事

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

挙動が分からない

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

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

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

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

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

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

英語力、JavaScript力...

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

Page 19: 翻訳から始めるVue.js 入門
Page 20: 翻訳から始めるVue.js 入門

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

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

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

英和辞典

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

ダスティン先生!!

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

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

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

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

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

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

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

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

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

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

25日後...

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

ついに完了!!

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

翻訳をして良かったこと

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

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

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

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

* 時間がかかる

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

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

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

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

翻訳の感想

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

終わり