Skip to content

「Tutorial > Form Bindings」の翻訳 #343

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Mar 9, 2022
Merged

「Tutorial > Form Bindings」の翻訳 #343

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f4ef4b5
「Tutorial > Form Bindings」の翻訳
kzhrk Mar 7, 2022
71a973c
fix: フォーム入力バインディング -> フォームバインディング
kzhrk Mar 8, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 11 additions & 11 deletions src/tutorial/src/step-5/description.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Form Bindings
# フォームバインディング

Using `v-bind` and `v-on` together, we can create two-way bindings on form input elements:
`v-bind` と `v-on` を一緒に使うことで、input 要素に双方向 (two-way) バインディングを作成することができます。

```vue-html
<input :value="text" @input="onInput">
Expand All @@ -11,8 +11,8 @@ Using `v-bind` and `v-on` together, we can create two-way bindings on form input
```js
methods: {
onInput(e) {
// a v-on handler receives the native DOM event
// as the argument.
// v-on ハンドラーはネイティブDOMのイベントを
// 引数として受け取ります。
text.value = e.target.value
}
}
Expand All @@ -24,24 +24,24 @@ methods: {

```js
function onInput(e) {
// a v-on handler receives the native DOM event
// as the argument.
// v-on ハンドラーはネイティブDOMのイベントを
// 引数として受け取ります。
text.value = e.target.value
}
```

</div>

Try typing in the input box - you should see the text in `<p>` updating as you type.
入力ボックスに文字を入力してみてください。`<p>` の中の文字が入力された通りに更新されるのがわかると思います。

To simplify two-way bindings, Vue provides a directive, `v-model`, which is essentially a syntax sugar for the above:
双方向 (two-way) バインディングを簡略化するために、Vue は上記の糖衣構文 (syntax sugar) の `v-model` というディレクティブを提供しています。

```vue-html
<input v-model="text">
```

`v-model` automatically syncs the `<input>`'s value with the bound state, so we no longer need to use a event handler for that.
`v-model` は `<input>` の値をバインドされた状態と自動的に同期するので、そのためのイベントハンドラーを使う必要はありません。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

用語集では bind を「束縛」とするようになっていますが、上でずっと「バインディング」と書いてきているので合わせるか悩ましいところですね...

Suggested change
`v-model` は `<input>` の値をバインドされた状態と自動的に同期するので、そのためのイベントハンドラーを使う必要はありません。
`v-model` は `<input>` の値を束縛された状態と自動的に同期するので、そのためのイベントハンドラーを使う必要はありません。

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

双方向バインディングやフォームバインディングで紐付けられる的なニュアンスは伝わっているので、このページではバインドの方が意味が伝わりやすいのかなと思いました。
とはいえ、用語集でルール統一しているのであれば「束縛」に集約するのも一理ありだと思いました。

Vue3のドキュメントで「バインド」を検索しても一定数ヒットする & 双方向バインディングという言葉も浸透しているのでbind はバインドするを許容してもよいのかなと思いました。
スクリーンショット 2022-03-08 22 53 56

「バインドする」の翻訳を許容する場合、用語集の「日本語にする」から「bind」を取り除く必要もあるかと思います。
最終判断はメンテナーの皆様におまかせします 🙏

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

自分が、これまで Vue の初期から関わって来た身からすると、バインドはという用語は訳さなくても、意味が理解できるようになってきているのを見てきているので、束縛 と訳すより、カタカナ日本語でもよいと思っています。
なので、用語集からも削除してもいいかと。

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

用語集は「バインドする」と訳すよう修正しておきます:pray:


`v-model` works not only on text inputs, but also other input types such as checkboxes, radio buttons, and select dropdowns. We cover more details in <a target="_blank" href="/guide/essentials/forms.html">Guide - Form Bindings</a>.
`v-model` はテキスト入力だけではなく、チェックボックス、ラジオボタン、セレクトボックスなどの他の入力タイプでも機能します。詳しくは<a target="_blank" href="/guide/essentials/forms.html">ガイド - フォームバインディング</a>を参照してください。

Now, try to refactor the code to use `v-model` instead.
では、代わりに `v-model` を使用するようにコードをリファクタリングしてみましょう。