Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
NIFTY Tech Talk #09 テンプレートエンジン+jQueryからNext.jsに...
Search
ニフティ株式会社
PRO
March 08, 2023
Video
Resources
Programming
0
1k
NIFTY Tech Talk #09 テンプレートエンジン+jQueryからNext.jsに置き換える
ニフティ株式会社
PRO
March 08, 2023
Tweet
Share
Video
Resources
落ちないシステムの作り方 (NIFTY Tech Talkとニフクラエンジニアミートアップのコラボレーション企画)
https://nifty.connpass.com/event/279053/
More Decks by ニフティ株式会社
See All by ニフティ株式会社
これが俺の”自分戦略” プロセスを楽しんでいこう! - Developers CAREER Boost 2024
niftycorp
PRO
0
140
継続的な改善のためのmodulesの適切な分割単位 - NIFTY Tech Talk #23
niftycorp
PRO
0
87
Re:ゼロから始めるTerraform生活 ~IaC入門編~ - NIFTY Tech Talk #23
niftycorp
PRO
0
85
Terraformにベストプラクティスを取り入れた - NIFTY Tech Talk #23
niftycorp
PRO
0
110
AWS AppSyncを用いた GraphQL APIの開発について - NIFTY Tech Talk #22
niftycorp
PRO
0
120
「天気予報があなたに届けられるまで」 - NIFTY Tech Talk #22
niftycorp
PRO
0
140
@nifty天気予報:フルリニューアルの挑戦 - NIFTY Tech Talk #22
niftycorp
PRO
0
130
@nifty天気予報のフロントエンドを 実装するまで - NIFTY Tech Talk #22
niftycorp
PRO
0
130
Application Signalsで始めるSLO ユーザー満足度を数値化する第一歩
niftycorp
PRO
2
250
Other Decks in Programming
See All in Programming
useSyncExternalStoreを使いまくる
ssssota
4
790
Djangoの開発環境で工夫したこと - pre-commit / DevContainer
hiroki_yod
1
670
Jakarta EE meets AI
ivargrimstad
0
1k
As an Engineers, let's build the CRM system via LINE Official Account 2.0
clonn
1
650
PaaSとSaaSの境目で信頼性と開発速度を両立する 〜TROCCO®︎のこれまでとこれから〜
gtnao
6
7.3k
Welcome JSConf.jp 2024
yosuke_furukawa
PRO
0
3.1k
[FlutterKaigi2024] Effective Form 〜Flutterによる複雑なフォーム開発の実践〜
chocoyama
1
4k
StarlingMonkeyを触ってみた話 - 2024冬
syumai
2
210
CSC509 Lecture 14
javiergs
PRO
0
130
layerx_20241129.pdf
kyoheig3
2
260
たのしいparse.y
ydah
3
120
42 best practices for Symfony, a decade later
tucksaun
1
140
Featured
See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
2
260
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
1.9k
4 Signs Your Business is Dying
shpigford
181
21k
Designing for humans not robots
tammielis
250
25k
What's in a price? How to price your products and services
michaelherold
243
12k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
420
Automating Front-end Workflow
addyosmani
1366
200k
Writing Fast Ruby
sferik
627
61k
Designing Experiences People Love
moore
138
23k
Producing Creativity
orderedlist
PRO
341
39k
How STYLIGHT went responsive
nonsquared
95
5.2k
Transcript
テンプレートエンジン+jQueryから Next.jsに置き換える 会員システム グループ 宮本達矢
@niftyトップページ開発/運用担当 React歴: 3年 趣味: 読書 自己紹介 宮本達矢
@niftyトップページ 2022/07/05に Next.js でフロントエンドを刷新
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 テンプレートエンジン
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 ローカル開発環境
ざっくりページを分割 - 開発の単位を明確に - Atomic Designにはしない - (1ページだったので) CSSの分割は諦める
Reactで1から作成 - jQueryに引きずられない - パフォーマンス悪化 - 動作バグ - 生成済みHTMLをベースに body=””
if isLogin { body+=”<button>ログアウト</button>” } else { body+=”<button>ログイン</button>” } body+=”<div class=\”hogehoge\”><div>hogehoge...” $(“#content”).html()
今後に向けて - 完全なCSS Module化 - 共通処理のcustom hook化
New Probrem ブラウザ対応 エラー処理 - npmパッケージの利用開始 - ブラウザ未対応の記法 - 社内での対応ブラウザ認識
- コンポーネント内のエラー - ページ全体への影響:大 - Error Boundaryの利用
まとめ - @niftyトップページは昨年 Next.js に刷新 - 書き換え時に気をつけたこと - 機能ごとにコンポーネントを分割 -
デザイン面は刷新後の対応 - jQueryのコードを引きづらないように1からReact化 - 刷新後からより一層気をつけること - 対応ブラウザ - エラー処理