開発覚書はてな版

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

【Git】現在ブランチのコミットIDをファイル出力

Git

概要 Gitで現在ブランチのコミットIDをファイルに出力する。 利用シーン ビルド時のコミットIDを保存したいケース 実行環境 Bash Git サンプルソース git log -n 1 --pretty=format:"%H" > dist/commit-id.txt # c8f8ab484161c025f5b1e62135f3d067aa841791 G…

【JavaScript】textareaで入力した文字列をファイルで保存する

概要 textareaで入力した文字列をファイルで保存するための最低限のサンプルを実装する。

【イベント参加】ng-japan2019に参加してきました

概要 ng-japan 2019に参加してきました。 ngjapan.org バージョン8.0や次のリリースに含まれる内容などの話しだったり、開発事例の話しがメインでした。 全体的な感想 Cordova関連の話しが色々なセッションで出たけど、ハイブリッドアプリって流行ってるのか…

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

概要 Developers Summit 2019 Summer に参加してきました。 今回は「エンジニア組織とソフトウェアのアーキテクチャを再考する」をテーマに開催されました。 夏のデブサミはエンタープライズ向けが多かったのですが、一昨年あたりから変わってきたので良いで…

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

【Chrome】おすすめ拡張機能 - Angury

概要 Google Chromeの拡張機能を紹介します。 Angularデバッグ用に使用できるAnguryです。 Chromeウェブストアからインストールすることで使用可能です。 chrome.google.com

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

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

【NestJS】NestJSで遊んでみる

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

【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を使用…