UGA Boxxx

つぶやきの延長のつもりで、知ったこと思ったこと書いてます

【Java】デフォルトコンストラクタをprivateにしてたらObjectMapperでデシリアライズが失敗した

JacksonのObjectMapperを使って、あるオブジェクトをデシリアライズしようとしたところ「ofコンストラクタが見つからない」というエラーが発生してでシリアライズが失敗した 原因はわからないままだが、やったことをメモ 失敗したクラスは以下 @Value public…

【Architecture】Androidのアーキテクチャ

Androidアプリの開発をやったことがないが、Androidのアーキテクチャについて調べてみた developer.android.com Android アプリも例に漏れずサイズが大きくなるにつれきちんと関心が分離されたアーキテクチャを定義することが重要になる ドキュメントによる…

【開発環境】asdfというバージョン管理ツール

asdfというバージョン管理ツールを知ったので調べてみた github.com Homebrewでインストール $ brew install asdf $ echo -e "\n. $(brew --prefix asdf)/asdf.sh" >> ~/.zshrc $ source ~/.zshrc これで使えるようになる インストールできるプラグイン一覧…

【Architecture】iOS の VIPERアーキテクチャ

iOSアプリをつくったことがないのだが、iOSアプリのアーキテクチャでVIPERというアーキテクチャがあることを知ったので調べてみた こちらの2つの記事が参考になった qiita.com cheesecakelabs.com iOSの開発現場で生まれたアーキテクチャで、View , Interac…

【WebAPI】URIの2つの仕様

ある検索フォームを実装したところQAの人から「? 」を含むキーワードの検索がおかしいと指摘があった すぐにURIエンコードが必要だとわかってencodeURIComponentを使ってキーワードをエンコードしてOKが出たのだが「他の記号は大丈夫なんでしょうか?」とい…

【デザイン】MicrosoftのInductive User Interface Guidelines

CQRS を考案した Greg Young 氏の以下のドキュメントを以前読んでいたときに出てきたInductive UIについて気になったので調べてみた https://cqrs.files.wordpress.com/2010/11/cqrs_documents.pdf CQRSの文脈的には、 コマンドを構築するにあたってUIは一般…

【デザイン】Apple Human Interface Guidelines が大幅リニューアル

Apple Human Interface Guidelinesが大幅にリニューアルされたというニュースを聞いた developer.apple.com OS特化でガイドラインが分かれていたが、OS共通的な箇所が読みづらかったので、クロスプラットフォーム的に統一したドキュメントにしたとのこと dev…

【CQRS】サーバーとクライアントがDTOのやりとりをしている時点でドメイン知識は失われているという話

こちらの記事で、サーバーとクライアントがDTOのやりとりをしている時点でドメイン知識は失われているという話をみた panda-program.com 元の話はCQRS を考案した Greg Young 氏の以下のドキュメントによるもの https://cqrs.files.wordpress.com/2010/11/cq…

【CSS】scroll-snapでCSSだけでカルーセルをつくる

CSS

横スクロールをしてコンテンツを見せるときにscroll-snapというCSSを使うとカルーセルのようにピタッといい感じのところで止めてくれるCSSを知って感動した How do Nike and Apple make such smooth and touch friendly carousels with pure CSS?/* tl;dr */…

【Architecture】Naked Object Pattern とは?

Naked Object Pattern というアーキテクチャパターンを聞いたので調べてみた wikipediaより en.wikipedia.org 次の3つの原則によって定義される すべてのビジネスロジックは、ドメインオブジェクトにカプセル化する ユーザーインターフェイスは、ドメインオ…

【Test】Test Anything Protocol (TAP)

Test Anything Protocol(TAP)というテスト結果を出力するときのフォーマットを知った testanything.org TAPはPerlのテストハーネスの一部として誕生したものらしい JavaやJavaScriptを書くときはテストツールが出力するものに特に気に留めていなかったが、…

【Next.js】getServerSidePropsとデータフェッチライブラリの効率が悪い場合があるという話

Next.js のgetServerSidePropsとswrやReact Queryなどのデータフェッチライブラリを一緒に使うと、効率が悪い場合があるという話を聞いた getServerSidePropsとはNext.jsのデータフェッチ手法で、getServerSidePropsという関数をページからexportすると、リ…

【GAS】setTimeoutは使えないのでUtilities.sleepを使う

GAS

Google Apps ScriptでsetTimeoutをやりたかったが、できなかったので調べた developers.google.com 以下の処理で遅延させることができる Utilities.sleep(1000); sleep(milliseconds) Sleeps for specified number of milliseconds. Immediately puts the sc…

【Jest】window.location.hrefの値を検証したい

あるクリックイベントの中で、最後window.location.hrefで画面遷移させているコンポーネントをテストしたい JestはNode環境で動いているので、何もせずテストでexpect(window.location.href).toBe(expected)と書いてもWeb標準のwindowがないためエラーになっ…

【Jest】StorybookのStoryを再利用してテストする

StorybookのStoryをJestに取り込んでコンポーネントのテストをしたい このとき、必要なライブラリは以下だとわかった @testing-library/react @storybook/testing-react @testing-library/jest-dom @testing-library/reactはReactの仮想DOMを操作するのに必…

【Webpack】webpackでビルド中にNodeのメモリ不足で落ちる

CIであるソースをWebpackでビルド中にエラーが発生して中断した 原因ははっきりとOOMと出ていたので実行時のmaxメモリサイズを増やすことにした エラーメッセージもほぼこの方の記事通りだったので参考にした qiita.com 結果、次のコマンドで実行することで…

【TypeScript】TypeScript 4.7の新機能の気になったやつだけ

Typescript4.7の新機能をいくつかみてみた devblogs.microsoft.com ECMAScript Module Support in Node.js TypscriptにおけるNode.jsのECMAScript Moduleをサポート これにより .mts/.ctsという拡張子が増えた ESM / CJS ごとに型定義を読み分けられるように…

【Git】ブランチの鮮度順が知りたい

Git

実装中のブランチがたくさんあってどれが新しいかがわからなくなったので更新日の降順にならべたい git branch --sort=<key> これを使うとよい git-scm.com にはgit-for-each-refと同じもの(objectsize, authordate, committerdate, creatordate, taggerdat)が</key>…

【イベント参加ログ】Figmaの制作フロー大解剖

こちらのイベントに参加した cssnite.doorkeeper.jp Qiita株式会社の綿貫さんが1人で2時間Figmaの制作フローを解説するというイベント 都度質問の回答をしながらだったのでちょっとやりにくそうだったが、とても勉強になった 特に参考になったのは以下の2…

【Figma】Figma Tokens

気になっていたFigma Tokensについて調べた www.figma.com Figma TokensはFigmaでデザインしたデザイントークンをReactなどで使用できるようにするFigma Plugin borderの半径やspacerの単位、カラーやタイポグラフィまで、あらゆるデザインオプションに使用…

【React】useEventという提案段階のhooksを知ったのでざっくりメモ

2022/5/14に開催されたTechFeed Conference 2022を拝聴した TechFeed Conference 2022 このとき@koba04さんの発表で、提案段階のuseEventとという新しいHooksを知ったのでメモ github.com useCallbackでこのように書いていた処理では、中でnameを使っている…

【Web Accessibility】アクセシビリティツリー

2022/5/14に開催されたTechFeed Conference 2022を拝聴した TechFeed Conference 2022 このときのアクセシビリティツリーに関するメモ アクセシビリティツリーとは 支援技術向けに公開される情報がまとめられたツリー スクリーンリーダーなどの支援技術はこ…

【CSS】TechFeed Conference 2022で知ったモダンCSS

CSS

2022/5/14に開催されたTechFeed Conference 2022を拝聴した TechFeed Conference 2022 このときの鹿野さんのセッションで知ったCSSについてのメモ scroll-margin-top これまでアンカーリンクでページ内遷移をした際に、アンカー要素の上部にスクロールするた…

【Webパフォーマンス】CloudinaryでBlurをかけたら画像サイズが約70%削減された

コアWeb Vitalsの一つLCPを改善したい 対応策としては調査済みで、 改善方法 サーバーのレスポンス時間の改善 レンダーブロッキングスクリプトを避ける 効率的な画像エンコード 次世代フォーマットでの画像配信 テキスト圧縮の有効化 オリジンへの事前接続 …

【TypeScript】SymbolでIDを公称型にする

TypeScriptで元はstringだが型定義したIDを作りたいとき type AreaId = string; のように定義していたが、TypeScriptは構造的な部分一致により同一の型かどうかを判断しているので、これではどんなstringの文字列も通してしまう そこで厳密に区別される仕組…

【Figma】Config2022での新機能を触ってみた

Figma Config 2022 発表されたアップデートのうち、気になった機能を触ってみた Figma Releases Auto Layout Auto Layoutは入れ子になっている要素の長さや数に応じて、自動的にオブジェクトのレイアウトを調整してくれる機能 これの複数要素間のスペースを…

【Github Actions】ブランチ名を取得したい

ChromaticのビルドをGithub ActionsのJobにするときにブランチ名を使いたい Github Actionsでブランチ名を取得するにはどうするか調べた 以下の記事が参考になった qiita.com プルリクエスト時は以下 マージするブランチ名は ${{github.head_ref}} マージ先…

【Redis】Redisクライアントをモック化したい

Redisを使っているプロジェクトでJestでテストが失敗するのでRedisをモック化したい 調べたらredis-mockがよさそう www.npmjs.com 基本的な使い方 import redis from 'redis-mock' jest.mock('redis', () => redis) 毎回これを記述するのは大変なのでjest.co…

【Chromatic】squash and merge でmainにマージするフローの場合のビルド

Chromaticは特に指定がない限り同じブランチかそのブランチのコミット履歴に属する以前のビルドとの差分をチェックする そしてその差分が承認されるとそれがベースラインのスナップショットとなり次回の変更との差分に使用される Chromaticのブランチングと…

【Github Actions】node_modulesをcacheしてビルドを早くしたい

Github Actionsのあるジョブ内でnpm installしているが、毎回やるのは無駄なのでキャッシュしてビルドを早くしたい 調べたら公式のこれを使うのがよいみたい github.com Jobの実行前のnodeの環境を設定できる 基本的な使い方 steps: - uses: actions/checkou…