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
BrainPadプログラミングコンテスト記念LT会2025_社内イベント&問題解説
brainpadpr
1
160
登壇ネタの見つけ方 / How to find talk topics
pinkumohikan
3
360
Navigation3でViewModelにデータを渡す方法
mikanichinose
0
220
AIエージェント最前線! Amazon Bedrock、Amazon Q、そしてMCPを使いこなそう
minorun365
PRO
13
5k
Github Copilot エージェントモードで試してみた
ochtum
0
100
Абьюзим random_bytes(). Фёдор Кулаков, разработчик Lamoda Tech
lamodatech
0
330
mrubyと micro-ROSが繋ぐロボットの世界
kishima
2
200
SalesforceArchitectGroupOsaka#20_CNX'25_Report
atomica7sei
0
150
AWS CDK 実践的アプローチ N選 / aws-cdk-practical-approaches
gotok365
6
720
MySQL5.6から8.4へ 戦いの記録
kyoshidaxx
1
200
Agentic Workflowという選択肢を考える
tkikuchi1002
1
490
A2Aのクライアントを自作する
rynsuke
1
170
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
328
39k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
BBQ
matthewcrist
89
9.7k
KATA
mclloyd
29
14k
Into the Great Unknown - MozCon
thekraken
39
1.9k
Designing for Performance
lara
609
69k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
Gamification - CAS2011
davidbonilla
81
5.3k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
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!