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
LT会発表資料
Search
ゆういち
December 05, 2024
Technology
0
23
LT会発表資料
2024年秋のハッカソンに参加した直後のLT会発表内容の資料です
初めてで苦戦しながら扱ったNext.jsの事を中心に語らせていただきました
ゆういち
December 05, 2024
Tweet
Share
Other Decks in Technology
See All in Technology
自律的なスケーリング手法FASTにおけるVPoEとしてのアカウンタビリティ / dev-productivity-con-2025
yoshikiiida
1
3.8k
Should Our Project Join the CNCF? (Japanese Recap)
whywaita
PRO
0
300
fukabori.fm 出張版: 売上高617億円と高稼働率を陰で支えた社内ツール開発のあれこれ話 / 20250704 Yoshimasa Iwase & Tomoo Morikawa
shift_evolve
PRO
2
1.7k
生成AI時代 文字コードを学ぶ意義を見出せるか?
hrsued
1
750
プロダクトエンジニアリング組織への歩み、その現在地 / Our journey to becoming a product engineering organization
hiro_torii
0
140
Fabric + Databricks 2025.6 の最新情報ピックアップ
ryomaru0825
1
160
5min GuardDuty Extended Threat Detection EKS
takakuni
0
180
改めてAWS WAFを振り返る~業務で使うためのポイント~
masakiokuda
1
140
生成AI活用の組織格差を解消する 〜ビジネス職のCursor導入が開発効率に与えた好循環〜 / Closing the Organizational Gap in AI Adoption
upamune
6
4.7k
Lazy application authentication with Tailscale
bluehatbrit
0
130
KubeCon + CloudNativeCon Japan 2025 Recap Opening & Choose Your Own Adventureシリーズまとめ
mmmatsuda
0
240
作曲家がボカロを使うようにPdMはAIを使え
itotaxi
0
400
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Agile that works and the tools we love
rasmusluckow
329
21k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
BBQ
matthewcrist
89
9.7k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
Typedesign – Prime Four
hannesfritz
42
2.7k
The Pragmatic Product Professional
lauravandoore
35
6.7k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Transcript
ハッカソン秋の陣を 終えて ゆういち@42期
本日の構成 ①開発の背景 ②実際に苦労した部分と ③感想
アプリの主要な機能の各画面でデータベースとの連携によって 表示内容のデータが提供されるようになっています 今回の開発ではフロントエンドにNext.js、 バックエンドにFastAPIを利用することにしました (その他の技術は割愛しております) さらにNext.jsをサーバーとしても活用することにして、 ルーティングやSSRでの生成などもチャレンジしてみることになりました 今回はフロントエンドで参加した自分目線でのお話です ①開発の背景
②実際に苦労した部分とその感想 ここから実際に苦労した部分を お話いたします 1. API設計において の データの構造と 種類の定義 2. レイアウトの
大枠の調整 3. サーバーサイドと クライアントサイドでの 挙動の違い
1. API設計においてのデー タの構造と種類の定義 扱うデータの種類が今までより多かったので、 構造の定義と精査に時間がかかりました これに関してはAPI一覧としてエンドポイントと値を しっかりまとめて作成していただいた事と、 途中からFastAPIにてSwagger UIを利用した確認が できたことが非常にありがたかったです
2. レイアウトの大枠の調整 なるべく1画面に収めるレイアウトを目指しました その為のレスポンシブの境界を定義するのも、 その各サイズで表示が乱れないかを確認するのも大変でした 今回はそれなりにまとまったと思うのですが、時間がかかりました レスポンシブデザインの基本は、 横方向だけ境界を定めてそれぞれの対応サイズで コンテンツを横に並べる個数を決めておく というやりかたが鉄則みたいですので、
次回以降チャレンジします
Next.jsの関数やコンポーネントは サーバーサイドとクライアントサイドの 両方で定義できるのですが、 細かいところが違うことがちらほらと あって躓きました 今回はFastAPIへのリクエストを送るのは Next.jsのAPIからということにして 実装していました 3. サーバーサイドと
クライアントサイドでの 挙動の違い
- cookie - cookieにFastAPIが発行したJWTを保存して運用していたので、 next-apiにてcookieを取り出してFastAPIに送るリクエストに セットする必要があるのは共通なのですが、 クライアントサイドで実行される関数からNext-apiに リクエストを送る場合とで、 サーバーサイドで実行される関数からNext-apiにリクエストを送る場合と、 前者はcookieが届くのに後者はcookieが届かないということが
起こっていました サーバーサイドで実行される関数はサーバーにhttp通信を 行うことによって実行されているようなので、 そのリクエストにcookieがセットされていました そのサーバーからfetchを行うのだから、 cookieなどは引き継がれないようです これは手動でセットすることで対応しました
cookie
- 画像ファイルとformData - ここでは2つ問題がありました 1- next-apiの/ エンドポイントではなぜかformDataを 受け取ると解析エラーになる これは結構悩んだのですが、他のエンドポイントで 同じコードで試すとうまくいきました
した
2- formDataが受け取れない代替案として実施した、 bodyに直接画像ファイルを割り当てる方法 問題になったのは、画像ファイルの名前が 抜け落ちてしまっていたことです それによって拡張子がなくなった状態の デフォルトネームが割り当てられていました ファイルに名前と拡張子を割り当てることで 解決したのですが、 1の問題が解決した後はformDataに含めて
画像ファイルを受け取る形に戻しました
同じ関数を違う場所から呼び出そうとした場合に、 呼び出し元と呼び出される側を意識する必要がある 原則として、サーバーサイドのほうが制約が多いようで、 サーバーサイドからクライアントサイドの関数を 呼び出すことはできないようです エラーを回避するだけなら、 呼び出す関数をサーバーサイド用に定義すれば済むのですが、 それらを踏まえた設計は難しいなと感じました 一朝一夕に身につくものではなさそうなのでいろいろ経験を積 みつつ、しっかり考え続けることが大切だと思いました
③感想 大変でしたが、いい学びになりました ルーティングができるからといって全てのページにエン ドポイントを思考停止で割り当てていたのは反省でした CSRも絡めて同じページで実装する方がいいページも 多かったように思いました チームの方からもよい刺激をもらえて、 貴重な開発経験ができました
Thank You!