UGA Boxxx

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

2024-02-01から1ヶ月間の記事一覧

【Web Performance】パフォーマンス向上のTIPS集

JSやブラウザのパフォーマンス向上のTIPSを集めたリポジトリ github.com かなり多くのパフォーマンスに関するブログやISSUEへのリンクが貼られていて、知らないことがたくさんあった コンテンツは以下 JavaScript キャッシュ / 作業量の削減 データ構造 未分…

【Spring Boot】Apollo3が利用できなかった話

Spring Boot にApollo Clientを導入しようとした際に、Apolloのバージョンがv2系とv3系があることがわかり、当初v3系にしようとしていたがうまくいかなかった uga-box.hatenablog.com 前提としてSpring Boot は2.5.12を使っていて、古いのは承知しているが今…

【Spring Boot】GraphQL Apollo Client でリクエスト時にヘッダーにAuth情報を含めたい

以前セットアップしたApollo Client でリクエスト時にヘッダーにAuth情報を含めたい uga-box.hatenablog.com 設定方法は以下に書かれている 10. Authenticate your queries - Apollo GraphQL Docs Kotlin用をJavaに読み替えて、以下のように書くけば良さそう…

【Spring Boot】Spring Boot でGraphQL Apolloクライアントを使う

Spring Boot でGraphQLで構築された外部のAPIを利用するため、GraphQLクライアントを用意する GraphQLクライアントには Apollo や Relay が思いつくが、RelayはどちらかというとReact特化でApolloのようにさまざまな言語で使えるようになっていないとのこと …

【Apollo Client 】Apollo Client Maven Plugin でコードの自動生成

Apollo Client をSpring Boot を使う際に、introspection を利用したコードの自動生成を行いたい Maven Plugin があるのでこれを利用する(Apollo v2用) github.com https://mvnrepository.com/artifact/com.github.aoudiamoncef/apollo-client-maven-plugi…

【GraphQL】IntrospectionでGraphQLスキーマがどのようなクエリをサポートしているのか知る

APIをGraphQLで構築している外部サービスを利用することになった 提供されたドキュメントには利用できるクエリや型の情報が載っているが、使うとなった時にドキュメントから読み取ってスキーマを作るのは辛いと感じた なのでドキュメントからではなくGraphQL…

【Spring Boot】AutoConfiguration おさらい

何気なく使っていた Spring Boot の AutoConfiguration をおさらいする https://docs.spring.io/spring-boot/docs/2.5.x/reference/html/using.html#using.auto-configuration AutoConfigurationとは自分でBean実装をしなくても、 jarの依存関係に基づいて S…

【DMMF】Functional Domain Modeling の実践動画

今関心があるDomain Modeling Made Functional (DMMF)の実践動画を見たのでまとめ www.youtube.com 動画の流れは開発者の Marco Emrich氏とプロダクトオーナーの Ferdinand Ade氏が会話をしながらコードを書いていくというもの POが開発者に仕様を伝えて、…

【Zod】 Zodで 固定文字(定数)を定義したい

Zod

Zodを使っていてある固定文字列であること精査したい時にどうするか調べた 具体的にはURLのある階層の接頭辞が「a-」で始まっているかどうかを精査したい const URI_PREFIX = "a-"; z.literalを使う zod.dev 使い方 const tuna = z.literal("tuna"); const t…

【TypeScript】またinferについて忘れてしまったので Conditional Type をおさらいする

TypeScriptの Conditional Type はJavaScriptでいう三項演算子のような使い方ができるのは理解していてそのように使っているが、それ以上の理解(例えばinferの利用など)は以前調べているにもかかわらず理解が曖昧だった uga-box.hatenablog.com なので改め…

【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だけでスクロールアニメーションが作れる!? 新技術…