diff --git a/src/content/learn/manipulating-the-dom-with-refs.md b/src/content/learn/manipulating-the-dom-with-refs.md
index 3e91a7694..c3cbaa2ba 100644
--- a/src/content/learn/manipulating-the-dom-with-refs.md
+++ b/src/content/learn/manipulating-the-dom-with-refs.md
@@ -1,52 +1,52 @@
---
-title: 'Manipulating the DOM with Refs'
+title: 'ref で DOM を操作する'
---
-React automatically updates the [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction) to match your render output, so your components won't often need to manipulate it. However, sometimes you might need access to the DOM elements managed by React--for example, to focus a node, scroll to it, or measure its size and position. There is no built-in way to do those things in React, so you will need a *ref* to the DOM node.
+React はレンダー結果に合致するよう自動的に [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction) を更新するため、コンポーネントで DOM を操作する必要は通常ほとんどありません。ただし、ノードにフォーカスを当てたり、スクロールさせたり、サイズや位置を測定したりするなどの場合に、React が管理する DOM 要素へのアクセスが必要なことがあります。React にはこれらを行う組み込みの方法が存在しないため、DOM ノードを参照する *ref* が必要になります。
-- How to access a DOM node managed by React with the `ref` attribute
-- How the `ref` JSX attribute relates to the `useRef` Hook
-- How to access another component's DOM node
-- In which cases it's safe to modify the DOM managed by React
+- React が管理する DOM ノードに `ref` 属性を使ってアクセスする方法
+- `ref` JSX 属性が `useRef` フックとどのように関連しているか
+- 別コンポーネントの DOM ノードにアクセスする方法
+- React が管理する DOM を安全に変更できるのはどのような場合か
-## Getting a ref to the node {/*getting-a-ref-to-the-node*/}
+## ノードへの ref の取得 {/*getting-a-ref-to-the-node*/}
-To access a DOM node managed by React, first, import the `useRef` Hook:
+React が管理する DOM ノードにアクセスするには、まず `useRef` フックをインポートします。
```js
import { useRef } from 'react';
```
-Then, use it to declare a ref inside your component:
+次に、それを使ってコンポーネント内で ref を宣言します。
```js
const myRef = useRef(null);
```
-Finally, pass your ref as the `ref` attribute to the JSX tag for which you want to get the DOM node:
+最後に、参照を得たい DOM ノートに対応する JSX タグの `ref` 属性にこの ref を渡します。
```js
```
-The `useRef` Hook returns an object with a single property called `current`. Initially, `myRef.current` will be `null`. When React creates a DOM node for this `
`, React will put a reference to this node into `myRef.current`. You can then access this DOM node from your [event handlers](/learn/responding-to-events) and use the built-in [browser APIs](https://developer.mozilla.org/docs/Web/API/Element) defined on it.
+`useRef` フックは、`current` という単一のプロパティを持つオブジェクトを返します。最初は `myRef.current` は `null` になっています。React がこの `
` に対応する DOM ノードを作成すると、React はこのノードへの参照を `myRef.current` に入れます。その後、[イベントハンドラ](/learn/responding-to-events)からこの DOM ノードにアクセスし、ノードに定義されている組み込みの[ブラウザ API](https://developer.mozilla.org/docs/Web/API/Element) を使用できるようになります。
```js
// You can use any browser APIs, for example:
myRef.current.scrollIntoView();
```
-### Example: Focusing a text input {/*example-focusing-a-text-input*/}
+### 例：テキスト入力フィールドにフォーカスを当てる {/*example-focusing-a-text-input*/}
-In this example, clicking the button will focus the input:
+この例では、ボタンをクリックすると入力フィールドにフォーカスが当たります。
@@ -73,18 +73,18 @@ export default function Form() {
-To implement this:
+これを実装するには以下のようにします。
-1. Declare `inputRef` with the `useRef` Hook.
-2. Pass it as ``. This tells React to **put this ``'s DOM node into `inputRef.current`.**
-3. In the `handleClick` function, read the input DOM node from `inputRef.current` and call [`focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus) on it with `inputRef.current.focus()`.
-4. Pass the `handleClick` event handler to `