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
16
LT会発表資料
2024年秋のハッカソンに参加した直後のLT会発表内容の資料です
初めてで苦戦しながら扱ったNext.jsの事を中心に語らせていただきました
ゆういち
December 05, 2024
Tweet
Share
Other Decks in Technology
See All in Technology
.NET 最新アップデート ~ AI とクラウド時代のアプリモダナイゼーション
chack411
0
200
東京Ruby会議12 Ruby と Rust と私 / Tokyo RubyKaigi 12 Ruby, Rust and me
eagletmt
3
870
Reactフレームワークプロダクトを モバイルアプリにして、もっと便利に。 ユーザに価値を届けよう。/React Framework with Capacitor
rdlabo
0
130
I could be Wrong!! - Learning from Agile Experts
kawaguti
PRO
8
3.4k
「隙間家具OSS」に至る道/Fujiwara Tech Conference 2025
fujiwara3
7
6.4k
データ基盤におけるIaCの重要性とその運用
mtpooh
4
500
Oracle Base Database Service:サービス概要のご紹介
oracle4engineer
PRO
1
16k
コロプラのオンボーディングを採用から語りたい
colopl
5
1.2k
技術に触れたり、顔を出そう
maruto
1
150
エンジニアリングマネージャー視点での、自律的なスケーリングを実現するFASTという選択肢 / RSGT2025
yoshikiiida
4
3.7k
実践! ソフトウェアエンジニアリングの価値の計測 ── Effort、Output、Outcome、Impact
nomuson
0
2.1k
【JAWS-UG大阪 reInvent reCap LT大会 サンバが始まったら強制終了】“1分”で初めてのソロ参戦reInventを数字で振り返りながら反省する
ttelltte
0
140
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
46
7.2k
The Language of Interfaces
destraynor
155
24k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
1.2k
Building Your Own Lightsaber
phodgson
104
6.2k
Unsuck your backbone
ammeep
669
57k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
RailsConf 2023
tenderlove
29
970
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
Practical Orchestrator
shlominoach
186
10k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
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!