完成と次のステップ
1行のスクリプトから始まりました
第1章では、商品の配列を console.log で並べただけでした。それがいま、出品・検索・購入・ログインまでできる API になっています。
プレーンテキスト
第1章 node でスクリプトが動く
第2章 データがファイルに残る
第3章 サーバーが待ち受ける
第4章 商品の CRUD が揃う
第5章 検索と検証が付く
第6章 データベースへ移り、購入が守られる
第7章 誰のものかが分かる
第8章 React とつながり、本番の形になる各章の「つくる回」で、その章の知識だけを使って積み上げてきました。飛ばした段は 1 つもありません。
全体像が見えたはずです
フルスタックの部品が、これで一通り揃いました。
| 層 | どのコースで |
|---|---|
| 画面 | React 入門・React 実践 |
| API | このコース |
| データ | SQL 入門・このコースの第6章 |
| サーバー | サーバー構築入門・このコースの第8章 |
フリマアプリを例にとれば、画面をクリックしてから商品が保存されるまで、どこで何が起きているかを全部たどれる状態です。これが「フルスタックが分かる」ということです。
このコースで繰り返し出てきた考え方
技術の細部より、こちらのほうが長く使えます。
- 外から来るものを信じない — 入力検証、プレースホルダ、認可
- 返すものは選ぶ — メールアドレス、パスワードハッシュ、エラーの中身
- 層を分けて、約束だけを外に出す — データ層をファイルから DB へ入れ替えられた
- 入り口で確かめ、奥では信じる — 検証と認証をミドルウェアと手前の
ifに集める - 落ちない仕組みではなく、落ちても戻る仕組み — トランザクション、
Restart=always
次に進む先
| 進む先 | 何が身につくか |
|---|---|
| Next.js 入門 | 画面と API を 1 つのアプリで扱う |
| 実務ポートフォリオ | 自分のアプリを設計から公開まで |
どちらへ進むにしても、このコースで作った fleama API は残ります。動くものが手元にあるというのが、次の学習でいちばん効きます。
手を動かす
最後の演習では、作った API の全体像を組み立てます。自分が何を作ったのかを、コードの形で振り返ってください。
要件
totalは受け取った件数、protectedはauthがtrueの件数publicはauthがtrueでない件数methodsは使われているメソッドを重複なく、最初に現れた順で並べる
入出力例
summarize([{"auth":false,"method":"GET","path":"/items"},{"auth":false,"method":"GET","path":"/items/:id"},{"auth":true,"method":"POST","path":"/items"},{"auth":true,"method":"PUT","path":"/items/:id"},{"auth":true,"method":"DELETE","path":"/items/:id"},{"auth":false,"method":"POST","path":"/login"}]) → {"methods":["GET","POST","PUT","DELETE"],"protected":3,"public":3,"total":6}
summarize([{"auth":true,"method":"POST","path":"/items"},{"auth":true,"method":"DELETE","path":"/items/:id"}]) → {"methods":["POST","DELETE"],"protected":2,"public":0,"total":2}
summarize([]) → {"methods":[],"protected":0,"public":0,"total":0}ヒント
編集 ゆめさく編集部