Fix: Japanese comments

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 = {

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 のメーリングリストに登録することをオススメします。
 

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({

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

content/intro-to-storybook/react/ja/get-started.md

@@ -13,29 +13,29 @@ 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
 ```
 
 <div class="aside">
 💡 このテンプレートには本バージョンのチュートリアルに必要なスタイル、アセット、最低限の設定が含まれています。
 </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"