[DON'T MERGE] [OC-67] :sparkles: feat: 折り紙難易度表示機能とラベル表示機能の実装 by YutaK1026 · Pull Request #27 · ori-cube/OriCube

YutaK1026 · 2025-08-30T15:51:59Z

タイトル

概要

折り紙難易度機能を星として右上に表示
ラベルを折り紙の下に表示されるようにした

変更内容

スクリーンショット

備考

現状はDB変更しなくてもエラー吐かないように追加props部分はオプショナルにしているけど，今後のためにDBの変更・seedの変更をしないといけないね．

notion-workspace · 2025-08-30T15:52:02Z

折り方手順一覧確認用画面のデザイン作成

vercel · 2025-08-30T15:52:05Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
ori-cube	Ready	Preview	Comment	Oct 27, 2025 1:31am

akaishikiso

＼いくつかコメントしましたが、CI通るようになってたらOKです／

akaishikiso · 2025-09-28T07:25:13Z

  id,
  name,
  imageUrl,
+  difficulty = 1, // デフォルト値1を設定


[imo]難易度未設定の場合はゼロ値を入れて、何も情報がないことがわかるほうがいい気がしました！（誤った情報になりうるため）

ここで修正DONE 🩹 update: PRレビュー修正: 色素さんのレビュー対応

akaishikiso · 2025-09-28T07:27:54Z

+
  return (
    <Link href={{ pathname: `/${id}` }} className={styles.listItem}>
+      <div className={styles.difficultyStars}>{renderStars()}</div>


[imo]こんな感じでラベルを添えてあげたほうが、何の星かわかるので優しい気がしました！

修正〜

🩹 update: PRレビュー修正: 色素さんのレビュー対応

yutteee · 2025-10-02T12:03:14Z

ここにはロジックのテストを書きたいです。
UIがPropsによって意図した通りに表示されるかどうかというのは、ロジックで書くものではなく、ChromaticなどのVRTで実装すべきです。(作ってないですが...)

Frontendの単体テストの対象はロジックであることが一般的です。
例えば以下のテストだと、どこまでをテストできてると言えるでしょうか？

it("タグが正しく表示される", () => { render(<OrigamiListItem {...mockModel} />); expect(screen.getByText("初心者向け")).toBeInTheDocument(); expect(screen.getByText("楽しい")).toBeInTheDocument(); });

DOMの中に"初心者向け"と"楽しい"というテキストが含まれているかしか見れません。
例えばvisually: hiddenが付いてて画面に表示されてないとか、予期せぬ場所にレンダリングされてるとか、UI観点でのテストはカバーされてないです。

コードを見るとただ渡されたPropsを表示しているだけなので、このテストを毎回書くと工数がかかる割に得られる効果は少ないです。

🩹 update: PR修正対応: ゆってぃーのFEテストの指摘点を反映

UIテストあんまり詳しくないから勉強になるっす．
ロジックテストになるように考えて，AIに書いてもらっています．
ベストプラクティスではないかも...

結論から言えば、これらのテストは全て不要だと思います。
このコンポーネント自体、ロジックは持っていないからです。

propsが渡されて、それをそのままレンダリングしてるだけですよね。(altとかlinkとか特に)
どういう見た目になるかとか、それはstorybookで書いてるので重複したコードになってます。

強いて言えば、星のテストの部分はあってもなくてもいいかなくらいの認識です。

yutteee · 2025-10-05T11:52:35Z

+  const renderStars = () => {
+    const stars = [];
+    for (let i = 1; i <= 5; i++) {
+      const isFilled = i <= difficulty;
+      stars.push(
+        <FaStar
+          key={i}
+          className={`${styles.star} ${
+            isFilled ? styles.filled : styles.empty
+          }`}
+        />
+      );
+    }
+    return stars;
+  };


reactではあまりdomを直接操作する書き方はしないかな...
https://ja.react.dev/reference/rules/react-calls-components-and-hooks#never-call-component-functions-directly

宣言的UIについて調べると良さそう
https://zenn.dev/begineer/articles/8bc95caec85d86

ありがと〜，以前にも言われた気がするわ．申し訳！
🩹 update: PRレビュー対応: DOMを操作しないように修正
ここで対応

yutteee · 2025-10-05T11:54:06Z

+    },
+    colorStyle: {
+      control: "select",
+      options: ["purple-blue", "red-pink", "green", "blue", "orange", "yellow"],


ここはtype別に定義してるとこから持ってきたい

🩹 update: REレビュー対応: type部分のimport

ここで修正

yutteee · 2025-10-05T11:54:28Z

こっちのテストも同様

🩹 update: REレビュー対応: type部分のimport

ここで修正

こちらもこのコンポーネントにロジックはないのでテストは不要です。

yutteee · 2025-10-05T11:56:49Z

@@ -0,0 +1,3 @@
+export { Tag } from "./Tag";
+export { IconButton } from "./IconButton";
+export { default as AddOrigamiButton } from "./AddOrigamiButton";


default as AddOrigamiButton これあってる？

変だった...ごめん

🩹 update: PRレビュー対応: exportが変だった．

yutteee · 2025-10-05T11:58:07Z

この辺の変更必要かどうか確かめて欲しいです！

storybookのバージョンが悪さしてそうでした．
🩹 update: PRレビュー対応: main.tsの変更をロールバック
ここで修正DONE

yutteee

commented

yutteee · 2025-10-19T23:52:08Z

  imageUrl: string;
  searchKeyword?: string[];
  procedure: Procedure;
+  difficulty?: number;


型の情報量を減らしたい
少数が入ってきた場合のテストがあったけど、そもそも少数が入らないように設計すべきと思いました。

Suggested change

difficulty?: number;

difficulty?: 1 | 2 | 3 | 4 | 5;

🐛 fix: テストの削除, ColorStyleの命名変更, difficulyの型変更

こちらで修正

yutteee · 2025-10-19T23:53:16Z

 export type RotateAxis = [Point, Point] | [];

+// タグの色スタイル定義
+export type ColorStyle =


なんのカラースタイルかわかる命名にしたい
(ローカル変数ならこれでもいいが、exportしてるので)

タグ名とカラーはセットではなくて，ユーザーが好きに選べる，というのを想定していたんだけど，ゆってぃー的には違ったかな？
とりあえず色がわかりやすいようにColorStyleを変更した上で，今日のミーティングで確認しますm

🐛 fix: テストの削除, ColorStyleの命名変更, difficulyの型変更

とりあえずこちらで修正

命名が分かりにくいという指摘でした！

別ファイルからColorStyleをimportした場合を想定すると、
tagで使うためのstyleだとわからず、意図しない場所で使われそうと思いました

yutteee · 2025-10-20T00:05:32Z

結論から言えば、これらのテストは全て不要だと思います。
このコンポーネント自体、ロジックは持っていないからです。

propsが渡されて、それをそのままレンダリングしてるだけですよね。(altとかlinkとか特に)
どういう見た目になるかとか、それはstorybookで書いてるので重複したコードになってます。

yutteee · 2025-10-20T00:06:28Z

こちらもこのコンポーネントにロジックはないのでテストは不要です。

yutteee · 2025-10-20T00:12:37Z

+          {Array.from({ length: 5 }, (_, index) => {
+            const starNumber = index + 1;
+            const isFilled = starNumber <= difficulty;
+            return (
+              <FaStar
+                key={starNumber}
+                className={`${styles.star} ${
+                  isFilled ? styles.filled : styles.empty
+                }`}
+              />
+            );
+          })}


よくなりましたが、jsxのなかにconstとかが入ってくるのは宣言的UIの原則には反しているかと思います。ここはロジックを持たず、UIの宣言のみになるべきです。

UIとロジックを分離して書くとすればこうなるかなと思います。

const stars = Array.from({ length: 5 }, (_, index) => { const starNumber = index + 1; const isFilled = starNumber <= difficulty; return { number: starNumber, isFilled, }; }); ... return ( ... {stars.map((star) => ( <FaStar key={star.number} className={`${styles.star} ${ star.isFilled ? styles.filled : styles.empty }`} /> ))} ... )

🐛 fix: Star周りの修正

こちらで修正

yutteee · 2025-10-20T00:13:54Z

強いて言えば、星のテストの部分はあってもなくてもいいかなくらいの認識です。

yutteee

nits commentしましたが全体的にokだと思います！

yutteee · 2025-10-27T12:25:12Z

 export type RotateAxis = [Point, Point] | [];

+// タグの色スタイル定義
+export type ColorStyle =


命名が分かりにくいという指摘でした！

別ファイルからColorStyleをimportした場合を想定すると、
tagで使うためのstyleだとわからず、意図しない場所で使われそうと思いました

yutteee · 2025-10-27T23:42:13Z

+type OrigamiListItem = (
+  props: Omit<Model, "searchKeyWord" | "procedure" | "color">
+) => JSX.Element;


imo

omit知らなかったけどちょっと型安全性悪そう

Omit<T, Keys>のKeysにTには無いプロパティキーを指定しても、TypeScriptコンパイラーは指摘しません。たとえば、Keysにタイポがあっても検出できないので注意が必要です。

https://typescriptbook.jp/reference/type-reuse/utility-types/omit

omitで不要なプロパティを除くのではなく、
pick使って必要なプロパティを明示的に指定した方が安全性は上がりそう

個人的にはtypeベタ書きで良い気がする
UIがmodelを意識する必要があるか？と言われるとないので

Suggested change

type OrigamiListItem = (

props: Omit<Model, "searchKeyWord" | "procedure" | "color">

) => JSX.Element;

type OrigamiListItem = (

id: string;

name: string;

imageUrl: string;

difficulty: 0 | 1 | 2 | 3 | 4;

tags: string[];

) => JSX.Element;

✨ feat: 折り紙難易度表示機能とラベル表示機能の実装

7457e69

YutaK1026 changed the title ~~✨ feat: 折り紙難易度表示機能とラベル表示機能の実装【OC-67】~~ [OC-67] ✨ feat: 折り紙難易度表示機能とラベル表示機能の実装 Aug 30, 2025

YutaK1026 requested a review from yutteee August 30, 2025 15:52

YutaK1026 self-assigned this Aug 30, 2025

YutaK1026 requested a review from akaishikiso August 30, 2025 15:52

vercel Bot deployed to Preview August 30, 2025 15:53 View deployment

akaishikiso previously approved these changes Sep 28, 2025

View reviewed changes

yutteee reviewed Oct 5, 2025

View reviewed changes

YutaK1026 added 3 commits October 19, 2025 08:54

Merge branch 'main' into OC-67

a107633

🔧 chore: Vitest, storybookのバージョンの修正: dependencyエラー解決のためにpackage-lockの削除

d550353

🩹 update: PRレビュー修正: 色素さんのレビュー対応

fc98938

vercel Bot deployed to Preview October 19, 2025 00:29 View deployment

YutaK1026 added 2 commits October 19, 2025 09:37

🩹 update: PR修正対応: ゆってぃーのFEテストの指摘点を反映

6c700aa

🩹 update: PRレビュー対応: DOMを操作しないように修正

41d2d77

vercel Bot deployed to Preview October 19, 2025 00:45 View deployment

🩹 update: PRレビュー対応: main.tsの変更をロールバック

ca52518

vercel Bot deployed to Preview October 19, 2025 00:47 View deployment

YutaK1026 added 2 commits October 19, 2025 09:52

🩹 update: REレビュー対応: type部分のimport

0f1ae89

🩹 update: PRレビュー対応: exportが変だった．

17ecfb5

vercel Bot had a problem deploying to Preview October 19, 2025 00:56 Failure

🐛 fix: Importエラー修正

4688175

YutaK1026 requested review from akaishikiso and yutteee October 19, 2025 01:00

vercel Bot deployed to Preview October 19, 2025 01:01 View deployment

YutaK1026 added the enhancement New feature or request label Oct 19, 2025

yutteee reviewed Oct 20, 2025

View reviewed changes

🐛 fix: テストの削除, ColorStyleの命名変更, difficulyの型変更

21e2beb

vercel Bot deployed to Preview October 27, 2025 01:25 View deployment

🐛 fix: Star周りの修正

4d6b495

vercel Bot deployed to Preview October 27, 2025 01:31 View deployment

YutaK1026 changed the title ~~[OC-67] ✨ feat: 折り紙難易度表示機能とラベル表示機能の実装~~ [DON'T MERGE] [OC-67] ✨ feat: 折り紙難易度表示機能とラベル表示機能の実装 Oct 27, 2025

yutteee approved these changes Oct 27, 2025

View reviewed changes

YutaK1026 dismissed akaishikiso’s stale review via 4d6b495 November 29, 2025 04:24

Conversation

YutaK1026 commented Aug 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

タイトル

概要

変更内容

スクリーンショット

備考

Uh oh!

notion-workspace Bot commented Aug 30, 2025

Uh oh!

vercel Bot commented Aug 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

akaishikiso left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

yutteee left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

yutteee Oct 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

YutaK1026 commented Aug 30, 2025 •

edited

Loading

vercel Bot commented Aug 30, 2025 •

edited

Loading

yutteee Oct 19, 2025 •

edited

Loading