開発覚書はてな版

個人的な開発関連の備忘録

TypeScript

【VSCode・Deno】DenoをVSCodeでデバッグする

概要 Visual Studio Code で Deno をデバッグする設定を記載します。 以下のページを参考に設定しています。 deno.land

【VSCode・Deno】拡張機能:Remote - Containers で Deno の開発環境を構築

概要 Visual Studio Code の拡張機能「Remote - Containers」で Deno の開発環境を構築してみました。 marketplace.visualstudio.com Remote - Containers でDockerfile使った場合の設定方法は以下の記事を参照してください。 kakkoyakakko2.hatenablog.com …

【Angular】Angularをチーム開発で始める時に知っておくとよいこと

- Angularをチーム開発で始める時に知っておくとよいことをまとめます。 - 複数案件でAngularを触ってきて、個人的に参考になったものを記載していきます。

【NestJS】NestJSでgRPCを使ってみた - server編

概要 今回はNestJS上でgRPCサーバーを作成したサンプルです。 gRPCについては以下のページを参照 grpc.io NestJSのgRPCの説明記事 docs.nestjs.com

【NestJS】NestJSでBullを使ってみた

概要 今回はNestJS上でBullを使ってみたサンプルです。 docs.nestjs.com BullとはRedisベースのメッセージキューです。 github.com

【Angular】Angular 9 バージョンアップで気になった箇所

概要 Angular 9 のバージョンアップ内容で気になった箇所をピックアップしていきたいと思います。 基本的にはIvyがメインのリリースになります。 blog.angular.io

【TypeScript】reflect-metadataでMethodDecoratorを実装する

概要 reflect-metadataでMethodDecoratorを実装するサンプルです。 メソッドにメタデータを定義するケースです。 www.npmjs.com 実装方針 MethodDecorator を定義する。 上記のMethodDecoratorをメソッドに指定したクラスを定義する。 上記のクラスからMetho…

【NestJS】Custom providersで文字列をキーにする

概要 Custom providers で文字列を指定したサンプルです。 Moduleのprovidersに { provide: 文字列キー, useClass: サービスクラス } で定義します。 定義したサービスはModuleRefを使用してContoller内部で生成します。 docs.nestjs.com docs.nestjs.com

【Angular/class-validator】C#/WPF の INotifyDataErrorInfoをTypeScriptで実現する

概要 C#/WPF では INotifyDataErrorInfoとDataAnnotations を使用した入力バリデーションが存在します。今回はそれをAngular版にしてみました。 今回はclass-validator + Angular + TypeScriptで実現します。 INotifyDataErrorInfo実装サンプル github.com

【TypeScript】jsonファイルから型の抽出・生成

概要 TypeScript の resolveJsonModule オプションを使用することでJSONファイルから型の抽出・生成を行います。 TypeScript 2.9以降で使用できます。 www.typescriptlang.org

【TypeScript】生産性・保守性を上げる記事一覧

目次 目次 概要 パスエイリアス index.ts(バレル) 定数クラス 拡張メソッド 自動フォーマット(要VSCode) 概要 TypeScriptで生産性・保守性を上げる記事一覧を記載。 このサイトの過去記事より抜粋。 このあたりが一通り実装されているプロジェクトは自分が…

【Angular】HttpClient.get使用時にURLクエリパラメータを配列で渡す

概要 Angular で HttpClient.get メソッド使用時にURLクエリパラメータを配列で渡す場合のサンプルです。 実装方針 HttpParams の生成時に fromObject で配列を指定する。

【NestJS】webpack経由でdotenvを読み込む

概要 NestJSでwebpack経由でdotenvを読み取る方法を記載する。 用途としてはローカル環境の場合、.envファイルから設定を読み取りたいときに使用する。

【Angular】ルーティング後に別サイトにリダイレクトする

概要 Angular でルーティン後に自動で別サイトにリダイレクトするサンプルを作成する。 用途 ルーティング後にFormの内容をPOSTして別サイトにリダイレクトしたいケース POSTしたいデータについてをAngular内で取得して設定したいケース 実装方針 テンプレー…

【NestJS】TypeScriptのエイリアスを使用する

概要 NestJSでTypeScriptのエイリアスを使用する方法を記載する。 NestJS CLI(6.9.x現在)ではTypeScriptのエイリアスを使用するとコンパイルエラーになります。 今回はNestJSのWebpackのコンパイル機能をカスタムしてTypeScriptのエイリアスを実現します。…

【Jest】jasmine.clock().mockDate()を拡張して使用する

概要 Jest で jasmine.clock().mockDate() を使用するための拡張のサンプルです。 MockDate を使用して実現しています。 Date.now()・new Date()・moment() などの値が MockDate により上書きされます。 ちなみに Jestでは Jasmine記法でのテストコード実装…

【Jest】mockdateを使用したサンプル

概要 Jest 24.9 では jasmine.clock().mockDate のように Dateをテスト用に上書き機能がありません。 mockdate ライブラリを利用して jasmine.clock().mockDate() を代用できます。

【Angular】Angular 8の内容あれこれ

概要 Angular 8がリリースされましたね。 Ivy はまだPreview機能での提供になります。 いつも通り、気になった箇所をピックアップして紹介していきます。 blog.angular.io github.com

【VSCode】Visual Studio Code v1.35 の気になる新機能

目次 目次 概要 Languages関連 Extract to type alias refactoring for TypeScript JavaScript and TypeScript suggestion sorting Source control関連 Compare merge conflicts with complete context 拡張関連 Remote Development (Preview) 概要 Visual S…

【NestJS】NestJSでOpenAPI(Swagger)形式で出力

概要 NestJSではOpenAPI(Swagger)形式でAPIドキュメントを出力できます。 以下のドキュメントを参考に設定をしていけばドキュメント出力が可能です。 docs.nestjs.com OpenAPIに出力したい内容がデコレータで定義できるので、APIドキュメントと実際のAPIの…

【NestJS】NestJSで遊んでみる

概要 NestJSで遊んでみたので、遊んでみた感想やメモなどを記載していきます。 nestjs.com github.com

【VSCode】Visual Studio Code v1.32 の気になる新機能

目次 目次 概要 Editor関連 Hover and Problems panel peek improvements Debugging関連 Font configuration for Debug Console Debug Console text wrapping 概要 Visual Studio Code v1.32がリリースされましたね。 恒例の気になる新機能をピックアップし…

【Angular】optionタグで文字以外をvalueに設定する

概要 Angular の <option> への値設定で通常は value を使用します。 value に値を設定した場合は、変更後の値が文字列で設定されます。 ngValue に値を設定することで、文字列以外の値を扱えるようになります。 angular.io</option>

【Jasmine】スパイ関数が実行されたかを確認する

概要 expect(mySpy).toHaveBeenCalled() を使用することでスパイ関数が実行されたかを確認できる。 また、 expect(mySpy).toHaveBeenCalledWith(args) でスパイ関数実行時に渡された引数の確認もできる。 スパイ関数に戻り値が必要な場合、spyOn().and.retur…

【Angular】Componentテスト(クラス・DOM)

概要 Angular のComponentテストではクラスをテストする場合とDOMをテストする場合で、TestBed.configureTestingModule の設定方法が変わってきます。 設定方法や使い分けについて記載します。 angular.jp

【VSCode】TSLintを使用してコードを自動フォーマットする

概要 Visual Studio Code の TSLint拡張機能と tslint-plugin-prettier を使用してソースコードを自動フォーマットすることが出来ます。 各種設定や使用ライブラリ等を記載します。 marketplace.visualstudio.com github.com

【イベント参加】Developers Summit 2019 に参加してきました

概要 Developers Summit 2019 に参加してきました。 今回は「SHARE YOUR FUN!」をテーマに開催されました。 テクノロジーは楽しいもの。そういうテーマで色々なセッションが開催されました。 相変わらずフルで参加出来ず、2日とも午後のみの参加になってお…

【SonarQube】SonarQube on Docker で TypeScript の品質チェック

概要 SonarQube + Docker(Docker Compose)でTypeScriptのソースコードの品質チェックを行う場合の設定方法などを記載します。 www.sonarqube.org

【VSCode】Visual Studio Code v1.31 の気になる新機能

目次 目次 概要 Workbench関連 Improved keyboard navigation Hierarchical Select All Cut command in Explorer context menu Integrated Terminal Reflow support 概要 Visual Studio Code v1.31がリリースされましたね。 恒例の気になる新機能をピックア…

【Jest】AngularでJestを使用する

概要 Angular で Jest を使用してユニットテストを実行するサンプルを作成しました。 jestjs.io github.com