拡張機能で管理していたSCSSをnode.jsで管理するように変更する

package.jsonのひな型を作成する npm init 色々効かれるが基本的にEnterを押しておけば問題ない。 押し続けているとpackage.jsonが作成されている。 sassをインストール npm i -D sass 上記コマンドでsassをインストールする。 今回は下記バージョンがインストールされた。 "sass": "^1.58.0" Gitでソースコードを管理している場合は、.gitignoreファイルを作成しnode_modules/と記入するのが吉。 Scriptを登録する ちなみに今回は /assets/scss/style.scss ↓ /assets/css/style.css のように変換したい。 先ほど作成したpackage.jsonにScriptを登録する。 "scripts": { "watch:sass": "sass --no-source-map --watch assets/scss/:assets/css/" }, 登録後、Scriptを実行する。 $ npm run watch:sass > media-nove@1.0.0 watch:sass > sass --no-source-map --watch assets/scss/:assets/css/ Compiled assets\scss\style.scss to assets\css\style.css. Sass is watching for changes. Press Ctrl-C to stop. 以降、scssを変更するたびに、コンパイルされる。 たぶん、拡張機能のコンパイルと展開のされ方が違うので、実際にページを見て崩れがないかを確認したほうがいい。 拡張機能について 拡張機能は便利だけど、開発環境の共有ができないので、依存しすぎるのは良くないなあ、と思い直した。

投稿日 · 2023-03-29 · 更新日 · 2024-06-07 · 1 分 · nove-b

NestJSとclass-validatorでPOST時に検証をする

class-validatorをインストールした 前回はclass-validatorをインストールしDTOと接続した。 が、結果は前回の記事に書いた通りだった。 なので、バリデートを効くようにしたい。 main.tsにバリデートを読み込む import { ValidationPipe } from '@nestjs/common'; import { NestFactory } from '@nestjs/core'; import { AppModule } from './app.module'; async function bootstrap() { const app = await NestFactory.create(AppModule); app.useGlobalPipes(new ValidationPipe()); await app.listen(3000); } bootstrap(); つまりバリデートするという指示が漏れていた。 ただこれだとclass-transformerが足りないと怒られる。 class-transformerをインストールする npm i --save class-transformer これで怒られなくなった。 間違った情報をPOSTする $ curl -d '{"firstName":1111, "lastName":"yamada", "isActive":"string"}' -H "Content-Type: application/json" -X POST http://localhost:3000/sample {"statusCode":400,"message":["firstName must be a string"," isActive must be a boolean value"],"error":"Bad Request"} よし、怒られたのでオッケー。

投稿日 · 2023-03-26 · 更新日 · 2024-06-07 · 1 分 · nove-b

NestJSでDTO(データ転送用オブジェクト)を使用しCRUD操作を行ってみる

検証ライブラリーをインストール npm install class-validator --save これは、見出しの通りPOST時に検証してくるライブラリー。 デコレータおよび非デコレータ ベースの検証の使用を許可します。内部的には、 validator.jsを使用して検証を実行します。Class-validator は、ブラウザと node.js プラットフォームの両方で動作します。 ちなみにバージョンは"class-validator": "^0.14.0"←の通り。 データ転送オブジェクトを作成する データ転送オブジェクト (DTO)とは アプリケーションで受信するデータ用に適切なデータ構造を作成、検証しやすくするもの。 DTO を使うことで、リクエスト本文から抽出されるオブジェクトの形状を指定でき、検証の組み込みが容易になるとのこと。 ちなみにDTOは英語名(Data Transfer Object)と日本語読みの略が一致した稀有な例。 DTO をセットアップする src/sample/dtoにcreate-sample.dto.tsを作成する。ファイルの内容は下記の通り。 import { IsBoolean, IsString } from 'class-validator'; export class CreateSampleDTO { @IsString() firstName: string; @IsString() lastName: string; @IsBoolean() isActive: boolean; } 上記でフィールドのデータ型が stringorboolean型であるかを確認している。 それぞれのファイルにDTOを読み込む ファイルのインポートは割愛する。 sample.controller.ts create() { return this.sService.createSample(); } ↓に変更する。 create(@Body() createSampleDTO: CreateSampleDTO): Promise<Sample> { return this.sService.createSample(createSampleDTO); } sample.service.ts public async createSample(): Promise<Sample> { return await this....

投稿日 · 2023-03-22 · 更新日 · 2024-06-07 · 1 分 · nove-b

複雑な文字列パターンをマッチさせる必要がある場合はIF分ではなく正規表現を使うべきだとChat GPTが言ってた

従来 考えてみたと書いたが、そもそも従来の書き方だとどうしても汚く見えてしまうので、これを機に綺麗にしようという次第である。 で、その従来の書き方といえば、 /* 文豪がランダムで抽出される */ const targetArray = ['三島由紀夫','太宰治','夏目漱石','芥川龍之介','宮沢賢治'] const randamIndex = Math.floor( Math.random() * targetArray.length ); const target = targetArray[randamIndex] /* 文豪が芥川か太宰ならture */ const matchCondition = (target) => { return target === '芥川龍之介' || target === '太宰治' } console.log(target, matchCondition(target)) こんな感じ。 条件が少なければ別にいいけど、条件が多い場合はtarget === 'hoge'を沢山繋いでいく必要がある。 これをもっと綺麗にしたい。 正規表現を使いましょう const condition = /\芥川龍之介|太宰治\b/ console.log(target, condition.test(target)) これで、わざわざtarget === 'hoge'でつなぐことなく/\芥川龍之介|太宰治\b/に文豪名を増やしていくだけで済むようになった。 Chat GPTは? 考えたコードが本当に正しいか、シンプルか、美しいかの判定ができないので、流行のChat GPTにも考えてもらった。 三島由紀夫、太宰治、夏目漱石、芥川龍之介、宮沢賢治の中の1つがランダムに抽出されるデータがあり、抽出されたデータが芥川龍之介か太宰治ならtrueを返すコードをJavascriptで書いて こんにちは!下記がそのコードになります: const writers = ['三島由紀夫', '太宰治', '夏目漱石', '芥川龍之介', '宮沢賢治']; const selectedWriter = writers[Math....

投稿日 · 2023-03-19 · 更新日 · 2024-06-07 · 1 分 · nove-b

NestJsとMySQLでCRUD操作を行ってみた

前回の修正と準備 前回testというEntityを作ったけど、わかりにくくなるのでsampleに変更した。 モジュールの作成 npx nest g module sample まず上記コマンドを使用し、モジュールを作る。なぜモジュール化するかを調べると散らかるので、また別の機会に。 公式ドキュメントに 対応するモジュール ディレクトリ内のドメインの近くに作成することをお勧めします。 と記載されているので、sample.entity.tsを作成したサンプルモジュール内に移行する。 必要なファイルを作成する npx nest g controller sample --no-spec npx nest g service sample --no-spec controllerとserviceを作成する。 controllerはルーティングを指定し、serviceは処理の記述を書くファイルという認識。 最後に、DBと疎通操作するためのRepositoryを作成する。なぜか作成するコマンドが用意されていないようなので、自作する。 cd src/sample touch sample.repository.ts 各ファイルを作成する sample.repository.ts リポジトリはEntityManagerと同じですが、その操作は具象エンティティに限定されます。EntityManagerを介してリポジトリにアクセスすることができます。 上記を読んでもなんのことかわからない。 import { Injectable } from '@nestjs/common'; import { Sample } from 'src/sample/sample.entity'; import { Repository } from 'typeorm'; import { InjectRepository } from '@nestjs/typeorm'; @Injectable() export class SampleRepository extends Repository<Sample> { constructor(@InjectRepository(Sample) repository: Repository<Sample>) { super(repository....

投稿日 · 2023-03-15 · 更新日 · 2024-06-07 · 2 分 · nove-b