2021年の振り返り。 とりあえず今年も１年間ほぼ毎日技術ブログを書き続けることができました。 正確には今年の1月6日の仕事始めから12月24日の仕事納めまでの月〜金の毎日というルール。 去年から始めて丸２年間続けられました。 数をみたらそこそこの量の…

JSConf2021の最後に発表された元Chromium開発者の@kinuさんの基調講演が非常に印象に残っていて、これを忘れないように書き起こしておこうと思う 内容はChromiumの開発組織におけるプロジェクトの進め方というもの Chromiumは様々な国と地域の人たちで構成さ…

前回、前々回に続いてState of CSS 2021で知らなかったところをキャッチアップしたい 2021.stateofcss.com 前々回の uga-box.hatenablog.com 前回の uga-box.hatenablog.com アクセシビリティ prefers-reduced-motion 前庭運動障害者など、特定のアニメーシ…

前回に続いてState of CSS 2021で知らなかったところをキャッチアップしたい 2021.stateofcss.com 前回の uga-box.hatenablog.com インタラクション JavaScriptを使わなくてもページを操作するを制御することができればCSSでできるなら CSS Scroll Snap スク…

State of CSS の2021年版が今年もでたのでみてみた 来年はIEのサポートが正式に不要になるということで、これまでIEで使えないからと疎かにしていたCSSの知識をキャッチアップしたい 2021.stateofcss.com よく知らなかったものを取り上げる レイアウト サブ…

iframe要素に対して、親要素からCSSでスタイルをあてることができるかがわからなかったので調べた 結論、CSSでスタイルをあてることはできないが、JavaScriptctで操作することは可能 ただし、クロスオリジンに対する操作はブロックされるためJavaScriptでもi…

LINE Design Systemが公開されていたので気になったところのメモ t.co LINE デザインシステムとは LINEデザイン全般を構成するComponents、Interaction、およびUXの統合ガイドライン LINEサービスの効率的な開発と、一貫したユーザーエクスペリエンスを提供…

モジュールをモック化するときにjest.mock(...) 関数を使えばモックにすることができる jestjs.io Jestのドキュメントにはaxiosを使った例がある // users.test.js import axios from 'axios'; import Users from './users'; jest.mock('axios'); test('shou…

ある関数のテストを書いているとき、その関数内で呼び出している別の関数（fetchしている関数）をモックにしている このときテストするロジックが以下の場合 fetchの取得結果が５件以下の場合は、検索条件を変えてもう一度検索する 検索条件に応じたモックの…

Log4jの脆弱性の件で、CVE-2021-44228 のCVEとは何か知らなかったので調べた こちらの記事が参考になった qiita.com CVE (Common Vulnerabilities and Exposures)は共通脆弱性識別子のことで、脆弱性情報を一意に管理するためのIDをリスト化したもの MITRE（…

JSConf JPで@takepepeさんのスライドでスキーマ駆動開発という言葉が出てきて、はっきりとはよくしらなかったので調べてみた speakerdeck.com スキーマ駆動開発とは？ 例に倣ってSchema-Driven-Development（SDD）とも略されるみたい SDDはスキーマ（システ…

Log4jの脆弱性 CVE-2021-44228 のフローがわからなかったので調べた 調べたら具体的なやり方がわかったが、ここでは直接的なフローは書かないようにする www.cyberkendra.com 概要 Log4jのJNDI Lookup機能で外部からの入力で任意のJavaコードを実行できてし…

フロントエンドエンジニアをやるときに、「余計なことはせずEricMeyerのリセットCSSを使おう」と教えてもらってからEricMeyer氏のを使い続けている 困ることはなかったが、もう10年前のやつなのでそろそろと思っていた そんなとき、以下の記事をみつけた t.c…

こちらのイベントを視聴した modeling-how-to-learn.connpass.com このとき、ある登壇で出てきた「RDRA」という要件定義手法を知ったので調べてみる RDRAとは？ k-method.jp RDRAとは神崎善司氏が考案したリレーションシップ駆動要件分析(Relationship Drive…

これまでURLからクエリパラメータを取り出すときに外部ライブラリのquery-stringを使っていたが、IE対応をしなくて良いということになったのでURL APIが使えるようになった developer.mozilla.org 基本的な使い方として、以下のようにURL オブジェクトを作成…

ElasticsearchのAggregationで集約するときに、ある条件にマッチしたドキュメント（レコード）だけでsumしたい 例えば、物件ドキュメントが以下のような物件タイプというフィールドを持っている場合 物件タイプ: アパート、マンション、一軒家、ホテル、コン…

Next.js12のミドルウェアに関するお話を聞いたのでメモ なぜ脱Expressになる可能性があるのかが分かっていなかったが、説明を聞いた後はなるほどという状態になった Next.js のミドルウェアとは nextjs.org ミドルウェアは、ユーザーが入力したリクエストに…

Storybook6.4リリースに伴いplay関数と@testing-library/user-eventで インタラクションの定義を試そうとしたところ、そのコンポーネントがReduxのstoreの値を使うためProviderを利用する必要があるのだが、testing-reactのexampleを探してもplay関数と仮想D…

JSConfで@takepepeさんの話の中で出てきたhygenが便利そうだったので調べてみた www.hygen.io hygenはCLI からファイルを雛形出力してくれるツール 例えば、１つのReactコンポーネントをつくるときに、それと一緒に.stories.tsxや.test.tsxファイルも必要に…