開発覚書はてな版

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

TypeScript

【TypeScript】TypeScript 4.0 で気になった箇所

概要 TypeScript 4.0 のバージョンアップ内容で気になった箇所をピックアップしていきたいと思います。 devblogs.microsoft.com

【NestJS】NestJSでGraphQL を使ってみた - Code frist編

概要 今回はNestJSでGraphQL を使用したサンプルです。 Code fristとSchema firstの2つのアプローチがあります。今回はCode fristのアプローチで実装していきたいと思います。 GraphQL については以下のページを参照 graphql.org NestJSのGraphQL の説明記事…

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

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

【NestJS】NestJSでmonorepo機能を使ってみた

概要 今回はNestJS上でmonorepo機能を使用したサンプルです。 NestJSのmonorepoの説明記事は以下の通りです。 docs.nestjs.com

【Angular】AngularでStorybookを使ってみた - addon-controls編

概要 今回はAngular+Storybookのaddon-controlsを使用したサンプルです。(2020/6/21時点ではβ版です) addon-controls は@Input値変更をStorybook上で確認できるようになります。 addon-docsのインストールが必須になります。 Angularでaddon-controlsを使…

【Angular】AngularでStorybookを使ってみた - addon-actions編

概要 今回はStorybookのaddon-actionsを使用したサンプルです。 addon-actions は AngularのOutput時の動作をStorybook上で確認できるようになります。 github.com AngularでのStorybookの設定については以下の記事を参照ください。 kakkoyakakko2.hatenablo…

【Angular】AngularでStorybookを使ってみた

概要 今回はAngularでStorybookを使用したサンプルです。 Storybookとは Angular、React、Vueなどでコンポーネントを分離して開発するためのツールです。 小さく定義したコンポーネントを一覧化して確認が出来ます。 Addonを追加することで、Storybookに様々…

【VSCode・Deno】DenoのテストをVSCodeでデバッグする

概要 Visual Studio Code で Deno のテストをデバッグする設定を記載します。 通常のデバッグ実行の記事は以下を参照してください。 kakkoyakakko2.hatenablog.com

【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がリリースされましたね。 恒例の気になる新機能をピックアップし…