2022-01-01から1年間の記事一覧
2022年の振り返り。 とりあえず今年も1月5日の仕事始めから12月23日の仕事納めまでの月〜金の毎日というルールでブログを書くことができました。 丸３年間続けられました。 ネタは毎日ありましたが、書く時間がなく大晦日まで忙しい毎日でした。 最近は昔の…
Elasticsearchの検索で異様に遅いクエリがあった このクエリのProfileがみたいと思っていたところ、以下の記事をみつけたのでKibanaで可視化してみる dev.classmethod.jp localhost:9200でアクセスできるESにdocker上のKibanaからアクセスする方法は以前に記…
Elasticsearchのあるフィールドがnullであるものを検索したい つらいのが、そのフィールドにnull_valueを設定していないため、"NULL"という文字列で検索ができない null_value | Elasticsearch Guide [8.5] | Elastic そこで思いついたのが、existsを使う方…
フレームワークをNext.jsへ移行することを考えている このとき、Jestで書いたテストもNext.jsに移行することを考えているが、ドキュメントを読むとNext.js 12 のリリース以降、Next.jsにはnext/jestという組み込みモジュールが用意されていることを知った ま…
Google Apps ScriptでGoogle Driveにファイルを保存するとき、フォルダがあるなしで判別して なければ作成し、あればそのフォルダを使いたい こちらを参考にさせていただいた chan-lettuce.hatenablog.com まず、検索を開始するフォルダがある場合はそのフォ…
Webセキュリティを強化するためのHTTPヘッダーについて調べた referrer policy httpヘッダーでリファラー情報をリクエストにどれだけ含めるかを制御する Referrer-Policy - HTTP | MDN サイトによってはリファラによって流入元の情報が必要以上に遷移先に知…
fetchAPIを使っていて、以下のエラーが出た TypeError: body used already for: https://my-app/remove-favorite 調べたところ、レスポンスを.json()でJSONオブジェクトとして解析していたが、Content-Typeがjsonでないことが原因だった github.com レスポン…
TypeScirptのプロジェクトでpathにaliasを設定して、/srcディレクトリを@としてimportしたい まずはtsconfig.jsonでpathsを設定する { "compilerOptions": { ~~~ "baseUrl": "./", "paths": { "@/*": ["src/*"] }, ~~~ } } 次にwebpack.config.jsでaliasを設…
WebアクセシビリティガイドラインのWCAGについて WCAG2.X と WCAG3.0 の違いがわからなかったので調べた www.w3.org ガイドラインによるとWCAG2.Xとの違いは以下 WCAG3は、WCAG 2よりも理解しやすく、柔軟性があることを目的としている WCAG 3.0は、WCAG2.2 …
State of CSS 2022 を眺めていて知らなかったことについて調べた @supports @supportsはブラウザーが特定のCSS機能をサポートしている場合に定義することができるクエリ developer.mozilla.org 以下の記事にあるように、確かにCSSはブラウザが理解できない機…
State of CSS 2022 を眺めていてアクセシビリティに関する知らなかったことを調べた color-schme ライトテーマとダークテーマを切り替えるプロパティ developer.mozilla.org その要素が両方サポートする場合以下のようにし、 color-scheme: light dark; ライ…
State of CSS 2022 を眺めていて知らなかったことのうち、scrollbar-gutterについて調べた scrollbar-gutter scrollbar-gutterプロパティはWeb でスクロールバーを表示する際の余白を制御することができる developer.mozilla.org スクロールバーは種類によっ…
State of CSS 2022 を眺めていて知らなかったことのうち、object-view-boxについて調べた object-view-box object-view-boxプロパティは、chrome104で実装された機能で、画像要素のズームまたはパンを可能にする drafts.csswg.org First Look At The CSS obj…
State of CSS 2022 を眺めていて知らなかったことのうち、@containerについて調べた @container @containerはコンテナクエリといい、@media（メディアクエリ）と似た使い方になるが@mediaと異なる点は、ビューポートサイズではなく親コンポーネントサイズに…
State of CSS 2022 を眺めていて知らなかったことのうち、論理プロパティについて調べた CSSの論理プロパティ CSSの論理プロパティとは従来の左上を開始位置にするのではなく、言語によってその開始位置などが切り替わるというもの 例えば、縦書きの日本語は…
ZodiosというAPIクライアントを知ったので調べた github.com ZodiosはAPIのパラメータやレスポンスをZodで型をつけたものとして扱えるというもの Zodを使っている人は重宝しそう kaniさんの記事が参考になる oisham.hatenablog.com axios依存の API クライア…
LottieというAirbnbが開発しているアニメーションライブラリを知ったので試してみた airbnb.design とりあえずの使い方はこちらにすごく詳しく書かれていた WebアニメーションはLottieがオススメ！基本の使い方完全ガイド【2020年版】 | PhotoshopVIP Illust…
ユーザーが入力したテキストで検索してサジェストするようなコンポーネントをつくりたい 以前、１文字ずつ入力するたびにリクエストを送ってしまうことの対処法はAbortControllerを使えばよいことがわかったので、あとは実際にどういう風にコンポーネントを…
Ajv.jsというのを知ったので調べた Ajv.jsはjsonバリデータ ajv.js.org 以下のように宣言型スキーマを介してバリデーションを行う const Ajv = require("ajv") const ajv = new Ajv() const schema = { type: "object", properties: { foo: {type: "integer"…
11/25の開催された JSConf JP 2022の参加レポ jsconf.jp ブログ系プラットフォームを開発するときのTIPS Zennの開発者で有名なCatnoseさんの発表 https://catnose-jsconf2022.pages.dev/1 レッドオーシャンなブログ系サービスの中で勝つための戦略として「パ…
Next.js（< 13）で次のようなルーティングを行いたい /a-Japanでアクセスされたらlocale=en、country=Japanとしてパラメータを受け取る /ja/a-Japanでアクセスされたらlocale=ja、country=Japanとしてパラメータを受け取る /a-Japan/a-Tokyoでアクセスされた…
Next.js 13で<html lang={locale}>を設定したい Next.js 13以前ではpages/_document.jsで設定するが、Next.js 13 にはpages/_document.jsがなくなるため調べた Next.js 13以前 nextjs.org ドキュメントによるとNext.js 13での必須ファイルapp/layout.tsx（ルートレイアウト）でや</html>…
Next.jsにReduxを導入するとき、SSR中にデータをフェッチしたデータでreduxのstoreを初期化したい どのページでも毎回やりたいことなので_app.tsxのgetInitialPropsの中で行う getInitialPropsはサーバー上で実行される この中で、データフェッチを行いstore…
Next.js に既存のReactアプリを移植してみたらビルド時にFirebase Admin SDK で次のエラーが発生した error - ./node_modules/gcs-resumable-upload/node_modules/google-auth-library/build/src/auth/googleauth.js:xxx:0 Module not found: Can't resolve …
Next.js でtitleタグに以下のように変数を渡していたら <title>{title} | My Company</title> 次のような警告がでた Warning: A title element received an array with more than 1 element as children. In browsers title Elements can only have Text Nodes as children.…
Next.js 13で既存のアプリを動かしてみたらgoogle-map-reactで次のようなエラーが発生した Next.js: TypeError: Cannot read properties of undefined (reading 'getChildren') 以下のISSUEによるとNext.jsというより、React@18とのバージョン互換性の問題み…
FAQのリッチリザルトというのを知ったので調査した developers.google.com リッチリザルトとはGoogleの検索結果を、通常とは違うインタラクティブな状態で表示させること 例えば、よくある質問の質問と回答を以下のようなアコーディオンに表示させることをさ…
今日Nuxt3が安定版になったのを知った nuxt.com 以前から使われていて評判は聞いていたが、安定版ではないということで調べていなかった 関わっているある案件ではvue2を使っていて、バージョンアップの機会をうかがっているのでNuxt3がどのようなものかざっ…
今更ながらgit bisectというコマンドを知ったのでメモ git-scm.com git bisectは何か問題が発生したときに、問題がなかった状態から問題が発生した状態の間のコミットをひとつづつテストをしながら進められるコマンド 手で一個一個コミットをチェックアウト…
以前にNode.jsのバージョンを上げたら起動できなくなったことがあった uga-box.hatenablog.com そのときの以下のエラーについて調べた Error: error:0308010C:digital envelope routines::unsupported 原因 調べたところ、このエラーはNode16 で使われていた…
