From c3f8604709a47592a09a7740310a12d9f0512681 Mon Sep 17 00:00:00 2001
From: UHAsikakutou <91722200+UHAsikakutou@users.noreply.github.com>
Date: Thu, 6 Jun 2024 22:07:50 +0900
Subject: [PATCH] Fix: Japanese comments

---
 .../react/ja/composite-component.md           | 22 ++++-----
 .../intro-to-storybook/react/ja/conclusion.md |  2 +-
 content/intro-to-storybook/react/ja/data.md   | 32 ++++++-------
 content/intro-to-storybook/react/ja/deploy.md |  8 ++--
 .../react/ja/get-started.md                   | 14 +++---
 content/intro-to-storybook/react/ja/screen.md | 48 +++++++++----------
 .../react/ja/simple-component.md              | 26 +++++-----
 .../react/ja/using-addons.md                  |  4 +-
 8 files changed, 78 insertions(+), 78 deletions(-)

diff --git a/content/intro-to-storybook/react/ja/composite-component.md b/content/intro-to-storybook/react/ja/composite-component.md
index 68b8952f2..8f579b92e 100644
--- a/content/intro-to-storybook/react/ja/composite-component.md
+++ b/content/intro-to-storybook/react/ja/composite-component.md
@@ -9,11 +9,11 @@ commit: '429780a'
 
 ## TaskList (タスクリスト)
 
-Taskbox はピン留めされたタスクを通常のタスクより上部に表示することで強調します。これにより `TaskList` に、タスクのリストが通常のタスクのみである場合とピン留めされたタスクとの組み合わせである場合という、ストーリーを追加するべき 2 つのバリエーションができます。
+Taskbox はピン留めされたタスクを通常のタスクより上部に表示することで強調します。これにより `TaskList` に、タスクのリストが通常のタスクのみである場合と、ピン留めされたタスクとの組み合わせである場合というストーリーを追加するべき 2 つのバリエーションができます。
 
 ![通常のタスクとピン留めされたタスク](/intro-to-storybook/tasklist-states-1.png)
 
-`Task` のデータは非同期的に送信されるので、接続がないことを示すため、読み込み中の状態**も併せて**必要となります。さらにタスクがない場合に備え、空の状態も必要です。
+`Task` のデータは非同期に送信されるので、接続がないことを示すため、読み込み中の状態**も併せて**必要となります。さらにタスクがない場合に備え、空の状態も必要です。
 
 ![空の状態と読み込み中の状態](/intro-to-storybook/tasklist-states-2.png)
 
@@ -68,8 +68,8 @@ export default {
 
 export const Default = {
   args: {
-    // argsによってストーリーを形成します。
-    // データはTask.stories.jsxのDefaultストーリーから継承しています。
+    // Shaping the stories through args composition.
+    // The data was inherited from the Default story in Task.stories.jsx.
     tasks: [
       { ...TaskStories.Default.args.task, id: '1', title: 'Task 1' },
       { ...TaskStories.Default.args.task, id: '2', title: 'Task 2' },
@@ -99,8 +99,8 @@ export const Loading = {
 
 export const Empty = {
   args: {
-    // argsによってストーリーを形成します。
-    // データは上のLoadingストーリーから継承しています。
+    // Shaping the stories through args composition.
+    // Inherited data coming from the Loading story.
     ...Loading.args,
     loading: false,
   },
@@ -182,7 +182,7 @@ export default function TaskList({ loading, tasks, onPinTask, onArchiveTask }) {
 }
 ```
 
-追加したマークアップで UI は以下のようになります:
+追加したマークアップで UI は以下のようになります。
 
 <video autoPlay muted playsInline loop>
   <source
@@ -254,13 +254,13 @@ export default function TaskList({ loading, tasks, onPinTask, onArchiveTask }) {
 }
 
 + TaskList.propTypes = {
-+  /** ローディング状態かどうかをチェックする */
++  /** Checks if it's in loading state */
 +  loading: PropTypes.bool,
-+  /** タスクの配列 */
++  /** The list of tasks */
 +  tasks: PropTypes.arrayOf(Task.propTypes.task).isRequired,
-+  /** タスクのをの状態を「ピン留め済」に変更するイベント */
++  /** Event to change the task to pinned */
 +  onPinTask: PropTypes.func,
-+  /** タスクの状態を「アーカイブ済」に変更するイベント */
++  /** Event to change the task to archived */
 +  onArchiveTask: PropTypes.func,
 + };
 + TaskList.defaultProps = {
diff --git a/content/intro-to-storybook/react/ja/conclusion.md b/content/intro-to-storybook/react/ja/conclusion.md
index e7c4c77c6..03233cd3d 100644
--- a/content/intro-to-storybook/react/ja/conclusion.md
+++ b/content/intro-to-storybook/react/ja/conclusion.md
@@ -27,7 +27,7 @@ Storybook は React、React Native、Vue、Angular、Svelte、その他のフレ
 
 ## 誰が Intro to Storybook チュートリアルを作成しているのでしょうか？
 
-文書や、コード、製作は [Chromatic](https://www.chromatic.com/?utm_source=storybook_website&utm_medium=link&utm_campaign=storybook) の貢献です。このチュートリアルは Chromatic の [GraphQL + React tutorial series](https://www.chromatic.com/blog/graphql-react-tutorial-part-1-6) を参考にしています。
+文書や、コード、製作は [Chromatic](https://www.chromatic.com/?utm_source=storybook_website&utm_medium=link&utm_campaign=storybook) の貢献によるものです。このチュートリアルは Chromatic の [GraphQL + React tutorial series](https://www.chromatic.com/blog/graphql-react-tutorial-part-1-6) を参考にしています。
 
 このようなチュートリアルや記事をさらに読みたい場合は、Storybook のメーリングリストに登録することをオススメします。
 
diff --git a/content/intro-to-storybook/react/ja/data.md b/content/intro-to-storybook/react/ja/data.md
index fd3289a70..0ef3d6feb 100644
--- a/content/intro-to-storybook/react/ja/data.md
+++ b/content/intro-to-storybook/react/ja/data.md
@@ -15,23 +15,23 @@ commit: 'c70ec15'
 
 ここでは、[Redux](https://redux.js.org/) でデータを保存するためにもっとも効果的な開発用ツールセットである [Redux Toolkit](https://redux-toolkit.js.org/)を使用し、アプリケーションにシンプルなデータモデルを作ります。[Apollo](https://www.apollographql.com/client/) や [MobX](https://mobx.js.org/) といった他のデータ管理用のライブラリーでもここでのパターンが使用できます。
 
-以下のコマンドを実行し必要な依存関係を追加しましょう:
+以下のコマンドを実行し必要な依存関係を追加しましょう。
 
 ```shell
 yarn add @reduxjs/toolkit react-redux
 ```
 
-まず、タスクの状態を変更するアクションを処理する単純な Redux のストアを作ります。`src/lib` フォルダの `store.js` というファイルを作ってください (あえて簡単にしています):
+まず、タスクの状態を変更するアクションを処理する単純な Redux のストアを作ります。`src/lib` フォルダの `store.js` というファイルを作ってください (あえて簡単にしています)。
 
 ```js:title=src/lib/store.js
-/* シンプルなreduxのストア/アクション/リデューサーの実装です。
- * 本当のアプリケーションはもっと複雑で、異なるファイルに分けられます。
+/* A simple redux store/actions/reducer implementation.
+ * A true app would be more complex and separated into different files.
  */
 import { configureStore, createSlice } from '@reduxjs/toolkit';
 
 /*
- * アプリケーションのロード時のストアの初期状態です。
- * 通常、サーバーから取得しますが、今回は気にしないでください(ファイルに直書きしています)。
+ * The initial state of our store when the app loads.
+ * Usually, you would fetch this from a server. Let's not worry about that now
  */
 const defaultTasks = [
   { id: '1', title: 'Something', state: 'TASK_INBOX' },
@@ -46,8 +46,8 @@ const TaskBoxData = {
 };
 
 /*
- * ストアはここで作成されます。
- * Redux Toolkitのスライスについて詳しくはドキュメントを参照してください:
+ * The store is created here.
+ * You can read more about Redux Toolkit's slices in the docs:
  * https://redux-toolkit.js.org/api/createSlice
  */
 const TasksSlice = createSlice({
@@ -64,12 +64,12 @@ const TasksSlice = createSlice({
   },
 });
 
-// スライスに含まれるアクションはコンポーネントで使用するためにエクスポートされます
+// The actions contained in the slice are exported for usage in our components
 export const { updateTaskState } = TasksSlice.actions;
 
 /*
- * アプリケーションのストアの設定はここにあります。
- * ReduxのconfigureStoreについて詳しくはドキュメントを参照してください:
+ * Our app's store configuration goes here.
+ * Read more about Redux's configureStore in the docs:
  * https://redux-toolkit.js.org/api/configureStore
  */
 const store = configureStore({
@@ -90,7 +90,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { updateTaskState } from '../lib/store';
 
 export default function TaskList() {
-  // ストアから状態を取得します
+  // We're retrieving our state from the store
   const tasks = useSelector((state) => {
     const tasksInOrder = [
       ...state.taskbox.tasks.filter((t) => t.state === 'TASK_PINNED'),
@@ -107,11 +107,11 @@ export default function TaskList() {
   const dispatch = useDispatch();
 
   const pinTask = (value) => {
-    // ストアにピン留めされたタスクを送信します
+    // We're dispatching the Pinned event back to our store
     dispatch(updateTaskState({ id: value, newTaskState: 'TASK_PINNED' }));
   };
   const archiveTask = (value) => {
-    // ストアにアーカイブされたタスクを送信します
+    // We're dispatching the Archive event back to our store
     dispatch(updateTaskState({ id: value, newTaskState: 'TASK_ARCHIVED' }));
   };
   const LoadingRow = (
@@ -181,7 +181,7 @@ import { Provider } from 'react-redux';
 
 import { configureStore, createSlice } from '@reduxjs/toolkit';
 
-// 超シンプルなストアの状態のモック
+// A super-simple mock of the state of the store
 export const MockedState = {
   tasks: [
     { ...TaskStories.Default.args.task, id: '1', title: 'Task 1' },
@@ -195,7 +195,7 @@ export const MockedState = {
   error: null,
 };
 
-// 超シンプルなreduxストアのモック
+// A super-simple mock of a redux store
 const Mockstore = ({ taskboxState, children }) => (
   <Provider
     store={configureStore({
diff --git a/content/intro-to-storybook/react/ja/deploy.md b/content/intro-to-storybook/react/ja/deploy.md
index 56ce9cda5..2c05b1a30 100644
--- a/content/intro-to-storybook/react/ja/deploy.md
+++ b/content/intro-to-storybook/react/ja/deploy.md
@@ -17,15 +17,15 @@ Storybook をデプロイするには、まず静的サイトとしてエクス
 
 このチュートリアルでは、Storybook のメンテナーが作成した、無料のホスティングサービスである <a href="https://www.chromatic.com/?utm_source=storybook_website&utm_medium=link&utm_campaign=storybook">Chromatic</a> を使用します。Chromatic を使えば、クラウド上に Storybook を安全にデプロイし、またホストできます。
 
-### GitHub にリポジトリーを作成する
+### GitHub にリポジトリを作成する
 
-デプロイの前に、リモートのバージョン管理サービスへローカルのコードを同期しなければなりません。[はじめの章](/intro-to-storybook/react/ja/get-started/)でプロジェクトを初期化した際に、ローカルのリポジトリーはすでに作成されています。この段階に来れば、リモートリポジトリーにプッシュできるコミットがあるはずです。
+デプロイの前に、リモートのバージョン管理サービスへローカルのコードを同期しなければなりません。[はじめの章](/intro-to-storybook/react/ja/get-started/)でプロジェクトを初期化した際に、ローカルのリポジトリはすでに作成されています。この段階に来れば、リモートリポジトリにプッシュできるコミットがあるはずです。
 
 [ここから](https://github.com/new) GitHub にアクセスし、リポジトリを作りましょう。リポジトリの名前はローカルと同じく「taskbox」とします。
 
 ![GitHub のセットアップ](/intro-to-storybook/github-create-taskbox.png)
 
-新しいリポジトリを作ったら origin の URL をコピーして、次のコマンドを実行し、ローカルの Git リポジトリを GitHub のリモートリポジトリーに追加します。
+新しいリポジトリを作ったら origin の URL をコピーして、次のコマンドを実行し、ローカルの Git リポジトリを GitHub のリモートリポジトリに追加します。
 
 ```shell
 git remote add origin https://github.com/<GitHubのユーザ名>/taskbox.git
@@ -123,7 +123,7 @@ git add .
 git commit -m "GitHub action setup"
 ```
 
-最後にリモートリポジトリーにプッシュします。
+最後にリモートリポジトリにプッシュします。
 
 ```shell
 git push origin main
diff --git a/content/intro-to-storybook/react/ja/get-started.md b/content/intro-to-storybook/react/ja/get-started.md
index 60cd0fa5e..69478512a 100644
--- a/content/intro-to-storybook/react/ja/get-started.md
+++ b/content/intro-to-storybook/react/ja/get-started.md
@@ -13,15 +13,15 @@ Storybook は開発時にアプリケーションと並行して動きます。S
 
 Storybook を開発プロセスに組み込むにあたり、いくつかの手順を踏む必要があります。まずは、[degit](https://github.com/Rich-Harris/degit) を使用してビルド環境をセットアップしましょう。このパッケージを利用することで、テンプレート（アプリケーションの一部をデフォルト設定で構築したもの）をダウンロードし、開発ワークフローの短縮に役立てることができます。
 
-それでは、次のコマンドを実行してください:
+それでは、次のコマンドを実行してください。
 
 ```shell:clipboard=false
-# テンプレートをクローンする
+# Clone the template
 npx degit chromaui/intro-storybook-react-template taskbox
 
 cd taskbox
 
-# 依存関係をインストールする
+# Install dependencies
 yarn
 ```
 
@@ -29,13 +29,13 @@ yarn
 💡 このテンプレートには本バージョンのチュートリアルに必要なスタイル、アセット、最低限の設定が含まれています。
 </div>
 
-それでは、アプリケーションのさまざまな環境が問題なく動くことを次のコマンドで確認しましょう:
+それでは、アプリケーションのさまざまな環境が問題なく動くことを次のコマンドで確認しましょう。
 
 ```shell:clipboard=false
-# コンポーネントエクスプローラを6006番ポートで起動する
+# Start the component explorer on port 6006:
 yarn storybook
 
-# フロントエンドアプリケーションを5173番ポートで起動する
+# Run the frontend app proper on port 5173:
 yarn dev
 ```
 
@@ -59,7 +59,7 @@ git init
 git add .
 ```
 
-次に以下を実行します:
+さらに:
 
 ```shell
 git commit -m "first commit"
diff --git a/content/intro-to-storybook/react/ja/screen.md b/content/intro-to-storybook/react/ja/screen.md
index 3d5bd371a..bf8647492 100644
--- a/content/intro-to-storybook/react/ja/screen.md
+++ b/content/intro-to-storybook/react/ja/screen.md
@@ -16,8 +16,8 @@ commit: '2275632'
 まず、リモート API に接続してさまざまな状態 (すなわち、`error`、`succeeded`) をアプリケーションで扱えるようにするために、Redux ストア (`src/lib/store.js` 内) をアップデートするところから始めましょう。
 
 ```diff:title=src/lib/store.js
-/* シンプルなreduxのストア/アクション/リデューサーの実装です。
- * 本当のアプリケーションはもっと複雑で、異なるファイルに分けられます。
+/* A simple redux store/actions/reducer implementation.
+ * A true app would be more complex and separated into different files.
  */
 import {
   configureStore,
@@ -26,8 +26,8 @@ import {
 } from '@reduxjs/toolkit';
 
 /*
- * アプリケーションのロード時のストアの初期状態です。
- * 通常、サーバーから取得しますが、今回は気にしないでください(ファイルに直書きしています)。
+ * The initial state of our store when the app loads.
+ * Usually, you would fetch this from a server. Let's not worry about that now
  */
 
 const TaskBoxData = {
@@ -37,8 +37,8 @@ const TaskBoxData = {
 };
 
 /*
- * AsyncThunkを使ってリモートエンドポイントからタスクを取得します。
- * Redux Toolkitのthunkについて詳しくはドキュメントを参照してください:
+ * Creates an asyncThunk to fetch tasks from a remote endpoint.
+ * You can read more about Redux Toolkit's thunks in the docs:
  * https://redux-toolkit.js.org/api/createAsyncThunk
  */
 + export const fetchTasks = createAsyncThunk('todos/fetchTodos', async () => {
@@ -55,8 +55,8 @@ const TaskBoxData = {
 + });
 
 /*
- * ストアはここで作成されます。
- * Redux Toolkitのスライスについて詳しくはドキュメントを参照してください:
+ * The store is created here.
+ * You can read more about Redux Toolkit's slices in the docs:
  * https://redux-toolkit.js.org/api/createSlice
  */
 const TasksSlice = createSlice({
@@ -72,8 +72,8 @@ const TasksSlice = createSlice({
     },
   },
   /*
-   * 非同期アクション用のリデューサを追加します。
-   * 詳しくは https://redux-toolkit.js.org/api/createAsyncThunk を参照してください。
+   * Extends the reducer for the async actions
+   * You can read more about it at https://redux-toolkit.js.org/api/createAsyncThunk
    */
 +  extraReducers(builder) {
 +    builder
@@ -96,12 +96,12 @@ const TasksSlice = createSlice({
 + },
 });
 
-// スライスに含まれるアクションはコンポーネントで使用するためにエクスポートされます
+// The actions contained in the slice are exported for usage in our components
 export const { updateTaskState } = TasksSlice.actions;
 
 /*
- * アプリケーションのストアの設定はここにあります。
- * ReduxのconfigureStoreについて詳しくはドキュメントを参照してください:
+ * Our app's store configuration goes here.
+ * Read more about Redux's configureStore in the docs:
  * https://redux-toolkit.js.org/api/configureStore
  */
 const store = configureStore({
@@ -113,7 +113,7 @@ const store = configureStore({
 export default store;
 ```
 
-リモート API エンドポイントからデータを取得するようにストアを更新し、アプリのさまざまな状態を処理できるように準備したので、`InboxScreen.jsx` を `src/components` ディレクトリに作成しましょう:
+リモート API エンドポイントからデータを取得するようにストアを更新し、アプリのさまざまな状態を処理できるように準備したので、`InboxScreen.jsx` を `src/components` ディレクトリに作成しましょう。
 
 ```jsx:title=src/components/InboxScreen.jsx
 import React, { useEffect } from 'react';
@@ -155,7 +155,7 @@ export default function InboxScreen() {
 }
 ```
 
-さらに、`App` コンポーネントを `InboxScreen` を描画するように変更します (いずれはルーターにどの画面を表示するか決めてもらいますが、今は気にしないでください):
+さらに、`App` コンポーネントを `InboxScreen` を描画するように変更します (いずれはルーターにどの画面を表示するか決めてもらいますが、今は気にしないでください)。
 
 ```diff:title=src/App.jsx
 - import { useState } from 'react'
@@ -204,7 +204,7 @@ export default App;
 
 しかし、面白くなるのは Storybook でストーリーをレンダリングするときです。
 
-前回見たように、`TaskList` コンポーネントは現在 **接続された** コンポーネントで、タスクのレンダリングは Redux ストアに依存しています。`InboxScreen` も接続されたコンポーネントなので、同じように、ストーリーにストアを渡します。以下のように `InboxScreen.stories.jsx` でストーリーを設定します:
+前回見たように、`TaskList` コンポーネントは現在 **接続された** コンポーネントで、タスクのレンダリングは Redux ストアに依存しています。`InboxScreen` も接続されたコンポーネントなので、同じように、ストーリーにストアを渡します。以下のように `InboxScreen.stories.jsx` でストーリーを設定します。
 
 ```jsx:title=src/components/InboxScreen.stories.jsx
 import InboxScreen from './InboxScreen';
@@ -241,15 +241,15 @@ export const Error = {};
 yarn init-msw
 ```
 
-その後、`.storybook/preview.js` をアップデートしてそれらを初期化する必要があります:
+その後、`.storybook/preview.js` をアップデートして初期化してください。
 
 ```diff:title=.storybook/preview.js
 import '../src/index.css';
 
-+ // mswアドオンを登録
++ // Registers the msw addon
 + import { initialize, mswLoader } from 'msw-storybook-addon';
 
-+ // MSWを初期化
++ // Initialize MSW
 + initialize();
 
 //👇 Configures Storybook to log the actions( onArchiveTask and onPinTask ) in the UI.
@@ -383,13 +383,13 @@ export const Default = {
   },
 + play: async ({ canvasElement }) => {
 +   const canvas = within(canvasElement);
-+   //  コンポーネントのローディング状態からの遷移を待機
++   // Waits for the component to transition from the loading state
 +   await waitForElementToBeRemoved(await canvas.findByTestId('loading'));
-+   // ストアに基づいたコンポーネントの更新を待機
++   // Waits for the component to be updated based on the store
 +   await waitFor(async () => {
-+     // 最初のタスクのピン止めをシミュレート
++     // Simulates pinning the first task
 +     await fireEvent.click(canvas.getByLabelText('pinTask-1'));
-+     // 3つ目のタスクのピン止めをシミュレート
++     // Simulates pinning the third task
 +     await fireEvent.click(canvas.getByLabelText('pinTask-3'));
 +   });
 + },
@@ -462,7 +462,7 @@ yarn test-storybook --watch
 テストをさらにもっと深く知るためには、<a href="/ui-testing-handbook">Testing Handbook</a> をチェックしてみてください。これは開発ワークフローを加速させるために、スケーラブルなフロントエンドチームが採用しているテスト戦略について解説しています。
 </div>
 
-![Storybook test runner successfully runs all tests](/intro-to-storybook/storybook-test-runner-execution.png)
+![Storybook のテストランナーがすべてのテストの実行を成功させる様子](/intro-to-storybook/storybook-test-runner-execution.png)
 
 成功です！これで、すべてのストーリーがエラーなくレンダリングされ、すべてのテストが自動的に通過するかどうか検証するためのツールができました。さらに、テストが失敗した場合、失敗したストーリーをブラウザで開くリンクを提供してくれます。
 
diff --git a/content/intro-to-storybook/react/ja/simple-component.md b/content/intro-to-storybook/react/ja/simple-component.md
index ff98d65c5..3dad1b504 100644
--- a/content/intro-to-storybook/react/ja/simple-component.md
+++ b/content/intro-to-storybook/react/ja/simple-component.md
@@ -22,7 +22,7 @@ commit: '9b36e1a'
 
 まずは、タスクのコンポーネントと、対応するストーリーファイル `src/components/Task.jsx` と `src/components/Task.stories.jsx` を作成しましょう。
 
-`Task` の基本的な実装から始めます。`Task` は上述したプロパティと、タスクに対して実行できる 2 つの (リスト間を移動させる) アクションを引数として取ります:
+`Task` の基本的な実装から始めます。`Task` は上述したプロパティと、タスクに対して実行できる 2 つの (リスト間を移動させる) アクションを引数として取ります。
 
 ```js:title=src/components/Task.jsx
 import React from 'react';
@@ -40,7 +40,7 @@ export default function Task({ task: { id, title, state }, onArchiveTask, onPinT
 
 上のコードは Todo アプリケーションの HTML を基にした `Task` の簡単なマークアップです。
 
-下のコードは `Task` に対する 3 つのテスト用の状態をストーリーファイルに書いています:
+下のコードは `Task` に対する 3 つのテスト用の状態をストーリーファイルに書くものです。
 
 ```js:title=src/components/Task.stories.jsx
 import Task from './Task';
@@ -103,7 +103,7 @@ Arguments (略して [`args`](https://storybook.js.org/docs/react/writing-storie
 
 作成したストーリーを認識させたり、CSS ファイル (`src/index.css`にあります) をStorybook上で使用できるようにするため、Storybook の設定をいくつか変更する必要があります。
 
-まず、設定ファイル (`.storybook/main.js`) を以下のように変更してください:
+まず、設定ファイル (`.storybook/main.js`) を以下のように変更してください。
 
 ```diff:title=.storybook/main.js
 /** @type { import('@storybook/react-vite').StorybookConfig } */
@@ -127,12 +127,12 @@ const config = {
 export default config;
 ```
 
-上記の変更が完了したら、`.storybook` フォルダー内の `preview.js` を、以下のように変更してください:
+上記の変更が完了したら、`.storybook` フォルダー内の `preview.js` を、以下のように変更してください。
 
 ```diff:title=.storybook/preview.js
 + import '../src/index.css';
 
-//👇 Storybookのアクション（onArchiveTaskとonPinTask）をUIに記録するように設定します。
+//👇 Configures Storybook to log the actions( onArchiveTask and onPinTask ) in the UI.
 /** @type { import('@storybook/react').Preview } */
 const preview = {
   parameters: {
@@ -166,7 +166,7 @@ Storybook のサーバーを再起動すると、タスクの 3 つの状態の
 
 ここまでで、Storybook のセットアップが完了し、スタイルをインポートし、テストケースを作りました。早速、デザインに合わせてコンポーネントの HTML を実装していきましょう。
 
-今のところコンポーネントは簡素な状態です。まずはデザインを実現するために最低限必要なコードを書いてみましょう:
+今のところコンポーネントは簡素な状態です。まずはデザインを実現するために最低限必要なコードを書いてみましょう。
 
 ```jsx:title=src/components/Task.jsx
 import React from 'react';
@@ -218,7 +218,7 @@ export default function Task({ task: { id, title, state }, onArchiveTask, onPinT
 }
 ```
 
-追加したマークアップとインポートした CSS により以下のような UI ができます:
+追加したマークアップとインポートした CSS により以下のような UI ができます。
 
 <video autoPlay muted playsInline loop>
   <source
@@ -282,18 +282,18 @@ export default function Task({ task: { id, title, state }, onArchiveTask, onPinT
 }
 
 + Task.propTypes = {
-+  /** タスクの構成 */
++  /** Composition of the task */
 +  task: PropTypes.shape({
-+    /** タスクのID */
++    /** Id of the task */
 +    id: PropTypes.string.isRequired,
-+    /** タスクのタイトル */
++    /** Title of the task */
 +    title: PropTypes.string.isRequired,
-+    /** タスクの現在の状態 */
++    /** Current state of the task */
 +    state: PropTypes.string.isRequired,
 +  }),
-+  /** タスクの状態を「アーカイブ済」に変更するイベント */
++  /** Event to change the task to archived */
 +  onArchiveTask: PropTypes.func,
-+  /** タスクのをの状態を「ピン留め済」に変更するイベント */
++  /** Event to change the task to pinned */
 +  onPinTask: PropTypes.func,
 + };
 ```
diff --git a/content/intro-to-storybook/react/ja/using-addons.md b/content/intro-to-storybook/react/ja/using-addons.md
index 8f1fc271d..7ba47ceae 100644
--- a/content/intro-to-storybook/react/ja/using-addons.md
+++ b/content/intro-to-storybook/react/ja/using-addons.md
@@ -99,7 +99,7 @@ export default function Task({ task: { id, title, state }, onArchiveTask, onPinT
 
 今後もコントロールアドオンを使用して、手動で同じ入力をすればいつでもこの問題は再現可能です。ですが、このエッジケースに対応するストーリーを書く方が簡単です。ストーリーを書くことにより、リグレッションテストのカバレッジが向上しますし、コンポーネントの限界をチームメンバーに明示できます。
 
-それでは `Task.stories.jsx` ファイルに長い文字列が指定された場合のストーリーを追加しましょう:
+それでは `Task.stories.jsx` ファイルに長い文字列が指定された場合のストーリーを追加しましょう。
 
 ```js:title=src/components/Task.stories.jsx
 const longTitleString = `This task's name is absurdly large. In fact, I think if I keep going I might end up with content overflow. What will happen? The star that represents a pinned task could have text overlapping. The text could cut-off abruptly when it reaches the star. I hope not!`;
@@ -114,7 +114,7 @@ export const LongTitle = {
 };
 ```
 
-これで、このエッジケースをいつでも再現できるようになりました:
+これで、このエッジケースをいつでも再現できるようになりました。
 
 <video autoPlay muted playsInline loop>
   <source