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ファイルも必要に…

ある業務フローをみたときに、ある作業がチームの中で１人しかできないものになっていることに気づいた かつ、その作業が後続タスクに影響があるため、１人の作業遅れがリリースに影響を及ぼしてしまう可能性がある 私はこれをクリティカルパスに問題がある…

11/27の開催された JSConf JP 2021の参加レポ jsconf.jp 最初から最後の懇親会まで参加したのは初で、どの登壇も興味深く面白かった リアルタイムでは３レーンだったのが惜しまれたが、アーカイブが残っていた！ JSConf.jp Track A - YouTube JSConf.jp Trac…

Next.js 12に関連して、エッジコンピューティングについてのお話を聞く機会があったのでメモ Vercelのエッジサービス Vercelのエッジサービスは以下の３つで、Next.js 12 でEdge Functionsが新しく追加された Edge Network Serverless Functions Edge Functi…

@takepepeさんのスライドにあったReact Locationの話が気になったので、React Queryと合わせてどういうものか調べた より速い WEB を目指す Next.js / nextjs-make-the-web-faster - Speaker Deck React Query react-query.tanstack.com React Queryは、Reac…

ShopifyのHydrogenやOxygenを知らなかったので調べた Hydrogen こちらが参考になった www.smashingmagazine.com Hydrogenはオンラインストアのサイト（ストアフロント）構築の複雑さを解消し、ブランドを際立たせる体験の構築に集中させることを目的としたRe…

Remixが本日リリースされた remix.run RemixはOSSになる前に調べていて注目しているフレームワーク uga-box.hatenablog.com インストールして試してみる $ npx create-remix@latest インストーラーに従ってもろもろ環境を選択して実行 $ npm run dev http://…

久々にshellを使って文字列操作をしようとしたらわからず調査しまくったのでメモ きっともっといい方法があるだろうけど、とりあえず調べたことが勉強になったのでよかった やりたいこと 特定のキーワードでgrepしてファイルに書き出す 書き出したファイルの…

前回のNext.js12のReact18対応のNew Streaming SSRの続き uga-box.hatenablog.com 次は、React Server Componentsに関して、もう少し詳しいお話を聞く機会があったのでメモ React Server Components React Flightとも呼ばれ、RSCと略されるみたい サーバーサ…

Reindex実行後、Reindexが終わったのかどうかがわかないので進捗が知りたい 下のドキュメントによると_tasks/で確認することができる www.elastic.co 基本的には_tasks/で実行中のタスク一覧を確認すればよさそう { "nodes": { ... "bgQV-2YaTymKCzT4bI29dg"…

Elasticsearchで以下のようなフィールドがある id: 00000001:ja この値をコロン「:」でスプリットした時の最後の要素は言語コード（jaは日本語）を示しているのだが、これを変更してマレーシ語を意味する以下のようなデータをつくりたい id: 00000001:ms 案…

Atomic Designの作者Brad Frost氏が最近デザインシステムの考えを変えた話 bradfrost.com デザインシステムは「時間を節約し、品質を向上させる」と話題になっている しかし、プロダクト全ての課題を解決しようとすると失敗するよという記事 デザインシステ…