覚えておきたいことを書いておく。
やる前は不安だったが、やってみると意外とできたことも多いので。
SP/PCレスポンシブ対応について
当初はlayout.tsxにisSpかどうかを判断してzustandに登録するuseIsSpみたいなものを作ろうと思っていたが、それだと使われるはずのhookが使われない的なエラーが出て散々だったので、useGSAP内でmatchMediaを使って対応。Three.jsのシーン側では特にspとpcで処理は変えていないが、matchMediaでcanvasを動かす「範囲」を変えているので軽くなる。
なんやかんやsp等実装し尽くした後でも、lighthouseの点数は変わらなかった（むしろ上がることもあり）。
uesGSAP(() => {
const mm = gsap.matchMedia();
mm.add(
{
small: "(max-width: 767px)",
large: "(min-width: 768px)",
},
(ctx) => {
const { small } = ctx.conditions as { small: boolean; large: boolean };
if(!small) { pc時の処理 } else { sp時の処理}
}
);
}, []);スマホ時のcanvasのカクつきについて
最初は低電力モードでカックカク、低電力モード切ったら滑らかではあったけどどこかぎこちない感じだったが、Lenisのオプションの"syncTouch"をtrueにすると解決した。参考にした海外のサイトたちもこれをつかっていたと考えられる。
メニューのアクセシビリティについて
アクセシビリティについては色々あるが、メニューについてだけ。
今回実装したのはモーダルメニューなので、単なるメニューだけでなくフォーカストラップの実装やモーダルであることを伝える必要がある。
フォーカストラップ→tabIndex=0のdivを最後尾に作って、onFocusで最初にfocusが当たるようにする。
モーダルであること→aria-modal=true
ページ内リンク
#aboutや#contactなどつけて、scrollIntoviewで実装。urlが汚染されないし小回りが効くので良い感じ
sectionのアクセシビリティについて
sectionとheadignタグを構造にするのは大前提なんだけど、sectionのaria-labelledbyはh1やh2までにしといたほうがよい。
小さなsectionにaria-labelledbyとすると、VoiceOverのランドマークに全て出てきてしまう。
デフォルト/名前付きエクスポートについて
名前付きエクスポートが好まれる傾向?
About.tsxやHero.tsxのような1ファイル1コンポーネントだけ使うようなやつはデフォルトエクスポートで他は名前付きで
ローディングについて
つけ外ししてみても、lighthouseの点数に違いはなかった。パフォーマンスタブにも変化無し。付け得？
ドメイン等サイト制作以外について
ドメイン取得と、GoogleSearchConsole、GoogleAnalyticsの登録はサイト制作はじめにやったほうがいいかも
sitemap.tsとrobots.tsを作る。 ドメインは必須。
パフォーマンスについて
シーンが複数ある場合、sceneProgressの値によってレンダリングを付け外しすると初期読み込みは圧倒的に早くなる。その代わり、ページ閲覧中に一気に読むことになるので固まる。
また、canvasをメモ化するとパフォーマンスが30点ほど上がる。
レスポンシブはページを構成するコンポーネントはgsap.matchmediaで、シーンを構成するコンポーネントの方は直下の{sizes} = useThree() でzustandに登録する。useMediaQueryとかは信用ならん