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

40. よくあるボタンコンポーネントを作成する #212

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
# 課題1 課題2
## 以下の使用を満たすボタンのコンポーネントを作成してください
## 上記ボタンコンポーネントのStoryをStorybookで作成してください
https://github.com/YamazakiYusuke/praha-challenge-front-end/pull/5
Copy link
Collaborator

Choose a reason for hiding this comment

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


# 課題3
## 今回のように「children」として要素を受け取ることでボタンの中身を変えることも、「text」といったpropsを定義してボタンのテキスト文言だけを変えることもできますどちらの設計でも似たようなことが実現できそうですが、果たしてどちらを採用するべきか、考えてみてください。

### 「children」として要素を受け取る
メリット
- childrenを自由に変更できるので、自由度が高く柔軟に引数から表示内容を変更できる。

デメリット
- 自由度が高いので、引数による予期しないエラーやレイアウト崩れが発生する可能性がある。
Copy link
Collaborator

Choose a reason for hiding this comment

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

自由度が高いので、引数による予期しないエラーやレイアウト崩れが発生する可能性がある。

これを言ってしまったら、他のコンポーネントもぜんぶそうなのでデメリットとしてあげるべきものではないと思います。


### 「text」といったpropsを定義してボタンのテキスト文言だけを変える
メリット
- 変更できる箇所が限られているので、コードが明瞭である。

デメリット
- 自由度が低い。
Comment on lines +16 to +21
Copy link
Collaborator

Choose a reason for hiding this comment

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

React.ReactChildrenを受け取れる props を容易するメリットは、他のフレームワークでいう named slot として扱える点です。

つまり、複数の children を設け、children を挿入できるHTML構造を特定できるのが旨みです。


不用意に自由度の高いパラメータをセットすべきではない。
コンポーネントが求められる要件に応じて、適切な設計を選択することが重要である。