chore: Calendarの内部処理を整理する #5346
Open
+379
−221
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…e-refactoring-Calendar-YearPicker
yagimushi
force-pushed
the
chore-refactoring-Calendar
branch
from
01bc342 to
8a18400
Compare
commit: |
yagimushi
force-pushed
the
chore-refactoring-Calendar
branch
from
8a18400 to
1c2384a
Compare
yagimushi
force-pushed
the
chore-refactoring-Calendar
branch
from
e9a39e5 to
5a054a4
Compare
AtsushiM
commented
Feb 3, 2025
Comment on lines
+39
to
+56
| const result: Array<Array<number | null>> = [] | ||
|
|
||
| for (let weekIndex = 0; weekIndex < numOfWeek; weekIndex++) { | ||
| // 週毎の配列を形成 | ||
| const startDateInWeek = weekIndex * 7 - startDay + 1 | ||
| return Array.from({ length: 7 }).map((__, dateIndex) => { | ||
| const weekNumbers: Array<number | null> = [] | ||
|
|
||
| for (let dateIndex = 0; dateIndex < 7; dateIndex++) { | ||
| // 1週の配列を形成 | ||
| const dateNum = startDateInWeek + dateIndex | ||
|
|
||
| return dateNum > 0 && dateNum <= lastDate ? dateNum : null | ||
| }) | ||
| }) | ||
| weekNumbers[dateIndex] = dateNum > 0 && dateNum <= lastDate ? dateNum : null | ||
| } | ||
|
|
||
| result[weekIndex] = weekNumbers | ||
| } | ||
|
|
||
| return result |
There was a problem hiding this comment.
Array.from({ length: X }) で特定の長さの配列を作ったあとmap... という思考の流れが微妙にわかりづらく、またネストしていることがそれを助長してしまっているので
- 純粋に空配列を作成
- 空配列に対してforで何回ループするのかを明示
することで配列の生成とループ回数を明確に分離しました
(一応forのほうが高速だし...)
AtsushiM
commented
Feb 3, 2025
| const lastDate = dayjs(date).add(1, 'month').date(0).date() | ||
| const day = dayjs(date) | ||
| const startDay = day.date(1).day() | ||
| const lastDate = day.add(1, 'month').date(0).date() |
There was a problem hiding this comment.
dayjsのdateやaddメソッドは別オブジェクトを生成するため、dayjs自体の実行結果を別変数にしました。
こうすることでメソッド呼び出し、実行のコストが浮きます
AtsushiM
commented
Feb 3, 2025
Comment on lines
+64
to
+71
| const length = Math.max(Math.min(toYear, 9999) - fromYear + 1, 0) | ||
| const result: number[] = [] | ||
|
|
||
| for (let i = 0; i < length; i++) { | ||
| result[i] = fromYear + i | ||
| } | ||
|
|
||
| return result |
There was a problem hiding this comment.
元の処理では
- numOfYear分の長さの配列を生成
- その後nillで全部埋める
- その後nullを無視してindexを元に年を計算....
とかなり無駄な処理をしてしまっていました。
結局何回ループするのか？ が微妙に分かりづらいので
- 空配列を生成
- 空配列に対してindexを元に年を計算して詰める
ようにロジックを変更しました
AtsushiM
commented
Feb 3, 2025
| }, | ||
| }) | ||
|
|
||
| export const YearPicker: FC<Props & ElementProps> = ({ | ||
| export const YearPicker: FC<Props & ElementProps> = ({ isDisplayed, ...rest }) => | ||
| isDisplayed ? <ActualYearPicker {...rest} /> : null |
There was a problem hiding this comment.
isDisplayedではない場合でYearPickerを常に計算するようになっていたため、
他コンポーネントと合わせて、そもそも表示しない場合はロジックを実行しないようにしました。
年の選択UIはそもそも利用されない可能性も十分に有るため、既存のロジックより効率的なはずです
AtsushiM
commented
Feb 3, 2025
| const fromDay = dayjs(from) | ||
| const toDay = dayjs(to) | ||
| // HINT: dayjsのisSameは文字列でも比較可能なため、cacheが効きやすいstringにする | ||
| const nowDateStr = dayjs().startOf('date').toString() |
There was a problem hiding this comment.
nowの情報が欲しいため、memo化できません。
ただここで生成する文字列は1日単位なのでキャシュしちゃってもいいかもですが...
AtsushiM
commented
Feb 3, 2025
Comment on lines
+67
to
+86
| const formattedFrom = useMemo(() => { | ||
| const date = getFromDate(from) | ||
| const day = dayjs(date) | ||
|
|
||
| return { | ||
| day, | ||
| date, | ||
| year: day.year(), | ||
| } | ||
| }, [from]) | ||
| const formattedTo = useMemo(() => { | ||
| const date = getToDate(to) | ||
| const day = dayjs(date) | ||
|
|
||
| return { | ||
| day, | ||
| date, | ||
| year: day.year(), | ||
| } | ||
| }, [to]) |
There was a problem hiding this comment.
from, to はほぼ固定で変わる可能性は低いため、memo化しています
またこれらをベースに計算される値も同様です
AtsushiM
requested review from
misako0927 and
hiroki0525
and removed request for
a team
…e-refactoring-Calendar
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
関連URL
概要
変更内容
確認方法