notebook

都内でWEB系エンジニアやってます。

React

Gatsbyで特定のJSONファイルを用意してGraphQLで扱えるようにする

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

Gatsbyで記事用のMarkdownとサンプル用のMarkdownを分けて扱う

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

GatsbyのwrapPageElementをssrとbrowser両方で設定し、Hydrationエラーに対応する

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

SVGで図形を再利用する

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

AlgoliaのInstantsearchで検索文字入力が終わったと判断してからリクエストを送るようにする

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

AlgoliaのInstantsearchでページ読み込み時の初回リクエストを送らないようにする

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

Reactでタイマーを作ってPicture in Pictureで表示する

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

PixelaのグラフをGatsby製のブログに埋め込む

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

Reactでpropsの型を取得する

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>…