UGA Boxxx

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

2022-11-01から1ヶ月間の記事一覧

【Ajv】Ajvとは

Ajv

Ajv.jsというのを知ったので調べた Ajv.jsはjsonバリデータ ajv.js.org 以下のように宣言型スキーマを介してバリデーションを行う const Ajv = require("ajv") const ajv = new Ajv() const schema = { type: "object", properties: { foo: {type: "integer"…

【イベント参加ログ】JSConf JP 2022の参加レポ

11/25の開催された JSConf JP 2022の参加レポ jsconf.jp ブログ系プラットフォームを開発するときのTIPS Zennの開発者で有名なCatnoseさんの発表 https://catnose-jsconf2022.pages.dev/1 レッドオーシャンなブログ系サービスの中で勝つための戦略として「パ…

【Next.js】rewrite機能を使ってルーティングを考える

Next.js(< 13)で次のようなルーティングを行いたい /a-Japanでアクセスされたらlocale=en、country=Japanとしてパラメータを受け取る /ja/a-Japanでアクセスされたらlocale=ja、country=Japanとしてパラメータを受け取る /a-Japan/a-Tokyoでアクセスされた…

【Next.js】Next13で<html lang={locale}>を設定したい

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】SSR中にデータをフェッチしたものでreduxのstoreを初期化する

Next.jsにReduxを導入するとき、SSR中にデータをフェッチしたデータでreduxのstoreを初期化したい どのページでも毎回やりたいことなので_app.tsxのgetInitialPropsの中で行う getInitialPropsはサーバー上で実行される この中で、データフェッチを行いstore…

【Next.js】ビルドするとFirebase Admin SDK でCan't resolve 'child_process' というエラーが発生する

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タグに変数を渡すと警告が出る

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】React18にあげたらgoogle-map-reactでエラーが発生した

Next.js 13で既存のアプリを動かしてみたらgoogle-map-reactで次のようなエラーが発生した Next.js: TypeError: Cannot read properties of undefined (reading 'getChildren') 以下のISSUEによるとNext.jsというより、React@18とのバージョン互換性の問題み…

【SEO】FAQのリッチリザルト

SEO

FAQのリッチリザルトというのを知ったので調査した developers.google.com リッチリザルトとはGoogleの検索結果を、通常とは違うインタラクティブな状態で表示させること 例えば、よくある質問の質問と回答を以下のようなアコーディオンに表示させることをさ…

【Nuxt】Nuxt3の安定版がリリースされた

今日Nuxt3が安定版になったのを知った nuxt.com 以前から使われていて評判は聞いていたが、安定版ではないということで調べていなかった 関わっているある案件ではvue2を使っていて、バージョンアップの機会をうかがっているのでNuxt3がどのようなものかざっ…

【Git】git bisect で問題箇所を特定する

Git

今更ながらgit bisectというコマンドを知ったのでメモ git-scm.com git bisectは何か問題が発生したときに、問題がなかった状態から問題が発生した状態の間のコミットをひとつづつテストをしながら進められるコマンド 手で一個一個コミットをチェックアウト…

【Node.js】Error: error:0308010C:digital envelope routines::unsupported

以前にNode.jsのバージョンを上げたら起動できなくなったことがあった uga-box.hatenablog.com そのときの以下のエラーについて調べた Error: error:0308010C:digital envelope routines::unsupported 原因 調べたところ、このエラーはNode16 で使われていた…

【GAS】Date型をyyyy-MM-ddに整形したい

GAS

スプレッドシートで日付型のセルをyyyy-MM-ddに整形したい 調べるとGASのUtilities.formatDateを使うと良いことがわかった developers.google.com formatDate(date, timeZone, format) 使用例 var formattedDate = Utilities.formatDate(cell[0][1], "JST", …

【Prettier】prettierでimportもソートしたい

JavaScript書いていて、importの並べ方などがファイルごとに違うのが気になるので自動でソート書けるようにしたい そこで、トリバゴのprettierプラグインを使うことにした github.com 導入すると、prettierの実行とともにimportも修正してくれる import Reac…

【JavaScript】[Object: null prototype] { title: '' }という警告ログ

console.logで変数の値を見ていると、ある変数で以下のような警告がでていることがわかった [Object: null prototype] { title: '' } 表示はできているが、前の[Object: null prototype]が気になるので調べた 調べるとこれは、プロパティ/プロトタイプのない…

【Web Performance】webpack-bundle-analyzerで可視化する

Webアプリのパフォーマンス改善で不要なJavaScriptの除去を検討する その際にwebpack-bundle-analyzerを使ったので導入メモ github.com 導入すると以下のようにwebpackでバンドルしているファイルに占めるモジュールの割合が可視化される 導入は簡単で、webp…

【Web Performance】@babel/plugin-transform-classes

LightHouseでページのパフォーマンスを計測すると、改善提案のところに"Avoid serving legacy JavaScript to modern browsers"とあり、@babel/plugin-transform-classesが挙げられていた 自分では導入していないライブラリだったので調べてみた babeljs.io …

【Cloud Build】Nodeアプリが起動できなくなった

いままで動いていたcloud build でのnodeアプリの起動ができなくなった 原因はnpm run buildジョブ中に以下のエラーが発生したため Error: error:0308010C:digital envelope routines::unsupported 調べるとnodeのバージョンアップが原因みたい 自分では特に…

【Webセキュリティ】OpenSSLの脆弱性(CVE-2022-3602、CVE-2022-3786)

2022年11月1日に重要度「High」のOpenSSLの脆弱性(CVE-2022-3602、CVE-2022-3786)についての情報が公開されたことについて調べた www.openssl.org 概要 X.509電子証明書に含まれるメアドのデコード処理において、バッファオーバーフローが発生する脆弱性 …

【React】transitionの終了イベントをトリガーする

CSSのtransitionとsetTimeoutを使って下図のような要素群を自動的に左に移動させるというアニメーションをつくりたい また、最終要素が出現したら、その次は1要素目がまた表示されるということをしたい いろいろ試したが、アニメーションが終わったタイミン…

【Web API】AbortControllerを使ってリクエストを中断する

ユーザーが入力したテキストで検索してサジェストしたい 1文字ずつ入力するたびにリクエストを送ってしまうとサーバーに負荷がかかってしまうし、入力した結果が遅れて表示される問題がある そこで、リクエスト中に入力があった場合は、前回のリクエストを…

【Mockito】RestHighLevelClientのモック化

JavaのElasticsearchクライアントライブラリRestHighLevelClientをMockitoでモック化したかったが単純ではなかった 通常、Mockitoでモックする場合は以下のようにするだけ RestHighLevelClient esClient = mock(RestHighLevelClient.class); when(esClient.m…