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
本が全く読めなかった過去の自分へ
genshun9
0
920
Lambda Web Adapterについて自分なりに理解してみた
smt7174
6
160
KubeCon + CloudNativeCon Japan 2025 Recap by CA
ponkio_o
PRO
0
290
生成AI開発案件におけるClineの業務活用事例とTips
shinya337
0
240
AI専用のリンターを作る #yumemi_patch
bengo4com
5
4.1k
AWS認定を取る中で感じたこと
siromi
1
180
生成AI時代 文字コードを学ぶ意義を見出せるか?
hrsued
1
810
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
20
6.8k
Core Audio tapを使ったリアルタイム音声処理のお話
yuta0306
0
180
OPENLOGI Company Profile
hr01
0
67k
AIの全社活用を推進するための安全なレールを敷いた話
shoheimitani
2
450
fukabori.fm 出張版: 売上高617億円と高稼働率を陰で支えた社内ツール開発のあれこれ話 / 20250704 Yoshimasa Iwase & Tomoo Morikawa
shift_evolve
PRO
2
6.8k
Featured
See All Featured
Practical Orchestrator
shlominoach
188
11k
Scaling GitHub
holman
459
140k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
A Tale of Four Properties
chriscoyier
160
23k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
810
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Documentation Writing (for coders)
carmenintech
72
4.9k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
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!