crypto.randomUUIDを使う機会があり、どうやってmockできるかを調べたのでメモ。 spyOnでmockReturnValueすると、valueがundefinedになってしまった。別の方法を探していて、Object.definePropertyを使えば良さそうということだったので、valueにfunctionを…

それなりに大きなNext.jsのプロジェクトにnext/headを導入するにあたってやったことなどのメモ。 共通Headコンポーネント 下記では色々と簡略化してるけど、各ページ共通で使うtitleやmetaタグなどをまとめてprops経由で設定できるようにする。 // Head.tsx …

同僚の実装を見て「こうすればできるのでは？」と思ってやってみたメモ。同じような構成のDOMがたくさんあって、それぞれにTest IDなどを振るのがめんどくさい場合に便利。 下記はfooラベルを持つラジオボタンがたくさんあるAppComponentのテストをするケー…

例えば、最大値をユーザーごとに変えたいケースなど、APIから取得した値を使ってバリデーションしたいことがある。その際に、Schemaのあるファイルとデータを取得するファイルが同じなら、ただ変数を使えばいいのだけど、ファイルが別の場合の対応で悩んだ。…

ブラウザ描画せずに、画像または動画のサイズなどのデータを取得したいときのTipsです。 まずは画像と動画をロードして返す関数をつくります。引数にファイルのパスを文字列として渡します。 ポイントはPromiseを使ってメディアファイルを取得する時にundefi…

配列の中から.find()や.filter()を使って条件に該当する要素を見つけるが、 findの場合は条件に該当した最初の要素を返し、filterの場合は複数の要素が帰ってくる場合がある。 条件に該当する配列の最後の要素だけ取得したい場合は、下記のように.reverse()…

foo[indicies[increment]]的な実装がしたくて、このfoo配列の要素のインデックスだけを羅列した配列indiciesを作りたかった。 const foo = ["a", "b", "c"]; const indices = foo.map((_, index) => { return index; }); console.log(indices); => [0, 1, 2]…

各ベンダーごとにイベントリスナーを追加して、fullscreenchangeイベントを検知する必要がある。 （MDN見る限り、フルスクリーンAPIの諸々がSafariに対応してないのでちょっとめんどくさい） developer.mozilla.org document.addEventListener("webkitfullsc…

jamstack.jp これを参考に各種設定してみた。 一点、ブランチ名がmasterではなくmainになってるので、その点は注意。

Jamstackでポートフォリオサイト作りたかったので、いつも使ってるNuxt.jsをジェネレータとして、Netlifyにサイトをアップしてみた。 手順としては非常に簡単で、GitHubのリポジトリにNuxt.jsのプロジェクトをアップして、それをNetlifyに接続するだけ。 mai…

KeyboardEventを型として、keyとcodeの両方で"Enter"を検出する。 下記の例では、0文字のときは送信しなかったり、改行したいときの対策でShiftを押している時は送信しないようにしている。 <textarea v-model="text" @keypress="onInputKeyPress"></textarea> onInputKeyPress(_e) { if (_e.key == "Enter" || _e.code == "En…

Vueプロジェクトでデバイス検出するためにmobile-device-detectを使ってみた。 普段のサービス開発では、nuxt-device-detectを使っていて、これはそれに似たもの。 www.npmjs.com 導入 $ yarn add mobile-device-detect Vueファイルの中でいちいち呼び出すこ…

普通のVueプロジェクトでマテリアルアイコンを使いたかったので、このライブラリを導入してみた。 クラスを指定するのではなく、コンポーネントを読み込む形式。 www.npmjs.com チートシートはこちらを参照。 cdn.materialdesignicons.com

こちらを参考にやってみた。 qiita.com 使いたいタイプ（Solid, Regular, Brand）を読み込んで使う形式。有料版とはまた別なので注意。 yarnの場合のインストールコマンドは下記の通り。 # 必須 $ yarn add @fortawesome/vue-fontawesome @fortawesome/fonta…

開発環境構築中に下記のエラーが表示された。 Asset filtered out and will not be served: add Rails.application.config.assets.precompile += %w( chartkick.js ) to config/initializers/assets.rb and restart your server config/initializers/assets.…