開発覚書はてな版

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

TypeScript

【NestJS】nestjs-sqsのサンプルコード

概要 NestJS+AWS SQSのサンプルコード一式を作成しました。関連リンクをはっておきます。 使用ライブラリ nestjs.com www.npmjs.com ソースコード一式 github.com 詳細記事 zenn.dev

【TypeScript】TypeScript Cheat Sheets

概要 TypeScript Cheat Sheetsがいつのまにか公開されていましたね。 内容について簡単にメモりたいと思います。 www.typescriptlang.org TypeScript Cheat Sheetsの内容 内容は以下の4つに分類されています。 Control Flow Analysis - Type Guards周りを記…

【TypeScript】Arrayからnull, undefinedを除外する拡張メソッドの実装

概要 今回は、Arrayにnull, undefinedを除外する拡張メソッドを実装します。

【TypeScript】拡張メソッドの実装(基本型・staticメソッド)

概要 拡張メソッドの実装で基本型+staticメソッドの定義方法を記載する。 インスタンスメソッドへの拡張は以下の記事を参照ください。 kakkoyakakko2.hatenablog.com kakkoyakakko2.hatenablog.com

【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