プロジェクトメンバーを加入日昇順にソート

[ogu-kazemiya]

User description

close #224

---

PR Type

Enhancement

---

Description

• プロジェクトメンバーを加入日昇順にソートするためのロジックを追加。
• computedプロパティsortedMembersを作成し、yearとsemesterを基準にメンバーをソート。
• テンプレート内でv-forディレクティブをsortedMembersに変更し、ソートされたリストを表示。

---

Changes walkthrough 📝

	Relevant files
Enhancement	MemberList.vue メンバーリストを加入日昇順にソートするロジックを追加                                                              src/components/Project/MemberList.vue 新しいcomputedプロパティsortedMembersを追加し、メンバーを加入日昇順にソート。 v-forディレクティブでmembersの代わりにsortedMembersを使用。 メンバーのソートロジックをyearとsemesterで実装。 +16/-2

---

💡 PR-Agent usage: Comment /help "your question" on any pull request to receive relevant information

[github-actions]

Preview (prod) → https://255-prod.portfolio-preview.trapti.tech/
Preview (dev) → https://255-dev.portfolio-preview.trapti.tech/

[github-actions]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

🎫 Ticket compliance analysis 🔶 224 - Partially compliant Fully compliant requirements: メンバーを加入順に並べる Not compliant requirements: 現状参加しているメンバー（until=未定）は上位に並ぶ

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Sorting Logic メンバーのソートロジックが年と学期のみを考慮しており、現在参加中のメンバーを優先する要件が考慮されていない

[github-actions]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Score
Possible issue	props.members の元の配列を変更しないように、ソート前に配列をコピーする。 sortedMembers の計算プロパティ内で、配列 li を直接ソートすると、元の props.members 配列も変更されてしまいます。これを防ぐために、ソート前に配列をコピーしてください。 src/components/Project/MemberList.vue [12-23] const sortedMembers = computed(() => { if (!props.members) return [] - const li = props.members + const li = [...props.members] li.sort((a, b) => { if (a.duration.since.year !== b.duration.since.year) { return a.duration.since.year - b.duration.since.year } else { return a.duration.since.semester - b.duration.since.semester } }) return li }) Suggestion importance[1-10]: 9 Why: This suggestion correctly identifies a potential issue where sorting the array directly affects the original props.members array. The suggested use of array spreading to create a shallow copy before sorting is a best practice in JavaScript to avoid unintended side effects. This change is crucial for maintaining the integrity of the original data structure.	9

[Futadaruma]

参加開始年→学期(前期/後期)に従ってソートされるようになってて良さそうです
また、dashboard側で参加期間の入力は必須になっているので、参加期間未登録の場合の動作は考えなくて良いようになっていると思います
ありがとうございます！

[Pugma]

ここで配列をコピーしてから改めて sort 関数をかけているけど、 toSorted 関数を利用するともっと便利にできたかもです
これでも動作は問題ないので書き換える必要まではないと思うんだけど、こういうのもあると知っておくといいかも
この関数は Dashboard のリポジトリで使われてました

参考リンク
MDN - Array.prototype.toSorted()

[SSlime-s]

外部から失礼します
JS で const x = someArray のように書くと、参照する配列が同じものとなってしまうため、この処理だと li をソートするのと同時に、props.members もソートされてしまいます

特にこの場合だと props の値を変更していて、親要素側の値も変更されてしまうので予期せぬバグ (特にリアクティブ性が失われる変更方法で、バグによくわからないタイミングで更新されたように見えたりする) を引き起こしやすいです
(ref: https://ja.vuejs.org/guide/components/props#mutating-object-array-props)
なので、スプレッド構文などを使った浅いコピーを行ってからソートするか、新し目の機能になってしまうのですが Pugma くんが言ってるような toSorted を使うのがよさそうです

const li = [...props.members]

or

const li = props.members.toSorted(...)

参考コード: TypeScript Playground

[ogu-kazemiya]

ありがとうございます！！
仕様確認して修正します