開発覚書はてな版

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

【Angular】HttpInterceptorの実装(レスポンス内容確認)

概要

以前紹介したAngularのHttpInterceptorでレスポンス内容を確認することも出来ます。 今回はそのサンプルソースをのせておきます。

kakkoyakakko2.hatenablog.com

続きを読む

【HTTP】ブラウザ毎のOriginヘッダー付与の違い(2018年6月現在)

概要

HTTPリクエストでOriginヘッダーが設定されるケースが異なるためまとめてみました。

続きを読む

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

概要

ng-japan 2018に参加してきました。

ngjapan.org

基本的には6.0の新機能をベースに話があったり、導入・開発の事例の話があったりしました。
以下に感想等を記載していきます。

全体的な感想

  • build環境が成熟してきた。(ng add/ng update)
  • Angular ivy関連は地味に楽しみ。
  • Angular Elementsとivy連携が楽しみ。
  • ある程度構成は落ち着いてきたので、開発者へもうちょい普及しないかな~。

メモ書き

以下に参加しながら記載したメモ書きを貼っておきます。
時間があれば修正するかも。

github.com

【VSCode】Chromeデバッグ起動設定

概要

Visual Studio Code から Chrome デバッグ接続が可能です。
Debugguer for Chrome拡張機能を利用することでデバッグできます。
ただし、デバッグ前にChromeの起動引数に--remote-debugging-port=9222の設定が必要です。

このあたりの設定やまわりへの周知が面倒なため、launch.jsonの値を変更して配布しています。
launch.jsonruntimeArgsという項目を追加して、--remote-debugging-port=9222を設定することでデバッグ起動時に接続が簡単に出来ます。

marketplace.visualstudio.com

続きを読む

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

概要

declare global + interface で追加したいメソッドを追加後、prototypeにメソッドを追加します。
拡張メソッドを利用したい場合は、importをすることで利用できます。
詳細についてはサンプルソースを確認。

ちなみに拡張メソッドは他の開発言語でもあります。
用途としては、型に依存した共通処理等を追加すると生産性があがります。

続きを読む

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

目次

  • 目次
  • 概要
  • TypeScript関連
    • Update import paths when a file is moved or renamed
    • Highlight unused variables and imports
    • Generate getter/setter refactoring
  • Preview機能
    • Outline view
    • New Settings editor
  • 終わりに

概要

Visual Studio Code v1.24がリリースされましたね。
気になる新機能をピックアップして紹介します。

code.visualstudio.com

続きを読む

【Angular CLI・Karma】JUnit形式のテスト結果を出力する

概要

Angular CLI利用時にKarmaでのテスト実行時にテスト結果をJUnit形式で出力する方法です。
なぜJUnit形式でテスト結果を出力するかというとJenkins等でテスト結果を取り込むのにJUnit形式だと簡単に出来るからです。

今回利用するツールはkarma-junit-reporter です。
npmによるインストールの追加とkarma.conf.jsの修正を行うだけで対応可能です。

続きを読む

【Jasmine】テストを失敗させる

概要

Jasmineで特定ケースの場合、テストを失敗させたい場合はfailメソッドまたはdone.failを使用します。
PromiseRxJS等でrejectthrowErrorを発生させるテストの場合、正常に動作してしまう場合がテスト失敗なため、failメソッド等で明示してあげるとテスト失敗が分かりやすいです。

続きを読む

【Jasmine】Promiseのテスト方法

概要

JasmineでのPromiseをテスト時にはテスト定義の引数にdoneを利用します。
doneを利用することで、非同期処理完了後まで待機してくれます。
doneを設定しない場合は、Promise.then内の処理をスルーしてテストを終了するため、正常なテスト結果がでない場合があります。

続きを読む

【TypeScript】定数クラスっぽいものをつくる

概要

TypeScriptで定数クラスっぽいものをつくるのには namespace を利用すると便利です。
各const値をグループ化して、あたかも定数クラスのように利用できます。

続きを読む