はじめに ナノ秒精度の RFC3339 文字列を Web ブラウザの JavaScript で扱っていて予想外の挙動をするケースがありました。 一部のブラウザ (確認した範囲では WebKit のみ) では以下の挙動をします。 new Date("2022-12-31T23:59:59.999999999Z").toISOString() // => "2023-01-01T00:00:00.000Z" 冷静に考えると Date はミリ秒精度を扱うので、それを超える精度を扱おうとした際に予想外の挙動になるのは当然とも言えますが、この件について仕様を確認した結果などを書き残しておきます。 Date コンストラクタに与える日付文字列の仕様 MDN の JavaScript リファレンスにおける Date() コンストラクター のページには、引数に日付文字列を与えた際の挙動について記載されていま
これは Livesense Advent Calendar 2022 DAY 15 の記事です。 はじめに 転職会議事業部エンジニアの、池田、犬島、佐藤、浜田です。 転職会議は、ユーザーの口コミ投稿によって成り立っている転職サイトです。 フロントエンドはReact/Next.jsによる独立したマイクロサービスとして切り出されており、BFFを通じてバックエンドのサービス群とAPI通信する構成をとっています。 サービスの性質上口コミを中心とした検索流入が重要であり、SEOの文脈でフロントエンドのパフォーマンス改善の必要性は認識されていましたが、機能開発や負債解消もあり、まとまった対応ができない状況が続いていました。 この状況を改善すべく、1年間継続的に改善に取り組み、Web Vitalsの健全化、パフォーマンススコアの大幅な改善を達成することができました。 本記事では、特に効果が大きかった改善
テックタッチアドベントカレンダー17日目を担当する kenshin です。 今年もあと少しで終わりですね。今年を振り返るのために2022年に食べたラーメンの杯数を数えてみると121杯(執筆時点)でした。年末までにあと何杯食べられるかな。 さて、今回は React18 で追加された useSyncExternalStore を使ってみました。 useSyncExternalStore とは 利用場面 使い方 実際に使ってみよう 最後に useSyncExternalStore とは React18 で新たに追加された React フックです。 React コンポーネントの多くは props、state、context からデータを参照します。 ただし、React 外部のデータソースから値を参照する必要がある場合も存在します。 このような場合、 useSyncExternalStore を使う
TypeScript/JavaScript: performance.mark を使うときは初回 mark は捨てる?JavaScriptTypeScriptperformance速度比較 背景 ある Library 関数において無駄な処理だなぁと思った際に、感覚ではなく、客観的に見せる為に速度比較をしようとした。 TypeScript 初心者が辿り着いたのが performance.now による計測 performance.mark/measure による計測 どちらも同じ performance なんで、何が変わるんだろうとなんも考えず計測関数を用意して測ってみたところ・・ 何故か、想定通りに計測出来なかった。その原因推測と対処法の共有 そう Solve「本質を追求し問題を解決する」 の実現・・の筈 結論 performance.mark を使う際は、一個目は cache が効いてな
NTTテクノクロスの上原です。 この記事はNTTテクノクロスアドベントカレンダー2022、19日目の記事です。昨日は@kanaza-sさんの記事「PostgreSQL15のロジカルレプリケーションを触ってみる」でした。 tRPCとは何か 最近話題のtRPCですが、あらためて簡単に説明します。 tRPCは、TypeScriptの静的型指定情報を積極的に利用した、遠隔プロシージャ呼び出しのライブラリです。つまり別のサーバ上のコードの呼び出しを、プロシージャ呼び出しのように書くことができる機能です。 tRPCの特徴は、TypeScriptに依存していることと、スタブ・スケルトンといったコード生成を行わないことです。設定ファイルやIDLもありません。コードだけです。 tRPCとは何でないか RESTではない POST,GET,PUT,DELETEなどHTTPのメソッドを使いわけない。使いわけは、q
これは何? この記事はReact18がどのように動いているのかをまとめた記事です。なるべくコードの記載はせず、図を使用して読みやすさを重視しています。また、これからReactの内部のコードを読む予定の方のために、各セクションの終わりにアコーディオン形式でGitHubのリンクを貼っています。 ※ この記事はnote株式会社 Advent Calendar 2022 の17日目の記事です。 対象読者 Reactの内部コードを読む気は無いが、裏で何をしているのか把握しておきたい方 これからReactの内部コードを読もうと思っている方 暇な方 Fiberについて まず最初に、Reactのドキュメントを漁っていると度々出現する「Fiber」についてお伝えします。 そもそもFiberとは何か 一部例外はありますが、1個のFiberは1個のコンポーネント(<MyComponent>や<div>など)管理
LayerX で機械学習エンジニアとして働いている松村 @yu-ya4 です。現在はAI-OCRチームにて、バクラクシリーズのOCR機能の開発を主に行なっています。この記事は LayerX Tech Advent Calendar 2022 の18日目の記事です。 OCR機能とは、アップロードされた請求書や領収書などの帳票の画像データを読み取り、人間が手入力せずとも必要な項目を自動で抽出してデータ化する機能のことです。以下は請求書OCR機能のデモ動画です。 www.youtube.com このブログは、このようなOCR機能を誰でも簡単に実現してしまおうとしている Document AI というサービスを触って検証した際のメモ書きとなります。API を扱う Client ライブラリもいくつかの言語で公開されており、今回は Python を使いました。もしかしたら私の仕事がなくなるかもしれませ
この記事はGoodpatch Advent Calendar 2022 18日目の記事です。 ソフトウェアエンジニアの 池澤です。 ここ最近はテクニカルディレクションとして仕事に関わることが増えました。その中で要件定義を作ったりデザイナーとエンジニアの橋渡しをする機会が多く、メンバーみんなが同じゴールを認識して制作できるようなより良い要件定義方法はないものかと探していました。 今回はそんな中で見つけたモダンな要件定義手法の一つ、RDRA(ラドラ)について、理解しやすくなるコツやカスタマイズしている内容についてお話しします。 なお、RDRAの詳細解説をするととても書ききれませんので、RDRA本体の詳細については公式サイト等をご参照ください。 RDRA(ラドラ)とは? 概要 RDRAのバージョン これまでの要件定義でよくある問題 期待される要件定義の姿 公式サイト おすすめの学び方 実際のRD
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、広告エンジニアの中山です。 唐突ですが、みなさまの Web アプリケーションに User-Agent 文字列を参照する処理はありますか? User-Agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.1234.56 Safari/537.36例えば User-Agent 文字列を解析して内容に応じて制御を分岐させたり、機械学習の特徴量として用いたり、さらには一般に悪しきユースケースとされていますが IP アドレスと組み合わせて fingerprinting に活用する … と
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く