8000 Guide > Data Properties and Methods の翻訳 by naokie · Pull Request #268 · vuejs-jp/ja.vuejs.org · GitHub
[go: up one dir, main page]

Skip to content

Guide > Data Properties and Methods の翻訳 #268

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.

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 6 commits into from
Apr 22, 2021
Merged
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
fix: translate 'debounce' and 'throttle'
  • Loading branch information
naokie committed Apr 21, 2021
commit 2205b06a6b53ec1c5ce2b72765e99ca78bbbe459
10 changes: 5 additions & 5 deletions src/guide/data-methods.md
Original file line number Diff line number Diff line change
Expand Up @@ -81,16 +81,16 @@ Vue は、 `methods` の `this` を自動的に束縛して、常にコンポー

### Debounce (デバウンス) と Throttle (スロットル)
Copy link
Member Author

Choose a reason for hiding this comment

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

debounce も throttle も、カタカナ表記にしていることさえ、あまりなさそうですが…
見出しで並列表記しておきつつ、本文中ではカタカナにしてみました。

Copy link
Member

Choose a reason for hiding this comment

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

おおいいですね! 👍

このケースのように、英語をベースに括弧付でカタカナを表記する場合は、以降では英語でいいと思います。ここで読者は読み方が分かって、以降は読めると思うので。


Vue は、 デバウンスやスロットルのサポートが組み込まれていませんが、 [Lodash](https://lodash.com/) などのライブラリを使って実装することができます。
Vue は、 Debounce や Throttle のサポートが組み込まれていませんが、 [Lodash](https://lodash.com/) などのライブラリを使って実装することができます。

コンポーネントが一度しか使われない場合には、 `methods` の中で直接デバウンスを適用することができます:
コンポーネントが一度しか使われない場合には、 `methods` の中で直接 Debounce を適用することができます:

```html
<script src="https://unpkg.com/lodash@4.17.20/lodash.min.js"></script>
<script>
Vue.createApp({
methods: {
// Lodash によるデバウンス
// Lodash による Debounce
click: _.debounce(function() {
// ... クリックに反応 ...
}, 500)
Expand All @@ -99,12 +99,12 @@ Vue は、 デバウンスやスロットルのサポートが組み込まれて
</script>
```

しかし、この方法ではコンポーネントが再利用される場合に、すべてのコンポーネントが同じデバウンス関数を共有するため、問題が起きる可能性があります。コンポーネントのインスタンスをお互いに独立させるために、 `created` ライフサイクルフックにデバウンス関数を追加することができます:
しかし、この方法ではコンポーネントが再利用される場合に、すべてのコンポーネントが同じ Debounce 関数を共有するため、問題が起きる可能性があります。コンポーネントのインスタンスをお互いに独立させるために、 `created` ライフサイクルフックに Debounce 関数を追加することができます:

```js
app.component('save-button', {
created() {
// Lodash によるデバウンス
// Lodash によるDebounce
this.debouncedClick = _.debounce(this.click, 500)
},
unmounted() {
Expand Down
0