環境 Node.js v22 vite 5.3 viteでビルドされるプロジェクト環境が前提となる。 やりたいこと どっちお得くんというサイトをスマホから使う際、 ネイティブアプリっぽくさせたかったのでPWAを導入することにした。 今回はvite環境なら一発でPWA化できるとい…

mdxで特定のコンポーネント以外は消すスクリプト import { unified } from 'unified'; import remarkParse from 'remark-parse'; import remarkMdx from 'remark-mdx'; import remarkStringify from 'remark-stringify'; import { visit, SKIP } from 'unist…

やりたいこと 例えば以下のような配列があったとする。 const fruits = [ "りんご", "バナナ", "オレンジ", "いちご", "ぶどう", "メロン", "パイナップル", "マンゴー", "スイカ", "さくらんぼ" ]; この中から重複せずにランダムに３つ取得したい。 コード …

環境 Nodejs v22 やりたいこと 複数行の文字列を変数として持っておきたいので、ここではテンプレートリテラルを使う。テンプレートリテラルは、JavaScript（およびTypeScript）の便利な機能で、複数行の文字列を簡潔に扱える。この機能の主なメリットは以下…

環境 TypeScript 問題 TSで同一ディレクトリに同じ変数を宣言できない 例えば ├── hoge.ts ├── piyo.ts で両方で const hoge = 1; とすると Cannot redeclare block-scoped variable 'hoge'.ts(2451) 'hoge' was also declared here. const hoge: any[] とエ…

環境 TypeScript コード Javascriptにネイティブの実装はないので自分で実装する必要がある // 切り捨て export const floorDecimal = (value: number, n: number): number => { return Math.floor(value * Math.pow(10, n)) / Math.pow(10, n); }; // 切り…

環境 @typescript-eslint/eslint-plugin v5.56 typescript v5 概要 今日は、Typescriptにおいてeslintのチェックがよく使われるため、有用なEslintのルールについて知っておくことが重要なことであると言えます。特に 「recommended-requiring-type-checking…

やりたいこと JSONとかのJavaScriptオブジェクトの配列があったとき、特定のキーとかでグルーピングしたい 例えば const list = [ { "name": "taro", "role": "admin" }, { "name": "jiro", "role": "staff" }, { "name": "hanako", "role": "admin" } ]; っ…

環境 Playwright 1.25 やりたいこと ページにある要素のinnerTextを取得したい コード ポイントは el: HTMLElement していること。これがないと型がanyになってしまいエラーになる。 import { chromium } from 'playwright'; (async () => { const browser =…

環境 TypeScript 4 問題 例えば以下のようなサンプルコードがあったとする function receivedStringValue() : string { return 'apple'; } const fruits = { apple: 'りんご', banana: 'バナナ', melon: 'メロン' }; const key: string = receivedStringValu…