Submit Search
Upload
翻訳から始めるVue.js 入門
•
7 likes
•
8,677 views
Makoto Chiba
Follow
Vue.js用バリデータコンポーネント vue-validatorを25日掛けて翻訳したお話です。
Read less
Read more
Technology
Report
Share
Report
Share
1 of 29
Download now
Download to read offline
Recommended
JavaScriptフレームワーク入門にVue.jsはいかが?
JavaScriptフレームワーク入門にVue.jsはいかが?
好洋 山崎
Riot + generator で始める新しいデータバインディング
Riot + generator で始める新しいデータバインディング
Tsutomu Kawamura
One night Vue.js
One night Vue.js
Masahiro Kyuden
Vue.js with Go
Vue.js with Go
Kazuhiro Kubota
Vue.js 2.0を試してみた
Vue.js 2.0を試してみた
Toshiro Shimizu
Progressive Framework Vue.js 2.0
Progressive Framework Vue.js 2.0
Toshiro Shimizu
One Time Binding & Digest Loop
One Time Binding & Digest Loop
Kon Yuichi
13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejs
Takayoshi Tanaka
Recommended
JavaScriptフレームワーク入門にVue.jsはいかが?
JavaScriptフレームワーク入門にVue.jsはいかが?
好洋 山崎
Riot + generator で始める新しいデータバインディング
Riot + generator で始める新しいデータバインディング
Tsutomu Kawamura
One night Vue.js
One night Vue.js
Masahiro Kyuden
Vue.js with Go
Vue.js with Go
Kazuhiro Kubota
Vue.js 2.0を試してみた
Vue.js 2.0を試してみた
Toshiro Shimizu
Progressive Framework Vue.js 2.0
Progressive Framework Vue.js 2.0
Toshiro Shimizu
One Time Binding & Digest Loop
One Time Binding & Digest Loop
Kon Yuichi
13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejs
Takayoshi Tanaka
今すぐブラウザでES6を使おう
今すぐブラウザでES6を使おう
Hayashi Yuichi
OWIN って何?
OWIN って何?
miso- soup3
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
Yusuke Murata
Ma_gician (世界中のフロントエンダーの残業時間を減らす、新しいフロントエンドフレームワーク)<詳細版>
Ma_gician (世界中のフロントエンダーの残業時間を減らす、新しいフロントエンドフレームワーク)<詳細版>
Eucen Stew
React Redux Redux-Saga + サーバサイドレンダリング
React Redux Redux-Saga + サーバサイドレンダリング
エンジニア勉強会 エスキュービズム
Ma gician <Vue にはできないこと (1)> WeJS 37th
Ma gician <Vue にはできないこと (1)> WeJS 37th
Eucen Stew
Service workerとwebプッシュ通知
Service workerとwebプッシュ通知
zaru sakuraba
第9回rest勉強会 ダウンロード・アップロード編
第9回rest勉強会 ダウンロード・アップロード編
ksimoji
Windows コンテナを AKS に追加する
Windows コンテナを AKS に追加する
Yuto Takei
ASP.NET 新時代に向けて ~ ASP.NET 5 / Visual Studio 2015 基礎解説
ASP.NET 新時代に向けて ~ ASP.NET 5 / Visual Studio 2015 基礎解説
Akira Inoue
Spring Boot概要
Spring Boot概要
af not found
おれおれブログシステムにServiceWorkerを導入してみた #serviceworker
おれおれブログシステムにServiceWorkerを導入してみた #serviceworker
Toshiaki Maki
Nuxt
Nuxt
卓馬 三浦
Vue
Vue
卓馬 三浦
ASP.NETの進化とASP.NET Core Blazorの凄さ
ASP.NETの進化とASP.NET Core Blazorの凄さ
Sho Okada
Node.jsとAWS入門(Elastic Beanstalk & AWS SDK for Node.js)
Node.jsとAWS入門(Elastic Beanstalk & AWS SDK for Node.js)
崇之 清水
イケてる技術で品質を担保しつつスピード感のある開発を実現する冴えたやり方
イケてる技術で品質を担保しつつスピード感のある開発を実現する冴えたやり方
Yuta Matsumura
Vuenative
Vuenative
卓馬 三浦
今からでも遅くない! React事始め
今からでも遅くない! React事始め
ynaruta
20141129-dotNet2015
20141129-dotNet2015
Takayoshi Tanaka
Vue 2.0 + Vuex Router & Vuex at Vue.js
Vue 2.0 + Vuex Router & Vuex at Vue.js
Takuya Tejima
LINE Botでテラレンの受付を自動化してみた
LINE Botでテラレンの受付を自動化してみた
Yuki Matsukura
More Related Content
What's hot
今すぐブラウザでES6を使おう
今すぐブラウザでES6を使おう
Hayashi Yuichi
OWIN って何?
OWIN って何?
miso- soup3
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
Yusuke Murata
Ma_gician (世界中のフロントエンダーの残業時間を減らす、新しいフロントエンドフレームワーク)<詳細版>
Ma_gician (世界中のフロントエンダーの残業時間を減らす、新しいフロントエンドフレームワーク)<詳細版>
Eucen Stew
React Redux Redux-Saga + サーバサイドレンダリング
React Redux Redux-Saga + サーバサイドレンダリング
エンジニア勉強会 エスキュービズム
Ma gician <Vue にはできないこと (1)> WeJS 37th
Ma gician <Vue にはできないこと (1)> WeJS 37th
Eucen Stew
Service workerとwebプッシュ通知
Service workerとwebプッシュ通知
zaru sakuraba
第9回rest勉強会 ダウンロード・アップロード編
第9回rest勉強会 ダウンロード・アップロード編
ksimoji
Windows コンテナを AKS に追加する
Windows コンテナを AKS に追加する
Yuto Takei
ASP.NET 新時代に向けて ~ ASP.NET 5 / Visual Studio 2015 基礎解説
ASP.NET 新時代に向けて ~ ASP.NET 5 / Visual Studio 2015 基礎解説
Akira Inoue
Spring Boot概要
Spring Boot概要
af not found
おれおれブログシステムにServiceWorkerを導入してみた #serviceworker
おれおれブログシステムにServiceWorkerを導入してみた #serviceworker
Toshiaki Maki
Nuxt
Nuxt
卓馬 三浦
Vue
Vue
卓馬 三浦
ASP.NETの進化とASP.NET Core Blazorの凄さ
ASP.NETの進化とASP.NET Core Blazorの凄さ
Sho Okada
Node.jsとAWS入門(Elastic Beanstalk & AWS SDK for Node.js)
Node.jsとAWS入門(Elastic Beanstalk & AWS SDK for Node.js)
崇之 清水
イケてる技術で品質を担保しつつスピード感のある開発を実現する冴えたやり方
イケてる技術で品質を担保しつつスピード感のある開発を実現する冴えたやり方
Yuta Matsumura
Vuenative
Vuenative
卓馬 三浦
今からでも遅くない! React事始め
今からでも遅くない! React事始め
ynaruta
20141129-dotNet2015
20141129-dotNet2015
Takayoshi Tanaka
What's hot
(20)
今すぐブラウザでES6を使おう
今すぐブラウザでES6を使おう
OWIN って何?
OWIN って何?
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
Ma_gician (世界中のフロントエンダーの残業時間を減らす、新しいフロントエンドフレームワーク)<詳細版>
Ma_gician (世界中のフロントエンダーの残業時間を減らす、新しいフロントエンドフレームワーク)<詳細版>
React Redux Redux-Saga + サーバサイドレンダリング
React Redux Redux-Saga + サーバサイドレンダリング
Ma gician <Vue にはできないこと (1)> WeJS 37th
Ma gician <Vue にはできないこと (1)> WeJS 37th
Service workerとwebプッシュ通知
Service workerとwebプッシュ通知
第9回rest勉強会 ダウンロード・アップロード編
第9回rest勉強会 ダウンロード・アップロード編
Windows コンテナを AKS に追加する
Windows コンテナを AKS に追加する
ASP.NET 新時代に向けて ~ ASP.NET 5 / Visual Studio 2015 基礎解説
ASP.NET 新時代に向けて ~ ASP.NET 5 / Visual Studio 2015 基礎解説
Spring Boot概要
Spring Boot概要
おれおれブログシステムにServiceWorkerを導入してみた #serviceworker
おれおれブログシステムにServiceWorkerを導入してみた #serviceworker
Nuxt
Nuxt
Vue
Vue
ASP.NETの進化とASP.NET Core Blazorの凄さ
ASP.NETの進化とASP.NET Core Blazorの凄さ
Node.jsとAWS入門(Elastic Beanstalk & AWS SDK for Node.js)
Node.jsとAWS入門(Elastic Beanstalk & AWS SDK for Node.js)
イケてる技術で品質を担保しつつスピード感のある開発を実現する冴えたやり方
イケてる技術で品質を担保しつつスピード感のある開発を実現する冴えたやり方
Vuenative
Vuenative
今からでも遅くない! React事始め
今からでも遅くない! React事始め
20141129-dotNet2015
20141129-dotNet2015
Viewers also liked
Vue 2.0 + Vuex Router & Vuex at Vue.js
Vue 2.0 + Vuex Router & Vuex at Vue.js
Takuya Tejima
LINE Botでテラレンの受付を自動化してみた
LINE Botでテラレンの受付を自動化してみた
Yuki Matsukura
PayPalアカウントを使った便利で安心なプラットフォーム運用
PayPalアカウントを使った便利で安心なプラットフォーム運用
Junichi Okamura
Braintree+facebook messangerでチケット購入
Braintree+facebook messangerでチケット購入
Wakana Yoshizawa
Vue 淺談前端建置工具
Vue 淺談前端建置工具
andyyou
打造国际化产品:Strikingly的I18n实践
打造国际化产品:Strikingly的I18n实践
Daniel Gong
Iot_algyan_hands-on_20161129
Iot_algyan_hands-on_20161129
Junichi Okamura
細かすぎて伝わらないD3 ver.4の話
細かすぎて伝わらないD3 ver.4の話
清水 正行
第一次用 Vue.js 就愛上 [改]
第一次用 Vue.js 就愛上 [改]
Kuro Hsu
Angular 4 新手入門攻略完全制霸
Angular 4 新手入門攻略完全制霸
Will Huang
Viewers also liked
(10)
Vue 2.0 + Vuex Router & Vuex at Vue.js
Vue 2.0 + Vuex Router & Vuex at Vue.js
LINE Botでテラレンの受付を自動化してみた
LINE Botでテラレンの受付を自動化してみた
PayPalアカウントを使った便利で安心なプラットフォーム運用
PayPalアカウントを使った便利で安心なプラットフォーム運用
Braintree+facebook messangerでチケット購入
Braintree+facebook messangerでチケット購入
Vue 淺談前端建置工具
Vue 淺談前端建置工具
打造国际化产品:Strikingly的I18n实践
打造国际化产品:Strikingly的I18n实践
Iot_algyan_hands-on_20161129
Iot_algyan_hands-on_20161129
細かすぎて伝わらないD3 ver.4の話
細かすぎて伝わらないD3 ver.4の話
第一次用 Vue.js 就愛上 [改]
第一次用 Vue.js 就愛上 [改]
Angular 4 新手入門攻略完全制霸
Angular 4 新手入門攻略完全制霸
Similar to 翻訳から始めるVue.js 入門
[使い倒し]GitHubのIssueとTFS/VSOのWorkItem連動に挑む(2015/08/26)
[使い倒し]GitHubのIssueとTFS/VSOのWorkItem連動に挑む(2015/08/26)
Masanori Ishigami
いまさら触るAwt
いまさら触るAwt
Keiichi Kobayashi
VSCodeで始めるAzure Static Web Apps開発
VSCodeで始めるAzure Static Web Apps開発
Yuta Matsumura
2020/06/16 tsjp-azure-staticwebapps-vs_codespaces
2020/06/16 tsjp-azure-staticwebapps-vs_codespaces
Issei Hiraoka
20200304 vuejs
20200304 vuejs
yamamotomsc
Gws in fukuoka
Gws in fukuoka
Takuma Watabiki
Hands on PhotoBlog App with WordPress REST API and App Inventor
Hands on PhotoBlog App with WordPress REST API and App Inventor
Hong Chen
Netラボ2012年6月勉強会 マイクロソフトのオープンソース戦略を考える
Netラボ2012年6月勉強会 マイクロソフトのオープンソース戦略を考える
david9142
AppiumのWebViewアプリテストの仕組みとハマりどころ
AppiumのWebViewアプリテストの仕組みとハマりどころ
Masayuki Wakizaka
2021/03/19 パブリッククラウドを活かす運用プロセス自動化
2021/03/19 パブリッククラウドを活かす運用プロセス自動化
Issei Hiraoka
初めてのvue.js(2.x系)
初めてのvue.js(2.x系)
健人 井関
Automatic api document generation 101
Automatic api document generation 101
LINE Corporation
OpenGLプログラミング
OpenGLプログラミング
幸雄 村上
中・大規模でLaravelを導入するTips
中・大規模でLaravelを導入するTips
Kenjiro Kubota
Vue.jsの関連ツール・ライブラリ(Vuex, Vue-Router, Nuxt)
Vue.jsの関連ツール・ライブラリ(Vuex, Vue-Router, Nuxt)
Kei Yagi
Durable Functions (Core) 気になっていたことを勉強がてら実装してみた
Durable Functions (Core) 気になっていたことを勉強がてら実装してみた
朋志 佐々木
React VR ことはじめ
React VR ことはじめ
Kazuhiro Hara
jQuery と MVC で実践する標準志向 Web 開発
jQuery と MVC で実践する標準志向 Web 開発
Akira Inoue
APIMeetup 20170329_ichimura
APIMeetup 20170329_ichimura
Tomohiro Ichimura
Kubernetes Meetup Tokyo #23 kubebuilder-v2
Kubernetes Meetup Tokyo #23 kubebuilder-v2
Kazuhito Matsuda
Similar to 翻訳から始めるVue.js 入門
(20)
[使い倒し]GitHubのIssueとTFS/VSOのWorkItem連動に挑む(2015/08/26)
[使い倒し]GitHubのIssueとTFS/VSOのWorkItem連動に挑む(2015/08/26)
いまさら触るAwt
いまさら触るAwt
VSCodeで始めるAzure Static Web Apps開発
VSCodeで始めるAzure Static Web Apps開発
2020/06/16 tsjp-azure-staticwebapps-vs_codespaces
2020/06/16 tsjp-azure-staticwebapps-vs_codespaces
20200304 vuejs
20200304 vuejs
Gws in fukuoka
Gws in fukuoka
Hands on PhotoBlog App with WordPress REST API and App Inventor
Hands on PhotoBlog App with WordPress REST API and App Inventor
Netラボ2012年6月勉強会 マイクロソフトのオープンソース戦略を考える
Netラボ2012年6月勉強会 マイクロソフトのオープンソース戦略を考える
AppiumのWebViewアプリテストの仕組みとハマりどころ
AppiumのWebViewアプリテストの仕組みとハマりどころ
2021/03/19 パブリッククラウドを活かす運用プロセス自動化
2021/03/19 パブリッククラウドを活かす運用プロセス自動化
初めてのvue.js(2.x系)
初めてのvue.js(2.x系)
Automatic api document generation 101
Automatic api document generation 101
OpenGLプログラミング
OpenGLプログラミング
中・大規模でLaravelを導入するTips
中・大規模でLaravelを導入するTips
Vue.jsの関連ツール・ライブラリ(Vuex, Vue-Router, Nuxt)
Vue.jsの関連ツール・ライブラリ(Vuex, Vue-Router, Nuxt)
Durable Functions (Core) 気になっていたことを勉強がてら実装してみた
Durable Functions (Core) 気になっていたことを勉強がてら実装してみた
React VR ことはじめ
React VR ことはじめ
jQuery と MVC で実践する標準志向 Web 開発
jQuery と MVC で実践する標準志向 Web 開発
APIMeetup 20170329_ichimura
APIMeetup 20170329_ichimura
Kubernetes Meetup Tokyo #23 kubebuilder-v2
Kubernetes Meetup Tokyo #23 kubebuilder-v2
Recently uploaded
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
FumieNakayama
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
Yuki Kikuchi
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
UEHARA, Tetsutaro
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NTT DATA Technology & Innovation
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
FumieNakayama
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
博三 太田
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
akihisamiyanaga1
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Hiroshi Tomioka
Recently uploaded
(8)
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
翻訳から始めるVue.js 入門
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 公式サイト向けに一部カスタマイズ
13.
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力... これは非同期的な特徴のバリデーション(サーバーサイドバリデーションのような)を 抑制する必要がある場合に便利です。
19.
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.
終わり
Download now