開発覚書はてな版

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

【VSCode】おすすめ拡張機能 - Swagger Viewer

概要 Visual Studio Code で普段利用している拡張機能ご紹介です。 今回はSwagger Viewerです。 Visual Studio Code上でSwagger Editorを使用できる機能です。 marketplace.visualstudio.com

【npm・yarn】キャッシュフォルダの変更

概要 npm や yarn でパッケージをインストールする場合、キャッシュフォルダ内にインストールしたパッケージをキャッシュします。 HDD/SSDが複数接続している時など、容量の大きい方にキャッシュフォルダを移動したいケースがあります。 以下に npm と yarn …

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

【雑談】開発時の考え方など

目次 目次 概要 開発の優先順位 コーディングスタイル 設計・開発のスタイル オープンソース活動・Githubについて 使用技術の選定 新技術について 行動パターン あとがき 概要 たまにですが、開発時にどういうことを注意しているかや何故Githubでソースコー…

【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】JestをVSCodeでデバッグする

概要 Visual Studio CodeでJestをデバッグするための設定を記載します。 基本的には以下のURLの通りです。 github.com

【Jest】AngularでJestを使用する

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

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

概要 まさかブログ開設1年以内で1万アクセス突破するとは・・・ 記事内容が記事内容なだけに平日のアクセスがやっぱり多いですね。 仕事の参考になっていれば幸いです。 記事のスタンス的には基本的にはつまづきやすいところのメモとして記事を書ければな…

【Hyper-V】仮想環境内にDockerをインストール

概要 Hyper-Vの仮想環境内にDockerをインストールしても通常では動作しません。 ホストOS側で Nested Virtualization (入れ子になった仮想化) 設定を予めしておく必要があります。 docs.microsoft.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】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