目標の振り返り 今年の目標は これ 社外での発表 社外での発表を目標にしていたが、まさかのコロナ禍で勉強会の参加自体が少なかった。 今年発表したのは GDG DevFest 2020 / mini ng-japan 2020 の 1 回だけだが、大きめのイベントで発表できたのはよかった…

はじめに この記事は Classi Advent Calendar 2020 の 10 日目の記事です。 昨日はそーだいさんが書いてくれました。 soudai.hatenablog.com 今回は Angular アプリケーションの E2E テストフレームワークを Cypress に変更する方法について紹介します。 Ang…

はじめに この記事は Angular Advent Calendar 2020 の 1 日目の記事です。 今日は Angular CLI の v10 でオプションとして追加され v11 でプロンプトにも表示されるようになった strict mode について紹介します。 angular.jp 公式ドキュメントを見ると str…

Angular v11 で karma-coverage-istanbul-reporter が deprecated になってるんだった…— わたる (@kasaharu) 2020年11月15日 この話があったので実際に移行してみた。 事前準備 v10 系でプロジェクトを作成 $ npx @angular/cli@10 new karma-reporter-update…

10/17 に GDG DevFest 2020-Track3 / mini ng-japan 2020 があった。 当日は発表前でそわそわしたり、発表終わって疲れてたりでところどころ見れてなかったのでアーカイブを見直した。 改めて見ると結構長いから 1.25 倍で見るのがよさそう。 Youtube の配信…

全部公式ドキュメントに書いてあるが、章立ても多くてまぁまぁな分量だったのでまとめた。 Angular の依存性の注入 サービス(@Injectable() デコレータが付与された class)は injector の範囲内でシングルトンインスタンスを提供する injector の範囲内なの…

NgRx の ComponentStore を試したのでメモ https://ngrx.io/guide/component-store サンプルはこちら https://stackblitz.com/edit/angular-ngrx-component-store @ngrx/component-store の特徴 @ngrx/store と違い component などの local な状態管理するの…

今回のサンプルアプリ $ npx @angular/cli new ng-sample --packageManager yarn $ yarn ng version yarn run v1.22.4 $ ng version _ _ ____ _ ___ / \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _| / △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | | / _…

いつも ng new 一発でテスト環境まで準備済みだが、ふとユニットテスト環境を作るのにどういうパッケージとどういう設定が必要かきになったので試してみた記録 テスト環境がない状態で Angular アプリケーションを用意 ng new のオプションにめちゃくちゃ都…

Deno 1.0.0 が出たのでお試し deno.land インストール 日頃から asdf を使っているので plugin を追加してインストール $ asdf plugin-add deno https://github.com/asdf-community/asdf-deno.git $ asdf install deno 1.0.0 $ asdf global deno 1.0.0 $ den…

@ngrx/component が試せるようになっていたので使ってみた サンプルコード github.com @ngrx/component とは ドキュメントを見ると zone less を実現するためのヘルパーで Angular アプリケーションをより Reactive に書けるようになると書いてある 試せる A…

Angular Library を Secondary Entry Points 構成にするための手順をメモ 試したリポジトリ GitHub - kasaharu/try-angular-lib-secondary-entrypoints 新規 application を作成 Angular CLI を使ってアプリケーションを作成 Angular CLI : v9.1.0 $ npx @an…

ComponentHarness を使って Angular アプリケーションの単体テストを書いてみた 試したコード github.com ComponentHarness とは angular/components v9.0.0 に追加された testing tool テストコードを書く時の役割が ComponentHarness を作る人と Component…

yj-meetup.connpass.com 今日のテーマは「テストと自動化」 タイムテーブルはこんな感じだった 中期プロジェクトでe2eテストを導入してみて感じたこと Vueのテスト手法とVRTのすすめ Yahoo! JAPAN トップページ リニューアルとテストについて 中期プロジェク…

Angular のデータバインディングの種類に「属性バインディング」と「プロパティバインディング」があるが明確に違いがわかっていなかったのでメモ 属性バインディングとプロパティバインディングの違い そもそも HTML 属性か DOM プロパティかの違いがある H…

構造ディレクティブとは angular.jp ドキュメントを見ると以下のように定義されている。 構造ディレクティブは HTML のレイアウトを担当します。 それらは、通常は要素を追加、削除、または操作することによって、 DOM の 構造 を構築または再構成します。 …

読んだ本 https://www.amazon.co.jp/dp/4873118026 感想 チームには 3 つのフェーズがあると書いてありそれぞれ「サバイバルフェーズ」「学習フェーズ」「自己組織化フェーズ」と呼んでいた。 そもそもチームのフェーズについて考えたことがなかったので目か…

既存の Angular アプリに Scully を入れてみたのでそのメモ github.com Scully とは Angular 用の静的サイトジェネレーター(SSG) 各ページを pre rendering する Node.js v10.x 以上、Angular v9.x 以上が必要(今だと v9 RC を使う必要がある) 導入 インスト…

Angular で作っているアプリの CI を CircleCI から GitHub Actions に移行したのでそのメモ。 CircleCI でやっていたこと npm パッケージのインストール インストール後の node_moduels をキャッシュ build unit test テスト結果は Artifacts に保存 GitHub…