TypeScript
JavaScript で配列から Falsy な値をフィルターする際に Array.filter(Boolean) をよく使っていたのですが TypeScript だと型がうまく推論されなかったので TypeScript で配列から Falsy な値を取り除く方法を調べてたメモ 結論 思った以上に沼だった… TypeS…
Vite Vanilla JS で静的サイトを作るテンプレートを作成していて index.html を移動させると色々大変だったのでメモを残しておく 作ったもの デフォルトの Vite プロジェクト $ npm create vite@latest ✔ Project name: … <Project Name> ✔ Select a framework: › Vanilla </project>…
Vite + TypeScript + ESLint で作った環境で Multi-Page App の設定をしようとした際に __direname がエラーになってしまったのでメモ TypeScript Cannot find name '__dirname' Cannot find name '__dirname' のエラーが出る場合は Node の型が無いので @ty…
マークダウンテキストを HTML 表示するライブラリ試してみたのでメモ 結論 React で使うなら React-markdown がシンプルで良さそう 調査経緯 ライブラリとしては marked >>> markdown-it > remark の順で使われている remark の内部で使われている remark-pa…
今関わっているプロジェクトで vanilla-extract という CSS Modules っぽく書ける CSS in JS が使われており初めて触ってみたの感想的なメモ vanilla-extract の特徴 *.css.ts という TypeScript ファイルにオブジェクト形式で CSS を作成して CSS Modude っ…
React の勘を取り戻す素振りで tooltip コンポーネントを作ってみた。(車輪の再発明) hover で表示するシンプルな tooltip tooltip と表示する対象を同じ div で囲ってしまって親要素の hover で tooltip を表示させる // Tooltip.tsx import { FC, ReactNod…
GraphQL で A 又は B が含まれる配列を返す schema を作成したかったのでメモ A型 または Bの型を返す Union Type を作成する Union Type が含まれる配列の型を作成する 1. A型 または Bの型を返す Union Type を作成する union キーワードで定義する Union …
vite React プロジェクトで .env に書いた環境変数を使うメモ 環境変数は VITE_ prefix を使う VITE_ から始まる変数名でないと vite アプリからアクセスできない 環境変数が誤ってクライアントに漏れてしまうことを防ぐために、VITE_ から始まる変数のみが …
環境 - react@18.1.0 - vite@2.9.9 - typescript@4.6.4 React.lazy Reacy.lazy を使うと import() で読み込んだコンポーネントを通常のコンポーネントとして扱うことができる 下記の方法でコンポーネントを Dynamic import できる // component export defau…
Pagination みたいにリストの中から常に n 件の値を取得する方法を考えてみた。(車輪の再発明) 要件 リストが n 件以上ある時は 常に n 件 表示する current を中心として前後に n / 2 件づつの範囲を取る 偶数件の範囲を取る場合は後ろの方を 1 件多くする …
v3.0から搭載された Just-in-Time engine はコード中を検索してマッチしたスタイルだけを出力する賢い仕組みだけど、クラス名の途中に変数が含まれた状態だとマッチせずスタイルが出力されない
Vite で作成した React (TypeScript) のプロジェクトで MSW (Mock Service Worker) を使って開発環境で API へのリクエストにモックを返すようにしたいと思っていたのですが React からのリクエストがことごとく net::ERR_FAILED [MSW] Failed to mock a "PO…
Enum はエミューじゃない。エミューは Emu だった！
Twitter みたいに画像を投稿できるフォームでは input[type="file"] を使いますがデフォルトでは選択した画像のファイル名が表示されるだけなので、何の画像を選択したかプレビューができたほうが便利です。 割とフォーム作成の際に必要になるので思いつきで…
オブジェクトの特定のプロパティの値をアップデートをする関数を作成していました interface Todo { name: string; description: string; } const todo: Todo = { name: "", description: "" }; const update = (arg: {name?: string; description?: string}…
TypeScript 用にするには `amplify configure codegen` で設定ファイルを先に生成しておく必要があった
1. vite-plugin-svgr プラグインを使う 2. .svg の型定義ファイルを作成する
Express (TypeScript) で作った local 開発用に立てた実験用サーバーに express-session モジュールを使ってセッションを使えるようにしたのメモ 環境 express@4.18.1 graphql@16.5.0 express-graphql@0.12.0 express-session@1.17.3 typescript@4.7.2 expre…
Express (TypeScript) で作成した GraphQL サーバーがエラーを返す際に message 以外の独自フィールドを追加してみたメモ express@4.18.1 graphql@15.8.0 express-graphql@0.12.0 typescript@4.7.2 Express GraphQL サーバー Mutation で username を引数に…
GraphQL Code Generator で型を生成できるまでのメモ。千里の道も一歩から！
default import と `* as` を使った namespace import な default import とで CommonJS のモジュールのインポートのされ方が異なる。
`environment` オブジェクトでLambdaの環境変数が設定できる。dotenv を使えば .env ファイルから環境変数を埋め込むことができた
初めての AWS CDK です。AWS 関連は経験がまだ全然なくやったことのログ的なエントリーとなります。 AWS CDK って何? AWS Cloud Development Kit (AWS CDK) は、使い慣れたプログラミング言語を使用してクラウドアプリケーションリソースを定義するためのオ…
Vite の DEV モードはネイティブESMを利用しているので CommonJS の require は使えない。代わりに import や Dynamic import を使えばOK
React v18 では `ReactDOM.render` ではなく `createRoot` を使って root オブジェクトを作成する ``` import { createRoot } from 'react-dom/client'; const root = createRoot(document.getElementById('app')!); root.render(); ```
props を受け取る子コンポーネントは React.memo した上で props で渡される関数やオブジェクトが useCallback, useMemo でメモ化されてないと親コンポーネントの再描画時に再描画される。 依存関係がないコンポーネントはラッパーコンポーネントを作り chil…
React v18 では暗黙的に props に含まれていた `children` は、使用するなら明示的に props の型を定義する必要がある。`React.VFC` は `React.FC` と同じになったので非推奨になった。
前回までのあらすじ。Vite で React (TypeScript) のプロジェクトを作ってパスエイリアスの設定をいい感じにしました 今回はいつもの ESLint と Prettier を導入します。結論から言えば VIte だからという事は特になく、`create-react-app` で作成したプロジ…
`vite-tsconfig-paths` プラグインを使うのが簡単でオススメ！ `tsconfig.json` にパスエイリアスの設定を書いて、`vite.config.ts` にはプラグインを読み込ませるだけにできるのでパスエイリアスの設定が一元化できます。
`npm create vite@latest ` コマンドを実行すれば CLI で React + TypeScript なプロジェクトがサクッと作れてすごく凄い!!
