本年は多くの方々にお世話になり、誠にありがとうございました。来年もどうぞよろしくお願いします。 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…