Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Translate faq-styling.md #104

Merged
merged 7 commits into from
Feb 14, 2019
Merged

Conversation

Naturalclar
Copy link
Contributor

This PR is part of #4
Translated faq-styling.md to Japanese.

@tesseralis tesseralis mentioned this pull request Feb 9, 2019
90 tasks
@smikitky smikitky self-requested a review February 9, 2019 16:47
@smikitky smikitky added the 🚫 in intial review 初期レビューの真っ最中 label Feb 9, 2019
Copy link
Member

@smikitky smikitky left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

よろしくお願いします。

@@ -1,22 +1,22 @@
---
id: faq-styling
title: Styling and CSS
title: CSSとスタイルの使用
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
title: CSSとスタイルの使用
title: CSS とスタイルの使用


Pass a string as the `className` prop:
このようにクラス名を string として `className` prop に与えてください。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
このようにクラス名を string として `className` prop に与えてください
このようにクラス名を文字列として `className` プロパティに与えてください

一応具体的な prop に言及するときのみ「プロパティ」を使うという決まりになっています(このルールが本当に正しいかどうかは議論の余地があると思いますが)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

確かに、そこは少し気になっていました。Reactのpropsに関する記述であればpropsをそのまま使う方がわかりやすいと少し感じます、が統一性を重視します:bow:


CSS classes are generally better for performance than inline styles.
パフォーマンス観点から言えば、基本的に CSS クラスを使う方が、インラインスタイルを用いるよりもパフォーマンスは優れています。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
パフォーマンス観点から言えば、基本的に CSS クラスを使う方が、インラインスタイルを用いるよりもパフォーマンスは優れています
パフォーマンス観点から言えば、基本的に CSS クラスを使う方が、インラインスタイルを用いるよりも優れています

「パフォーマンス」を2回言うのは冗長なので整理

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

どうしようか迷っていました、ありがとうございます:bow:


"CSS-in-JS" refers to a pattern where CSS is composed using JavaScript instead of defined in external files. Read a comparison of CSS-in-JS libraries [here](https://github.com/MicheleBertoli/css-in-js).
"CSS-in-JS" とは外部ファイルでスタイルを定義するのとは違い、 JS を用いて CSS を生成するパターンのことを指します。数々の CSS-in-JS ライブラリの比較については[この資料](https://github.com/MicheleBertoli/css-in-js)をご覧ください。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
"CSS-in-JS" とは外部ファイルでスタイルを定義するのとは違い、 JS を用いて CSS を生成するパターンのことを指します。数々の CSS-in-JS ライブラリの比較については[この資料](https://github.com/MicheleBertoli/css-in-js)をご覧ください。
"CSS-in-JS" とは外部ファイルでスタイルを定義するのとは違い、JavaScript を用いて CSS を生成するパターンのことを指します。数々の CSS-in-JS ライブラリの比較については[この資料](https://github.com/MicheleBertoli/css-in-js)をご覧ください。


_Note that this functionality is not a part of React, but provided by third-party libraries._ React does not have an opinion about how styles are defined; if in doubt, a good starting point is to define your styles in a separate `*.css` file as usual and refer to them using [`className`](/docs/dom-elements.html#classname).
_注意:この機能は React の一部ではありません。サードパーティに提供されたライブラリ郡です。_ React はスタイルがどのように定義されているかには関心を持ちません。疑うのであれば、まずはいままでどおり別の `*.css` にスタイルを定義して、[`className`](/docs/dom-elements.html#classname) を使って参照するところからはじめると良いでしょう。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
_注意:この機能は React の一部ではありません。サードパーティに提供されたライブラリ郡です。_ React はスタイルがどのように定義されているかには関心を持ちません。疑うのであれば、まずはいままでどおり別の `*.css` にスタイルを定義して、[`className`](/docs/dom-elements.html#classname) を使って参照するところからはじめると良いでしょう。
_注意:この機能は React の一部ではありません。サードパーティのライブラリ群により提供される機能です。_React はスタイルがどのように定義されているかには関心を持ちません。判断に困った場合は、まずは別の `*.css` にスタイルを定義して、[`className`](/docs/dom-elements.html#classname) を使って参照するところからはじめると良いでしょう。

郡 → 群


### Can I do animations in React? {#can-i-do-animations-in-react}
### React で animation は使えますか? {#can-i-do-animations-in-react}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
### React で animation は使えますか? {#can-i-do-animations-in-react}
### React でアニメーションは使えますか? {#can-i-do-animations-in-react}

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

いわゆるCSS Animations技術のことを指しているなら英語のままでもいいかもしれませんが、リンクされているライブラリは別にそれ特化のものではないような気がしました(ちょっと眺めただけですが)ので、一般名詞のアニメーションでよいと思います。

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

たしかに、css の animationとはまた別の文脈ですね。アニメーションに変更しました。


React can be used to power animations. See [React Transition Group](https://reactcommunity.org/react-transition-group/) and [React Motion](https://github.com/chenglou/react-motion), for example.
React を使って animations を動かすことは可能です。例として、[React Transition Group](https://reactcommunity.org/react-transition-group/) [React Motion](https://github.com/chenglou/react-motion) をご覧ください。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
React を使って animations を動かすことは可能です。例として、[React Transition Group](https://reactcommunity.org/react-transition-group/)[React Motion](https://github.com/chenglou/react-motion) をご覧ください。
React を使ってアニメーションを動かすことは可能です。例として、[React Transition Group](https://reactcommunity.org/react-transition-group/)[React Motion](https://github.com/chenglou/react-motion) をご覧ください。

@smikitky smikitky removed the 🚫 in intial review 初期レビューの真っ最中 label Feb 9, 2019
Copy link
Member

@potato4d potato4d left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Naturalclar
追加で一点、こちらも修正お願いいたします 🙏

content/docs/faq-styling.md Outdated Show resolved Hide resolved
@Naturalclar
Copy link
Contributor Author

レビューありがとうございます!指摘箇所を修正いたしました:bow:

@smikitky
Copy link
Member

ありがとうございます!

@Naturalclar
Copy link
Contributor Author

ルール改正されたTextLintを走らせました:bow:

Copy link
Member

@potato4d potato4d left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

よさそうです!ありがとうございます

@potato4d potato4d merged commit 6a5b30f into reactjs:master Feb 14, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants