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

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

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

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

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

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

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

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

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

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

swrを使っていて、無限スクロールを実現するにはどうしたらよいか調べた ここでいう無限スクロールとは、スクロール量をトリガーにして、次ページのデータを取得し、現在のデータの末尾にそれらを追加することで、取得できるデータがある限り無限にスクロー…

何度も忘れてしまうマージ済みのブランチを削除するコマンドのメモ qiita.com $ git branch --merged|egrep -v '\*|develop|master|main'|xargs git branch -d エイリアスに追加する [alias] delete-merged = "!f () { git checkout $1; git branch --merged…

Next.js 13の/appを触っていて、getInitiaPropsがなくなったのでどうやってパラメータを受け取るのか調べた 例えば、以下のファイルを用意したとき、 app/blog/[slug]/page.tsx http://example.com/blog/abc/?id=123 のURLで、slugとidの受け取りたい ドキュ…

10月25日の深夜に「Next.js Conf 2022」が開催されて、Next13が発表されたので確認する nextjs.org /appディレクトリ いままでは/pageディレクトリ配下にファイルをおくと設定不要で階層に応じたルーティングが行えるが、同じ用途で新たに/appディレクトリが…

前々から気になっていた初期描画時の非表示コンテンツについて気になる記事 ayudante.jp 結論から言うと、初期描画時の非表示コンテンツは 検索クエリに対応したコンテンツがあっても、検索スニペットに表示されない 初期表示コンテンツよりも検索順位が下が…

いまさらながらES2022でのアップデートをキャッチアップした 鹿野さんの記事が参考になった zenn.dev クラスフィールド宣言 プライベートなメンバー instanceofの代わりのin トップレベルawait 配列の最後の要素を取得できるat() hasOwnPropertyの代わりのOb…

Yahooのパフォーマンス改善の話を読んでいて、改善手法のloading属性とcontent-visibilityは知っていたがcontainは知らなかったので調べた techblog.yahoo.co.jp containプロパティは、ブラウザーがレイアウト、スタイル、描画、寸法、およびその組み合わせ…

あるときトレイリングスラッシュと呼ばれるURL末尾の「/」のありなしが話題になったので調べた 結論気にしなくてよい 以下の記事を読むと、ありなしは気にする必要はがないことがわかった www.suzukikenichi.com サブディレクトリのありなしは意味が変わって…

9月にSEOの順位が下がり、その原因を探している最中に見つけた木村さんの記事 ameblo.jp サブディレクトリの貸し借りはしていないので今回は関係なさそうだが、よくないとうこと知らなかったのでメモ 借りる側の順位はわからないが、貸す側は2022年9月のGoog…

ReactのuseRFCが話題になっていたので、 github.com uhyoさんの記事を読んで理解を深めた zenn.dev useとは useはSuspense機構を使う上で必要だった「Promiseをthrowする」という処理を、サードパーティからReact内部に隠蔽する仕組みで、Reactユーザーにと…

CSSの新しい単位で「lv*, sv*, dv*」がChrome108に実装されたとのこと Good news everyone! The Large, Small and Dynamic viewport units (lv*, sv*, dv*) are coming to Chrome 108!I2S announcement: https://t.co/3JGCpfKQjr pic.twitter.com/u8AOuREiD…

HTTP クライアントライブラリの中で、axiosっていまどうなんだろうと思っていたら良記事をみつけた zenn.dev 記事によると、今後も他ライブラリと差別化を図りつつモダン化に向けた対応をしていくとのこと v1.0.0の変更は以下にまとまっていた Release v1.0.…

コピペで使えるHTML, JS, CSS の便利パターン集というものを知ったのでみてみた web.dev ちょっとみただけで興味があるのがたくさんあった Advanced apps patterns Animation patterns Clipboard patterns 画像をコピーする方法 テキストをコピーする方法 フ…

JetBrains による次世代 IDE 「Feet」が試せるようになったので試してみた www.jetbrains.com 普段 IntelliJ IDEA を使っていて機能的には満足しているが、やや動作が重く感じるので軽いメモをしたくなった時に使うようなものではない それが、軽量でメモ用…

Componentギャラリーというサイトが良い component.gallery その名の通りコンポーネント横断で様々サイトのデザイン例を見ることができる 例えば、ボタンというページではAtlassianのデザインシステムなどのデザイン例がリンクされている 参考になりそうなの…

Google Map を使ったアプリで、いざマップを触ろうとすると以下のようなメッセージがでる ユーザー体験が悪いためこれをやめたい そもそもこれが表示されるのはページのスクロールとマップのスクロールが混在しないようにするためで、私の場合は、以下のよう…

Fastlyのエッジ上でNext.jsが実行できるようになったという話 www.fastly.com @fastly/next-compute-jsをインストール $ npx @fastly/next-compute-js fastly compute serve コマンドを実行 $ cd compute-js $ fastly compute serve 本番公開する場合は以下…

Javaのstreamを使ってコレクションの中から最小値を求めたい なんとなくminを使えば？と思って以下のようにしてみたが上手くいかなかった class Product { public BigDecimal price; } List<Product> products; products.stream().min((Product) p -> p.price); javad</product>…

JestでUIコンポーネントのテストをするとき、そのコンポーネントがhtmlファイルをimportしている場合、以下のようなエラーが発生する SyntaxError: Unexpected token '<' import html from "./sample.html" | ^ Jestでテストする際にJavaScriptとして扱える…

viewportアドオンはiframeで表示しているcanvasのviewportを変更するアドオンで、Essentials addons を有効化にしていれば利用できる storybook.js.org ただ、初期設定だと選べるデバイスがSmall Mobile、Large Mobile、Tableの３つで少ない そこで、iPhoneS…