とんかつ時々あんどーなつ

〜たとえ低空でも飛行していられるように〜

Angular アプリケーションのユニットテスト環境をゼロから作る

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

Hello Deno

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 を使って zone-less Angular を試す

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

Angular Library を Secondary Entry Points 構成にする

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

ComponentHarness を使って Angular アプリケーションの単体テストを書く

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

Bonfire Frontend #5 に行ってきた

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

属性バインディングとプロパティバインディングの違い

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

Angular の「構造ディレクティブを書く」を読む

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

読了 : エラスティックリーダーシップ

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

既存の Angular アプリに Scully を入れてみた

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

CircleCI から GitHub Actions への移行

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

2019 年振り返り & 2020 年の抱負

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

Angular アプリケーションを Firebase に一瞬でデプロイする

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

Angular 9.0.0-next.10 で Ivy のデバッグ機能を試す

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

builderscon 2019 - 2 日目に参加してきた話

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

builderscon 2019 - 1 日目に参加してきた話

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

2018 年振り返り & 2019 年の抱負

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

Storybook for Angular を IE でも確認できるようにする

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

週刊フロントエンド vol.8

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

TypeScript 2.8 系以上で Angular AOT Compiler が失敗する

Angular CLI を v6.0.x 系で TypeScript を v2.8 以上にしてビルドを実行すると以下のエラーが出て、失敗する ERROR in The Angular Compiler requires TypeScript >=2.7.2 and <2.8.0 but 2.9.1 was found instead. 現時点では Angular AOT Compiler v6.0.x…

CircleCI Local CLI を試す

CircleCI の設定をしているときに config の validation check をローカルでやりたくなった 調べたところ Using the CircleCI Local CLI - CircleCI というものがあったで導入する インストール とりあえず、記事に書いてある通りインストール(Mac を使って…

Bonfire Frontend #2 メモ

行ってきた yj-meetup.connpass.com Flummox から Redux へリプレースした話 Flummox は知らなかった 選択肢には Fluxible もあったらしい → これも知らなかった コンポーネントは Atomic Design の思想でやっているようだが 5 層もないらしい FOLIOに画像回…

週刊フロントエンド vol.7

気になったことトピック Chrome 68 : HTTP のサイトに Not Secure 表示がされるようになった 気になった記事 Angularは包括的なフレームワークだから企業に支持される。UIコンポーネントで知られるインフラジスティックス開発ツール担当VPに聞いた Element.t…

週刊フロントエンド vol.6

気になったことトピック Puppeteer が 1.6 になった ESLint でセキュリティインシデントが発生(対策済み) https://qiita.com/mysticatea/items/0141657e4478d9cf4614 気になった記事 フロントエンドの「想定外」に対応する考え方とTipsいくつか SHOWROOMの新…

週刊フロントエンド vol.5

気になったことトピック Renovate Dependabot のような GitHub apps があるっぽい(未検証) 気になった記事 大規模Angular in 現場 Automated Dependency Updates with Renovate Renovate を知ったので試したい エンジニアになる覚悟 フロントエンドエンジニ…

週刊フロントエンド vol.4

前回から 10 以上あいてしまった (週刊とは何なのか) 気になったことトピック Vue Native collect.js また新しいコレクション操作のライブラリが… サーバーサイドに Laravel 使ってると相性がいいらしい? akita Angular 用のステート管理ライブラリ Flux っ…

週刊フロントエンド vol.3

気になったことトピック agreed リクルートテクノロジーズが開発している JSON モックサーバー Storybook の Angular CLI 対応がマージされたっぽい https://github.com/storybooks/storybook/pull/3491 MobX 5.0.0 がリリース https://github.com/mobxjs/mo…

週刊フロントエンド vol.2

気になったことトピック Webdash 使用している Package.json の一覧や build 成果物のファイルサイズなどを表示するダッシュボードが見れる 静的ファイルが出力できるわけではないので少し微妙… react-sketchapp React のコードから Sketch のファイルを生成…

週刊フロントエンド vol.1

なんとなく思いつきで今週目についたフロントエンドネタをメモっていく (来週も続くかはわからない) 気になったことトピック Nest サーバーサイドアプリケーションのための Node.js フレームワーク Next, Nuxt と同じノリだと思っている Angular の影響を強…

iTerm から Hyper に移行

Hyper https://hyper.is/ Next.js や Nuxt.js の ZEIT が出しているターミナル 困ったこと Vim の NERDTree を使ってツリーを表示しているが一部文字化けしてディレクトリが開けない .vimrc に set encoding=utf-8 を追記すると直る https://github.com/zeit…