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
880
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 ニフティ株式会社
2つのスクラムチームの 調和的な協働・連携について - ニフティのスクラムトーク Vol. 3 / NIFTY Tech Talk #19
niftycorp
PRO
1
15
チーム力を高めるスクラム実践法:カンバン公開と課題攻略について - ニフティのスクラムトーク Vol. 2 - NIFTY Tech Talk #18
niftycorp
PRO
1
190
スクラムチームと認知負荷 - ニフティのスクラムトーク Vol2. / NIFTY Tech Talk #18
niftycorp
PRO
1
190
Visual Studio Code Dev Containers ススメ Python編 - NIFTY Tech Talk #17
niftycorp
PRO
1
140
dotfilesを作ろう - NIFTY Tech Talk #17
niftycorp
PRO
1
130
フロントエンドを始める前に どうしていっぱいツールがあるの? - NIFTY Tech Talk #17
niftycorp
PRO
1
240
サービスシステム監視 (シフト例)
niftycorp
PRO
0
94
スクラムマスターの技を磨く! ニフティのスクラムトーク vol. 1 - NIFTY Tech Talk #16
niftycorp
PRO
1
210
AWS基礎 / 2023 ニフティ新人研修
niftycorp
PRO
0
550
Other Decks in Programming
See All in Programming
リハビリmruby
kishima
1
160
最近追加した型の紹介とその振り返り
aki19035vc
0
180
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
140
CSC307 Lecture 10
javiergs
PRO
0
310
Findy - エンジニア向け会社紹介 / Findy Letter for Engineers
findyinc
2
81k
[After Kotlin Fest 2024 LT Night @ Sansan] もっともっとKotlinを好きになる!K2 Compiler Pluginで遊んでみよう!
kitakkun
2
260
CSC307 Lecture 05
javiergs
PRO
0
210
企業向け生成AIアプリの 開発から得られた知見
takaakikakei
0
310
Microservices rules (July 2024) : what good looks like
cer
PRO
0
1.6k
3 Effective Rules for Success with Signals in Angular
manfredsteyer
PRO
0
120
Namespace on read
tagomoris
2
370
CSC307 Lecture 14
javiergs
PRO
0
220
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
277
13k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
35
6.3k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
13
430
Automating Front-end Workflow
addyosmani
1362
200k
Documentation Writing (for coders)
carmenintech
63
4.2k
Writing Fast Ruby
sferik
623
60k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
90
47k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
662
120k
The Invisible Side of Design
smashingmag
294
50k
Designing the Hi-DPI Web
ddemaree
276
34k
Mobile First: as difficult as doing things right
swwweet
219
8.8k
Building Your Own Lightsaber
phodgson
101
5.9k
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化 - 刷新後からより一層気をつけること - 対応ブラウザ - エラー処理