kei615ykhm’s programming learning blog

プログラミングを0から学んでいる学生の備忘録

【学びの記録】Next.jsにおけるAPIルートのサポートという機能について

こんにちは。

Keiです。

 

今回は【Next.jsにおけるAPIルートのサポートという機能】について、

学んだことを自分の言葉で分解していきます。

 

結論:フロントエンド言語でバックエンド処理ができる

Next.jsはフロントエンド言語であるReactのフレームワークだが、

フロントエンド開発の領域でバックエンド領域の処理を行える。

 

料理に例えて段階的に解説してみる

ステップ①:キッチンの準備(APIルートの作成)

料理を始めるためにはキッチンが必要で、’ pages/apiディレクトリ内に

新しいファイルを作るのは料理をするために具材や道具を準備すること。

このファイルが自分の料理(APIエンドポイント)の基盤になる。

 

ステップ②:レシピに従い料理をする(HTTPメソッドの処理)

何の料理を作るかを決める。GETメソッドは酒場で出てくるお通しのようなもので

素早く簡単に提供可能。POSTメソッドは新しい料理を作ることに似ていて、

より多くの準備が必要だが、新しいものを作り出せる。

*HTTPメソッドについては下記で掘り下げる

 

ステップ③:下処理した具材を鍋に入れる(リクエストデータの取得)

POST・PUTメソッドでデータを受け取るのは料理に必要な具材を鍋に入れて

うまく混ぜ合わせる工程。どの具材(データ)がどれくらい必要かを把握し、

それを使って料理を作り始める。

 

ステップ④:火の加減調整と味付け(エラーハンドリング)

火が強すぎては鍋に入れて煮込み始めた料理がぐずぐずになってしまうし、

塩を入れぎたらしょっぱくなってしまう。

APIでエラーが発生したときの対応を例えるならば、適切な味にするために調味料の

量を調節して料理(APIレスポンス)を完成させる工程を指す。

 

HTTPメソッドを料理に例えてわかりやすく分解する

①GET - レシピを読む

GETメソッドは、サーバーから「カレー」のレシピを引っ張り出してくるようなもの。

レシピを見ることで、人参やじゃがいも、お肉が必要だと分かる。

 

②POST - 新しい料理を作りはじめる

POSTメソッドは、新しい料理を1から作るためにサーバー内にあるレシピを探すこと。

必要な具材を集めて、実際に料理を作り始める。

 

③PUT - 料理の全面的な作り直し

PUTメソッドは、すでに作った「カレー」をすべて捨てて、最初から別の料理を作る

ようなもの。カレーを作る際に使用した具材も含めてすべて捨てられる。

 

④DELETE - 料理を捨てる

DELETEメソッドは、不要になった料理を完全に捨てること(ゴミ袋が空っぽ状態)

 

⑤PATCH - 料理の味付け

PATCHメソッドは、料理の味を微調整するようなもの。例えば、塩味が足りないから

塩を足すというように”全体を作り直すのではなく、部分的に調節する”工程を言う。

 

まとめ

Next.jsはAPIルートサポートを行うとき、

HTTPメソッドのGET・POST・PUTの3つの工程をフロントエンド側の処理で

行うことで、Webサイト全体を高速に動かすことが出来る機能ということ!

 

料理を例えにしたとはいえ、捨てるとか書いてすみませんでした。