開発覚書はてな版

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

【VSCode】おすすめ拡張機能 - Local History

概要 Visual Studio Code で普段利用している拡張機能ご紹介です。 今回は Local History です。 ファイルの変更内容をソース管理を使用せずに履歴として管理できます。 marketplace.visualstudio.com

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

概要 Developers Summit 2020 に参加してきました。 今回は「ともにつくる」をテーマに開催されました。 今回は2日目の午後2セッションのみ参加しました。 event.shoeisha.jp codezine.jp

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

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

【Hyper-V】ゲストOSがWindows10の場合に第一世代の仮想マシンを第二世代にする

目次 目次 概要 前提知識 試した環境 作業の前に 手順 1. HDDが空の第二世代仮想マシンを作成する 2. 第一世代のVHDXファイルをコピーする 3. コピーしたVHDXファイルをホストOSにマウントする 4. マウントしたVHDXのディスク番号を調べる 5. マウントしたVH…

【VSCode】おすすめ拡張機能 - Error Lens

概要 Visual Studio Code で普段利用している拡張機能ご紹介です。 今回は Error Lens です。 Visual Studio Code上のエディタ上にエラー・警告メッセージが表示されるようになります。 marketplace.visualstudio.com

【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

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

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

【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

【読書】.NET、Javaでの標準化

概要 .NET FrameworkやJavaなどプロジェクトで標準化を行った際に参考した書籍を紹介。 対象の本 .NETのクラスライブラリ設計 開発チーム直伝の設計原則,コーディング標準,パターン作者: Krzysztof Cwalina,Brad Abrams出版社/メーカー: 日経BP発売日: 2016/…

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

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

【Node.js+Docker】nodemailer+Docker+MailHogのサンプル

概要 Docker 上に MailHog を立ち上げて、そこに対してメールを送信するサンプルです。 メールは nodemailer を使用して送信します。 MailHog起動中は http://localhost:8025/ をブラウザで開くと送信メールの確認が出来ます。 実行環境 Node.js - 10.x Dock…

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

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

【Chrome拡張機能 】簡単なサンプルを作ってみる

概要 Chrome拡張機能 の簡単なサンプルを作ってみたいと思います。 developer.chrome.com

【VSCode】おすすめ拡張機能 - Jest Test Explorer

概要 Visual Studio Code で普段利用している拡張機能ご紹介です。 今回は Jest Test Explorer です。 Visual Studio Code上のTest Explorer から Jest を実行できる機能です。 marketplace.visualstudio.com

【GitHub】GitHub Package RegistryでDockerイメージを公開する(2019/10/27現在)

目次 目次 概要 前提知識 公開手順 1. GitHub 上でアクセストークンを発行する 2. GitHub Package Registryへのログイン 3. Dockerfileのビルド 4. Dockerイメージの公開 5. 公開したパッケージの確認 6. 公開したパッケージを使用 公開したパッケージ ソー…

【GitHub】GitHub Package RegistryのNPMパッケージを使う(2019/10/22現在)

目次 目次 概要 前回の記事 手順 1. 前回記事の設定を行う 2. 公開したパッケージをインストールする yarnを使用する場合の注意 Integrity checked failedエラーが発生 Couldn't find package "パッケージ名" on the "npm" registry. エラー 概要 2019/10/22…

【GitHub】GitHub Package RegistryでNPMを公開する(2019/10/21現在)

目次 目次 概要 前提知識 公開手順 1. GitHub上でアクセストークンを発行する 2. ~/.npmrc の編集 3. ローカルの .npmrc の編集 4. package.json の編集 5. npm publish の実行 6. 公開したパッケージの確認 公開したパッケージ ソース一式 参考URL 概要 201…

【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のエイリアスを実現します。…

【Github Actions】SonarCloud と連携させる(2019/09/15現在)

概要 Github Actions(2019/09/15現在のβ版)と SonarCloud を連携させたサンプルを作成する。 TSLint + Jest実行後に Github Actions上でSonarCloud Scan を実行して、SonarCloud側に保存する。 参考URL github.com github.com 参考過去記事 kakkoyakakko2.…

【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のユニットテストで特定ファイルをカバレッジから除外したいケースがあります。 以下の設定をすることで対応可能です。 angular.json の test の設定に codeCoverageExclude を追加する。 Globs形式でカバレッジ除外対象のファイルを指定する。 …

【NestJS】VSCodeでデバッグ実行

概要 NestJSをVSCodeからデバッグ実行をする方法を記載。

【Git】現在ブランチのコミットIDをファイル出力

Git

概要 Gitで現在ブランチのコミットIDをファイルに出力する。 利用シーン ビルド時のコミットIDを保存したいケース 実行環境 Bash Git サンプルソース git log -n 1 --pretty=format:"%H" > dist/commit-id.txt # c8f8ab484161c025f5b1e62135f3d067aa841791 G…

【JavaScript】textareaで入力した文字列をファイルで保存する

概要 textareaで入力した文字列をファイルで保存するための最低限のサンプルを実装する。

【イベント参加】ng-japan2019に参加してきました

概要 ng-japan 2019に参加してきました。 ngjapan.org バージョン8.0や次のリリースに含まれる内容などの話しだったり、開発事例の話しがメインでした。 全体的な感想 Cordova関連の話しが色々なセッションで出たけど、ハイブリッドアプリって流行ってるのか…