開発覚書はてな版

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

Angular

【Angular】AngularでStorybookを使ってみた - addon-controls編

概要 今回はAngular+Storybookのaddon-controlsを使用したサンプルです。(2020/6/21時点ではβ版です) addon-controls は@Input値変更をStorybook上で確認できるようになります。 addon-docsのインストールが必須になります。 Angularでaddon-controlsを使…

【Angular】AngularでStorybookを使ってみた - addon-actions編

概要 今回はStorybookのaddon-actionsを使用したサンプルです。 addon-actions は AngularのOutput時の動作をStorybook上で確認できるようになります。 github.com AngularでのStorybookの設定については以下の記事を参照ください。 kakkoyakakko2.hatenablo…

【Angular】AngularでStorybookを使ってみた

概要 今回はAngularでStorybookを使用したサンプルです。 Storybookとは Angular、React、Vueなどでコンポーネントを分離して開発するためのツールです。 小さく定義したコンポーネントを一覧化して確認が出来ます。 Addonを追加することで、Storybookに様々…

【Angular】Angularをチーム開発で始める時に知っておくとよいこと

- Angularをチーム開発で始める時に知っておくとよいことをまとめます。 - 複数案件でAngularを触ってきて、個人的に参考になったものを記載していきます。

【Angular】Angular 9 バージョンアップで気になった箇所

概要 Angular 9 のバージョンアップ内容で気になった箇所をピックアップしていきたいと思います。 基本的にはIvyがメインのリリースになります。 blog.angular.io

【Angular/class-validator】C#/WPF の INotifyDataErrorInfoをTypeScriptで実現する

概要 C#/WPF では INotifyDataErrorInfoとDataAnnotations を使用した入力バリデーションが存在します。今回はそれをAngular版にしてみました。 今回はclass-validator + Angular + TypeScriptで実現します。 INotifyDataErrorInfo実装サンプル github.com

【Angular】HttpClient.get使用時にURLクエリパラメータを配列で渡す

概要 Angular で HttpClient.get メソッド使用時にURLクエリパラメータを配列で渡す場合のサンプルです。 実装方針 HttpParams の生成時に fromObject で配列を指定する。

【Angular】ルーティング後に別サイトにリダイレクトする

概要 Angular でルーティン後に自動で別サイトにリダイレクトするサンプルを作成する。 用途 ルーティング後にFormの内容をPOSTして別サイトにリダイレクトしたいケース POSTしたいデータについてをAngular内で取得して設定したいケース 実装方針 テンプレー…

【Angular】特定ファイルのカバレッジを除外

概要 Angularのユニットテストで特定ファイルをカバレッジから除外したいケースがあります。 以下の設定をすることで対応可能です。 angular.json の test の設定に codeCoverageExclude を追加する。 Globs形式でカバレッジ除外対象のファイルを指定する。 …

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

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

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

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

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

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

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

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

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

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

【Jest】AngularでJestを使用する

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

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

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

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

概要 以前の記事で ngFor の trackBy についての記事を記述しました。 kakkoyakakko2.hatenablog.com TrackByFunction内の this は DefaultIterableDiffer になります。 定義元のコンポーネントを this としたい場合は TrackByFunction を返すメソッドを作成…

【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の設定が必要になります。…

【イベント参加】HTML5 Conference 2018に参加してきました

概要 HTML5 Conference 2018に参加してきました。 今回はWEBのフロント技術の話を中心に聴いてきました。 events.html5j.org 全体的な感想 Angular系のセッションが意外とあった。開発実績からのノウハウ的な話が聴けて良かった。設計パターンまわりは参考に…

【Angular】EOLスケジュール(4.x - 7.x)

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

【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

【Angular】IE11用number Directive

概要 IE11では<input type="number">を指定しても数値以外の入力が可能です。 今回はDirectiveを使用して数値のみを入力する共通処理を実装したいと思います。

【Angular】双方向バインディングの実装(ControlValueAccessor使用版)

概要 今回はControlValueAccessorを使用した双方向バインディングの実装の仕方を記載します。 通常の双方向バインディングの実装については以下の記事を参照して下さい。 kakkoyakakko2.hatenablog.com

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

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

【Angular】KeyValuePipe の使い方

概要 Angular 6.1.0になりKeyValuePipeが追加されました。 KeyValuePipeのサンプルを作ってみたいと思います。 以下はAngular 6.1をピックアップした記事です。 kakkoyakakko2.hatenablog.com