レシピサービスのフロントエンドを Next.js と GraphQL のシステムに置き換えている話 - クックパッド開発者ブログ
技術部の外村（@hokaccha）です。今回はクックパッドのウェブサイトのフロントエンドを Next.js などを使って作り直している話を書きます。 この記事で紹介する新システムは、スマートフォン向けのレシピページで確認することができます。もし興味があるかたはレシピページをスマートフォンのユーザーエージェントで開いて DevTools などで確認してみてください。 Next.js と GraphQL で動いているのがわかると思います。 ご存じの方も多いかもしれませんが、クックパッドのウェブサイトはモノリシックな Rails で作られていて、10年以上 Rails で開発を続けてきました。10 年以上同じシステムで開発を重ねれば当然レガシーな部分が大量に生まれてきますが、特にフロントエンドはその影響が顕著でした。 どこから使われているかわからない CSS が大量にある、JS のコードは昔なが
いまNext.jsで新規サービスを立ち上げるときの観点（Router・CSS・認証・監視など/2023年末）
免責事項 社内向けに展開するように雑にまとめました Next.jsの知見が深くない人がリードしてPoCを立ち上げなきゃいけなくなったが、社内的にはNext.jsを推奨しているみたいな場面を想定しています なので自信ないところも多いですが割と断言するように心がけて書いています PoCの立ち上げ想定なので、jest/Storybookなど内部品質面についてあまり深く書くことを避けています ほぼ自分の知識だけで書いており私見も多いですし、そもそも自分自身がトップクラスの知識や視座を有しているわけでもないので、まずは以下の話を理解はした上で、踏襲するかどうかは別途他記事やGitHub、公式ドキュメントなどを漁って判断することを推奨 App RouterかPages Routerか 2023年末現在まだApp Routerは技術記事が足りてきている印象ではないため、社内でノウハウを積極的に貯めていく
GraphQL スターターパック | Prisma + NestJS + Next.JS製 個人ブログサイトをCloud Runで運用しよう
GraphQL スターターパック | Prisma + NestJS + Next.JS製 個人ブログサイトをCloud Runで運用しよう 「GraphQLの仕様はなんとなく知っているけど、それを使ってどうアプリを作るのかいまいちイメージがわかない」 この本はそんなスキマを埋めるべく書きました。 近年ではReactをはじめフロントエンドの選択肢が豊富になっており、フロントエンドとバックエンド間のやりとりにはより汎用的かつ効率的な方法が求められます。 GraphQLはその選択肢のひとつです。本書では NestJS で GraphQLバックエンドを実装し、それをNext.jsから利用して、個人ブログサイトを構築してみます。 GraphQL開発の流れを体験し、ご自身のアプリ開発に役立ててください。 v1.10 refactor github deploy
本書の目標は、本読者がNestJSをすぐに実務で利用できる(具体的に言えばNestJSで簡単なプロダクトを開発できる)ように、最短ルートに読者を導く一冊になることです。本書は、NestJSの網羅的なドキュメントではありません。取り扱う内容は頻出する機能に絞って、「実務でNestJSを扱うなら、最低限ここだけは理解しておこう」「これさえ押さえておけば実務でも安心できる」という観点で執筆しています。 本書はNestJSを中心に取り扱いますが、実務上、必要になる知識としてJavaScriptやTypeScriptの仕様やフロントエンドフレームワークのReactやVueについても扱います。
NestJS の基礎概念の図解と要約
はじめに 仕事で使用することになった NestJS について、公式の NestJS Fundamentals Course やドキュメントなどで勉強を進めているのですが、新しい概念が次々と現れるため消化しきれなくなってきました。そこで、まず全体の俯瞰図をしっかりと頭に入れるために、公式ドキュメントの Overview に出てくる範囲の概念を図解して整理し、また各々の役割やプロジェクト内のどこにどのように設定していくかについてまとめることにしました (逆に、大枠とは関係ない部分については大胆に省きました)。 対象読者としては、簡単な CRUD アプリケーションなどを NestJS によって作成したことがあり、基礎的な概念や構成要素について何となくは把握したものの、どうもスッキリとは理解できていない気がする、というような方を想定しています。 この記事が自分のような NestJS 入門者のお役に
jestでDBありのテストを高速化する
課題link お手伝いしているシステムでNestJSを採用しているバックエンドのテストが遅いという課題があったので対処した。 前提link フレームワークDBテストランナーその他 テストの総数は700弱。 最終結果link 最終的には2段階の改修を経てローカルのテストが3倍速程度高速化した。 # before Test Suites: 145 passed, 145 total Tests: 2 skipped, 681 passed, 683 total Snapshots: 0 total Time: 925.063 s Ran all test suites. Done in 926.48s. # ts-jestを@swc/jestに置き換えた Test Suites: 145 passed, 145 total Tests: 2 skipped, 681 passed, 683 t
NestJSをゼロから学ぶ - TypeORMの活用などをREST APIの実装から身に付けよう【Node.jsフレームワークの基本】｜ハイクラス転職・求人情報サイト AMBI（アンビ）
このようにさまざまなデコレータが用意されていますが、今回はサンプルで利用するデコレータに絞って説明します。他のデコレータについては、NestJSの公式ドキュメントなどを参照してください。 依存性注入（DI） 依存性注入（DI、Dependency Injection）とは、クラスの依存関係を解決する仕組みです。NestJSでは、依存性注入を使ってクラスの依存関係を解決します。 クラスの依存関係とは、クラスが他のクラスに依存している関係のことです。例えば、次のようなクラスAがあったとします。このクラスは他のクラスに依存していません。@Injectable()デコレータを使って、サービスを定義します。 @Injectable() class A { constructor() {} } そして、次のようなクラスBがあったとします。このクラスは、@Inject()デコレータを使って依存性を注入し
技術で医療課題の解決を図るファストドクター。コロナ禍での負荷増大をスタートアップならではのスピード感で解決 - はてなニュース
新型コロナウイルスの感染拡大により、急激に需要が高まったMedTech分野。注目度が高まる中、医療機関と提携し、夜間往診と24時間対応可能なオンライン診療のプラットフォームを提供しているのがファストドクター株式会社です。代表かつ医師である菊池 亮さんと、共同代表を務める水野敬志さんがForbes JAPANの「日本の起業家ランキング2023」で1位を獲得したことでも話題を集めています。 患者数が増大した2022年7月の新型コロナ第7波では、リアルタイムで業務負荷が高まっているシステムの問題提起から開発、リリースまでを1カ月以内に完了させるなど、スタートアップならではのスピード感で開発に取り組んできました。 また2022年12月にはRuby on Rails中心の開発から、Vue.jsとNestJSを組み合わた新しい技術スタックを採用。加えてテック部門の組織再編も行いフロントエンドとバックエ
Next.js + NestJS + GraphQLで変化に追従するフロントエンドへ 〜 ショッピングクーポンの事例紹介
今回は、fragmentを活用するためにパターンCを採用しており、厳密には、以下のように方針を定めています。 SSR時のクエリ発行: ページコンポーネント単位 CSR時のクエリ発行: CSRが必要なコンポーネント単位 この際、取得したqueryの結果をどのようにfragmentへ変換するかというのがポイントです。 そこで、graphql-anywhereの filter メソッドを用いることで、クエリ結果をfragmentへ変換します。 以下は、簡略化されたクーポンページの実装例です。 type DetailPageProps = { // GraphQLクエリの結果 data: Query } const DetailPage: FunctionComponent<DetailPageProps> = ({ data }) => { // couponはGraphQLのCouponスキー
なぜ Server Actions を使うのか
Next.js 14 の Server Actions の stable リリースに発表は大きな反響を呼びました。 特に <button> の formAction 属性内で直接 SQL クエリを実行するコードは多くの人に衝撃を与えていました。"use server;" の部分を PHP やバイナリに置き換えると行った多くのミームも生まれました。 function Bookmark({ slug }) { return ( <button formAction={async () => { "use server"; await sql`INSERT INTO Bookmarks (slug) VALUES (${slug})`; }} > <BookmarkIcon> </button> ) } X 上での反応を見ると、このクライントから直接 SQL クエリを実行するコードは見た目の印象
メルカリ Shops での NestJS を使った GraphQL Server の実装 | メルカリエンジニアリング
ソウゾウの Software Engineer をやっています、@mookjp です。 8/10 の記事「メルカリShopsの技術スタックと、その選定理由」では、メルカリ Shops のアーキテクチャについて、その全体像を紹介しました。 この記事では、そのうちの BFF（Backend for Frontend） レイヤとして用意した GraphQL サーバについて、NestJS を使った実装例を交えて紹介します。 GraphQL とは GraphQL サーバ周辺の構成 NestJS とは GraphQL Module NestJS で Code First なスキーマ定義をする Object types の定義 Query と Mutation の定義 GraphQL スキーマの生成 スキーマの Breaking Change （破壊的変更）を防ぐ DataLoader を使って Bat
モバイルとの相性最強と言われるgRPCをFlutter x NestJSで実装し、Stream通信や認証、複数言語実装に使えるか試す
まとめ 相性バツグンといわれる、モバイル x gRPCは思ったよりずっと簡単に実装可能 複数言語間でもProtocol Buffersの恩恵により型変換を意識することなくスムーズに開発が進められる。 メソッド、引数の型、引数の返り値の型が自動生成されるのでとても良い RESTful APIにおけるheaderを、表現力の高いMetaDataとして利用し、認証認可等にも使えそう Streamをうまく使いこなせば、ユーザー体験をめっちゃ高くできそう。チャットやゲームなどの双方向通信が比較的楽に実装できるかも どんな人向きでない記事？ NestJSの詳しい実装を知りたい方 Bidirectional streaming, Client streamの詳細実装を知りたい方 モバイル向け通信技術の本格的な選択肢、gRPCを実際に試してみたい 現在、私の働いているMinediaで開発しているサービス群
NestJSでスケーラブルなBFFを構築。メルカリShopsエンジニアがGraphQL活用のリアルを語る【技術選定の裏側：GraphQL編 vol.2】 | IT/Webエンジニアの転職・求人サイトFindy – GitHubからスキル偏差値を算出
ハイクラスエンジニア向け転職・求人サイト。自社開発のWeb企業の求人多数！GitHub登録をすると、IT/Web企業とマッチングします。ユーザーサクセス (キャリア)面談も実施。
はじめに はじめまして、ユーフォリア開発部エンジニアの山本未知彦です！ このたび、ユーフォリアではJRFU(日本ラグビーフットボール協会)協力のもと、ラグビー選手の育成・強化のためのフィジカルデータベースシステムSCOTのリリースを行いました。（詳しくはこちらのプレスリリースをご覧下さい） 本記事では、SCOTのWebアプリケーション部分のアーキテクチャ紹介について、その技術選定理由と実際に開発してみて感じた良い点・気になった点をご紹介したいと思います。 SCOTのアーキテクチャ選定 まず技術選定の話をするに際して前提となるユーフォリア開発部の体制を説明します。当時、開発部にはエンジニアが２名しか在籍しておらず、SCOT開発に際しては業務委託の方々に協力いただいての開発となりました。そのため、技術選定においてはコードのレビューのしやすさと、仮にプロジェクト途中で人員の入れ替えが発生した場合
経緯 ここ6,7年くらいはバックエンドに関してはRails + EC2/ECSあたりのAWS環境を中心に過ごしてきたが、昨今はフロントエンドでReact/Vue + TypeScriptを書く機会も増えている。なのでこの際NestJS等でバックエンドを書けるようになれば言語のコンテキストスイッチの切り替えが容易になりそうと思った(ちなみにモバイルアプリはFlutterで書くのでDartだが、ではDartでバックエンドを書くかと言われると一人でそんな勇気はないわ...となるのでひとまず置いておく) 最近はinputとoutputを型注釈によって守れたりすることの主に開発体験方面への恩恵が個人的に大きくて、Rails以外で安住の地を見つけたいとは予々思っていた。なので先に挙げたNestJSに全ベットするわけではないにしろ何かしらフレームワークは試していきたい。 AppEngineは大昔に少し触
LeonardoKen Orihara2020-07-01UXに興味あるLINEのフロントエンジニア。とにかく楽しい体験をどうやって作っていくかを常に考えたい。 LINE株式会社フロントエンド開発センター(通称: UIT)の折原です。 先日、6月17日に開催した UIT meetup vol.9 で、本編の前にウォームアップとして、フロントエンドに関するクイズ企画を開催しました。そこで使うことを目的として、UIT App という名前で LIFF のアプリを作成しました。 UIT App は LIFF で動作するクイズアプリです。現状クイズだけですが、今後はいろんな取り組みをこのアプリ上で動作させることができるようになっていく予定です。 この UIT App を実装するにあたって、フロントエンドでは StencilJS を、サーバーサイドでは NestJS を採用しました。これらを使ってみて
Next.js に Service層 を導入する
本稿は、Next.js で「getServerSideProps や API Routes」を利用するアプリケーション向け内容になります。重厚な作りになるので、要件に適合する・しないはあると思いますので、あしからず。 Next.js は薄いフレームワーク Next.js は SPA 配信の最適化にフォーカスしており、Backend の機能面が十分とは言えません。pages の Page コンポーネントや API Routes は、controller としての機能を提供するのみです。ドキュメントを見てもわかるとおり、一連処理はあらかじめ middleware やラッパー関数を用意するのが常套手段かと思います。 NestJS にあるような Service 層が欲しい Node.js Backend フレームワークとして、NestJS は有力な候補かと思います。レイヤーやモジュール・DI の構
NestJS を使って最速リリースを目指している話 - ROBOT PAYMENT TECH-BLOG
こんにちは。ROBOT PAYMENTでエンジニアをやっております 牧野です。 今回は新規プロダクトの立ち上げに伴い開発言語からインフラ設計まで0→1でサービスリリースするのに必要な技術選定を行いました。 その際の選定理由や、実際に開発を進めていて得た所感などを書いてみたいと思います。 私は主にバックエンド（フロントエンド以外）を中心に技術選定を行っためそちらを中心に書かせていただきます。 チーム規模 選定技術 TypeScript NestJS GraphQL PostgreSQL AWS App Runner まとめ チーム規模 バックエンドエンジニア2人 フロントエンドエンジニア1人 PM 1人 デザイナー1人 上記を１チームとして最短距離でリリースすべくスクラム開発を行なっています。 既存の請求管理ロボ開発においては、厳密ではないですがコンテナ運用や監視ツール、CICDなど機能開発
この記事はUbie Engineering Advent Calendar 2023の一日目です。よろしくお願いします。 背景 ユビーのシステムは言語が多様化してきたことにより、認知負荷の増加や運用負荷の増加、開発支援に仕組みづくりかけるコストの増加などの問題が発生していました。この課題を解決するためにNode.jsとGoに言語を絞っていくという意思決定をしたのが昨年です。これについては以下の記事で詳しく解説しています。 ちょうど去年のアドベントカレンダーの記事なのでこれから一年経ちました。ここでは以下のように述べられています。 Server-Side Kotlin などで書かれている既存サービスを、この技術選定の文脈でリプレイスすることは今のところ考えていません。 ただし、多くの既存サービスはドメインたくさん抱えすぎ問題があったり、色々とレガシーだったりして、徐々に別サービスに切り出して
TypeScript CRUD Rest API, using Nest.js, TypeORM, Postgres, Docker and Docker Compose
TypeScript CRUD Rest API, using Nest.js, TypeORM, Postgres, Docker and Docker Compose Let's create a CRUD Rest API in Typescript, using: NestJS (NodeJS framework) TypeORM (ORM: Object Relational Mapper) Postgres (relational database) Docker (for containerization) Docker Compose If you prefer a video version: All the code is available in the GitHub repository (link in the video description): https:
あらためてデコレーターを学ぶぞ
はじめに NestJS入門してみようとしたら、アットマークから始まる記述を知らなかったので調べたことを簡単にまとめた記事です（デコレーターのことよくわかってなかった） デコレーターの仕様は、過去にいろいろと変わって現在に至っているようでしたが、ようやく最近 ECMAScript では Stage 3 になり、TypeScript では今も実験的なサポート experimentalDecorators を使えますが、バージョン 4.8 で TC39 の Decorators を実装することが検討されているようです！ この記事は、TypeScriptのドキュメントのサンプルコードを動かしてみたり、あらためてNestJSのコード読んだりしてみた感想を書いてみました。 最近のデコレーターを追えてない、NestJSを動かしてみようとしたらデコレーターってなんぞや、となったかたの参考になれば幸いです。
この記事は､今年イチ！お勧めしたいテクニック by ゆめみ feat.やめ太郎 Advent Calendar 2019 23日目の記事です｡ 導入 皆さんこんにちは。らいパン粉という者です。twitter→https://twitter.com/elipmoc101 さて、皆さんはバックエンドのプログラミング言語に何を選ぶでしょうか。 PHP？Ruby？JavaScript(Node.js)？ それともElixir、Scala、Go、Rust、Haskell等でしょうか。Coolですね。 最近、フロントエンドではTypeScriptが有名です。 この際、バックエンドもフロントエンドもTypeScriptでサクッと開発してみたいと思いません？僕は思いませんけど。(Ebio Syntax) そんなわけで、TypeScriptでサクッとバックエンド開発ができるNestJSを紹介していきます。
マイクロサービスにおけるログ出力に役立つNode.jsのAsyncLocalStorage - EmotionTechテックブログ
はじめに こんにちは、テックリードのかどたみです。 弊社では以前の記事でも紹介したとおりマイクロサービス開発にNestJSを利用しています。今回はNestJSでマイクロサービス開発をする際のログの出力についてご紹介します。 この記事はエモーションテック Advent Calendar 2022の6日目の記事です。 背景 マイクロサービスのメリットの一つとして、サービスごとに開発するドメインの範囲を狭め、機能追加や改修の影響範囲を最小限にできることが挙げられます。 しかし、いざ運用しようとするとユーザーからのアクセス一つにおいて複数のサービスで処理が走ることから、どのサービスで障害になっているのか、どのユーザーがどこまでアクセスできているのかなどバグ発生時の原因や影響範囲の特定に時間がかかることもあります。 そこで、マイクロサービス間でログに出力する内容を揃えることで分析をしやすくなるように
マイクロサービス構成における NestJS での gRPC クライアントの運用戦略 - ドワンゴ教育サービス開発者ブログ
はじめに はじめまして、バックエンドセクションの yukimochi です。 現在、N予備校ではバックエンドのアプリケーションの移行計画が進んでいます。 その一環で、一部のマイクロサービス間通信についても REST API + OpenAPI の現状から gRPC へと移行することになりました。 私の参画しているプロジェクトである教材入稿ツールでは TypeScript + NestJS を採用しており、結合している他マイクロサービスとの通信でgRPCを利用する際の gRPC クライアントと、そのスキーマ定義を担う proto の運用戦略、実現方法について記します。 proto ファイルと型定義パッケージの取り回しについて考える スキーマ定義である proto をどこに保存するか スキーマ定義である proto をどこに保存しておくかは、 proto のバージョン管理の観点で重要です。今回
この記事は NestJS アドベントカレンダー一日目の記事です。 記念すべき一記事目ということで、今回は NestJS の基本的な構造について、概念を理解し、実際に触ってみるまでを紹介したいと思います。 NestJS の概念的な部分においての概要は下記スライドをご参照ください。前提知識として一読いただいた上で、手を動かしていただけると はじめに 実際の開発に入る前に、いくつか共有事項があります。 検証環境について macOS 上で、執筆時点での Node.js の LTS である v12.13.1 を前提とします。 この記事で学ぶことについて NestJS は非常に多くの機能を有しているので、今回は核となる一部の機能と実装例のみを紹介します。 具体的には、 CLI で初期化時に生まれる Service / Module / Controller だけで簡単な GET リクエストを返却する
ExpressoTS 入門
はじめに 今回の記事では、今年にリリースされたTypeScriptフレームワークであるExpressoTSの概要と、それを使った簡単なWebサーバを構築する手順を解説する。 対象とする読者 タイトルを読んで気になったひと 実務でTypeScriptを触っているひと TypeScriptでWebサーバを構築したいひと ExpressoTSとは ExpressoTSとは、NestJSと同様にTypeScriptで開発されたバックエンドフレームワークである。公式サイトのIntroductionには、以下のように説明されている。 ExpressoTS is a TypeScript lightweight framework for building scalable, readable and maintainable server-side applications. The framewor
はじめに 仕事で洋服の物流システムを作ることになり、プロジェクトチームでDDDで設計しようということになりました。 諸々の事情でNestJSというTypeScriptのフレームワークを使うことになりました。 そんな中で出てきた悩みを紹介します。ちなみにこのシステムは開発中です。 作ろうとしている物 ECサービスの物流システム。 機能としては大きく3つです。 在庫管理: 倉庫の在庫を管理する 入荷: 新しい在庫を入荷して、在庫として登録する 出荷: ユーザーから出荷依頼を受けて出荷する これらの機能を提供するWebアプリケーションを作ることになりました。 更新系についてはDDD 取得系に関してはCQRSの考えで、queryModelを使う（ドメインモデルは使わない） 技術選定 サーバサイド: NestJS ORM: TypeORM DB: MySQL フロントエンド: React, Flut
NestJS 公式ドキュメントver7日本語訳
フルスタックサーバーサイドフレームワークNestのドキュメントの日本語訳です。DeepL翻訳を下敷きとして目標（～securityパート）達成したため完結です。githubにありますので、フォーク等お好きにどうぞ。 https://github.com/kisihara-c/nest-officialdoc-jp
@Injectable() export class Test1Service { getName() { return { name: "john" }; } } @Controller("test1") export class Test1Controller { constructor(private readonly test1Service: Test1Service) {} @Get() getName() { return this.test1Service.getName(); } } Nest CLI でプロジェクトを作成したときに生成されるコードはこんな感じになっていると思います。 service での処理を controller で呼び出すことができているくらいにしか思いません。 このサービスは必ずしも、DI しないと使えないわけではなく、通常のクラスなので、インスタ
なぜバックエンドTypeScriptか？技術選定背景と実践例を紹介します - KAKEHASHI Tech Blog
カケハシの医薬品発注管理最適化領域の新規事業の開発を担当している木村です。今回は新しいサービスを構築する上で行った技術選定と実践方法の話をします。 技術選定に関しては、インフラ関連やライブラリなど選定した技術は多岐にわたるのですが、その中でも「なぜバックエンドでTypeScriptを導入したか」を中心にお話します。2つのチームでの技術選定に関わり、どちらもTypeScriptを導入するに至りました。2022/03時点では社内の5つのサービスでバックエンドTypeScriptが採用されていることを観測しています。 実践方法に関しては、技術選定の過程で明らかになったシステム特性に対するアプローチを紹介します。 全社的な技術選定方法 カケハシではビジネスドメインで開発チームを分割し、開発チームが自走化できるように組織がデザインされています。技術選定についても開発チームに裁量があります。 技術選定
Nest.jsは素晴らしい - Qiita
Node.jsとExpressでサーバー側のシステムを開発していたのですが、Nest.jsと言うサーバー側のフルスタックフレームワークがあることを知り、乗り換えることにしました。 メリットとデメリット どんなものにも、メリットとデメリットがあります。自分にとって「メリット>デメリット」となったら採用する価値が出てきます。 私が感じたNest.jsのメリットとデメリットは以下の通りです。 メリット Angular風なので、クライアントにAngularを採用するのであれば、同じような考え方で開発することができる TypeScriptで開発しやすい 予め以下のような構成でシステムを作ることができ、メンテナンス性が向上する(人による実装方法の違いをある程度抑制できる) controller filter guard interceptor interface middleware module p
GitHub - Sairyss/domain-driven-hexagon: Learn Domain-Driven Design, software architecture, design patterns, best practices. Code examples included
Check out my other repositories: Backend best practices - Best practices, tools and guidelines for backend development. System Design Patterns - list of topics and resources related to distributed systems, system design, microservices, scalability and performance, etc. Full Stack starter template - template for full stack applications based on TypeScript, React, Vite, ChakraUI, tRPC, Fastify, Pris
ユビーではNestJSでGraphQLのサーバー実装をおこなっています。今回は実践で得られた知見を元にNestJSでGraphQLのResolverに対してGraphQLのスキーマから生成したTypeScriptの型を適用する方法について解説します。 前提としてNestJSにはスキーマファーストとコードファーストがありますが、今回はスキーマファーストで書いたうえで、スキーマから型を生成するアプローチを紹介します。 NestJS組み込みの型生成を使う NestJSのスキーマファーストのアプローチではNestJSの組み込みの機能でスキーマからTypeScriptの型を生成することができます。 以下のように書くことで、 graphql.ts に型が生成されます。 GraphQLModule.forRoot<ApolloDriverConfig>({ driver: ApolloDriver, t
NestJS の DTO と Validation の基本 - 型定義とデコレータで安全にデータを受け付ける - Qiita
この記事は NestJS Advent Calendar 2019 3 日目の記事です。前日は @euxn23 による Module と DI の話でした。 これまで NestJS のはじめかたと Module と DI の話をしていきました。3 日目となる本日は、もう少し実際の開発に身近な機能である、DTO と Validation について紹介いたします。 tl;dr NestJS にはコアに Request Payload の型定義とバリデーションの機能が備わっている クラスベースの型オブジェクト DTO の定義によって、 Request オブジェクトに触らずに受け付ける型定義ができる DTO にバリデーションを敷くことによって、 Controller のメインロジックより前の段階で不正なアクセスを弾ける リクエストデータの検証について Web API を構築する場合、リクエストのデ
NestJS Way より TS Way を意識したバックエンド設計事例と Tips - Mobile Factory Tech Blog
こんにちは！BC チームでエンジニアをしている id:d-kimuson です。 最近、弊チームで構築した社内向け Web API のバックエンド設計をしたので事例として紹介しようと思います。 フレームワークとして NestJS を採用していますが、NestJS Way よりも TS Way を意識した設計をしており、このエントリの主題でもあるため、TS Backend の設計事例として読んでいただければと思います。 対象システムの概要 社内の他サービス向けの Web API で、他チームのサービスを経由してエンドユーザーに届く中間システム チーム内のサービスからもチーム外のサービスからも叩かれる想定 チーム外からも叩かれるため、なんらかのスキーマを共有したいというモチベーションがある → 2023 年現在で標準的な OpenAPI Specification (以後 OAS と呼びます)
はじめにこんにちは！ フィフス・フロアの開発チームリーダーのnotozekiです。 最近、OpenAPIという技術を知りました。 OpenAPIは、いわゆる「Web API」の仕様を形式的に記述するためのフォーマットです。 OpenAPIに関連するツールもいくつか提供されており、たとえばOpenAPIのフォーマットに従って書かれた仕様から、開発用のAPIのスタブサーバを自動生成するツールなども存在します。 Web開発が多い弊社では、Web APIの仕様管理は長年の課題でした。 特に開発メンバーが増えてくるにしたがって、以下のような課題が浮かび上がってきています: 仕様に関する情報源がないため、「実装が仕様」のような状態になってしまっています。また、新しくプロジェクトに加わる人に、都度仕様を説明する必要があります。手動でのAPIドキュメントの整備も試みましたが、開発に比べて整備が後回しになり
GitHub - nestjs/awesome-nestjs: A curated list of awesome things related to NestJS 😎
ChatServer - Server side of Chat App implemented using NestJS. Domain Driven Design - Library - Example of an application that follows Domain Driven Design. Realworld Example App - Exemplary real world backend API built with NestJS + TypeORM. Mant - New Stack on the Market to beat them all 💍 MANT. REST NestJS Postgres - CrudJS implemented as a REST API, using NestJS and Postgres. Nest Permissions
この記事は NestJS Advent Calendar 2019 9日目の記事です。前日は @euxn23 さんによる「NestJS Service 初期化 非同期」でした。 本日はいよいよデータベースとの接続を行う TypeORM とそのモジュールを紹介いたします。一般的な Web アプリケーションサーバーとしての役割を NestJS に期待している人にとっては、もっとも抑えておきたい内容ではないでしょうか。 今日は TypeScript ベースの O/R Mapper の TypeORM と、NestJS の公式モジュールを利用方法をご紹介いたします。今回の範囲はデータベースの作成、ユーザーテーブルの作成、 CRUD の実装までです。 環境について Node.js v12.x を前提としています。 MySQL と接続するため、Docker のインストールおよび docker-comp
はじめに 昨年12月に投稿させていただいた記事でしたがNestJSのバージョンアップに伴いTypeORM系の処理が動かなくなっていることを発見しましたので記事を更新させていただきました レポジトリはこちら 環境について Windows環境での動作確認はしておりませんのでご了承ください NestJSとは？ Nest (NestJS) は、効率的でスケーラブルなNode.jsサーバサイドアプリケーションを構築するためのフレームワークです。プログレッシブJavaScriptを採用し、TypeScriptを完全にサポートし、OOP（オブジェクト指向プログラミング）、FP（機能的プログラミング）、FRP（機能的反応プログラミング）の要素を兼ね備えています。 環境構築
最近、何度目かになる個人プロダクト開発をしようという思いつきからAPI開発をしてて、その際できるだけ低コストでDX（開発者体験）を追求してみようとやってみたら、結構いい感じにできて個人的にはまぁまぁ満足できました。 数年前から考えるとDX関連の進化はめざましく、ユニットテストやLint、フォーマッターなどがあるのはほぼ当たり前になってきました。ここからさらに数年後に見たときにまた大きく変化してるような気もするので、見比べるためにも備忘録がてら技術選定やツールの使い勝手について記録したいと思います。 技術選定 言語選定 DXってところを重視するとやはり静的型付は欲しい＋多少なりとも使い慣れてる言語が良いなと思い、RustとTypescriptの2択にしました。 Rustは言語思想がめちゃくちゃ面白くて好きなので、今回もRustにしようかなぁとも思ったのですが、主流のORMのDiesleの型エ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
はじめに - NestJSの強化書 βversion
Next.js + NestJS で新サービスを作った話 | EUPHORIA DEV BLOG
NestJS + Prisma + Cloud Run + Cloud SQLを試す
All TypeScript で開発したLINEで動くリアルタイムクイズアプリの裏側
Node.jsで作るモジュラモノリスの設計と技術選定
NestJSのススメ ～Expressを超えてゆけ～ - Qiita
触って覚える NestJS のアーキテクチャの基本 - Qiita
『実践ドメイン駆動設計』に基づいてTypeScriptで設計した話 - Qiita
DI(Dependency Injection)のメリットを理解する
NestJSのGraphQL Resolver関数を型安全にしたい
OpenAPIとTypeScriptで作る！チーム開発に適したWebアプリケーションの作り方
NestJS の TypeORM モジュールを利用したクリーンなデータストアアクセスの実装 - Qiita
【V.9対応】TypeScript +NestJSをプロジェクトで導入したら素晴らしかった件
API開発の最高のDXを求めて - NestJS+Prisma+AWS Copilot
dailynewsonline.jp
polepoletrust.hatenablog.com
qiita.com/WIZnet
uncrate.com
mikan-incomplete.com
ototoy.jp