Posts

環境変数化とDB接続のモジュール化 綺麗にって漠然と書いたが、 環境変数化 DB接続のモジュール作成 を行っていく。 DB接続のモジュール作成 まずは外部モジュール化する。 nest g mo database で、データ接続用のモジュールを作成する。 import { Module } from '@nestjs/common'; import { TypeOrmModule } from '@nestjs/typeorm'; @Module({ imports: [ TypeOrmModule.forRootAsync({ useFactory: () => ({ type: 'mysql', host: 'localhost', port: 3306, username: 'username', password: 'password', database: 'database-name', entities: [], synchronize: true, }), }), ], }) export class DatabaseModule { } 次に、app.module.tsの方を編集する。 @Module({ imports: [ DatabaseModule, ], 設定をべたでimportしていたので、それを外部モジュールに変換する。 これで外部化は完了。 環境変数化 次に環境変数化していく。 npm install @nestjs/config で、環境変数から読み込むためのパッケージをインストールする。...

プルリク時の記述を共通化する プルリク時に各々違うフォーマットで書かれるとレビューする人が大変なので、テンプレートを使用し共通化を図ることにした。 基本的にリポジトリ用のプルリクエストテンプレートの作成を参考にすれば間違いないが、ここでは最もシンプルな方法を共有する。 共通用テンプレートの作成 cd project-root まずはプロジェクトのルートに移動する。 mkdir .github 次に.githubフォルダを作成する。 touch PULL_REQUEST_TEMPLATE.md でPULL_REQUEST_TEMPLATE.mdという空のファイルを作成する。 そこでにテンプレート内容を書けばok。 どんなテンプレにすればいいか 正直プルリクの運用は迷うことばかりなので、プルリクのレビューを効率的に進めるためにルールを作ってみた話を参考にした。 テンプレート内容 上記リンクから内容を拝借する。 ## チケットもしくは概要 <!-- close #XX or ログイン機能の実装 --> ## やったこと <!-- - Hoge コンポーネントに props を追加 - Fuga コンポーネントを実装 --> ## 特に見て欲しいところ <!-- - 新しいライブラリを追加したが、他に妥当な物があるか - テストケースがこれで十分かどうか --> ## 動作確認手順 <!-- 1. ログインフォーム(/login)にアクセス 1. メアドとパスワードを入力してログインを実行する 1. ログインが成功してユーザー一覧ページにリダイレクトされること --> ## TODO（できればIssueを立ててリンクを貼りましょう） <!-- - [ ] バリデーション - [ ] エラーメッセージ --> ## その他情報 <!...

そもそもER図とは？ ER図とは「データベース設計における代表的な設計図のこと」らしい。そして「作成したER図がそのまま物理データベース上に変換できることから、データベース設計手法におけるデファクトスタンダード」とのこと。 つまりたぶん、ER図を書くという技術は必要不可欠っぽい。 データモデル ER図はシステムの上流工程の中で段階的に設計するらしく、各工程で作成するER図の状態のことを「データモデル」というらしい。 概念モデル 要件定義工程で作成するデータモデル。 最初にシステム全体における「もの」や「できごと」をエンティティ、リレーションシップとして洗い出し、概要を表したもの。 論理モデル 基本設計工程で作成するデータモデル 特定のデータベースに依存しないレベルで具体化した状態を表したもの。 物理モデル 詳細設計工程で作成するデータモデル Oracle Database等の特定の物理データベース向けに論理モデルの変換をする。 例えばデータ型を追加したり、物理データベースに即したアルファベットに変換する。 ER図の最終形態がこの物理モデル。 と色々書いたけどほとんどER図とは？書き方やテクニックをわかりやすく解説を参考にしたので、こっちを参考にした方がよっぽど良い。 どう書くか で、ここからが本題になる。 じゃER図は何を使って書くべきなのか。 参考までに会社のバックエンド担当に聞くと「A5:SQL Mk-2」を使っているとのこと。 なるほど、それを使うかと思ったけど、自宅のパソコンはパフォーマンスが良くないので、出来れば開くソフトを少なくしたい。 ということで、どうせ開いている「VS code」で書ける拡張機能を探してみた。 Draw.io Integration This unofficial extension integrates Draw.io (also known as diagrams.net) into VS Code. Mentioned in the official diagrams.net blog. ↑が本家の説明文。 詳細はVSCodeでDraw.ioが使えるようになったらしい！に詳しい。 そこから引用すると、 Draw.ioとはdraw.ioにアクセスするだけで、フローチャートやネットワーク図、ER図といった豊富なテンプレートを使用して簡単にお絵かきをすることができるサービスになります。 Draw.ioで作成した図はPNGやJPEGなどの画像形式だけでなく、 SVGやXMLといった豊富な拡張子でエクスポートすることが可能です。 このサービスがVS codeで使えるようになったらしい。 .dioファイルを作成する 拡張子を.dioに設定したファイルを作成することで利用が開始される。 ちなみに、 .drawio.pngとかdrawio.svgでファイルを生成すると、importやexportの必要なくそのまま画像として利用できたり、編集することが可能らしい。 ファイルを作った瞬間、編集画面が表示されたすごい。 あとはdiagrams.net(draw.io)でER図を描く方法　※画像つき解説とかの通り、draw.ioでER図各サイトを参考にすれば問題ない。

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を変更するたびに、コンパイルされる。 たぶん、拡張機能のコンパイルと展開のされ方が違うので、実際にページを見て崩れがないかを確認したほうがいい。 拡張機能について 拡張機能は便利だけど、開発環境の共有ができないので、依存しすぎるのは良くないなあ、と思い直した。

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"} よし、怒られたのでオッケー。