全然大した話ではないが、最近のちょっと困ったことをClaudeのArtifactを活用して解決した話 Claude Artifact Claude Artifactについては他に解説記事はたくさんあるので詳しい解説は書かないが主に下記のようなことができる 対話的に成果物を生成できる 画…

フロントエンドだけでフォームの内容によって動的に生成したSVGをPNGに変換してDownloadさせる、というのをやってみたのでそのときのコード辺とメモ サンプル Next.jsでサンプル書いたので少し固有のものが混じっているがやっていることは分かるはず import …

Gatsbyで作っているブログサイトで、Tagの数が多くなってきたのでTagをまとめたカテゴリ単位の表示をさせたい JSONファイルに適当なマッピングを持たせてそれを参照させたいというようなケースが発生したのでやってみた 普通にJSONを読み込んでも良いが、せ…

Gatsby製のブログで、コードハイライトにはプラグインとしてgatsby-remark-prismjsを使っている 特に設定などせず使っていたが、調べたら行番号指定でのハイライトや、シェル表示など色々なものがあるようだったのでローカルで試していた しかし、prism-coy…

Gatsbyで作っているブログで今までずっとDevTools上に下記のようなエラーが出ていた 内容的にはhydrationエラーだよというもの react-dom.production.min.js:131 Uncaught Error: Minified React error #418; visit https://reactjs.org/docs/error-decoder.…

よく見る「～～ジェネレータ」など いくつかフォームの値を利用して動的にSVGを生成するといったようなことをやってみたいなと思い立ったのでやってみた あまり知らなかったので学んだことをつらつら書いていく 以降Reactでインライン埋め込みしてレンダリン…

AlgoliaのInstantsearchを用いて検索UIを作っていたが、検索文字列に変化があるたびにリクエストを送る仕様になっていた なのである程度入力が終わったと判断できるタイミングでリクエストを送るようにしたいということで調べて対応してみた Algoliaの料金体…

AlgoliaのInstantsearchを用いて検索UIを作っていたがページ読み込み時に空のリクエストが発生するらしくリクエストを消費させたくないと思ったので調べて対応してみた Algoliaの料金体系 自分はFreeプランしか使っていないが 10000req/月もしくは10000Recor…

この記事は Reactのカレンダー | Advent Calendar 2021 - Qiita 9日目の記事です 会議やワークなどでファシリテーションする際、「ちょっと時間取るのでこの作業しましょう」や「1人○分で意見を言いましょう」といったことが良くある Miroなどはタイマー機能…

PixelaのグラフをGatsby(React)で表示させたい 素直にsvgをobjectタグで読み込むだけだとツールチップが表示されないのでせっかくなら表示させたい （※前提の参考リンクをよく読めばiframeで良くないか?という話になるが、今回はmswを使って開発しているとき…

Reactの勉強を始めたので覚えたことを残していく ComponentProps コンポーネントの型注釈を取得できる const Hoge = (props: {p1: string, p2: string}) => { return <div></div> } type HogeProps = ComponentProps<typeof Hoge> const Fuga = (props: HogeProps) => { return <div></div> } こ</typeof>…