昨年は多くの方々にお世話になり、誠にありがとうございました。本年もどうぞよろしくお願いします。 2021年のふりかえりはこちら。 hyudoro.hatenablog.com 仕事について 「マネーフォワード Pay for Business」リリース後の本格的な運用フェーズに入りまし…
crypto.randomUUIDを使う機会があり、どうやってmockできるかを調べたのでメモ。 spyOnでmockReturnValueすると、valueがundefinedになってしまった。別の方法を探していて、Object.definePropertyを使えば良さそうということだったので、valueにfunctionを…
本年は多くの方々にお世話になり、誠にありがとうございました。来年もどうぞよろしくお願いします。 2021年は、相変わらず世間的には大変な年ではありましたが、私にとっては大きな転機となった年でした。 4月までは、NEORTでデジタルアートのサービスを開…
10月が終わり、フロントエンドエンジニアとして働き始めて満6ヶ月になった。タイミング的にもいろいろとプロジェクトが落ち着いたり、新しい体制になったりしたので、振り返って今後以降に繋げていきたい。 3ヶ月過ぎたあたりで書いた記事はこちら。 hyudoro…
それなりに大きなNext.jsのプロジェクトにnext/headを導入するにあたってやったことなどのメモ。 共通Headコンポーネント 下記では色々と簡略化してるけど、各ページ共通で使うtitleやmetaタグなどをまとめてprops経由で設定できるようにする。 // Head.tsx …
8月になって試用期間を終えたので、転職のことについて書いてみる。 今年5月からマネーフォワード社に入社し、福岡開発拠点でフロントエンドエンジニアとして働き始めた。それまでは7-8年ほどUIデザイナーをしており、今回が初めてのキャリアチェンジだった…
同僚の実装を見て「こうすればできるのでは？」と思ってやってみたメモ。同じような構成のDOMがたくさんあって、それぞれにTest IDなどを振るのがめんどくさい場合に便利。 下記はfooラベルを持つラジオボタンがたくさんあるAppComponentのテストをするケー…
例えば、最大値をユーザーごとに変えたいケースなど、APIから取得した値を使ってバリデーションしたいことがある。その際に、Schemaのあるファイルとデータを取得するファイルが同じなら、ただ変数を使えばいいのだけど、ファイルが別の場合の対応で悩んだ。…
この前仕事中に詰まった時に、「ペアプロしませんか？」とお誘いをもらい、おかげでスピーディに問題が解決＆勉強になった。お互いにリモート勤務でもできる方法があったので、次に自分が他の人とやれるようメモっておく。 ツール VS Code Live Share Live S…
フロントエンドエンジニアではあるけど、データをうまく活用していくことを求められており、興味が沸いたので勉強のためにはじめてみた。 自分はフロントエンドだけ極めたい、というエンジニアではない。フロントエンドに限らず、プロダクトを開発してビジネ…
オフィシャルサイトのコマンドでHomebrewをインストールしようとしたときのこと。OSは10.15.7。 % /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" ... ... ... ==> Pouring portable-ruby-2.6.3_2.yosem…
ブラウザ描画せずに、画像または動画のサイズなどのデータを取得したいときのTipsです。 まずは画像と動画をロードして返す関数をつくります。引数にファイルのパスを文字列として渡します。 ポイントはPromiseを使ってメディアファイルを取得する時にundefi…
配列の中から.find()や.filter()を使って条件に該当する要素を見つけるが、 findの場合は条件に該当した最初の要素を返し、filterの場合は複数の要素が帰ってくる場合がある。 条件に該当する配列の最後の要素だけ取得したい場合は、下記のように.reverse()…
<svg fill="currentColor"> <use href="/img/foo.svg#id=bar" /> </svg> svg { color: red; } ポイントは下記 svgタグにfill="currentColor"またはfill: currentColorを設定する useタグのhref属性にidをつけ、svgファイル側のsvgタグにid属性を設定する useタグの代わりにimageタグを使っても画像を外部読み込みできるが、その…
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
今更？なのかもしれないけど、XR領域についてもっと知りたかったので手頃なOculus Questを購入した。 まず箱の装丁かっこいい、次に導入体験もめちゃかっこいい。 チュートリアルなのにめちゃくちゃ感動してしまって、手汗がひどかった。どうしてもっと早く…
こちらを参考にやってみた。 qiita.com 使いたいタイプ（Solid, Regular, Brand）を読み込んで使う形式。有料版とはまた別なので注意。 yarnの場合のインストールコマンドは下記の通り。 # 必須 $ yarn add @fortawesome/vue-fontawesome @fortawesome/fonta…
GASを使って、BigQueryのクエリを叩いて継続率を計測しようとしてた時に、こんな感じのエラーがでた。 GoogleJsonResponseException: 次のエラーが発生し、bigquery.jobs.query の呼び出しに失敗しました: Encountered " <INTEGER_LITERAL> "1 "" at line 1, column 58. Was e</integer_literal>…
BigQueryからダウンロードしたstring型のデータの冒頭に、シングルクオーテーションが含まれていて除去したかった。 冒頭からN文字消す =SUBSTITUTE(対象のセル,LEFT(対象のセル,1),"") 末尾からN文字消す =SUBSTITUTE(対象のセル,RIGHT(対象のセル,1),"") S…
Creative Coding Fukuokaを主催してるのだけど、思うように人が集まらないので、meetup入るほどじゃないんだよな〜という人向けにSlackのワークスペースを作ってみた。以下Slackinで誰でも入れるようにするまでのまとめ。 Join Creative Coding Fukuoka on S…
タイトルがすべて。 <div v-for="(case, index) in cases" :key="index"> こんな感じで繰り返し処理を書いていたら、 'v-for' directives require that attribute value. と怒られた。同じように書いてあるところをコピペしただけだし、原因が全くわからなかったので諸々調べたが、予約語使ってると気づくまで2</div>…
2015年からの話になるが、備忘録として書いておく。 Processing3系になってからsize()のパラメータに変数を使えなくなっている。例えばdata内にある画像と同じウィンドウサイズにしたいときなど、変数が使えないと困る。もしパラメータに変数を入れようとす…
ライブコーディングの実践の場としてライブ配信して世界中の人に見てもらうのが良いのでは？と思い、いろいろ調べてやってみた。ライブ配信のやり方はそこら中に記事があるのでそっちを参照してください。この記事ではあくまで引っかかるポイントだけ載せて…
音のパターンを数字や処理で見るのは直感的でないため、ある程度思い通りのリズムにするには実践しながらクセのようなものを体験し、習得しなければいけない。なので、いろいろ試していった所感をメモっていきたいと思う。 今回検証するのはnに関して、音色…
