開発覚書はてな版

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

【雑談】1万アクセス達成

概要

まさかブログ開設1年以内で1万アクセス突破するとは・・・

f:id:kakkoya:20190126135431p:plain

記事内容が記事内容なだけに平日のアクセスがやっぱり多いですね。
仕事の参考になっていれば幸いです。

記事のスタンス的には基本的にはつまづきやすいところのメモとして記事を書ければなと思っています。スタンス的には最初の記事の通りです。

kakkoyakakko2.hatenablog.com

アクセスの多かった記事

以下の順でアクセスが多かったです。基本的にはVSCode系ですね。

kakkoyakakko2.hatenablog.com

kakkoyakakko2.hatenablog.com

kakkoyakakko2.hatenablog.com

kakkoyakakko2.hatenablog.com

kakkoyakakko2.hatenablog.com

【Angular】ngModel に拡張メソッドを実装する

概要

Angular の ngModel 使用時にHTML側で頻繁に touched or dirty の判定を使用するケースがあります。 面倒なので拡張メソッド化してみたいと思います。

基本的には以下の記事と同様に拡張できます。

kakkoyakakko2.hatenablog.com

続きを読む

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

概要

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

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

www.typescriptlang.org

続きを読む

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

概要

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

kakkoyakakko2.hatenablog.com

TrackByFunction内の thisDefaultIterableDiffer になります。
定義元のコンポーネント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 の気になる新機能

目次

  • 目次
  • 概要
  • 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がリリースされましたね。
恒例の気になる新機能をピックアップして紹介します。

code.visualstudio.com

続きを読む