NIFTY Tech Talk #09 テンプレートエンジン+jQueryからNext.jsに置き換える

Transcript

1. テンプレートエンジン+jQueryから Next.jsに置き換える 会員システム グループ 宮本達矢
2. @niftyトップページ開発/運用担当 React歴： ３年 趣味： 読書 自己紹介 宮本達矢
3. @niftyトップページ 2022/07/05に Next.js でフロントエンドを刷新
4. 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+=”<button>ログアウト</button>” } else { body+=”<button>ログイン</button>” } body+=”<div class=\”hogehoge\”><div>hogehoge...” $(“#content”).html() 
 jQuery #set($mark = "") #if($Icon == 1) #set($mark = '<mark class="notice">!</mark>') #elseif($Icon == 2) #set($mark = '<mark class="new">NEW</mark>') #end テンプレートエンジン
5. 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 ( <div className={styles.headerRightBody} id="header"> {!isLoading && ( <HeaderContent status={status} isLoggedIn={isLoggedIn} userName={userName} /> )} </div> ); }; Next.js+TypeScript ローカル開発環境
6. ざっくりページを分割 - 開発の単位を明確に - Atomic Designにはしない - (1ページだったので) CSSの分割は諦める
7. Reactで１から作成 - jQueryに引きずられない - パフォーマンス悪化 - 動作バグ - 生成済みHTMLをベースに body=”” if isLogin { body+=”<button>ログアウト</button>” } else { body+=”<button>ログイン</button>” } body+=”<div class=\”hogehoge\”><div>hogehoge...” $(“#content”).html() 

8. 今後に向けて - 完全なCSS Module化 - 共通処理のcustom hook化
9. New Probrem ブラウザ対応 エラー処理 - npmパッケージの利用開始 - ブラウザ未対応の記法 - 社内での対応ブラウザ認識 - コンポーネント内のエラー - ページ全体への影響：大 - Error Boundaryの利用
10. まとめ - @niftyトップページは昨年 Next.js に刷新 - 書き換え時に気をつけたこと - 機能ごとにコンポーネントを分割 - デザイン面は刷新後の対応 - jQueryのコードを引きづらないように１からReact化 - 刷新後からより一層気をつけること - 対応ブラウザ - エラー処理