Vite（読み方はヴィート）とは？ 次世代フロントエンドツール 最先端をいく開発環境を構築しましょう と謳うように下記のような特徴を持つ。 瞬時にスタートするサーバ 超高速な HMR 豊富な機能 最適化されたビルド ユニバーサルなプラグイン 完全に型定義がされている API これを読んでもピンとこないと思うので、まずは環境構築をしてみてほしい。 そのスピードに驚くこと、間違いない。 React & TypeScrpt の環境構築 $ npm create vite@latest MyApp -- --template react-ts というコマンドを叩くだけで、 Need to install the following packages: create-vite@4.2.0 Ok to proceed? (y) y √ Package name: ... MyApp Scaffolding project in C:\Project\MyApp... Done. Now run: cd MyApp npm install npm run dev 環境が構築される。 この時点でもうReactの開発環境が構築されている。 Tailwindを導入する reactにおけるcssの取り扱いは少し癖があり悩むところがあるので、何も考えずにtailwindを導入する。 npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p 上記コマンドでTailwindのインストールと設定ファイルを作成する。...

配列から重複したものを削除する const numberArray = [0, 1, 1, 2, 3, 4, 4, 5]; const set = new Set(numberArray); const newNumberArray = [...set]; console.log(newNumberArray) // [0, 1, 2, 3, 4, 5] ただこれだけ。 これだけだと物足りないので説明をすると、 上記のコードは、配列numberArrayから重複を除いた値を取得し、新しい配列newNumberArrayに格納しています。具体的には、配列numberArrayをSetオブジェクトに変換し、Setオブジェクトのユニークな値を持つ新しい配列を作成しています。 スプレッド演算子(…)を使用して、Setオブジェクトを配列に変換していることに注目してください。これにより、新しい配列newNumberArrayが作成され、それにはnumberArrayのユニークな値が含まれます。 最後に、console.logを使用してnewNumberArrayをコンソールに出力しています。 ってChat GPTが説明してくれました。

NestJSを用いAPI作成をしているのだが、Responseを共通化したいと思ったので、実装してみた。 Responseの定石 とは言えそもそもResponseの形をどのようにするのがいいのかわからなかったので調べた結果、omniti-labs/jsendが参考になりそうだった。 これを参考に以下のような型で返すことにした。 export interface Response { status: 'success' | 'error'; data: any; message: string[] | null; } ValidationPipeを使用する場合、エラーレスポンスの形式はBadRequestExceptionがデフォルト たぶんドキュメントにある通り（Documentation | NestJS - A progressive Node.js framework）なので、ほとんどの場合ValidationPipeを使用することになる。 そうするとエラーレスポンスの形式はBadRequestExceptionがデフォルトになるので、以下のように返ってくる。 { "statusCode": 400, "message": "Bad Request Exception", "error": "Bad Request" } これは意図した形ではないのでカスタマイズする必要がある。 http-exception.filter.tsを作成する カスタマイズするにはそれ用のException filtersを用意する必要がある。 Exception filtersとは、 Nestには例外処理レイヤーが組み込まれており、アプリケーション全体で処理されない例外をすべて処理する責任を負っています。アプリケーションのコードで処理できない例外は、このレイヤーでキャッチされ、適切なユーザーフレンドリーな応答が自動的に送信されます。 というものらしい。 とにかく例外フィルターは、NestJSアプリケーションが例外をキャッチした場合に呼び出されるらしい。 実装は簡単 まずはhttp-exception.filter.tsを作成する。 import { ExceptionFilter, Catch, ArgumentsHost, HttpException, } from '@nestjs/common'; import { Response } from 'express'; @Catch(HttpException) export class HttpExceptionFilter implements ExceptionFilter { catch(exception: HttpException, host: ArgumentsHost) { const ctx = host....

ER図の種類 そもそも知らなかったがER図には複数の書き方があるらしく、有名なのは「IE記法」と「IDEF1X記法」というものらしい。ふたつの記法は似ているがカーディナリティの違いがあるとか。 IDEF1X記法はリレーションを「●」などで表現することが特徴でIE方より細かい表現ができるが、その分直観さが失われるらしい。複雑なのは避けたいので、今回はIE記法で進めていく。 そもそもIE記法しかないと思っていた……。 カーディナリティの種類 記号 意味 ○ 0 l 1 鳥の足（3つ股の線） 2以上 主にこんな感じの記号を駆使していく。 実際にやってみる 内田百閒という好きな作家でER図を作っていく。 ちなみにおすすめは、下記３作品。 １対１の関係 これはまあ、シンプルに内田百閒とその詳細を表すときが該当する。 例えば内田百閒という漢字とその読み方を表すと下記のようなER図になる。 内田百閒という作家名は「うちだひゃっけん」という読み方しかないので、１対１の関係になる。 １対多の関係 良く使われる表現だが、曖昧な状況を表している。 「1対多という関係は決まっているが、それ以上は決まっていない」という、データベース設計の初期段階の時に使う。 設計が進むにつれ、「1対0以上の関係」「1対1以上の関係」のように具体化してく必要がある。 例えば内田百閒とその作品はこれに該当する。 内田百閒はたぶん複数の著作を持っているので、１対多の関係になる。 1対0以上の関係 それじゃあ、１対多の関係を具体化していく。 １対多とはいえ、１に紐づくものが０の場合も存在する場合は、1対0以上の関係になる。 過去に遡り、百間がまだ著作を出版していなかった時、下記のようなER図で表現できる。 もしかすると百間は著作を出版することなく人生を終える可能性もあるので、0を許容する必要がある。 そういう場合は1対0以上の関係になる。 1対1以上の関係 とはいえ、百間は最高の作品を複数残した。 そのため、少なくとも1件以上は彼に紐づけることができる。 つまり、1対1以上の関係の関係になり、下記のように表現することができる。 多対多の関係 なんとなくこれがいまいち理解できてない気がする。 そして内田百閒だけだとこれは表現できない気がするので、「作家」と「出版社」というリレーションにする。 作家は0以上の出版社から本を出版することができ、出版社から出版する人が0人以上いる。 うん、そういうこと。 たぶんここら辺を理解できれば問題ないと思われる。 あとは結局数をこなしていけば、必然的に覚えれる。

Objectを返すPipe template側で展開するとこんな感じのやつ。 value | customPipe |json {hoge:'hoge', fugo:'fugo', piyo.'piyo'} 参照方法は簡単 (value | customPipe).hoge // hoge で参照できる、ただこれだけ。