2025年1月20日月曜日 1:47Next.js開発の参考になるリポジトリ集1. CALCOM (旧 CALENDSO) [https://github.com/calcom/cal.com] * オープンソースの予約システム * 特徴: * TypeScript * tRPC * Prisma * NextAuth.js * TailwindCSS * 本番で使用されている実践的な実装 2. NEXT.JS COMMERCE [https://github.com/vercel/commerce] * Vercel公式のEコマースプラットフォーム * 特徴: * TypeScript * Tailwind CSS * 複数のEコマーReact
2024年12月29日日曜日 13:12年の瀬ここ数日天候が不安定で雪がちらほら降りつつも、そこまで積もりもせず、どうせならもっとどかっと降ってくれてもいいのになと思いながら過ごしている。 上の子が昨日から体調を崩し、39度台まで熱が上がった。 インフルエンザのワクチン接種が済んでいるとはいえ少し不安になったが、大好きな「サントリー天然水 きりっと果実 [https://www.suntory.co.jp/water/tennensui/kiritto/]」をゴクゴク飲んで、うどんをがっついていたのでとりあえずは大丈夫そう。 自分といえば抱えていた仕事を最終営業日に片付けて、わりかしすっきりとした気持ちで年末の休暇を迎えてい雑記
2024年12月29日日曜日 9:01Remix -> React Router移行後に発生したエラー解消React Router移行後、 npm run dev で起動して画面を表示するとコンソールに以下のエラーが表示された。 Error: Expected a Response to be returned from resource route handler at invariant3 (/Users/wakaapps/develop/study/remix/waka.apps.blog/node_modules/react-router/dist/development/index.js:8682:11) at handleResourceRequest (/UsersReact
2024年12月29日日曜日 5:00Remix -> React Router移行はじめに RemixとReact Routerが統合 [https://remix.run/blog/react-router-v7]された。本ブログはRemixで構築しているため、React Routerへの移行を行うことにした。 移行ガイド 以下を参考に進める https://reactrouter.com/upgrading/remix [https://reactrouter.com/upgrading/remix] 移行手順 1. remixのバージョンを最新に上げる npm install @remix-run/{dev,react,nodReact
2024年12月2日月曜日 6:25生活発表会昨日子らの生活発表会があった。 下の子は今年で2回目の生活発表会、昨年は訳も分からずぼーっと突っ立ってた。 社交的で活発で、わりかしなんでも器用にこなしているように見えるので、生活発表会も楽勝だろうと思って見ていたら、他の子が泣いているのにつられて泣き出してしまった。 意外と繊細で泣き虫なところもあるよなぁとしみじみ泣いている姿を見守った。 ちなみに1階席最前列に陣取って振り付けやお歌の口を真似して頑張って励ましていたのに、2階席ばっかり見ていたのが笑えた。 上の子は5歳、今年で5回目の生活発表会。 毎年のことだけれど、練習がいやで保育園に行くのもいやで、ここしばらくは毎朝子育て
2024年11月27日水曜日 14:03[Go]型埋め込み使用時のjson.Marshalの罠型埋め込みを使用している構造体をjson.Marshal [https://pkg.go.dev/encoding/json#Marshal]でJSON文字列に変換する際、意図しない挙動になるケースがあるので気を付ける。 下記のような構造体のインスタンスをjson.Marshalで文字列に変換する処理がある。 type Event struct { ID int time.Time // <- 埋め込みフィールド } event := Event{ ID: 1234, Time: time.now(), // <- 構造体のインスタンス化時、埋め込みフィールドの名前は構造体の名前go
2024年11月18日月曜日 15:21[Go]型埋め込みの問題点を意識するそもそも型埋め込みとは.. 以下のように構造体の中に別の構造体を埋め込むこと。 type Base struct { ID int Name string } func (b Base) GetName() string { return b.Name } type User struct { Base // 型埋め込み Email string } 以下のように、User構造体のインスタンスからBase構造体の中身を直接使用できる。これを プロモートする と呼ぶ user := User() user.ID // user.Bgo
2024年11月1日金曜日 12:49[JavaScript]Date#setMonthでの注意点発生した問題 以下のような月末日取得の実装を行なっていた。 const date = new Date(); date.setMonth(date.getMonth() + 1); date.setDate(0); date.setHours(23, 59, 59, 999); console.log(date) setMonth で対象の月 + 1の月をセットし、 setDate(0) で前月の月末日をセット => 対象の月の月末日が求められるというロジックである。 基本的には正常に機能していたのだが、対象の日付が 2024-10-31 の場合に、 2024-11-30 が出力さJavaScript
2024年10月7日月曜日 9:31Html文字列をQuillエディタに挿入するためのDeltaオブジェクトに変換するHtml文字列をQuillエディタに挿入するためのDeltaオブジェクトに変換するコード const htmlToDelta = (html: string) => { const div = document.createElement("div"); div.setAttribute("id", "htmlToDelta"); div.innerHTML = `<div id="quillEditor" style="display:none">${html}</div>`; document.body.appendChild(div); const quill = Quill
2024年9月18日水曜日 8:25[Typescript]配列の要素からundefinedを取り除くいくつかの方法やりたいこと 以下のような配列があったとする const stringWithUndefinedArray = ["a", "b", undefined, "c", "d"]; この場合、 stringWithUndefinedArray の型は (string | undefined)[] となる。 この状態から string[] に変換したい。 ダメな例 単純に以下のようにfilter関数を呼び出しても型は (string | undefined)[] のまま変わらない。 const stringArray = stringWithUndefinedArray.filtTypeScript
2024年9月5日木曜日 13:10更新が止まっているreact-quillを使用せずQuillを直接Reactアプリで使用するはじめに WYSIWYG [https://ja.wikipedia.org/wiki/WYSIWYG]エディタを実装しているライブラリは色々ありますが、その中でもQuillは老舗で現在も開発が続いている有力なライブラリです。 そのQuillをReactに統合したものがreact-quill [https://github.com/zenoamaro/react-quill]になります。 使い方は非常に簡単でスター数も多い有力なライブラリだったのですが、残念ながら2年前から更新が途絶えており、現時点で更新が再開される様子もありません。 その間Quill本体はメジャーバージョンが2系にアReactQuill
2024年9月5日木曜日 3:54MySQLのGROUP_CONCATの概要とその注意点についてはじめに MySQLにはGROUP_CONCAT [https://dev.mysql.com/doc/refman/8.0/ja/aggregate-functions.html#function_group-concat]という、グループ内の複数の行の値を連結して一つの文字列に変換できる便利な機能があります。 その使い方と注意点について記載していきます GROUP_CONCATの使い方 基本的な使い方 以下のように使用します。この例ではグループに所属するユーザーの名前を連結して取得するイメージです。 SELECT groups.name, GROUP_CONCAT(usMySQL
2024年8月27日火曜日 9:37療育施設の保育士さんに教えてもらった子供の遊びとか、練習とか折り紙のヘリコプター的なもの 下の子が療育施設で気に入っていたので、作り方教えてもらった。 作り方ググっても全然出てこないから、忘れないうちにブログに書いておきたい。 ちなみに、上の子と一緒に作って下の子にプレゼントする、みたいな一連の流れをやりたかったんだけど、結局兄弟で奪い合いになってて笑った。 紙に渦巻きを書いて、ハサミで切る 波線やギザギザ線を切るのにハマっていると言ったら、それの発展系で渦巻きの線に沿って切ることをお勧めされた。 最終的に蛇みたいな形になるのも良くて、自分で何かを作り出すという体験になる。 消しゴムの練習 ボールペンやマジックで絵を描いて、それ子育て
2024年8月26日月曜日 13:18VSCodeでローカルLLMを使用したコーディング支援GitHub CopilotやCursor [https://www.cursor.com/]に課金しなくても、ローカルでLLM動かしてVSCodeから呼べばタダでAIによるコーディング支援を得られるという話。 対象環境はmacOSです。 まずはローカルLLMを準備する。 一番手っ取り早くインストールできそうなollama [https://ollama.com/download]を使用する。 ollamaのサイトでDLしたollama.appを開く。インストールウィザードが始まるので Next をクリック Install 表示されたコマンドをコピペしてターミナルで実行。lVSCode
2024年8月18日日曜日 10:44Prismaを使用してCloudflare D1のmigrationはじめに Prismaを使用sてCloudflare D1のDB migration実行を試す。 CLOUDFLARE D1とは Cloudflareが提供するSQLiteをベースとした分散型DB。 Cloudflare Workersとシームレスに統合されるよう設計されている。今回実装するコードも最終的にCloudflare Workersにデプロイする。 進め方 Cloudflareの公式ドキュメント [https://developers.cloudflare.com/d1/tutorials/d1-and-prisma-orm/]を参考にしつつ、以下の順に進めるCloudflare
2024年8月11日日曜日 12:158番らーめんの野菜こく旨らーめんに感じた変化8番らーめんが大好きで、その中でも野菜こく旨らーめん [https://www.hachiban.jp/menu/category/item/?pid=16&rid=200036]が最も好きで、限定麺を除けば常に頼んでいる。 そんな大好きな野菜こく旨らーめんに見過ごせない変化が現れていた。 一見するといつも通りの野菜こく旨らーめんなのだけれど、「お好みでおろしニンニクをプラス!」なる見慣れぬ文言が追加されている。 8番らーめんは卓上調味料におろしニンニクはないので、わざわざ別で頼む必要があるのか?と思ってメニューをみたけどそれらしいものは見当たらない。 店員さんに言えば持ってきてく食べたもの
2024年8月7日水曜日 14:05SquarespaceからCloudflareにドメイン移管する元々Google Domains [https://domains.google/intl/ja_jp/]で取得していたドメインがGoogle Domainsのサービス終了に伴いSquarespace [https://www.squarespace.com/]に移管された。 だからといって特に問題があるわけではなかったが、ドメインは全てClooudflareでまとめて管理したかったのでこれを機に移管することにした。 以下作業手順 1. Squarespaceのダッシュボード [https://account.squarespace.com/]にログインし、ドメインロックを解除 Cloudflare
2024年8月6日火曜日 3:38新高岡駅から大阪駅までの記録出張のため初めて大阪方面に新幹線で向かった記録。 車で新高岡駅まで向かう。市営新高岡駅第1駐車場 [https://www.city.takaoka.toyama.jp/soshiki/toshikeikakuka/2/3/1/4669.html]に駐車、24時間600円。 魚民の奥、建設中のヤマダ電機の手前にあるのが第1駐車場。 ホームに入ると何もないので、駅構内のセブンでお土産を買っておく。 改札を入ってすぐのところに駐車券認証機があるので、駐車券を通す。これで600円割引に。 福井行きは2番乗り場。 USBポートあると思ったらコンセントしか無かった。充雑記
2024年8月5日月曜日 13:08[Go]キャッシュを活用しつつVimeo APIリクエストを行うVimeoのサムネイル画像をgoで実装しているwebサーバーで取得する必要が出てきた。 go-vimeo [https://github.com/silentsokolov/go-vimeo]というサードパーティのライブラリが存在するが、今回はサムネイル画像取得だけが目的なので、直接APIリクエスト処理を実装した。 以下実装 func NewRepository(logger Logger, redisAddrs []string) *repository { rdb := redis.NewClusterClient(&redis.ClusterOptions{ Addrs:Vimeogo
2024年7月22日月曜日 15:09寝かしつけファイナルファンタジー寝る前にハイになっている子供を落ち着かせるため、Youtubeで「あかちゃん 眠れる」みたいなワードで出てくる音楽を流している。 たいていシナプシュあたりを流しているんだけど、飽きてきたなーと思ったり。シナプシュは好きなんだけど。 そんな折たわむれに「ファイナルファンタジー 眠れる」で検索すると、スクエニが公式で入眠系のFF音楽動画を出しているのを発見。 これがまぁ大変良いもので、ピアノの音色に小波のような効果音が重なっていてちゃんと眠れる雰囲気になっている。 選曲も絶妙で、1曲目から「Melodies Of Life」で最高にエモい。無料着メロサイトで16和音のFFアレンジ着子育て