Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

ニフティ株式会社

March 08, 2023
Tweet

More Decks by ニフティ株式会社

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide