@@ -314,7 +324,7 @@ Storybook で `error` ストーリーが意図したように動作している
@@ -331,13 +341,11 @@ Storybook の [`play`](https://storybook.js.org/docs/react/writing-stories/play-
play 関数はタスクが更新されたときに UI に何が起こるかを検証するのに役立ちます。フレームワークに依存しない DOM API を使用しています。つまり、 play 関数を使って UI を操作し、人間の行動をシミュレートするストーリーを、フロントエンドのフレームワークに関係なく書くことができるのです。
-`@storybook/addon-interactions`は、一つ一つのステップごとに Storybook のテストを可視化するのに役立ちます。さらに、各インタラクションの一時停止、再開、巻き戻し、ステップ実行といった便利な UI の制御機能が備わっています。
+`@storybook/addon-interactions`は、ひとつひとつのステップごとに Storybook のテストを可視化するのに役立ちます。さらに、各インタラクションの一時停止、再開、巻き戻し、ステップ実行といった便利な UI の制御機能が備わっています。
-実際に動かしてみましょう！以下のようにして新しく作成された `InboxScreen` ストーリーを更新し、コンポーネント操作を追加してみましょう:
-
-```diff:title=src/components/InboxScreen.stories.js
-import React from 'react';
+実際に動かしてみましょう！以下のようにして新しく作成された `InboxScreen` ストーリーを更新し、コンポーネント操作を追加してみましょう。
+```diff:title=src/components/InboxScreen.stories.jsx
import InboxScreen from './InboxScreen';
import store from '../lib/store';
@@ -347,34 +355,32 @@ import { Provider } from 'react-redux';
+ import {
+ fireEvent,
-+ within,
+ waitFor,
++ within,
+ waitForElementToBeRemoved
-+ } from '@storybook/testing-library';
++ } from '@storybook/test';
export default {
component: InboxScreen,
title: 'InboxScreen',
decorators: [(story) =>
{story()} ],
+ tags: ['autodocs'],
};
-const Template = () =>
;
-
-export const Default = Template.bind({});
-Default.parameters = {
- msw: {
- handlers: [
- rest.get(
- 'https://jsonplaceholder.typicode.com/todos?userId=1',
- (req, res, ctx) => {
- return res(ctx.json(MockedState.tasks));
- }
- ),
- ],
+export const Default = {
+ parameters: {
+ msw: {
+ handlers: [
+ rest.get(
+ 'https://jsonplaceholder.typicode.com/todos?userId=1',
+ (req, res, ctx) => {
+ return res(ctx.json(MockedState.tasks));
+ }
+ ),
+ ],
+ },
},
-};
-
-+ Default.play = async ({ canvasElement }) => {
++ play: async ({ canvasElement }) => {
+ const canvas = within(canvasElement);
+ // Waits for the component to transition from the loading state
+ await waitForElementToBeRemoved(await canvas.findByTestId('loading'));
@@ -385,35 +391,57 @@ Default.parameters = {
+ // Simulates pinning the third task
+ await fireEvent.click(canvas.getByLabelText('pinTask-3'));
+ });
-+ };
++ },
+};
+export const Error = {
+ parameters: {
+ msw: {
+ handlers: [
+ rest.get(
+ 'https://jsonplaceholder.typicode.com/todos?userId=1',
+ (req, res, ctx) => {
+ return res(ctx.status(403));
+ }
+ ),
+ ],
+ },
+ },
+};
```
-新しく作成したストーリーを確認します。`Interactions` パネルをクリックすると、ストーリーの play 関数内のインタラクションのリストが表示されます。
+
+
+💡 The `@storybook/test` パッケージは `@storybook/jest`と`@storybook/testing-library`を置き換えるものです。
+より小さなバンドルサイズと、Vitest パッケージをベースにしたよりわかりやすい API を提供します。
+
+
+
+`Default`ストーリーを確認します。`Interactions` パネルをクリックすると、ストーリーの play 関数内のインタラクションのリストが表示されます。
-### テスト自動化
+### test runner によるテストの自動化
-play 関数を利用して、UI を操作し、タスクを更新した場合の反応を素早く確認することができます。これによって、余計な手間をかけずに UI の一貫性を保つことができます。
+play 関数を利用して、UI を操作し、タスクを更新した場合の反応を素早く確認できます。これによって、余計な手間をかけずに UI の一貫性を保つことができます。
-しかし、Storybook をよく見ると、ストーリーを見るときだけインタラクションテストが実行されることがわかります。そのため、変更時に各ストーリーを全てチェックしなければなりません。これは自動化できないのでしょうか？
+しかし、Storybook をよく見ると、ストーリーを見るときだけインタラクションテストが実行されることがわかります。そのため、変更時に各ストーリーをすべてチェックしなければなりません。これは自動化できないのでしょうか？
-可能です！Storybook の[テストランナー](https://storybook.js.org/docs/react/writing-tests/test-runner)は可能にしてくれます。それは [Playwright](https://playwright.dev/) によって実現されたスタンドアロンなパッケージで、全てのインタラクションテストを実行し、壊れたストーリーを検知してくれます。
+結論から言うと、それは可能です！Storybook の[テストランナー](https://storybook.js.org/docs/react/writing-tests/test-runner)は [Playwright](https://playwright.dev/) によって実現されたスタンドアロンなパッケージで、すべのインタラクションテストを実行し、壊れたストーリーを検知してくれます。
-それではどのように動くのかみてみましょう！次のコマンドでインストールして走らせます:
+それではどのように動くのかみてみましょう！次のコマンドでインストールします。
```bash
yarn add --dev @storybook/test-runner
```
-次に、 `package.json` の `scripts` をアップデートし、新しいテストタスクを追加してください:
+次に、 `package.json` の `scripts` を更新し、新しいテストタスクを追加してください。
-```json
+```json:clipboard=false
{
"scripts": {
"test-storybook": "test-storybook"
@@ -421,7 +449,7 @@ yarn add --dev @storybook/test-runner
}
```
-最後に、Storybook を起動し、新しいターミナルで以下のコマンドを実行してください:
+最後に、Storybook を起動し、新しいターミナルで以下のコマンドを実行してください。
```bash
yarn test-storybook --watch
@@ -433,13 +461,13 @@ yarn test-storybook --watch
テストをさらにもっと深く知るためには、
Testing Handbook をチェックしてみてください。これは開発ワークフローを加速させるために、スケーラブルなフロントエンドチームが採用しているテスト戦略について解説しています。
💡 Git へのコミットを忘れずに行ってください！
diff --git a/content/intro-to-storybook/react/ja/simple-component.md b/content/intro-to-storybook/react/ja/simple-component.md
index 45888586e..3dad1b504 100644
--- a/content/intro-to-storybook/react/ja/simple-component.md
+++ b/content/intro-to-storybook/react/ja/simple-component.md
@@ -5,7 +5,7 @@ description: '単純なコンポーネントを切り離して作りましょう
commit: '9b36e1a'
---
-それでは、[コンポーネント駆動開発](https://www.componentdriven.org/) (CDD) の手法にのっとって UI を作ってみましょう。コンポーネント駆動開発とは、UI を最初にコンポーネントから作り始めて、最後に画面を作り上げる「ボトムアップ」の開発プロセスです。CDD を用いれば UI を作る際に直面する複雑性を軽減することができます。
+それでは、[コンポーネント駆動開発](https://www.componentdriven.org/) (CDD) の手法にのっとって UI を作ってみましょう。コンポーネント駆動開発とは、UI を最初にコンポーネントから作り始めて、最後に画面を作り上げる「ボトムアップ」の開発プロセスです。CDD を用いれば、 UI を作る際に直面する複雑性を軽減できます。
## Task (タスク)
@@ -20,17 +20,19 @@ commit: '9b36e1a'
## セットアップする
-まずは、タスクのコンポーネントと、対応するストーリーファイル `src/components/Task.js` と `src/components/Task.stories.js` を作成しましょう。
+まずは、タスクのコンポーネントと、対応するストーリーファイル `src/components/Task.jsx` と `src/components/Task.stories.jsx` を作成しましょう。
-`Task` の基本的な実装から始めます。`Task` は上述したプロパティと、タスクに対して実行できる 2 つの (リスト間を移動させる) アクションを引数として取ります:
+`Task` の基本的な実装から始めます。`Task` は上述したプロパティと、タスクに対して実行できる 2 つの (リスト間を移動させる) アクションを引数として取ります。
-```js:title=src/components/Task.js
+```js:title=src/components/Task.jsx
import React from 'react';
export default function Task({ task: { id, title, state }, onArchiveTask, onPinTask }) {
return (
-
+
);
}
@@ -38,48 +40,47 @@ export default function Task({ task: { id, title, state }, onArchiveTask, onPinT
上のコードは Todo アプリケーションの HTML を基にした `Task` の簡単なマークアップです。
-下のコードは `Task` に対する 3 つのテスト用の状態をストーリーファイルに書いています:
-
-```js:title=src/components/Task.stories.js
-import React from 'react';
+下のコードは `Task` に対する 3 つのテスト用の状態をストーリーファイルに書くものです。
+```js:title=src/components/Task.stories.jsx
import Task from './Task';
export default {
component: Task,
title: 'Task',
+ tags: ['autodocs'],
};
-const Template = args =>
;
-
-export const Default = Template.bind({});
-Default.args = {
- task: {
- id: '1',
- title: 'Test Task',
- state: 'TASK_INBOX',
- updatedAt: new Date(2021, 0, 1, 9, 0),
+export const Default = {
+ args: {
+ task: {
+ id: '1',
+ title: 'Test Task',
+ state: 'TASK_INBOX',
+ },
},
};
-export const Pinned = Template.bind({});
-Pinned.args = {
- task: {
- ...Default.args.task,
- state: 'TASK_PINNED',
+export const Pinned = {
+ args: {
+ task: {
+ ...Default.args.task,
+ state: 'TASK_PINNED',
+ },
},
};
-export const Archived = Template.bind({});
-Archived.args = {
- task: {
- ...Default.args.task,
- state: 'TASK_ARCHIVED',
+export const Archived = {
+ args: {
+ task: {
+ ...Default.args.task,
+ state: 'TASK_ARCHIVED',
+ },
},
};
```
-Storybook には基本となる 2 つの階層があります。コンポーネントとその子供となるストーリーです。各ストーリーはコンポーネントに連なるものだと考えてください。コンポーネントには必要なだけストーリーを記述することができます。
+Storybook には基本となる 2 つの階層があります。コンポーネントとその子供となるストーリーです。各ストーリーはコンポーネントに連なるものだと考えてください。コンポーネントには必要なだけストーリーを記述できます。
- **コンポーネント**
- ストーリー
@@ -89,72 +90,66 @@ Storybook には基本となる 2 つの階層があります。コンポーネ
Storybook にコンポーネントを認識させるには、以下の内容を含む `default export` を記述します:
- `component` -- コンポーネント自体
-- `title` -- Storybook のサイドバーにあるコンポーネントを参照する方法
-
-ストーリーを定義するには、テスト用の状態ごとにストーリーを生成する関数をエクスポートします。ストーリーとは、特定の状態で描画された要素 (例えば、プロパティを指定したコンポーネントなど) を返す関数で、React の[状態を持たない関数コンポーネント](https://reactjs.org/docs/components-and-props.html#function-and-class-components)のようなものです。
+- `title` -- Storybookのサイドバーでコンポーネントをグループ化または分類するためのタイトル
+- `tags` -- このコンポーネントのドキュメントを自動生成するためのタグ
-コンポーネントにストーリーが複数連なっているので、各ストーリーを単一の `Template` 変数に割り当てるのが便利です。このパターンを導入することで、書くべきコードの量が減り、保守性も上がります。
-
-
-💡
Template.bind({}) は関数のコピーを作成する
JavaScript の標準的な テクニックで、同じ実装を使いながら、エクスポートされたそれぞれのストーリーに独自のプロパティを設定することができます。
-
+ストーリーを定義するには、コンポーネント ストーリー フォーマット 3 ( [CSF3](https://storybook.js.org/docs/react/api/csf) )を使用してテストケースを構築します。このフォーマットは、各テストケースを簡潔に構築するために設計されています。各コンポーネントの状態を含むオブジェクトをエクスポートすることで、テストをより直感的に定義し、ストーリーをより効率的に作成・再利用できます。
Arguments (略して [`args`](https://storybook.js.org/docs/react/writing-stories/args)) を使用することで、コントロールアドオンを通して、Storybook を再起動することなく、コンポーネントを動的に編集することができるようになります。[`args`](https://storybook.js.org/docs/react/writing-stories/args) の値が変わるとコンポーネントもそれに合わせて変わります。
ストーリーを作る際には素となるタスク引数を使用してコンポーネントが想定するタスクの状態を作成します。想定されるデータは実際のデータと同じように作ります。さらに、このデータをエクスポートすることで、今後作成するストーリーで再利用することが可能となります。
-
-💡
アクションアドオン は切り離された環境で UI コンポーネントを開発する際の動作確認に役立ちます。アプリケーションの実行中には状態や関数を参照出来ないことがよくあります。
action() はそのスタブとして使用できます。
-
-
## 設定する
-作成したストーリーを認識させ、[前の章](/intro-to-storybook/react/ja/get-started)で変更した CSS ファイルを使用できるようにするため、Storybook の設定をいくつか変更する必要があります。
+作成したストーリーを認識させたり、CSS ファイル (`src/index.css`にあります) をStorybook上で使用できるようにするため、Storybook の設定をいくつか変更する必要があります。
-まず、設定ファイル (`.storybook/main.js`) を以下のように変更してください:
+まず、設定ファイル (`.storybook/main.js`) を以下のように変更してください。
```diff:title=.storybook/main.js
-module.exports = {
-- stories: [
-- '../src/**/*.stories.mdx',
-- '../src/**/*.stories.@(js|jsx|ts|tsx)'
-- ],
-+ stories: ['../src/components/**/*.stories.js'],
+/** @type { import('@storybook/react-vite').StorybookConfig } */
+const config = {
+- stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
++ stories: ['../src/components/**/*.stories.@(js|jsx)'],
staticDirs: ['../public'],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
- '@storybook/preset-create-react-app',
'@storybook/addon-interactions',
],
- features: {
- postcss: false,
+ framework: {
+ name: '@storybook/react-vite',
+ options: {},
},
- framework: '@storybook/react',
- core: {
- builder: 'webpack4',
+ docs: {
+ autodocs: 'tag',
},
};
+export default config;
```
-上記の変更が完了したら、`.storybook` フォルダー内の `preview.js` を、以下のように変更してください:
+上記の変更が完了したら、`.storybook` フォルダー内の `preview.js` を、以下のように変更してください。
```diff:title=.storybook/preview.js
+ import '../src/index.css';
//👇 Configures Storybook to log the actions( onArchiveTask and onPinTask ) in the UI.
-export const parameters = {
- actions: { argTypesRegex: '^on[A-Z].*' },
- controls: {
- matchers: {
- color: /(background|color)$/i,
- date: /Date$/,
+/** @type { import('@storybook/react').Preview } */
+const preview = {
+ parameters: {
+ actions: { argTypesRegex: "^on[A-Z].*" },
+ controls: {
+ matchers: {
+ color: /(background|color)$/i,
+ date: /Date$/,
+ },
},
},
};
+
+export default preview;
```
-[`parameters`](https://storybook.js.org/docs/react/writing-stories/parameters) は Storybook の機能やアドオンの振る舞いをコントロールするのに使用します。この例では、アクション (呼び出しのモック) がどのように扱われるかを設定しています。
+[`parameters`](https://storybook.js.org/docs/react/writing-stories/parameters) は Storybook の機能やアドオンの振る舞いをコントロールするのに使用します。この例では、アクション (`actions`、呼び出しのモック) がどのように扱われるかを設定しています。
アクションアドオンを使用することで、クリックした時などに Storybook の **actions** パネルにその情報を表示するコールバックを作成できます。これにより、ピン留めボタンを作成するとき、ボタンがクリックされたことがテスト用の UI 上で確認できます。
@@ -162,7 +157,7 @@ Storybook のサーバーを再起動すると、タスクの 3 つの状態の
@@ -171,9 +166,9 @@ Storybook のサーバーを再起動すると、タスクの 3 つの状態の
ここまでで、Storybook のセットアップが完了し、スタイルをインポートし、テストケースを作りました。早速、デザインに合わせてコンポーネントの HTML を実装していきましょう。
-今のところコンポーネントは簡素な状態です。まずはデザインを実現するために最低限必要なコードを書いてみましょう:
+今のところコンポーネントは簡素な状態です。まずはデザインを実現するために最低限必要なコードを書いてみましょう。
-```js:title=src/components/Task.js
+```jsx:title=src/components/Task.jsx
import React from 'react';
export default function Task({ task: { id, title, state }, onArchiveTask, onPinTask }) {
@@ -223,11 +218,11 @@ export default function Task({ task: { id, title, state }, onArchiveTask, onPinT
}
```
-追加したマークアップとインポートした CSS により以下のような UI ができます:
+追加したマークアップとインポートした CSS により以下のような UI ができます。
@@ -236,12 +231,54 @@ export default function Task({ task: { id, title, state }, onArchiveTask, onPinT
`propTypes` を使い React にコンポーネントが想定するデータ構造を示すのがベストプラクティスです。これにより想定するデータ構造がコードからわかるだけでなく、早期に問題を見つけるのに役立ちます。
-```diff:title=src/components/Task.js
+```diff:title=src/components/Task.jsx
import React from 'react';
+ import PropTypes from 'prop-types';
export default function Task({ task: { id, title, state }, onArchiveTask, onPinTask }) {
- // ...
+ return (
+
+
+ onArchiveTask(id)}
+ />
+
+
+
+
+
+ {state !== "TASK_ARCHIVED" && (
+ onPinTask(id)}
+ id={`pinTask-${id}`}
+ aria-label={`pinTask-${id}`}
+ key={`pinTask-${id}`}
+ >
+
+ )}
+
+ );
}
+ Task.propTypes = {
@@ -269,48 +306,49 @@ export default function Task({ task: { id, title, state }, onArchiveTask, onPinT
## 完成！
-これでサーバーを起動したり、フロントエンドアプリケーションを起動したりすることなく、コンポーネントを作りあげることができました。次の章では、Taskbox の残りのコンポーネントを、同じように少しずつ作成していきます。
+これでサーバーを起動したり、フロントエンドアプリケーションを起動したりすることなく、コンポーネントを作りあげることができました。次の章では、Taskbox の残りのコンポーネントを、同じように少しずつ作成します。
-見た通り、コンポーネントだけを切り離して作り始めるのは早くて簡単です。あらゆる状態を掘り下げてテストできるので、高品質で、バグが少なく、洗練された UI を作ることができることでしょう。
+見た通り、コンポーネントを切り離して開発を始めるのは、迅速かつ簡単です。あらゆる状態を掘り下げてテストできるので、高品質で、バグが少なく、洗練された UI を作ることができることでしょう。
## アクセシビリティの問題の検知
-アクセシビリティテストとは、[WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/) のルールと他の業界で認めれたベストプラクティスに基づく経験則に対して、自動化ツールを用いることでレンダリングされた DOM を監視することを指します。これは視覚障害、聴覚障害、認知障害などの障害をお持ちの方を含む、できるだけ多くのユーザーがアプリケーションを利用できるように、明らかなアクセシビリティの違反を検知するために QA の第一線として機能します。
+アクセシビリティテストとは、[WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/) のルールと他の業界で認められたベストプラクティスに基づく経験則に対して、自動化ツールを用いることでレンダリングされた DOM を監視することを指します。これは視覚障害、聴覚障害、認知障害などの障害をお持ちの方を含む、できるだけ多くのユーザーがアプリケーションを利用できるように、明らかなアクセシビリティの違反を検知するために QA の第一線として機能します。
-Storybook には公式の[アクセシビリティアドオン](https://storybook.js.org/addons/@storybook/addon-a11y)があります。これは、Deque の [axe-core](https://github.com/dequelabs/axe-core) を使っており、[WCAG の問題の 57%](https://www.deque.com/blog/automated-testing-study-identifies-57-percent-of-digital-accessibility-issues/) に対応しています。
+Storybook には公式の[アクセシビリティアドオン](https://storybook.js.org/addons/@storybook/addon-a11y)があります。このアドオンは、Deque の [axe-core](https://github.com/dequelabs/axe-core) がベースで、[WCAG の問題の 57%](https://www.deque.com/blog/automated-testing-study-identifies-57-percent-of-digital-accessibility-issues/) に対応しています。
-それでは、どのように動かすのかみてみましょう! 以下のコマンドでアドオンをインストールします:
+それでは、どのように動かすのか見てみましょう! 以下のコマンドでアドオンをインストールします。
```shell
yarn add --dev @storybook/addon-a11y
```
-アドオンを利用可能にするために、Storybook の設定ファイル(`.storybook/main.js`)を以下のように設定します:
+アドオンを利用可能にするために、Storybook の設定ファイル(`.storybook/main.js`)を以下のように設定します。
```diff:title=.storybook/main.js
-module.exports = {
- stories: ['../src/components/**/*.stories.js'],
+/** @type { import('@storybook/react-vite').StorybookConfig } */
+const config = {
+ stories: ['../src/components/**/*.stories.@(js|jsx)'],
staticDirs: ['../public'],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
- '@storybook/preset-create-react-app',
'@storybook/addon-interactions',
+ '@storybook/addon-a11y',
],
- framework: '@storybook/react',
- core: {
- builder: '@storybook/builder-webpack5',
+ framework: {
+ name: '@storybook/react-vite',
+ options: {},
},
- features: {
- interactionsDebugger: true,
+ docs: {
+ autodocs: 'tag',
},
};
+export default config;
```
-
+
-ストーリーを一通り見てみると、このアドオンが一つのアクセシビリティの問題を検知したことがわかります。[**「Elements must have sufficient color contrast」**](https://dequeuniversity.com/rules/axe/4.4/color-contrast?application=axeAPI)というエラーメッセージは本質的にタイトルと背景に十分なコントラストがないことを指しています。そのため、アプリケーションの CSS (`src/index.css` にある)の中で、テキストカラーをより暗いグレーに修正する必要があります。
+ストーリーをひととおり見てみると、このアドオンがひとつのアクセシビリティの問題を検知したことがわかります。[**"Elements must have sufficient color contrast"**](https://dequeuniversity.com/rules/axe/4.4/color-contrast?application=axeAPI) というエラーメッセージは、タイトルと背景に十分なコントラストがないことを指しています。そのため、アプリケーションの CSS (`src/index.css`)を編集して、テキストのカラーをより暗いグレーに修正する必要があります。
```diff:title=src/index.css
.list-item.TASK_ARCHIVED input[type="text"] {
@@ -320,7 +358,7 @@ module.exports = {
}
```
-以上です！これで、UI のアクセシビリティ向上の最初のステップが完了です。アプリケーションをさらに複雑にしても、他の全てのコンポーネントに対してこのプロセスを繰り返すことができ、追加のツールやテスト環境を準備する必要はありません。
+以上です！これで、UI のアクセシビリティ向上の最初のステップが完了です。アプリケーションをさらに複雑にしても、他のすべてのコンポーネントに対してこのプロセスを繰り返すことができ、追加のツールやテスト環境を準備する必要はありません。
💡 Git へのコミットを忘れずに行ってください！
diff --git a/content/intro-to-storybook/react/ja/test.md b/content/intro-to-storybook/react/ja/test.md
index 3bf72f369..5204078d1 100644
--- a/content/intro-to-storybook/react/ja/test.md
+++ b/content/intro-to-storybook/react/ja/test.md
@@ -4,7 +4,7 @@ tocTitle: 'テスト'
description: 'UI コンポーネントのテスト手法について学びましょう'
---
-Storybook のチュートリアルをテスト抜きには終われません。テストは高品質な UI を作成するのに必要なことです。疎結合なシステムにおいては、些細な変更で大きなリグレッション (手戻り) をもたらすことがあるのです。既に 3 種類のテストについて学びました:
+Storybook のチュートリアルをテスト抜きには終われません。テストは高品質な UI を作成するのに必要なことです。疎結合なシステムにおいては、些細な変更で大きなリグレッション (手戻り) をもたらすことがあるのです。このチュートリアルで、すでに 3 種類のテストについて学びました。
- **手動テスト**では、コンポーネントの正しさを開発者が手動で確認します。コンポーネントを作成する際、見た目が問題ないかチェックするのに役立ちます。
- **アクセシビリティテスト**では、a11y アドオンを使用し、コンポーネントがみなさんに受け入れやすいか検証します。これらは、どのように障害を持つ人々が私たちのコンポーネントを使うのかという情報を取得するのに大いに役立ちます。
@@ -27,23 +27,25 @@ Storybook のチュートリアルをテスト抜きには終われません。
Storybook は視覚的なリグレッションテスト用の素晴らしいツールです。Storybook において、すべてのストーリーはテスト仕様となるからです。ストーリーを書くたび、仕様が無料でついてきます！
-視覚的なリグレッションテスト向けのツールは多々あります。Storybook のメンテナーが作成した無料のホスティングサービスである [**Chromatic**](https://www.chromatic.com/?utm_source=storybook_website&utm_medium=link&utm_campaign=storybook) がおすすめです。Chromatic はクラウド上でビジュアルテストを並列実行します。[前の章](/intro-to-storybook/react/ja/deploy/)と同じように Storybook をインターネット上に発行出来ます。
+視覚的なリグレッションテスト向けのツールは多々あります。Storybook のメンテナーが作成した無料のホスティングサービスである [**Chromatic**](https://www.chromatic.com/?utm_source=storybook_website&utm_medium=link&utm_campaign=storybook) がオススメです。Chromatic はクラウド環境上でビジュアルテストを光の速さで並列実行します。[前の章](/intro-to-storybook/react/ja/deploy/)で見てきたように、Storybook をインターネット上に公開することもできます。
## UI の変更を検知する
-視覚的なリグレッションテストでは UI コードにより描画されたイメージが基準となるイメージと比較されます。ツールが UI の変更が検知したら、教えてくれます。
+視覚的なリグレッションテストでは UI コードにより描画されたイメージが基準となるイメージと比較されます。ツールが UI の変更が検知したら、通知を受け取ることができます。
それでは、`Task` コンポーネントの背景を変更し、どう動くのか見てみましょう。
-変更する前に新しいブランチを作成します:
+変更する前に新しいブランチを作成します。
```shell
git checkout -b change-task-background
```
-`src/components/Task.js` を以下のように変更します:
+`src/components/Task.jsx` を以下のように変更します。
+
+```diff:title=src/components/Task.jsx
+import React from 'react';
-```diff:title=src/components/Task.js
export default function Task({ task: { id, title, state }, onArchiveTask, onPinTask }) {
return (
@@ -94,35 +96,35 @@ export default function Task({ task: { id, title, state }, onArchiveTask, onPinT
これでタスクの背景色が変更されます。
-
+
-この変更をステージングします:
+この変更をステージングします。
```shell
git add src/components/Task.js
```
-コミットします:
+コミットします。
```shell
git commit -m “change task background to red”
```
-そして変更をリモートリポジトリーにプッシュします:
+そして変更をリモートリポジトリにプッシュします。
```shell
git push -u origin change-task-background
```
-最後に、GitHub のリポジトリーを開き `change-task-background` ブランチのプルリクエストを作成します。
+最後に、ブラウザでGitHub のリポジトリを開き `change-task-background` ブランチのプルリクエストを作成します。
-プルリクエストに適切な説明を書き、`Create pull request` をクリックしてください。ページの下部に表示された「🟡 UI Tests」の PR チェックをクリックして下さい。
+プルリクエストに適切な説明を書き、`Create pull request` をクリックしてください。その後、ページの下部に表示された「🟡 UI Tests」の PR チェックをクリックしてください。
-これで先のコミットによって検出された UI の変更が見られます。
+これで先のコミットによって検出された UI の変更を見られます。
@@ -151,6 +153,6 @@ UI の変更をレビューしたら、その変更で意図せずバグを混
-Storybook はコンポーネントを**作る**のに役立ち、テストはコンポーネントを**保つ**のに役立ちます。手動テスト、スナップショットテスト、単体テスト、ビジュアルテストの 4 種類をこのチュートリアルで学びました。最後の 3 種類は、今設定したように、CI に追加することで自動化することができます。これによりコンポーネントのバグに気づかないことを心配をせずにリリースできます。このワークフロー全体は以下の図の通りです。
+Storybook はコンポーネントを**作る**のに役立ち、テストはコンポーネントを**保つ**のに役立ちます。手動テスト、スナップショットテスト、単体テスト、ビジュアルテストの 4 種類をこのチュートリアルで学びました。最後の 3 種類は、今設定したように、CI に追加することで自動化できます。これによりコンポーネントのバグに気づかないことを心配をせずにリリースできます。このワークフロー全体は以下の図の通りです。
diff --git a/content/intro-to-storybook/react/ja/using-addons.md b/content/intro-to-storybook/react/ja/using-addons.md
index 07875ba35..7ba47ceae 100644
--- a/content/intro-to-storybook/react/ja/using-addons.md
+++ b/content/intro-to-storybook/react/ja/using-addons.md
@@ -9,17 +9,17 @@ Storybook にはチームの開発効率を向上する堅牢な[アドオン](h
ここまでチュートリアルを進めてきたのであれば、すでにいくつかのアドオンに遭遇し、[テストの章](/intro-to-storybook/react/ja/test/)では導入もしています。
-多様なユースケースに対応するためのアドオンがあるので、それを全て説明することは出来ません。ここでは最も人気のあるアドオンである [コントロールアドオン](https://storybook.js.org/docs/react/essentials/controls) を導入してみましょう。
+多様なユースケースに対応するためのアドオンがあるので、それをすべて説明することはできません。ここではもっとも人気のあるアドオンである [コントロールアドオン](https://storybook.js.org/docs/react/essentials/controls) を導入してみましょう。
## コントロールアドオンとは
コントロールアドオンはデザイナーや、開発者がコードを書かずにパラメータを*いじって遊びながら*コンポーネントの挙動を探求できるようにするアドオンです。このアドオンはストーリーの隣にパネルを表示し、そこから直にコンポーネントの引数を編集できます。
-Storybook を新たにインストールすると、はじめから Contorls が使用可能です。追加で設定する必要はありません。
+Storybook を新たにインストールすると、はじめから Contorls が使用可能です。追加の設定は必要ありません。
@@ -30,61 +30,103 @@ Storybook はすばらしい[コンポーネント駆動開発](https://www.comp
## コントロールアドオンをエッジケースを見つけるのに使用する
-コントロールアドオンを使用すれば、品質管理者や、UI エンジニアや、その他のステークホルダーがコンポーネントを限界まで操作できます！例えば `Task` コンポーネントに*大量の*文字列を渡したらどうなるでしょうか。
+コントロールアドオンを使用すれば、品質管理者や、UI エンジニアや、その他のステークホルダーがコンポーネントを限界まで操作できます！たとえば `Task` コンポーネントに*大量の*文字列を渡したらどうなるでしょうか。
-
+
これはマズいです。タスクコンポーネントの境界を越えて文字列があふれています。
コントロールアドオンを使用すればコンポーネントにいろいろな入力をして素早く確認できます。今回は長い文字列を入力しました。これで UI の問題を発見する際の作業を減らすことができます。
-それでは `Task.js` にスタイルを追加して、この文字切れ問題を解決しましょう:
-
-```diff:title=src/components/Task.js
-
+それでは `Task.jsx` にスタイルを追加して、この文字切れ問題を解決しましょう。
+
+```diff:title=src/components/Task.jsx
+import React from 'react';
+
+export default function Task({ task: { id, title, state }, onArchiveTask, onPinTask }) {
+ return (
+
+
+ onArchiveTask(id)}
+ />
+
+
+
+
+
+ {state !== "TASK_ARCHIVED" && (
+ onPinTask(id)}
+ id={`pinTask-${id}`}
+ aria-label={`pinTask-${id}`}
+ key={`pinTask-${id}`}
+ >
+
+ )}
+
+ );
+}
```
-
+
-問題は解決しました！文字列がタスクの境界に達したらかっこいい省略記号で切り詰められるようになりました。
+問題が解決しました！文字列が境界に達すると、かっこいい省略記号で切り詰められるようになりました。
## リグレッションを回避するためストーリーを追加する
-今後もコントロールアドオンを使用して、手動で同じ入力をすればいつでもこの問題は再現可能です。ですが、このエッジケースに対応するストーリーを書く方が簡単です。ストーリーを書くことにより、リグレッションテストのカバレッジが向上しますし、コンポーネントの限界をチームメンバーに明示することが出来ます。
+今後もコントロールアドオンを使用して、手動で同じ入力をすればいつでもこの問題は再現可能です。ですが、このエッジケースに対応するストーリーを書く方が簡単です。ストーリーを書くことにより、リグレッションテストのカバレッジが向上しますし、コンポーネントの限界をチームメンバーに明示できます。
-それでは `Task.stories.js` ファイルに長い文字列が指定された場合のストーリーを追加しましょう:
+それでは `Task.stories.jsx` ファイルに長い文字列が指定された場合のストーリーを追加しましょう。
-```js:title=src/components/Task.stories.js
+```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!`;
-export const LongTitle = Template.bind({});
-LongTitle.args = {
- task: {
- ...Default.args.task,
- title: longTitleString,
+export const LongTitle = {
+ args: {
+ task: {
+ ...Default.args.task,
+ title: longTitleString,
+ },
},
};
```
-これで、このエッジケースをいつでも再現できるようになりました:
+これで、このエッジケースをいつでも再現できるようになりました。
-[ビジュアルテスト](/intro-to-storybook/react/ja/test/)を使用している場合は、文字の省略が壊れた場合に分かるようになります。このように曖昧なエッジケースはテストなしには忘れてしまいがちです！
-
-
💡 開発者ではない人でも、コントロールアドオンを使うことでコンポーネントやストーリーを触れるようになります。さらに理解を深めるためには公式のドキュメント を見てください。アドオンを使用して Storybook をカスタマイズする方法は 1 つではありません。おまけの章である、アドオンを作る ではアドオンを使用して開発を加速する方法を説明します。
+[ビジュアルテスト](/intro-to-storybook/react/ja/test/)を使用している場合は、文字の省略が壊れた場合にわかるようになります。このように曖昧なエッジケースはテストなしには忘れてしまいがちです！
-### 変更をマージする
+
💡 開発者でない人でも、コントロールアドオンを使うことでコンポーネントやストーリーを触れるようになります。さらに理解を深めるためには公式ドキュメント を参照してください。アドオンを使用して Storybook をカスタマイズする方法は 1 つではありません。おまけの章である、アドオンを作る ではアドオンを使用して開発を加速する方法を説明します。
-変更を忘れずに Git にマージしてください！
+
+💡 Git へのコミットを忘れずに行ってください！
+