コンパイラかく語りき

import { Fun } from 'programming'

flutter アプリで表示するウェブビューを React.js/Next.js で作る(ウェブビュー判定、イベントハンドラ呼び出し)

概要 ネイティブアプリを開発する際に一部のページをウェブで表示する、という要件はあると思います。(いわゆるウェブビュー) その際に、ウェブビューを React.js と Next.js で作成する方法です。 ※ちなみに筆者はネイティブアプリ開発の経験はありません…

【VSCode】最近使用した項目を開く(File: Open Recent)選択時に、新しいウィンドウで開くようにする settings.json 設定

VSCode には 最近使用した項目を開く(File: Open Recent) というコマンドがあります。 選択した項目を、VSCode で開くことができます。 筆者は Github のレポジトリごとに VSCode のウィンドウを開くようにしています。(例: UI 開発のコードベースと API …

Node.js REPL で ... more items と省略された内容を全て出力表示する

> console.log(new Array(120).fill('foo')) // 120個の要素 'foo' を持つ配列を表示 [ 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'fo…

Node.js v18 にアップグレードしたら storybook のビルドが通らない問題への対応(error:0308010C:digital envelope routines::unsupported)

プロジェクトの Node.js v18 にアップグレードした。 すると、storybook のビルドが通らなくなってしまった。 $ npm run storybook 「wdm」: wait until bundle finished: node:internal/crypto/hash:71 this[kHandle] = new _Hash(algorithm, xofLen); ^ Erro…

Next.js のビルド時に SyntaxError: Unexpected token < in JSON が出てしまう問題への対処法(package-lock.json が原因の場合)

問題 Next.js でビルドする時に、エラーが発生した。 $ npm run build > project-name@1.0.0 build > next build info - Loaded env from /Users/me/project-name/.env.local info - Linting and checking validity of types SyntaxError: Unexpected token …

【Recharts】スタイル指定に CSS Custom Properties を利用する方法

React でのアプリケーション開発にて、Recharts はメジャーなグラフライブラリの1つです。 そんな Recharts では、 style という props からスタイル指定が可能です。以下は、Y軸へのスタイル指定の例。 <YAxis // ...ここにその他の props たち style={{ fontSize: '12px', fontWeight: 300, fontFamily: 'oswald' }} /> CSS Custom Properties を利用したバージョンが以下</yaxis>…

【tsparticles】canvas 要素への z-index 指定方法や、前面に出過ぎる問題への対処法

問題 tsparticles を使うと、サイト内に動的な演出ができて便利です。 github.com しかし直近リリースされた v2.4.0 に対応したところ、tsparticles の canvas が前面に出てきてしまいました…。 github.com 原因 原因は、canvas の inline style を消すのが…

【tsParticles】preset links の線の色を変更する

tsParticles を利用すると、ウェブページ内に動的な演出を追加できます。 github.com 今回、 tsParticles の links というプリセットを設定しました。 github.com ところが、ドキュメントを見ても線の色を変える方法が分からない…。 ソースコードを見ていた…

Next.js v13 で導入された @next/font を使って、ウェブフォント読み込みを最適化する

概要 Next.js v13 がリリースされました。 nextjs.org 主な変更点の1つが @next/font の追加。@next/font には以下のような特徴があります。 Automatically optimizes your fonts, including custom fonts(カスタムフォントを含めたフォントの最適化) Remo…

【React/Next.js】SSG/SSR 環境で React Portal を利用する方法

React Portal を使うと、コンポーネント構造の制約を受けずに、アプリケーション内の任意の箇所に DOM を挿入することができます。 モーダルの実装などで役に立つかと思います。 ja.reactjs.org そんな React Portal ですが、Next.js の SSR/SSG を利用した…

【CSS】display: flex 指定の子要素の高さが伸びてしまう問題への解決策

解説 例えば、以下のような構造。 div の中に2つの要素があり、display: flex で横並びにしている。 ここで、右側の要素は height: 100px を指定している。 すると、左側の要素も height: 100px となってしまう。 左側の要素の height を保つ 方法。 解決策 …

Next/Image を使った png 画像が storybook 上で表示されない問題への対処法

Next.js の Next/Image を利用しているコンポーネントを storybook で表示しようとしたところ、 png 画像が表示されませんでした。(以下のような状態。 Devtools の Network タブで見ても、404 が返ってきていました。 なぜかsvg 画像は問題なく表示されて…

【Angular】Service のメソッドを Template(html) から直接呼ぶ

問題 Angular でのアプリケーション開発では、Service を利用してロジックを分離することがあるかと思います。 Template から Service のメソッドを呼び出すには、普通は Component を経由するかと思います。 @Injectable() export class FooService { doSom…

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 が利用で…