開発覚書はてな版

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

TypeScript

【Angular】Angular 8の内容あれこれ

概要 Angular 8がリリースされましたね。 Ivy はまだPreview機能での提供になります。 いつも通り、気になった箇所をピックアップして紹介していきます。 blog.angular.io github.com

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

目次 目次 概要 Languages関連 Extract to type alias refactoring for TypeScript JavaScript and TypeScript suggestion sorting Source control関連 Compare merge conflicts with complete context 拡張関連 Remote Development (Preview) 概要 Visual S…

【NestJS】NestJSでOpenAPI(Swagger)形式で出力

概要 NestJSではOpenAPI(Swagger)形式でAPIドキュメントを出力できます。 以下のドキュメントを参考に設定をしていけばドキュメント出力が可能です。 docs.nestjs.com OpenAPIに出力したい内容がデコレータで定義できるので、APIドキュメントと実際のAPIの…

【NestJS】NestJSで遊んでみる

概要 NestJSで遊んでみたので、遊んでみた感想やメモなどを記載していきます。 nestjs.com github.com

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

目次 目次 概要 Editor関連 Hover and Problems panel peek improvements Debugging関連 Font configuration for Debug Console Debug Console text wrapping 概要 Visual Studio Code v1.32がリリースされましたね。 恒例の気になる新機能をピックアップし…

【Angular】optionタグで文字以外をvalueに設定する

概要 Angular の <option> への値設定で通常は value を使用します。 value に値を設定した場合は、変更後の値が文字列で設定されます。 ngValue に値を設定することで、文字列以外の値を扱えるようになります。 angular.io</option>

【Jasmine】スパイ関数が実行されたかを確認する

概要 expect(mySpy).toHaveBeenCalled() を使用することでスパイ関数が実行されたかを確認できる。 また、 expect(mySpy).toHaveBeenCalledWith(args) でスパイ関数実行時に渡された引数の確認もできる。 スパイ関数に戻り値が必要な場合、spyOn().and.retur…

【Angular】Componentテスト(クラス・DOM)

概要 Angular のComponentテストではクラスをテストする場合とDOMをテストする場合で、TestBed.configureTestingModule の設定方法が変わってきます。 設定方法や使い分けについて記載します。 angular.jp

【VSCode】TSLintを使用してコードを自動フォーマットする

概要 Visual Studio Code の TSLint拡張機能と tslint-plugin-prettier を使用してソースコードを自動フォーマットすることが出来ます。 各種設定や使用ライブラリ等を記載します。 marketplace.visualstudio.com github.com

【イベント参加】Developers Summit 2019 に参加してきました

概要 Developers Summit 2019 に参加してきました。 今回は「SHARE YOUR FUN!」をテーマに開催されました。 テクノロジーは楽しいもの。そういうテーマで色々なセッションが開催されました。 相変わらずフルで参加出来ず、2日とも午後のみの参加になってお…

【SonarQube】SonarQube on Docker で TypeScript の品質チェック

概要 SonarQube + Docker(Docker Compose)でTypeScriptのソースコードの品質チェックを行う場合の設定方法などを記載します。 www.sonarqube.org

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

目次 目次 概要 Workbench関連 Improved keyboard navigation Hierarchical Select All Cut command in Explorer context menu Integrated Terminal Reflow support 概要 Visual Studio Code v1.31がリリースされましたね。 恒例の気になる新機能をピックア…

【Jest】AngularでJestを使用する

概要 Angular で Jest を使用してユニットテストを実行するサンプルを作成しました。 jestjs.io github.com

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

概要 Angular の ngModel 使用時にHTML側で頻繁に touched or dirty の判定を使用するケースがあります。 面倒なので拡張メソッド化してみたいと思います。 基本的には以下の記事と同様に拡張できます。 kakkoyakakko2.hatenablog.com

【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…