コンパイラかく語りき

import { Fun } from 'programming'

Jest の toHaveBeenCalledWith の中身に snapshot を使いたい場合

Jest でモック関数を作成し、呼び出し内容をテストしたい場合があると思います。 そのときに、toHaveBeenCalledWith を使えば、呼び出し時の引数もテストできます。 しかし、 toHaveBeenCalledWith の中身が複雑・膨大になるような場合は、snapshot を利用し…

GithubActions で利用する Node.js のバージョンを動的化(.nvmrc ファイルを例に)

GithubActions で Node.js を利用する際に、バージョン情報をベタ書きしていることはあると思う。 それを動的化する方法。 例えば、 nvm を利用していて .nvmrc ファイルが存在する場合、node-version-file: '.nvmrc' を指定すれば OK。 jobs: build: steps:…

【多言語対応・SEO】Next.js のための hreflang 設定

概要 Next.js は多言語化機能を提供している。 Advanced Features: Internationalized Routing | Next.js 例えば、 <html> タグの lang 属性は自動で書き換えてくれる。 しかし、hreflang の設定は、必要とあらば自前で実装する必要があった。 hreflang とは そも</html>…

【React.js/JavaScript】テキストエリアの文末にフォーカスする(autofocus on textarea end)

概要 HTML の <textarea /> には autofocus という属性があり、これを指定するだけでフォーカスが効きます。 textarea - HTML: HyperText Markup Language | MDN ただし、初期状態でテキストが入力されている場合、文頭にカーソルが置かれてしまいます。 そんな時は、set</textarea>…

Angular v12 の HMR が LazyLoad に非対応で、ページ全体が読み込まれる件

Angular v11 から HMR(Hot Module Replacement) が利用できるようになった。 Version 11 of Angular Now Available | by Mark Techson | Angular Blog ng serve --hmr とフラッグをつけるだけなので、設定が非常に簡単。 環境ごとに区別したい場合は、npm …

【React Router】ルーティング遷移前・ページ離脱前に確認モーダルをカスタマイズして表示(Prompt)

概要 React アプリを開発しているときに、ルーティング遷移前に確認モーダルを出したい時がある。 「このページを離脱してもいいですか?」のような。 React Router の Prompt を利用すると、簡単に確認モーダルを実装できる。 React Router: Declarative Ro…

【Angular】 TSLint から ESLint への移行

概要 Angular を v6 の頃から利用しており、ずっと TSLint を利用していた。 しかし、TSLint が deprecated になってしまったので、ESLint に移行した。 やったこと angular-eslint による移行 以下の記事を読む。 Angular: ESLintサポートの現状 2020 Autum…

【パフォーマンス計測】severless framework を利用して、Lighthouse 計測結果の Datadog への送信を定期実行する(TypeScript 対応)

概要 Lighthouse でパフォーマンス計測 計測値を Datadog に送信 以上の2つを severless framework 上で定期実行する仕組みを構築していきます。またコードは TypeScript で書けるようにします。 パッケージ バージョン 本記事の執筆時点での serverless fra…

【Angular/rxjs】shareReplay が unsubscribe 後も emit し続けメモリリークになりうる問題への対処法

概要 shareReplay を使うと複数の subscribe を一本化できて便利です。 stream$.pipe(shareReplay()) パフォーマンス改善の対処法としてよくやります。(share だと初期値の null が流れてきてしまうので、個人的には shareReplay の方が好みです。 参考: an…

【echarts】複数線形チャートにて MarkArea 背景色の opacity が重なる問題(multiple markarea opacity)

問題 echarts では複数線形チャートが作れる。 参考: https://echarts.apache.org/examples/en/editor.html?c=line-stack ここで、MarkArea を利用して部分的な背景色を適用したい場合がある。以下の画像で言うところの、薄青色の部分。 参考: https://echar…

【TypeScript】localStorage.setItem の値に number を指定したい

本記事の執筆時点での TypeScript のバージョンは 4.1.5。 localStorage.setItem の型定義を見てみると、 setItem(key: string, value: string): void; となっている。 なので、以下のように number 型を渡すと型エラーとなる。 localStorage.setItem('ここ…

【Angular】バージョン9からバージョン10にアップデートした

概要 Angular のバージョンを上げるので、その記録を書く。 基本的には、 https://update.angular.io/ に従うだけ。 ただ、関連するパッケージのアップデートや破壊的変更に伴うコード修正は必要だと思われる。 使用しているライブラリは「Angular CDK、Nebu…

【JavaScript】Error 内容を JSON.stringify する(原因不明の空オブジェクト文字列の正体?)

概要 Error オブジェクト(のインスタンス)を JSON.stringify すると、空オブジェクトの文字列になる。 JSON.stringify(new Error('this is erorr')) // '{}' ログ監視・エラー監視などでありがち。 原因 空オブジェクトの文字列になってしまう理由としては…

【JavaScript】文字列から px 以外の数値部分だけを取り出す

なにがしかの方法で要素のスタイルを取得したはいいものの、px のついた文字列だった場合の対処。 数値部分だけを取り出すには、 parseInt が使える。 const txt = '120px' parseInt(txt, 10) // 120 もちろん、 em でも rem でも % でも同じことができる。p…

【Angular.js】ng-tempate へ複数の変数を渡す方法

いつも忘れるこの記法。 Angular.js で ng-template に複数の変数を渡したい場合の書き方。 <ng-container *ngTemplateOutlet="template; context:{ text: 'foo', item: 'bar' }"></ng-container> <ng-template #template let-text="text" let-item="item"></ng-template> ``` 参照: [Angular - NgTemplateOutlet](https://angular.io/api/common/NgTemplate…

【JavaScript】DataDog で sourcemap(ソースマップ)対応する方法

概要 DataDog で sourcemap を利用して、コンパイル前のファイルを参照させる方法を調べてみた。 DataDog の sourcemap 対応状況 DataDog は sourcemap に対応している。 参照: Make Sense of Application Issues With Datadog Error Tracking | Datadog dat…

【パフォーマンス改善】ngx-echarts でカスタムビルドを利用し、バンドルサイズを削減する方法

追記: 2022/04/21 echarts が v5.0.1 時点で TreeShaking に対応したので、カスタムビルド設定は不要化したようです。 参照: https://github.com/xieziyu/ngx-echarts#treeshaking-custom-build 概要 Angular 内で echarts を使うには ngx-echarts が利用で…

「はじめて学ぶ ソフトウェアのテスト技法」を読んだ

はじめて学ぶソフトウェアのテスト技法作者:リー コープランド発売日: 2013/12/18メディア: Kindle版 「はじめて学ぶ ソフトウェアのテスト技法」を読んだので、所感と引用を書く。 所感 筆者も認めるとおり、本書で扱うのは「知識」と「理解」について。抽…

【CSS】横スクロールし切った時に勢い余ってページバックするのを防ぐ

状況 以下のようなスタイルを指定しているとする。 .element { width: 300px; overflow-x: scroll; } .element の内側の要素がはみ出した場合、横スクロールで表示される。この時、モバイルデバイスやトラックパッドを使用している場合、意図せずページ移動…

【抜粋】Angular アプリケーションプログラミングを読んだ

Angularアプリケーションプログラミング作者:山田 祥寛発売日: 2017/08/04メディア: 大型本 Angular アプリケーションプログラミングを読んだ 「Angular アプリケーションプログラミング」を読みながら書いた抜粋。 第1章 イントロダクション Angularにおけ…

【要約・抜粋】レガシーコードからの脱却を読んだ

「レガシーコードからの脱却」を読んだので、その抜粋と要約。 はじめに 第一部 レガシーコード危機 1章 何かが間違っている 2章 CHAOSレポート再考 3章 賢人による新しいアイデア 第二部 ソフトウェアの寿命を伸ばし、価値を高める9つのプラクティス 4章 9…

Angular サービスクラスのユニットテスト(グローバルモック考慮)

概要 Angular のサービスクラスのユニットテストに関して調べた。かつ、グローバルでモックを定義する方法も考慮。 環境 MacOS Angular.js v8.x.x 情報収集 Angular の公式ドキュメントにテストに関するページがある。 Testing https://angular.io/guide/tes…

【Python】pip install --upgrade pip が成功しない場合の対処法

小ネタです。 古い pip を使っていました pip を使ってパッケージをインストールしたところ、以下のようなワーニングが。 You are using pip version 10.0.0, however version 19.3.1 is available. You should consider upgrading via the 'pip install --u…

【TypeScript】The left -hand and right hand side of an arithmetic operation must be of type 'any', 'number' or an enum type の対処法

タイトルのようなエラーが出た時の対応方法。 自分の場合は、Date 型同士を比較しようとして、このエラーに遭遇しました。 指示通りに number 化することで解決。 const a = "1970/01/01" const b = "1970/01/02" // 誤) const result = new Date(a) - new …

【Mongoose】空配列を持ったドキュメントを取得する

Mongoose のドキュメント取得に関して。空配列を持ったドキュメントを取得する方法。 例えば、以下のようなデータから id: 2 のデータのみ取得する。 { id: 1, items: ['foo'] } { id: 2, items: [] } これらのデータを Data スキーマとすると、以下のように…

【Mongoose】ネストされた ref を populate する

概要 Mongoose には ref という機能がありまして、他のコレクションのドキュメントへの参照 ID を持つことができます。 ref は populate を使って解決します。 この記事では、ネストされた ref を解決する方法について書きます。 参考: Populate - mongoosej…

【Vue.js】メソッドを子コンポーネントから呼ぶ

親コンポーネントで定義したメソッドを、子コンポーネントから呼ぶ方法について。 Props として渡す まず、 props として渡す方法。React エンジニアにとっては馴染みのあるやり方。 <template> <Child :function="someFunction" /> </template> export default { methods: { someFunction() { ... } } } Events を経…

【Vue.js】Nuxt.js の AsyncData 関数にて、リダイレクト等のエラーハンドルを行う

概要 Nuxt.js アプリケーションにおいてサーバサイドでデータフェッチをする場合、 AsyncData 関数を使う方は多いと思います。 この記事では、「もしデータフェッチに失敗したら XX する」のような処理を書く方法について。 Nuxt.js v2.9.0 時点での情報にな…

【Mongo】配列要素を populate/lookup した後に sort する

概要 Mongo/Mongoose で配列要素を populate した後に、要素のフィールドでソートする方法について。 コードサンプルは JavaScript で書いています。 サンプル 以下のようなデータを想定します。 // user { id: "foo" comments: ["1", "2"] // comment コレ…

Next.js v9 での TypeScript プロジェクト作成

概要 Next.js v9 で TypeScript プロジェクトを作成する方法について。 環境 このブログ記事の内容は、以下の環境をベースにしています。 OS: MacOS Mojave 10.14.6 Node.js: v10.15.0 next.js: v9.0.5 方法 Next.js アプリケーションの作成 まずは普通に Ne…