今まで、「食べたリンゴの割合をグラフ化するアプリ」をGoogle Cloud Runで動かしてきました。 Python + Django + Highcharts + Coogle Cloud Cloud Run + Cloud Storage + Litestream で食べたリンゴの割合をグラフ化してみた - メモ的な思考的な 運用する…

去年、Blueskyのアカウントを作りました。今のところブログの更新通知しかしてませんが。。。 https://bsky.app/profile/thinkami.bsky.social そんな中、Blueskyに自分が投稿したものを取得したくなったことから、ためしてみたときのメモを残します。 目次 …

前回の記事では Drizzle ORM のマイグレーション機能を中心に色々試していました。 TypeScript + Bun + SQLite + Drizzle ORM な環境にて、Drizzle Kit の各コマンドを試してみた - メモ的な思考的な 今回は SQLite に対して、SQL の DDL を実行したり、初期…

TypeScript + Bun な環境にて、SQLiteを操作したいことがありました。 Bunにはネイティブの SQLite driver があることから、そのまま bun:sqlite を使うこともできそうでした。 SQLite – API | Bun Docs ただ、日頃ORMでDBまわりを書いていることから、ORM的…

最近、状態管理ライブラリ TanStack Query を使う機会がありました。 TanStack Query は公式ドキュメントが充実しています。 TanStack Query | React Query, Solid Query, Svelte Query, Vue Query TanStack/query: Powerful asynchronous state management…

関数 sumItem があり、2つの引数の型 Item があるとします。 export const sumItem = (a: Item, b: Item) => a.unitPrice + b.unitPrice Itemの型は export type Item = { name: string, description: string, contents: string, unitPrice: number, note: s…

ここしばらく仕事でTypeScriptも書いているものの、まだ雰囲気で書いている感がありました。 そのため、腰を据えて学ぼうと考え、手を動かしながら理解できるチュートリアル的な書籍を探したところ、「手を動かしながら学ぶTypeScript」に出会いました。 手…

React Hook Form 7系とMUI 5系を組み合わせてフォームを作る時に、色々悩んだことがあったのでメモを残します。 目次 環境 controlled component と uncontrolled component について Reactのフォームでは MUIでは React Hook Formでは 実装 フォームを作る …

React Hook Form に MUI の DateTime Picker を組み込んだところ、いくつか悩んだことがあったため、メモを残します。 目次 環境 作るもの 実装の流れ MUI で Modal を作る React Hook Form を使ってフォームを作る MUI DateTime Picker と組み合わせる セッ…

前回、MUI の Breadcrumbs のサンプルコードが React Router v6 では動かなかったため、React + React Router v6 + use-react-router-breadcrumbs を使って、パンくずリストを作ってみました。 React + React Router v6 + use-react-router-breadcrumbs でパ…

以前、 MUI DataGrid の Custom Operator を作りました。 React + MUI のDataGridにて、ある列が複数の日付を持つデータに対し、valueFormatter・sortComparator・filterModelを使って表示・ソート・フィルタしてみた - メモ的な思考的な この時に作成した C…

React の MUI (旧 Material UI) では、コンポーネントとして DataGrid が提供されていることから、グリッド表示したい時に便利です。 React Data Grid component - MUI そんな中 const rows = [ { id: 1, name: 'シナノドルチェ', purchaseDate: [new Date(2…

Play Framework アプリに React を組み込んでみる機会がありました。 ただ、Reactを使って SPA にするのではなく、まずは ルーティングは Play Framework (バックエンド)が担当 Play Framework の View上で React が動く Scriptタグでコンパイルした React …

前回、Next.js と express-openid-connect を使った Relying Party を書きました。 Next.js と express-openid-connect を使って、認証が必要/不要な各ページを持つ Relying Party を作ってみた - メモ的な思考的な 上記の記事では JavaScript で実装してい…

先日、大岡由佳さんの「りあクト！ 第3.1版 (2020年12月26日 初版第1刷発行)」を読みました。書籍では理由や経緯などが書かれており、とてもためになりました。ありがとうございました。 りあクト！ TypeScriptで始めるつらくないReact開発 第3.1版【Ⅰ. 言語…