開発覚書はてな版

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

【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】EOLスケジュール(4.x - 7.x)

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

【Node.js】EOLスケジュール(6.x - 11.x)

概要 Node.jsの直近バージョンのEOL(End-of-Life, サポート期間終了)スケジュールを箇条書きにしておきます。 基本的には奇数バージョンが新機能が含まれ寿命が短いバージョンで、偶数バージョンがLTSです。 公式情報 github.com EOLスケジュール 6.x :20…

【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】推奨拡張機能を共有

概要 .vscode/extensions.jsonをソース管理等で共有することで、チーム内で推奨拡張機能を共有できます。 推奨拡張機能の記載方法 .vscode/extensions.jsonに拡張機能のIDを記載することで推奨拡張機能として共有できるようになります。 拡張機能のIDの確認 …

【VSCode】ワークスペース設定を共有

概要 .vscode/settings.jsonをソース管理等で共有することで、チーム内でワークスペース設定を共有できます。 ワークスペースの設定 基本設定の設定からワークスペースの設定ができます。 用途 フォーマットをチーム内で共有する用途で使用できます。 下記の…

【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

【雑談】開発覚書の歴史

はじめに 開発覚書の歴史について記載してみようと思います。 技術要素はほぼありません。 ブログの趣旨については以下を参照。 kakkoyakakko2.hatenablog.com

【Hyper-V】外付けSSDに仮想環境を移動してみた

目次 目次 概要 環境 ホストOS ゲストOS パフォーマンス測定ソフト 使用した外付けSSD 現在のパフォーマンス ホストOSのHDD ゲストOSのHDD 新環境のパフォーマンス 外付けSSD ゲストOSのHDD 結論 参考情報 ホストOS Cドライブ:NVMe SSD Dドライブ:SSD Eド…

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

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

【読書】良いコードを書く技術

概要 保守性の高いコードは何かを考える機会があった時に定期的に読み直す本です。 内容の抜粋や感想等を記載したいと思います。 良いコードを書く技術 ?読みやすく保守しやすいプログラミング作法 (WEB+DB PRESS plus)作者: 縣俊貴出版社/メーカー: 技術評…

【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

【Git】リモートへtagをpush

Git

概要 bitbucketなどではWebページ上でGitリポジトリのtagの付与が出来ないので、ローカルでtagを付与してリモートへの反映が必要です。また、ローカルでtagを追加した場合、通常のpushではtagはリモートブランチに反映されません。 git push時に--tagsを追加…

【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()を実行する。 オブジェクト型配列の…