開発覚書はてな版

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

TypeScript

【TypeScript】パスのエイリアスの設定方法

概要 TypeScript利用時に自作のファイルのディレクトリ階層が深くなっていくと import文を相対パスで記載するのがつらくなってきます。 そういう場合、tsconfig.json の compilerOptions.paths を設定することでパスのエイリアスを設定することができ、impor…

【Angular】TrackByFunction内でthisを使用する

概要 以前の記事で ngFor の trackBy についての記事を記述しました。 kakkoyakakko2.hatenablog.com TrackByFunction内の this は DefaultIterableDiffer になります。 定義元のコンポーネントを this としたい場合は TrackByFunction を返すメソッドを作成…

【TypeScript】index.ts(バレル)の使い方

概要 TypeScript利用時に毎回ファイル単位でimportするのは面倒ですね。 そういう場合、index.tsに対象ディレクトリのファイルをまとめて export しておくと便利です。 また、index.ts の場合、./ディレクトリ/index ではなく ./ディレクトリ と記載すること…

【Angular】ngIf と hidden の個人的な使い分け

概要 Angular で *ngIf と [hidden] の個人的な使い分けを記載します。 基本的には表示・非表示の切り替え頻度が多いものは hidden にしています。 ブラウザの処理速度によっては ngIf だとDOM生成・破棄に時間がかかりレンダリングに影響するケースがあった…

【Angular】ngFor trackBy の実装

概要 Angular の ngForにはtrackByという設定項目があります。 ngForはtrackByを使用しない場合、コレクションに変更があったら全てのDOMを再生成します。 trackByを使用することで変更箇所のDOMのみ再生成するように設定できます。 再描画が多いngForを使用…

【Angular】IE11でArray.includesを使用する

概要 Angular や TypeScript で Array.includes を使用した場合、IE11ではundefinedでエラーになります。 IE11はES5を採用しているため、ES7の Array.includes は対応していない為です。 そのため、IE11でも使いたい場合はpolyfillsの設定が必要になります。…

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

目次 目次 概要 Languages Improved display of JavaScript and TypeScript callbacks Highlighting of Markdown elements in JSDoc comments Workbench関連 Multiline search input References view 概要 Visual Studio Code v1.30がリリースされましたね。…

【イベント参加】HTML5 Conference 2018に参加してきました

概要 HTML5 Conference 2018に参加してきました。 今回はWEBのフロント技術の話を中心に聴いてきました。 events.html5j.org 全体的な感想 Angular系のセッションが意外とあった。開発実績からのノウハウ的な話が聴けて良かった。設計パターンまわりは参考に…

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

目次 目次 概要 Search関連 Multiline search Show line numbers in search Workbench関連 Symbol order in Breadcrumbs Preview Features IntelliSense locality bonus おわりに 概要 Visual Studio Code v1.29がリリースされましたね。 気になる新機能をピ…

【Angular】Virtual Scrollingの実装

概要 Angular CDK 7.0.0で Virtual Scrollingが追加されました。 これは表示されている部分のみDOM要素を生成するものになります。 表示以外の箇所のDOM生成は行わないため、パフォーマンスが向上します。

【VSCode】おすすめ拡張機能 - Angular Language Service

概要 Visual Studio Code で普段利用している拡張機能ご紹介です。 今回はAngular Language Serviceです。 Angular Supportと同様にHTMLからTypeScriptの定義に飛ぶことが可能です。(TypeScriptからHTMLへ飛ぶことは不可) 基本的にはHTML側の開発サポート…

【VSCode】おすすめ拡張機能 - Angular Support

概要 Visual Studio Code で普段利用している拡張機能ご紹介です。 今回はAngular Supportです。 Angular Language Serviceと重複している箇所がありますが、HTML・TypeScriptの双方から定義に飛ぶことができる拡張機能です。 marketplace.visualstudio.com

【Angular】Angular 7.0.0リリース

概要 Angular 7.0.0がリリースされましたね。 あまり大きな機能追加はありませんが、気になった箇所をピックアップしていきます。 ちなみに次世代レンダリングパイプラインのIvyは含まれていません・・・ blog.angular.io github.com

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

目次 目次 概要 Workbench関連 Custom title and menu bar on Windows by default Project level snippets Copy Relative Path Problems panel - Show error codes Editor IntelliSense locality bonus おわりに 概要 Visual Studio Code v1.28がリリースさ…

【Angular】IE11用number Directive

概要 IE11では<input type="number">を指定しても数値以外の入力が可能です。 今回はDirectiveを使用して数値のみを入力する共通処理を実装したいと思います。

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

目次 目次 概要 Workbench関連 Settings editor Breadcrumbs improvements New Terminal menu Languages Path completion for CSS imports おわりに 概要 Visual Studio Code v1.27がリリースされましたね。 気になる新機能をピックアップして紹介します。 c…

【Angular】双方向バインディングの実装(ControlValueAccessor使用版)

概要 今回はControlValueAccessorを使用した双方向バインディングの実装の仕方を記載します。 通常の双方向バインディングの実装については以下の記事を参照して下さい。 kakkoyakakko2.hatenablog.com

【Angular】双方向バインディングの実装

概要 自作コンポーネントで双方向バインディングの実装の仕方を記載します。 ※今回はControlValueAccessorは未使用で実装します。 下記のような設定をします。 自作コンポーネント @Inputでプロパティを定義する。 @OutputでEventEmitterを定義する。EventEm…

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

目次 目次 概要 Workbench関連 Breadcrumbs Run npm scripts from package.json View menu cleanup おわりに 概要 Visual Studio Code v1.26がリリースされましたね。 気になる新機能をピックアップして紹介します。 code.visualstudio.com

【TypeScript】Arrayをソートする拡張メソッドの実装 - その3

概要 下記の記事でArrayソート用の拡張メソッドを実装しました。 kakkoyakakko2.hatenablog.com kakkoyakakko2.hatenablog.com 今回は、ファンクションで変換した値でのソートに対応しようと思います。

【TypeScript】Arrayをソートする拡張メソッドの実装 - その2

概要 下記の記事でArrayソート用の拡張メソッドを実装しました。 kakkoyakakko2.hatenablog.com 今回は、第1キーは昇順、第2キーは降順のようなケースに対応したいと思います。 以下の内容で実装していきたいと思います。 引数にソートキーの他に昇順フラ…

【TypeScript】Arrayをソートする拡張メソッドの実装 - その1

概要 TypeScript(JavaScript)の標準のsortメソッドが使いにくいので、compare処理を内蔵した拡張メソッドを実装してみたいと思います。 以下の内容で実装したいと思います。 プリミティブ型配列の場合は通常のArray.sort()を実行する。 オブジェクト型配列の…

【Angular】KeyValuePipe の使い方

概要 Angular 6.1.0になりKeyValuePipeが追加されました。 KeyValuePipeのサンプルを作ってみたいと思います。 以下はAngular 6.1をピックアップした記事です。 kakkoyakakko2.hatenablog.com

【Angular】Angular 6.1.0リリース

概要 Angular 6.1.0がリリースされましたね。マイナーバージョンチェンジなのであまり大きな変更はありませんが、気になった箇所をピックアップしていきます。 blog.angular.io github.com

【RxJS】empty, NEVER, throwError の挙動

概要 RxJSでempty, NEVER, throwError の挙動にはまったのでメモ書き。 ReactiveX - Empty, Never, and Throw operators

【VSCode】ワークスペースのTypeScriptのバージョンを使用

概要 Visual Studio Codeの各ワークスペースのTypeScriptバージョンを指定して使用する。

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

目次 目次 概要 Workbench関連 Grid editor layout Outline view Portable Mode 拡張関連 New default view for Extensions view Preview機能 New Settings editor 終わりに 概要 Visual Studio Code v1.25がリリースされましたね。 気になる新機能をピック…

【Angular】@Componentの設定あれこれ

概要 Angularの@Componentの設定関連をメモ。

【TypeScript】拡張メソッドの実装(ライブラリ・外部モジュール編)

概要 TypeScriptで基本型でなく、他のライブラリで定義されているクラスに対して拡張メソッドを実装する方法を記載します。 declare module 'ライブラリの拡張対象のクラスが記載されているファイル'で定義後は基本型の拡張方法と同じです。 サンプルソース…

【Angular】HttpClientでstatusCodeを取得する

概要 Angular 4以降で登場したHttpClientでは特に指定がない場合はJSON型の戻り値を扱います。 以前のHttpモジュールのようにHttpレスポンスのステータスコードを扱いたい場合は、引数に{ observe: 'response' }の指定が必要になります。 get処理については…