UGA Boxxx

つぶやきの延長のつもりで、知ったこと思ったこと書いてます

【Zod】オブジェクトのKeyをある型の変数として扱いたい

Zodで オブジェクトのKeyをある型の変数として扱いたい 結論、その場合はz.recordを使う zod.dev キーの型を気にせずオブジェクトの値だけを検証するだけなら以下で良い const NumberCache = z.record(z.number()); type NumberCache = z.infer<typeof NumberCache>; キーと値の</typeof>…

【LLM】ChatGPTやGeminiで旅のしおりを作ってもらう話

ChatGPTやGeminiを使った、旅行のしおりを作る話が面白かったのでメモ 深津さんのポストを参考に…ChatGPTではなく、Geminiに旅行のしおりわたして「経路のつなぎや、スケジュール、手配に過不足や矛盾がないか確認してみて、を実行した結果を共有かなりザッ…

【システム開発】OOPの継承がダメな理由の記事

DMMF本を読んで、OOPの特徴の一つ「継承」は現実のドメインを反映したものではなく、プログラミング都合の話であるという記述があった 確かにとは思ったものの、具体的にどのあたりがダメなのかは言語化できていなかった むしろ継承を使って整理しましょうと…

【Storybook】Storybook8のベータ版

Storybook8のベータ版のアナウンスがでた storybook.js.org 更新内容 大幅なパフォーマンスの向上 ビジュアルテストワークフロー 洗練されたモバイル UI テストユーティリティの改善 ⚛️ React Server Componentのサポート React の依存関係の削除 エコ…

【Miro】Miroの活用ガイドでフレームワークのテンプレートを選ぶのが良さそう

システム開発する上で、カスタマージャーニーマッピングとか、ユーザーストーリーマッピングとか数々のフレームワークが存在するが、何もない状態から作るのは大変だと感じていた 特に本やブログに書かれているやり方を真似てやってみるが、いちいちフレーム…

【システム開発】開発に役立ちそうな原則

『プリンシプル オブ プログラミング』という本の101のプログラミング原則をまとめた記事が面白かった zenn.dev 記事にある『プリンシプル オブ プログラミング』という本は今度読んでみる プリンシプル オブ プログラミング 3年目までに身につけたい 一生役…

【Test】web.devのWebのテスト手法に関する記事

Tes

web.devがWebのテスト手法について包括的に学ぶことができる Learn Test のコンテンツを公開したとのことで覗いてみた web.dev このコースで学習する内容は以下 テストの基礎 自動テストと手動テスト テストを実施する場所と方法 ベスト プラクティス 何をテ…

【Remix】Remix SPAモード

Remix SPAモードについて調べた remix.run Remix については以前調べていた uga-box.hatenablog.com Remix SPAモード SPAだけをやりたいとき、Next.jsやRemix自体だと SSRの仕組みも含むのでオーバースペック になってしまう SPAだけならViteが良さそうであ…

【SEO】Googleのフィールドデータとラボデータ

SEO

Vercel の Core Web Vitals が SEO に与える影響についての記事を読んだのでまとめ vercel.com サイトのランキングの基本 Google 検索におけるサイトのランキングは、Google のページエクスペリエンスランキングシステムの影響を受ける ページエクスペリエン…

【Valibot】zod to valibot の記事

Zodに代わるスキーマ検証ライブラリを知ったので調べた valibot.dev 以下の zod to valibot の記事が参考になった mwskwong.com 特徴まとめ Valibot はZodと同じスキーマ検証ライブラリ Valibot は「バンドルサイズが小さい Zod の代替品」として知られてい…

【フロントエンド開発】2023年に追加されたもの

フロントエンドの技術周りに関する2023年の振り返りと2024年について書かれたスライドを読んだ speakerdeck.com 最初の方の2023年で追加された技術で知らなかったことのメモ Scroll-driven Animations CSSだけでスクロールアニメーションが作れる!? 新技術…

【システム開発】(記事感想)バックエンドとフロントエンドを分ける利点

バックエンドとフロントエンドを分ける利点について書かれた記事 www.hexabase.com 見出しをまとめると以下 通信量の軽減 責任範囲の分離 開発体制の分離 リリース・デプロイの分離 テストの容易性 高い再利用性 変更が容易 バックエンドを開発しない選択肢…

【Biome】eslintとpretteirの代わりになるライブラリ

eslintとprettierを両方入れているが、それぞれ独立したプラグインで設定がややこしいと感じていた そんな時、それを解決するBiomeというライブラリを知った biomejs.dev こちらの記事が参考になった zenn.dev 特徴としては 高速なformatterであり、Prettier…

【Architecture】Clean Architectureの話

クリーンアーキテクチャについての説明で「世界一わかりやすい」とあったので読んだら確かにわかりやすかったのでメモ www.nuits.jp クリーンアーキテクチャへの見解は以前書いた気がするが、お気持ち程度のことしか書けなかったので、今回の記事を読んでか…

【DMMF】モデルを実装する

『Domain Modeling Made Functional』を読んで、モデルを実装に関する個人的メモ Domain Modeling Made Functional: Tackle Software Complexity with Domain-Driven Design and F# (English Edition)作者:Wlaschin, ScottPragmatic BookshelfAmazon 関数に…

【DMMF】ドメインのモデリングについて

『Domain Modeling Made Functional』を読んで、ドメインのモデリングに関するメモ Domain Modeling Made Functional: Tackle Software Complexity with Domain-Driven Design and F# (English Edition)作者:Wlaschin, ScottPragmatic BookshelfAmazon 関数…

【技術本】Domain Modeling Made Functional(DMMF)感想

関数型DDDの実践本として話題の『Domain Modeling Made Functional』を読んだので 簡単な感想を書いておく Domain Modeling Made Functional: Tackle Software Complexity with Domain-Driven Design and F# (English Edition)作者:Wlaschin, ScottPragmatic…

【技術本】Domain Modeling Made Functional(DMMF)から学ぶDDDのエッセンス

関数型DDDの実践本として話題の『Domain Modeling Made Functional』を読んで個人的にメモったDDDのエッセンス Domain Modeling Made Functional: Tackle Software Complexity with Domain-Driven Design and F# (English Edition)作者:Wlaschin, ScottPragm…

【date-fns】v3 がリリースされてた

去年の12月に date-fns のv3がリリースされた blog.date-fns.org 内容を確認してみると以下とのこと TypeScript に完全に書き換えた 実行時の型チェックが不要になった 最小サイズは 200 バイトになった 文字列引数が戻ってきた UTCDateなどの Date クラス拡…

【Photoshop】簡単に写真から人物だけを切り抜く

Photoshopで簡単に写真から人物だけを切り抜きたい こちらの記事が参考になったので、自分用にメモ jp.imyfone.com ツールバーから、「選択範囲」>「被写体を選択」をクリック →これだけで人物が自動に識別されて点線で囲まれる 微調整する場合は、「選択範…

【Illustrator】交差しているパスを分割したい

イラレでイラストを描いていて、交差するパスで分割したいのだがどうやるべきかわからなかったので調べた ドンピシャで以下の記事が解説してくれていたので、自分用にメモ nippori30.hatenablog.com 交差するパスを選択 パスファインダーのパネルから、「ア…

【React】メモ化する前に見直すパフォーマンス向上のための確認ポイント

Reactアプリケーションでパフォーマンスを上げるためにとりあえずメモ化をしていたが、メモ化の前に見直すべきポイントがないか調べた この時、dan氏のブログにまとまっていたので要点だけ自分でもまとめておく overreacted.io 見直し項目 productionビルド…

【TypeScript】Object.keysの型をstring[]ではない型にしたい

Object.keys を使う時、その戻り値の型が string[] になっているので、keyを使って何か処理をしたいときに string型として値を使わなければならない そのため、これまで以下のようにasを使って値を他の型に強制していたが、全ての使用箇所で付けなければなら…

【Architecture】Composed Method パターン

Kent Beck氏によって提唱されたComposed Method パターンというデザインパターンを知った Composed Method パターンは Kent Beck氏が著書『Smalltalk ベスト プラクティス パターン P.21』の中で以下のガイドラインを考案 Divide your program into methods …

【CSS】Panda CSSってナンダ

CSS

styled-components から CSS Modules に移行後に、Panda CSSというゼロランタイムのcssライブラリを知った panda-css.com なぜ Panda CSS なのかを読むと Panda は、サーバーファースト時代における CSS-in-JS の課題を解決することを目的とした新しい CSS-i…

【Next.js】styled-componentsからcss-modulesに書き換えてみた

先日、Next.jsで styled-components から linaria に書き換えてみることを行なったが、本番環境での利用は不安だったの一時中断した uga-box.hatenablog.com なので、今度はNext.jsがサポートしている css-modules に書き換えることを試してみた nextjs.org …

【Next.js】(WIP)styled-componentsからlinariaに書き換えてみる

Next.jsではないプロジェクトでlinariaがうまくいったので、Next.jsの別のプロジェクトにも導入しようと考えた ↓Next.jsではないプロジェクトで導入した話 uga-box.hatenablog.com ただ、単純にライブラリを使えば良いというのではなく更新されていないライ…

【フロントエンド開発】styled-componentsからlinariaに書き換えてみる

注意 この記事の内容は作業メモですが、作業したのがlinariaバージョン4の時(現在はバージョン6が最新)のため、若干イントールするものやセットアップ方法が異なります。最新の情報はlinariaのドキュメントを参照してください。 これまでNext.jsではない単…

【Test】スライド「フロントエンドの書くべきだったテスト、書かなくてよかったテスト」を読んだ

@takepepeさんがイベントで話されていた以下のスライドを読んだので、ざっくりまとめておく speakerdeck.com 書くべきだったテスト Router関連のテスト <Link />コンポーネントの遷移先 searchParamsの参照 ※query.fooが?foo=bar&foo=baz で["bar", "baz"](string[])</link>…

【Java】オフセット付きの日時

Postgresqlに日時のデータを保存する場合、全ての時間帯付きの日付と時刻は UTC で内部的に保存される そこで、データベースとアプリケーション間の日時の整合性を保つために、Javaアプリで扱う日時も UTC で固定したい Javaでオフセット(時差)付きの日時…