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
18
LT会発表資料
2024年秋のハッカソンに参加した直後のLT会発表内容の資料です
初めてで苦戦しながら扱ったNext.jsの事を中心に語らせていただきました
ゆういち
December 05, 2024
Tweet
Share
Other Decks in Technology
See All in Technology
どうすると生き残れないのか/how-not-to-survive
hanhan1978
10
8.5k
困難を「一般解」で解く
fujiwara3
9
2.8k
プロダクト開発者目線での Entra ID 活用
sansantech
PRO
0
200
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
madoxten
35
24k
生成AIがローコードツールになる時代の エンジニアの役割を考える
khwada
0
350
OSSの実装を参考にBedrockエージェントを作る
moritalous
2
330
目標と時間軸 〜ベイビーステップでケイパビリティを高めよう〜
kakehashi
PRO
8
1.1k
マルチアカウント環境における組織ポリシーについて まとめてみる
nrinetcom
PRO
2
110
RaspberryPi CM4(CM5も)面白いぞ!
nonnoise
1
260
Охота на косуль у древних
ashapiro
0
150
リクルートのエンジニア組織を下支えする 新卒の育成の仕組み
recruitengineers
PRO
2
210
OCI IAM Identity Domains Entra IDとの認証連携設定手順 / Identity Domain Federation settings with Entra ID
oracle4engineer
PRO
1
1.3k
Featured
See All Featured
A Tale of Four Properties
chriscoyier
158
23k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
Product Roadmaps are Hard
iamctodd
PRO
51
11k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1.1k
Faster Mobile Websites
deanohume
306
31k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Statistics for Hackers
jakevdp
797
220k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.5k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
270
Automating Front-end Workflow
addyosmani
1369
200k
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!