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 ニフティ株式会社
2025-04-25 NIFTY's InnerSource Activites
niftycorp
PRO
0
210
外コミュニティ活動や登壇活動が技術 広報として大事だよ、と改めて周囲に伝 えられた件 - EM Oasis 特別会
niftycorp
PRO
0
94
Dify触ってみた。
niftycorp
PRO
1
210
Amazon Bedrockを使用して、 運用対応を楽にしてみた
niftycorp
PRO
1
230
自社製CMSからの脱却:10件のWebサイト再構築に学ぶ運用重視の技術選定 - NIFTY Tech Day 2025
niftycorp
PRO
0
110
エンジニアの殻を破る:インナーソースと社外活動がもたらした成長 - NIFTY Tech Day 2025
niftycorp
PRO
0
73
システム全体像把握の超高速化〜システム関連図を使い倒そう (LT) - NIFTY Tech Day 2025
niftycorp
PRO
0
72
Rust で生成 AI の社内 chatbot をメンテしている話 (LT) - NIFTY Tech Day 2025
niftycorp
PRO
0
78
メタバースは仕事に使える?〜100日間でバーチャルオフィスへの挑戦〜 (LT) - NIFTY Tech Day 2025
niftycorp
PRO
0
68
Other Decks in Programming
See All in Programming
Cline指示通りに動かない? AI小説エージェントで学ぶ指示書の書き方と自動アップデートの仕組み
kamomeashizawa
1
580
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
4
970
関数型まつりレポート for JuliaTokai #22
antimon2
0
160
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
1
560
Beyond Portability: Live Migration for Evolving WebAssembly Workloads
chikuwait
0
390
VS Code Update for GitHub Copilot
74th
1
410
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
330
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
100
技術同人誌をMCP Serverにしてみた
74th
1
380
ASP.NETアプリケーションのモダナイズ インフラ編
tomokusaba
1
420
AIコーディング道場勉強会#2 君(エンジニア)たちはどう生きるか
misakiotb
1
250
Haskell でアルゴリズムを抽象化する / 関数型言語で競技プログラミング
naoya
17
5k
Featured
See All Featured
Building an army of robots
kneath
306
45k
Being A Developer After 40
akosma
90
590k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Producing Creativity
orderedlist
PRO
346
40k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Embracing the Ebb and Flow
colly
86
4.7k
Typedesign – Prime Four
hannesfritz
42
2.7k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
Documentation Writing (for coders)
carmenintech
72
4.9k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
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化 - 刷新後からより一層気をつけること - 対応ブラウザ - エラー処理