フロントエンド合同勉強会

あの日見た UIの名前を俺たちはま だ知らない 〜サイドピーク、はじめ ました〜 株式会社ユーザベース　田端 樹人

このUIの名前、知ってますか？

Notionではサイドピークと呼んでいました

サイドピークの狙い - NewsPicksにおいては記事ごとにページ遷移を挟まずサクサク読める 体験向上

No content

珍しいUIで実現までに奔走したので今日は そのあらましについて話していきます

おおまかな実現の流れ リンククリックをevent.preventDefault()してキャンセル useContextにReactNodeとスクロール位置を保存 router.push shallowでURLクエリ追加

実現まで① Intercepting Routesを利用するか - プロジェクト自体がNext.js12、Pages Routerであるため利用できない - 諸々の関係で今回はバージョンアップ等はせずに Intercepting Routesを利用しない選択 - 以降の話はNext.js12、Pages Routerが前提

実現まで② 記事のコンポーネントでonClickにevent.preventDefault() - 通常のページ遷移をキャンセルしてサイドピーク制御ができるように

実現まで③ useContextにサイドピーク内に表示するReactNodeと、スクロール位置を保存 - スクロール位置の保存と復元はブラウザが行ってくれる場合もあるが、挙動がブラウ ザによっても異なり一定ではないのでアプリ側で完全に制御した方がよかった - 異なる記事をクリックするタイミングでこれらを更新 - サイドピークを閉じる時にスクロール位置を復元

実現まで④ router.pushのshallowオプションを利用 - ブラウザ履歴を追加しつつURLを変更 - ブラウザバックでサイドピークを閉じる挙動を実現

実現まで⑤ CSS Transitionでサイドピーク開閉のアニメーションを実現 - アニメーションの便利ライブラリ - enter 開始時 - enter-active アニメーション中 - enter-done 終了時 という形式で設定できる

実現まで⑥ &.side-peek-enter { transform: translateX(100%); } &.side-peek-enter-active { transition: transform 0.3s; transform: translateX(0); }

実現まで⑦ - 体験向上のため、まずサイドピークを表示して、データが必要な部分にはスケルトン を表示しつつfetch - 1秒でも早く開けるとサクサク感が段違い

実現まで⑧ - SEO対策 - 元々あった記事ページに評価を集約させるため、 canonicalを設定

余談① デザイナー、PdMとの協業 - 細かい体験について突き合わせる - A/Bテストの結果から分析する - fetch完了までのスケルトン - URLコピーした時の挙動 - ctrl + クリックの挙動 - どの要素を出す、出さない、順番　　　　　　　　などなど 気軽に会話できる関係値がとても大切

余談② - ChatGPTすごい - ver3時代はフロントエンド技術についての回答がかなり厳しかったが、 ver4は 比較的正しい情報を提示してくれる - 代替案も提示してくれるので、自分の最初の発想以外での実現方法をすぐに取 り入れられるのが大きい

参考 - https://www.notion.com/ja/releases/2022-07-20 - https://nextjs.org/docs/app/building-your-application/routing/intercepting-rou tes - https://reactcommunity.org/react-transition-group/css-transition - https://nextjs.org/docs/pages/building-your-application/routing/linking-and-na vigating#shallow-routing

ご清聴ありがとうございました！