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 ニフティ株式会社
GitHubで育つ コラボレーション文化 : ニフティでのインナーソース挑戦事例 - 2024-12-16 GitHub Universe 2024 Recap in ZOZO
niftycorp
PRO
0
120
Grow on GitHub Collaboration Culture: Case Study of InnerSource Challenge - GitHub Universe 2024 Recap in ZOZO
niftycorp
PRO
0
20
これが俺の”自分戦略” プロセスを楽しんでいこう! - Developers CAREER Boost 2024
niftycorp
PRO
0
200
継続的な改善のためのmodulesの適切な分割単位 - NIFTY Tech Talk #23
niftycorp
PRO
0
110
Re:ゼロから始めるTerraform生活 ~IaC入門編~ - NIFTY Tech Talk #23
niftycorp
PRO
0
110
Terraformにベストプラクティスを取り入れた - NIFTY Tech Talk #23
niftycorp
PRO
0
130
AWS AppSyncを用いた GraphQL APIの開発について - NIFTY Tech Talk #22
niftycorp
PRO
0
140
「天気予報があなたに届けられるまで」 - NIFTY Tech Talk #22
niftycorp
PRO
0
170
@nifty天気予報:フルリニューアルの挑戦 - NIFTY Tech Talk #22
niftycorp
PRO
0
150
Other Decks in Programming
See All in Programming
fs2-io を試してたらバグを見つけて直した話
chencmd
0
240
快速入門可觀測性
blueswen
0
410
[JAWS-UG横浜 #76] イケてるアップデートを宇宙いち早く紹介するよ!
maroon1st
0
510
創造的活動から切り拓く新たなキャリア 好きから始めてみる夜勤オペレーターからSREへの転身
yjszk
1
140
nekko cloudにおけるProxmox VE利用事例
irumaru
3
460
週次リリースを実現するための グローバルアプリ開発
tera_ny
1
110
Spatial Rendering for Apple Vision Pro
warrenm
0
150
フロントエンドのディレクトリ構成どうしてる? Feature-Sliced Design 導入体験談
osakatechlab
8
4.1k
開発者とQAの越境で自動テストが増える開発プロセスを実現する
92thunder
1
200
PHPで学ぶプログラミングの教訓 / Lessons in Programming Learned through PHP
nrslib
4
400
Haze - Real time background blurring
chrisbanes
1
520
rails statsで大解剖 🔍 “B/43流” のRailsの育て方を歴史とともに振り返ります
shoheimitani
2
960
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Embracing the Ebb and Flow
colly
84
4.5k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.2k
YesSQL, Process and Tooling at Scale
rocio
170
14k
A better future with KSS
kneath
238
17k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Side Projects
sachag
452
42k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Agile that works and the tools we love
rasmusluckow
328
21k
How to train your dragon (web standard)
notwaldorf
88
5.7k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
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化 - 刷新後からより一層気をつけること - 対応ブラウザ - エラー処理