Tweet
Tweet

Slide 1

Slide 1 text

テンプレートエンジン+jQueryから Next.jsに置き換える 会員システム グループ 宮本達矢

Slide 2

Slide 2 text

@niftyトップページ開発/運用担当 React歴： ３年 趣味： 読書 自己紹介 宮本達矢

Slide 3

Slide 3 text

@niftyトップページ 2022/07/05に Next.js でフロントエンドを刷新

Slide 4

Slide 4 text

div,p,span,a,input,select,textarea,form,ul,ol,li{font-size:100 %;} th{ text-align:left; vertical-align:top;} img , a{border:0;} h1,h2,h3,h4,h5,h6{margin:0;padding:0;font-size:1em;} strong,em{font-style:normal;} ul,ol{list-style:none;} hr{display:none;} address{font-style:normal;} input{vertical-align:middle;} caption{text-align:left;} th{font-weight:normal;} ドキュメント不足 ローカル開発環境無し Before CSS: 7000行~ body=”” if isLogin { body+=”ログアウト” } else { body+=”ログイン” } body+=”
hogehoge...” $(“#content”).html() 
 jQuery #set($mark = "") #if($Icon == 1) #set($mark = '!') #elseif($Icon == 2) #set($mark = 'NEW') #end テンプレートエンジン

Slide 5

Slide 5 text

test('セッションが存在するとき、ログイン済み状態になる ', () => { const sessionDataMock = [mockedSessionItem({ isPleasy: false }), false]; mockedSession.mockReturnValue(sessionDataMock); headerHook.rerender({}); expect(headerHook.result.current.isLoggedIn).toBe(true); }); ユニットテスト(Jest) .body { position: relative; text-align: left; margin: 0 0 15px; } .body > .inner { padding: 10px 10px 0; } (一部)CSS Modules After TypeDocドキュメント const Header = (props: HeaderProps): JSX.Element => { const { status } = props; const { isLoggedIn, isLoading, userName } = useHeader(); return (
{!isLoading && ( )}
); }; Next.js+TypeScript ローカル開発環境

Slide 6

Slide 6 text

ざっくりページを分割 - 開発の単位を明確に - Atomic Designにはしない - (1ページだったので) CSSの分割は諦める

Slide 7

Slide 7 text

Reactで１から作成 - jQueryに引きずられない - パフォーマンス悪化 - 動作バグ - 生成済みHTMLをベースに body=”” if isLogin { body+=”ログアウト” } else { body+=”ログイン” } body+=”
hogehoge...” $(“#content”).html() 


Slide 8

Slide 8 text

今後に向けて - 完全なCSS Module化 - 共通処理のcustom hook化

Slide 9

Slide 9 text

New Probrem ブラウザ対応 エラー処理 - npmパッケージの利用開始 - ブラウザ未対応の記法 - 社内での対応ブラウザ認識 - コンポーネント内のエラー - ページ全体への影響：大 - Error Boundaryの利用

Slide 10

Slide 10 text

まとめ - @niftyトップページは昨年 Next.js に刷新 - 書き換え時に気をつけたこと - 機能ごとにコンポーネントを分割 - デザイン面は刷新後の対応 - jQueryのコードを引きづらないように１からReact化 - 刷新後からより一層気をつけること - 対応ブラウザ - エラー処理