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

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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+=”ログアウト”
   } else {
   body+=”ログイン”
   }
   body+=”hogehoge...”
   $(“#content”).html()
   

   jQuery
   #set($mark = "")
   #if($Icon == 1)
   #set($mark = 'class="notice">!')
   #elseif($Icon == 2)
   #set($mark = 'class="new">NEW')
   #end
   テンプレートエンジン
   

   View Slide

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 (
   id="header">
   {!isLoading && (
   status={status}
   isLoggedIn={isLoggedIn}
   userName={userName}
   />
   )}
   
   );
   };
   Next.js+TypeScript
   ローカル開発環境
   

   View Slide

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

   View Slide

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

   

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide