Twitter のタイムラインで Remotion というのを何度も見かけたので触ってみたメモ Remotion www.remotion.dev React を使って動画を作ることができるライブラリらしい。 セットアップ FFMPEG が必要なので Homebrew で入れる。 $ brew install ffmpeg Docs …

はじめに 今回は Angular アプリケーションの単体テストフレームワークを Jasmine / Karma から Jest に変更する方法を調べてみた。 Jest にする理由は「早いらしい」「ナウい」とかそんな感じだが、使ってみたいので試してみる。 Angular アプリケーション…

読んだ本 https://www.amazon.co.jp/dp/4873118646 メモ 今まで監視というものを意識してこなかったが、アプリケーションの開発だけでなく運用をするためには監視は避けて通れないと感じて読んでみた。 監視について右も左もわからない状態で最初に「アンチ…

目標の振り返り 今年の目標は これ 社外での発表 社外での発表を目標にしていたが、まさかのコロナ禍で勉強会の参加自体が少なかった。 今年発表したのは 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…

平成 → 令和 目標の振り返り 2019 年の抱負は これ Angular を使ったアプリケーションを個人で作る 結局たいしたものを作ってないが申し訳無さ程度に ポートフォリオページみたいなの は作った 月 1 くらいで Qiita か Medium に記事を書く Qiita は Advent …

Angular CLI v8.3.0 で導入された ng deploy コマンドで Firebase への deploy を試したメモ。 automatic-deployment-with-the-cli を参考にした。 ng deploy コマンドは 3rd party library を使って様々な Hosting サービスにデプロイができる。今回は @ang…

AngularConnect の Keynote に Ivy のデバッグ機能の紹介があったので試す (Keynote の 38 分くらいから) 準備 @angular/cli@next で新規アプリケーションを作成 routing の設定と stylesheet format はなんでもよい $ npx @angular/cli@next new sample-app…

昨日 に引き続き参加してきた。2 日間通してとてもいいカンファレンスだったし、来年も参加したいと思った。 Predictive Prefetching for the Web memo Web においてパフォーマンスが求められる場合 prefetching が有効 しかし prefetching はデータ消費量(…

builderscon 2019 に参加してきた。ブログを書くまでが builderscon って言ってたのでブログを書いておく。 着いた pic.twitter.com/VVvN5hV4eZ— わたる (@kasaharu) August 30, 2019 builderscon は「知らなかった、を聞く」をテーマとしているのであえて普…

目標の振り返り 今年の抱負 はこれだった 月 1 で Qiita にアウトプット 7 件しか書けていない… 2 ヶ月に 1 回くらいが現実路線か… 月 1 でブログ更新 数だけは書いてた(はてなブログに 20、Medium に 3 技術書を年間 5 冊読む どれも中途半端になってしまっ…

問題 Storybook を起動して IE で見ようとすると Object.assign() が見つからずエラーになっていた やったこと ES2015 の仕様に対応していないので Babel を使ってトランスパイル 入れたパッケージ @babel/polyfill · Babel 設定ファイルの変更 お手元の .st…

気になったことトピック https://community.angular.jp/ ng-japan のコミュニティサイトオープン Bonfire Frontend #2 の発表の「Chrome DevToolsを使い倒せ！」がよかった https://twitter.com/uskay/status/1032596525300346881 気になった記事 フロントエ…