UGA Boxxx

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

【Fastly】サブスクリプションをキャンセルしたい

Fastlyのサブスクリプションのキャンセルをしたい FastlyのBilling Informationでは以下のようになっていて月$50払っている この並びの一番下を見ると以下のキャンセルについての記述があったので、サポートチケットを発行して依頼したが返事がなかった 調べ…

【Git】git switchとgit restore

Git

まだgit checkoutを使っていたので知識を更新する zenn.dev 使いそうなやつだけメモ git switch git switch <branch>:ブランチ切り替え git switch -c <branch>:ブランチ作成 git switch -:一個前のブランチに戻る git restore git restore <file>:ファイルを元に戻す git rest</file></branch></branch>…

【Fastly】「ぐるなび」がFastlyを導入したらパフォーマンス向上したという話

「ぐるなび」がFastlyを導入したという記事を読んだ www.nikkei.com 結果として、 キャッシュのヒット率は90%以上、データセンターへのアクセスが10分の1程度に減った。画面のレスポンス性能を最大20倍に改善できた とのこと 他のCDNは使っていたがJSやCSSや…

【JavaScript】Tempoという日付ライブラリ

こちらの記事でTempoという日付ライブラリを知った techfeed.io 今までdate-fnsを使っていて、元々使っていたmoment.jsよりもサイズが小さくなったと喜んでいた uga-box.hatenablog.com また、date-fnsのv3では全体のサイズはわからないがaddDaysのような1…

【JavaScript】要素をドラッグして移動する

こちらの記事で要素をドラッグして移動するのが簡単に実装できることを知った qiita.com 使っている要素技術は onpointermove: ポインターの座標が変化し、かつブラウザーのタッチ操作によってポインターがキャンセルされていないときに発生するイベント eve…

【Next.js】トップページにリダイレクトさせる

あるプロジェクトのサービス終了に伴い、ページにアクセスされたらトップページに全てリダイレクトをするように設定をしたく調べた Next.jsのredirectsを使う 調べると next.config.js 内で redirects を使うのが良いことがわかった nextjs.org 単純な使い方…

【サイト紹介】モバイルデバイスの閲覧者は多いが、すぐ離脱してしまうというレポート

2024年のデジタルエクスペリエンス・ベンチマークレポートを知った このレポートはContentsquareが30カ国3590のWebサイトを対象に、430億のサイト訪問と2000億のページ閲覧におけるユーザー行動を分析し、その動向をまとめたもの contentsquare.com そしてそ…

【Chrome拡張】レスポンシブデザインのサイトを様々なデバイスの幅で一覧にする

レスポンシブデザインのサイトを様々なデバイスの幅で確認するときに、いちいち開発者モードで切り替えるのが面倒な時がある そんなときに、以下のChrome拡張を見つけた chromewebstore.google.com 比較したいサイトに飛んで、上の拡張機能を実行するだけで…

【Prisma】実行時にdebian-openssl周りでエラー

Prismaを導入してローカルでの確認ができたのでAppEngineにデプロイして動作確認したところエラーが発生した Prisma Client could not locate the Query Engine for runtime "debian-openssl-1.1.x". This happened because Prisma Client was generated for…

【Prisma】デプロイ時にエラーになった

Prismaを導入してローカルでの確認ができたのでAppEngineにデプロイしようとしたところデプロイ時にエラーになってしまった エラーメッセージは以下 Error: @prisma/client did not initialize yet. Please run "prisma generate" and try to import it agai…

【Prisma】Prismaの .envファイルをNext.jsのenvファイルと合わせたい

Next.jsでPrismaを使う準備をした uga-box.hatenablog.com この準備のさなか、.env というファイルが自動生成されたので、その中でDBへの接続先URLなどを記載して動作確認を行なったのだが、Next.jsでは.env.localというファイルをローカル開発では使ってい…

【Prisma】prisma client のセットアップ

Next.jsからDBにアクセスする機会がなく、知ってはいたが使ったことがなかったPrisma client のセットアップする www.prisma.io DBはPostgreSQLがすでにあり、データも入っているのでDB作成や更新はなく、接続して検索するのみ インストール npm install pri…

【システム開発】開発生産性に関するスライド

開発生産性に関するこちらの資料が面白かった speakerdeck.com 特に面白かったのは、『「開発生産性」が経営者に伝わら理由は”言語”が違うから』と述べられているところ スライド内の仮の体制図で、各ロールの人が見ている数字と言語が違うのを表していた 経…

【サイト紹介】WAYBACK MACHINE - 公開が終了したWEBサイトがみたい時に使う

あるサイトに記載されていたことが気になって見ようとおもったが、すでに公開が終了してしまっていた そこで過去に公開されていたページのアーカイブがないかを調べたところ、以下のサイトに行き着いた archive.org 中央の入力フォームに調べたいサイトのURL…

【Git】最新の機能をキャッチアップする

GitHubの共同創設者であるスコット・シャコンが、Gitの使用方法と最新の機能について話している動画 www.youtube.com 主に以下を説明している Gitの新機能や最近の更新 大規模なリポジトリの管理方法 新しいGitクライアント「GitButler」 GitHubでの最新の変…

【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の活用ガイドでフレームワークのテンプレートを選ぶのが良さそう

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