Updated Japanese translation for Angular version of introduction to Storybook #746
Conversation
|
@nagashimam, thank you so much for putting together this pull request and helping us update the translation to the latest version of Storybook. We appreciate it 🙏 ! I'll take a closer look on my end in the coming days, but in the meantime, I was wondering if @chameleonhead would be interested in taking a pass and proofreading it. If you don't, it's more than okay, and we'll work something out. Hope you have a fantastic day. Stay safe. |
There was a problem hiding this comment.
@nagashimam, from my end this is shaping real nice, amazing work. I left a couple of small items for you to look into, mostly updating some of the links. Also, while we're at it can you factor in a small change to the gatsby-config.js
and update the version from 6.3 to 7.6 so that it doesn't show the aside mentioning that the translation is outdated when a user checks it out.
Going to wait on @chameleonhead for his input so that we can get this one merged in.
Have a great day.
Stay safe
|
@nagashimam, one thing for you as you already have this pull request up. I've just pushed #748 with some changes to the tutorials, including the Intro to Storybook to the latest stable version of Storybook (i.e., 7.6). Can you adjust your pull request and factor these changes if you're ok with it? It's just a minor update to the Screen section of the tutorial, nothing significant. Looking forward to hearing from you. Have a fantastic weekend. Stay safe |
|
@jonniebigodes |
|
@nagashimam, please, no need to be sorry. I can understand if you're busy with family, work, or any other engagement that requires your attention. I really appreciate it you taking the time to get the updates in so promptly 🙇 . On my end is all good. All I wanted was for @chameleonhead to proofread it. @chameleonhead, if you don't have the time, it's all good for the same reasons as @nagashimam. We can reach out to the community and see if anyone is willing to help us proofread it and get it published. Looking forward to hearing from you. |
|
@jonniebigodes @nagashimam |
|
@chameleonhead, thanks for following up with me on this. There is no need to be sorry whatsoever. I completely understand it; we're all busy here 🙂 |
|
Hi, I would love to proofread the PR if @chameleonhead is busy! |
|
@shoegaze I have done following chapters.
I would like you to proofread from deploy.md to the end. (Of course you can do all.) If it is ok, then I will send incomplete review. Thank you. |
|
@shoegaze, that's great to hear. I appreciate you taking the time to help @chameleonhead by proofreading the translation 🙏 ! Once it's done, let me know so that @nagashimam can address the feedback and merge the pull request, making it available to our readers. Have a fantastic day. Stay safe |
There was a problem hiding this comment.
I have proofread following chapters.
- get-started.md
- simple-component.md
- composite-component.md
- data.md
- screen.md
Please check my review comments and fix them if needed. Thank you.
I am following next guideline: https://mozilla-l10n.github.io/styleguides/ja/editorialguideline.html
Please read if you have time.
| `TaskComponent` の作成を始めるにあたり、事前に上記のそれぞれのタスクに応じたテスト用の状態を作成します。次いで、Storybook で、モックデータを使用し、コンポーネントを切り離して作ります。コンポーネントのそれぞれの状態について「ビジュアルテスト」を行い、見た目を確認しながら進めます。 | ||
|
|
||
| [テスト駆動開発](https://ja.wikipedia.org/wiki/%E3%83%86%E3%82%B9%E3%83%88%E9%A7%86%E5%8B%95%E9%96%8B%E7%99%BA) (TDD) に似ているこのプロセスを、「[Visual TDD](https://www.chromatic.com/blog/visual-test-driven-development)」と呼んでいます。 | ||
| `Task` の作成を始めるにあたり、事前に上記のそれぞれのタスクに応じたテスト用の状態を作成します。次いで、Storybook で、モックデータを使用し、コンポーネントを切り離して作ります。コンポーネントのそれぞれの状態について見た目を確認しながら進めます。 |
There was a problem hiding this comment.
Taskの作成を始めるにあたり、事前に上記のそれぞれのタスクに応じたテスト用の状態を作成します。
今回の修正箇所ではありませんが、「事前に」という言葉が気になります。「まずは」や、「最初に」としていただけると良いかと思います。
| @@ -50,128 +59,133 @@ export class TaskComponent { | |||
| } | |||
| ``` | |||
|
|
|||
| 上のコードは Todo アプリケーションの HTML を基にした `TaskComponent` の簡単なマークアップです。 | |||
| 上のコードは Todo アプリケーションの HTML を基にした `Task` component の簡単なマークアップです。 | |||
There was a problem hiding this comment.
ここの component は「コンポーネント」とカタカナにした方が良いと思います。
| }, | ||
| }; | ||
| ``` | ||
|
|
||
| <div class="aside"> | ||
| 💡 <a href="https://storybook.js.org/docs/angular/essentials/actions"><b>アクション</b></a>は、UIコンポーネントを単独で構築する際にインタラクションを検証するのに役立ちます。多くの場合、アプリのコンテキストで使用している関数や状態にアクセスできないことがあります。<code>action()</code>を使用して、それらをスタブとして用います。 |
There was a problem hiding this comment.
英語と日本語の間にはスペースを入れてください。（ただし、句読点など約物と英単語の間には必要ありません。）
「UI」と「コンポーネント」の間にスペースを入れてください。
「action()」と「を」の間にスペースを入れてください。
| - `title` -- Storybook のサイドバーにあるコンポーネントをグループ化またはカテゴライズする方法 | ||
| - `tags` -- コンポーネントのドキュメントを生成するために使用 | ||
| - `excludeStories` -- ストーリーに必要だが、Storybook でレンダリングされるべきでない追加情報 | ||
| - `render` -- コンポーネントが Storybook でどのようにレンダリングされるかを指定するカスタム[render 関数](https://storybook.js.org/docs/angular/api/csf#custom-render-functions) |
There was a problem hiding this comment.
「カスタムrender 関数」は違和感があります。「カスタムレンダー関数」や「カスタムレンダリング関数」などとするのが良いのではないでしょうか。そのままとする場合は「カスタム」と「render」の間にもスペースを挿入してください。
| 💡 `Template.bind({})` は関数のコピーを作成する [JavaScript の標準的な](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind) テクニックで、同じ実装を使いながら、エクスポートされたそれぞれのストーリーに独自のプロパティを設定することができます。 | ||
|
|
||
| </div> | ||
| ストーリーを定義するには、テスト用の状態ごとにストーリーを生成する関数をエクスポートします。ストーリーとは、特定の状態で描画された要素 (例えば、プロパティを指定したコンポーネントなど) を返す関数で、[関数コンポーネント](https://angular.jp/guide/component-interaction)のようなものです。 |
There was a problem hiding this comment.
この行は消し忘れだと思います。削除をお願いします。
|
|
||
| play 関数はタスクが更新されたときに UI に何が起こるかを検証するのに役立ちます。フレームワークに依存しない DOM API を使用しています。つまり、 play 関数を使って UI を操作し、人間の行動をシミュレートするストーリーを、フロントエンドのフレームワークに関係なく書くことができるのです。 | ||
|
|
||
| `@storybook/addon-interactions`は、一つ一つのステップごとに Storybook のテストを可視化するのに役立ちます。さらに、各インタラクションの一時停止、再開、巻き戻し、ステップ実行といった便利な UI の制御機能が備わっています。 |
There was a problem hiding this comment.
「@storybook/addon-interactions」と「は」の間にスペースを追加してください。
|
|
||
| <div class="aside"> | ||
|
|
||
| 💡 `@storybook/test`が `@storybook/jest`と`@storybook/testing-library`を置き換え、 [Vitest](https://vitest.dev/) に基づいたより小さいバンドルサイズと直感的なAPIを提供します。 |
There was a problem hiding this comment.
英単語と日本語の間にスペースを追加してください。
| type="video/mp4" | ||
| /> | ||
| </video> | ||
|
|
||
| ### テスト自動化 |
There was a problem hiding this comment.
原文のタイトルは Automate tests with the test runner ですがあえてタイトルを変更しているのでしょうか。
影響はほぼないのでこのままでも良いと思いますが、念の為確認です。
| } | ||
| ``` | ||
|
|
||
| 最後に、Storybook を起動し、新しいターミナルで以下のコマンドを実行してください: |
There was a problem hiding this comment.
Finally, with your Storybook running, open up a new terminal window and run the following command:
ここは「Storybook を起動した状態で、別のターミナルを開き、以下のコマンドを...」とした方が分かりやすいと思います。
| ``` | ||
|
|
||
| <div class="aside"> | ||
| 💡 play 関数でのインタラクションテストはUIコンポーネントをテストするための素晴らしい手法です。ここで紹介したもの以外にも、さまざまなことができます。もっと深く学ぶには<a href="https://storybook.js.org/docs/angular/writing-tests/interaction-testing">公式ドキュメント</a>を読むことをお勧めします。 |
There was a problem hiding this comment.
UI の前後にスペースを挿入してください。
|
@chameleonhead (@shoegaze @jonniebigodes) |
|
@nagashimam, thanks for following up with me on this. And all is good, no rush. Depending on your time frame, we can tackle these changes and update it for Storybook 8. Good luck with your move to the new town. |
This PR updates Japanese translation for Angular version of introduction to Storybook
Angular版introduction to Storybookの日本語訳更新です。