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
1.2k
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 ニフティ株式会社
会員管理基盤をオンプレからクラウド移行した時に起きた障害たち - asken tech talk vol.13
niftycorp
PRO
0
2.5k
モニタリング統一への道のり - 分散モニタリングツール統合のためのオブザーバビリティプロジェクト
niftycorp
PRO
1
800
2025-07-08 InnerSource Commons Japan Meetup #14 【OST】チームの壁、ぶっ壊そ!壁の乗り越え方、一緒に考えよう!
niftycorp
PRO
0
75
2025-04-25 NIFTY's InnerSource Activites
niftycorp
PRO
0
260
外コミュニティ活動や登壇活動が技術 広報として大事だよ、と改めて周囲に伝 えられた件 - EM Oasis 特別会
niftycorp
PRO
0
180
Dify触ってみた。
niftycorp
PRO
1
260
Amazon Bedrockを使用して、 運用対応を楽にしてみた
niftycorp
PRO
1
270
自社製CMSからの脱却:10件のWebサイト再構築に学ぶ運用重視の技術選定 - NIFTY Tech Day 2025
niftycorp
PRO
0
130
エンジニアの殻を破る:インナーソースと社外活動がもたらした成長 - NIFTY Tech Day 2025
niftycorp
PRO
0
88
Other Decks in Programming
See All in Programming
技術的負債で信頼性が限界だったWordPress運用をShifterで完全復活させた話
rvirus0817
1
2.2k
Google I/O recap web編 大分Web祭り2025
kponda
0
2.9k
AI時代のドメイン駆動設計-DDD実践におけるAI活用のあり方 / ddd-in-ai-era
minodriven
23
9k
実践!App Intents対応
yuukiw00w
1
360
CSC305 Summer Lecture 05
javiergs
PRO
0
110
【第4回】関東Kaggler会「Kaggleは執筆に役立つ」
mipypf
0
870
AIエージェント開発、DevOps and LLMOps
ymd65536
1
350
コーディングは技術者(エンジニア)の嗜みでして / Learning the System Development Mindset from Rock Lady
mackey0225
2
580
Microsoft Orleans, Daprのアクターモデルを使い効率的に開発、デプロイを行うためのSekibanの試行錯誤 / Sekiban: Exploring Efficient Development and Deployment with Microsoft Orleans and Dapr Actor Models
tomohisa
0
210
『リコリス・リコイル』に学ぶ!! 〜キャリア戦略における計画的偶発性理論と変わる勇気の重要性〜
wanko_it
1
600
デザインシステムが必須の時代に
yosuke_furukawa
PRO
2
110
マイコンでもRustのtestがしたい その2/KernelVM Tokyo 18
tnishinaga
2
2.3k
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.5k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
A Tale of Four Properties
chriscoyier
160
23k
Making Projects Easy
brettharned
117
6.3k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
How GitHub (no longer) Works
holman
315
140k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Into the Great Unknown - MozCon
thekraken
40
2k
Art, The Web, and Tiny UX
lynnandtonic
302
21k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Building Adaptive Systems
keathley
43
2.7k
Balancing Empowerment & Direction
lara
2
590
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化 - 刷新後からより一層気をつけること - 対応ブラウザ - エラー処理