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

概要

TypeScript利用時に自作のファイルのディレクトリ階層が深くなっていくと import文を相対パスで記載するのがつらくなってきます。

そういう場合、tsconfig.json の compilerOptions.paths を設定することでパスのエイリアスを設定することができ、import文の記述や読むのが楽になります。

www.typescriptlang.org

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

概要

以前の記事で ngFor の trackBy についての記事を記述しました。

kakkoyakakko2.hatenablog.com

TrackByFunction内の this は DefaultIterableDiffer になります。
定義元のコンポーネントを this としたい場合は TrackByFunction を返すメソッドを作成して、そのメソッドを テンプレートの trackBy 内で呼び出す用にします。

使用ケースとしては一意キーを外部から指定する場合などに使用します。

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

概要

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

basarat.gitbooks.io

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

概要

Angular で *ngIf と [hidden] の個人的な使い分けを記載します。

基本的には表示・非表示の切り替え頻度が多いものは hidden にしています。
ブラウザの処理速度によっては ngIf だとDOM生成・破棄に時間がかかりレンダリングに影響するケースがあったため、切り替えが多い箇所はhiddenを個人的には推奨しています。
初回判定のみで切り替えがまったくないものについては ngIf を使用しています。

【Angular】ngFor trackBy の実装

概要

Angular の ngForにはtrackByという設定項目があります。

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

再描画が多いngForを使用している箇所ではパフォーマンスチューニングの一環としてtrackByの使用をおすすめします。

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

概要

Angular や TypeScript で Array.includes を使用した場合、IE11ではundefinedでエラーになります。 IE11はES5を採用しているため、ES7の Array.includes は対応していない為です。

そのため、IE11でも使いたい場合はpolyfillsの設定が必要になります。 Angularの標準 polyfills.ts ではES7のものは記載されていないため、個別に追加する必要があります。

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

目次

概要

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

code.visualstudio.com

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

概要

HTML5 Conference 2018に参加してきました。
今回はWEBのフロント技術の話を中心に聴いてきました。

events.html5j.org

全体的な感想

• Angular系のセッションが意外とあった。開発実績からのノウハウ的な話が聴けて良かった。設計パターンまわりは参考に出来そう。
• AMPは色々クセがある技術だが、今後の展開を追っていきたい。
• Reactのチューニングででたが、差分レンダリングまわりについては他のフレームワークでもボトルネックになる可能性があるので、初期設計時にある程度考慮しておきたい。
• NestJSはAngularやJavaを経験している人はすぐ対応出来そうなフレームワークでした。日本語情報が少ないのが難点ですが・・・

メモ書き

以下に参加しながら記載したメモ書きを貼っておきます。

github.com

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

目次

概要

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

code.visualstudio.com

【Angular】EOLスケジュール（4.x - 7.x）

概要

Angularの直近バージョンのEOL（End-of-Life, サポート期間終了）スケジュールを箇条書きにしておきます。
1バージョンはアクティブサポート6ヵ月、LTSが12ヵ月の合計18ヵ月サポートされます。
また、半年間隔でメジャーバージョンアップが計画されています。

公式情報

https://angular.io/guide/releases

EOLスケジュール

• 4.x ：2018年09月（EOL）
• 5.x ：2019年05月
• 6.x ：2019年11月
• 7.x ：2020年04月

バージョンアップについてのメモ

• 4 -> 5 ではHttpClientへの変更があり、サービスクラスまわりの実装を移行する必要があります。 その他にもクラスが変わっているものもあります。
• 5 -> 6 ではRxJSのバージョンアップがあり、だいぶ記述が変わります。
• 6 -> 7 については特段破壊的変更がないので、上げれるところは上げとくと良いです。