そもそもDenoとはDenoは、Node.jsを作ったRyan Dahlによって作られた新しいJavaScript/TypeScriptランタイムである。Node.jsの問題点、例えばTypeScriptを使用する際に別のビルドステップが必要な点などを解決することを目的としている。DenoにはTypeScriptとWebAssemblyのサポートが組み込まれており、npmのようなパッケージ・マネージャーに頼るのではなく、URLを使ってコードを直接インポートします。このアプローチにより、Denoは、各モジュールがサンドボックス環境で実行される、より安全でモジュール化されたアーキテク...

はじめに私の所属するチームではPRレビューが滞る問題を抱えていました。チームメンバーがそれぞれ小さなプロジェクトを複数抱えている場合には、要件の把握などでレビューの難易度が上がるため特に顕著でした。そのため、PRレビューを早めることに関心がありチームで色々試していたのですが、その中でも重要だと感じた2つの要素があります。それぞれ重要でよく耳にする指標ですが、2つ揃った時にこそ大きな効果を発揮したと感じているので紹介させていただきます。基本的にはgoogleのコードレビューガイド(日本語版)を参考にしているところが大きいです。 1つ目の鍵: PRの粒度(≒タスクの粒度)を...

はじめにjestと@testing-library/reactを使ってinputのテストコードを書く際、パスワードの入力inputを取得する場合にgetByRole("textbox") を使うことはできません。（getByLabelTextや getByPlaceholderTextなどの他のクエリを使用する必要があります）つまり、下記のテストコードはうまく機能しません。私はこの挙動について知った時に少し驚きました😮const user = userEvent.setup();const Component = () => ( <label> ...

はじめにこの記事では、Reactの公式ドキュメント（React公式ドキュメント）の輪読会の感想とおすすめポイントを簡単にまとめていきます。この輪読会を実施した背景ですが、私の所属するチームでは輪読会を行ったことがなかったため、手頃な教材でとりあえず進めてみたかったことと、Reactを使用した業務が多いことが主な理由です。（あとドキュメントが日本語でリニューアルして間もなかったというのも魅力でした） 輪読会の進め方読書の為の時間と、ディスカッションの時間をスケジューリングし、各自が読んでおきます。また要約を持ち周りで担当して、mtgで気づき,感想の共有と議論を行うというスタ...

:has()の登場以前:has()が利用できるようになり、CSSでの表現力は飛躍的に上がっている（:has()は最近のモダンブラウザならどれでも利用できるような状態である）。https://caniuse.com/css-hasChromeEdgeSafariFirefoxSafari on iOS10510515.412115.4:has()が使えない環境では、子要素がないときに親要素を消したいような要件の際、以下のように制限があった。 data属性の値をバックエンドで判定する<div class="parent" data...

はじめにTypeScriptが提供するUtilityTypesとは、コード内での型変換を容易にする為の(便利な関数のような)型達です。その中でもOmitとPickは、型レベルでオブジェクトのプロパティを選択したり除外したりする非常に便利な存在です。今回は、このOmitとPickのような挙動を実際のオブジェクト（JSオブジェクト）に対し再現する便利関数の実装を紹介します。 Omit関数の実装こちらのomit関数は、指定したキーを除外した新しいオブジェクトを作成します。export const omit = < T extends Record<string...

!本稿は、 ZOZOTOWN 開発本部のフロントエンドエンジニア有志で開催されている、スタイル分科会にて挙がったテーマを記事にしたものです。 この記事で分かることisolation: isolate; がどのような場面で有用かを解説します。複数のコンポーネントを配置したとき、それぞれの z-index が競合したケースを例に用います。 前提それぞれ position: absolute; の要素を内包する、 2 つのコンポーネントを横並びで配置します。 デモメニューに hover してみてください。デフォルトでは、表示される子メニューが他のコンポーネントの ...

!ZOZO Advent Calendar 2023のシリーズ 8 最終日の記事ですこの記事は 2023 年 11 月 6 日に行われた ZOZO Tech Meetup - Web フロントエンドで発表した資料を記事にリライトしたものです。資料だけでは伝わらない部分や、もっと詳細に触れたい部分もあったので記事にしました。当時の発表資料は以下です。多くの部分では同様のことが記載されていますが、細部や扱う内容を若干変えています。 はじめに3 年前にコンポーネントではなく Hook 自体をテストしたいというモチベーションから「React Hooks でテストをゴリゴリ書きた...

!これは ZOZO Advent Calendar 2023 カレンダー Vol.3 の 22 日目の記事です。昨日の投稿は @yuuuuuu10 さんの「GitHub Actions で XML の構文チェック」でした。 はじめにこんにちは。計測プラットフォーム開発本部バックエンドブロックのディーノです。普段は ZOZOMAT,ZOZOGLASS,ZOZOFIT といった計測技術に関わるシステムの開発、運用に携わっています。下記会社説明資料の 11 ページ目に計測技術の紹介があるのでご興味あれば覗いてください。本記事は、計測プラットフォーム開発本部に 3 年近く在籍して...

はじめにとある日、本番環境のKubernetes Pod数が0になってしまう事態が発生しました。この記事はそのストーリーを語っています。 Kubernetes運用の現状私たちのプロダクトはリリースから10周年を迎えており、溜まった技術負債を脱却すべく、インフラとアプリケーションのリプレイス中です。インフラはオンプレミスからAWSクラウド(コンピューティングはEKS)アプリケーションはVBScript+jQueryからRails+Next.jsリプレイスはまさに過渡期であります。段階的に移行しているため、日に日に、Kubernetes Podを増やしていました。 ...

!これは ZOZO Advent Calendar 2023 カレンダー Vol.3 の 15 日目の記事です。昨日の投稿は @yuuuuuu10 さんの「PagerDuty の iOS アプリをインストールすると電話通知が来なくなった話」でした。 はじめにこんにちは。計測プラットフォーム開発本部バックエンドブロックのディーノです。普段は ZOZOMAT,ZOZOGLASS,ZOZOFIT といった計測技術に関わるシステムの開発、運用に携わっています。下記会社説明資料の 11 ページ目に計測技術の紹介があるのでご興味あれば覗いてください。本記事では、計測プラットフォーム開...

プロローグ私は新規のプロジェクトを立ち上げるときにVanilla-Extractを採用しました。型安全なCSSがかけることやスコープをもたせることができ、管理画面のような肥大化しやすいプロジェクトでの導入が望ましいと考えたためです。しかし、この考えは現在打ち砕かれてしまいました。泣く泣くVanilla-Extractの導入を諦めSASSでの開発をしていたときStyleXのリリースのニュースが飛び込んで来たのです。https://stylexjs.com/blog/introducing-stylex/Type-Safeで再利用可能であり、静的なCSSのパフォーマンスとスケ...

はじめにこの記事は、情報検索・検索技術 Advent Calendar 2023 の 11日目の記事です。本記事では、最新のElasticsearchの公式ドキュメントの内容を元にQ&Aを行うチャットボットを、LLMとLangChain、さらには、Elasticsearchのベクトル検索機能を使って作成したので、実現方法や利用した技術について紹介します。また、RAGを使ったWikipediaのQ&Aを作った話が、同アドベントカレンダーの4日目の記事で紹介されているので、気になる方はご参照ください。https://secon.dev/entry/2023/12...

!これは ZOZO Advent Calendar 2023 カレンダー Vol.3 の 8 日目の記事です。昨日の投稿は @yuuuuuu10 さんの「メンターを任されてまずやったこと」でした。 はじめにこんにちは。計測プラットフォーム開発本部バックエンドブロックのディーノです。普段は ZOZOMAT,ZOZOGLASS,ZOZOFIT といった計測技術に関わるシステムの開発、運用に携わっています。下記会社説明資料の 11 ページ目に計測技術の紹介があるのでご興味あれば覗いてください。本記事は、Scala で CSV エクスポート処理を代表的なライブラリで実装し、それぞ...

!🎄本エントリは『WebXR』をテーマにしたアドベントカレンダー『WebXR ( WebVR/WebAR ) Advent Calendar 2023』の Day 2 のエントリです。昨日は @schktjm san の『ChatGPT にコンテキストに沿った代替テキストを生成してもらった』でした。今年は 1 日に 9 本の記事が公開されるので、ぜひ他シリーズの記事もご覧ください。 自己紹介あるいは前置き@ikkou です。お仕事では XR 屋や DevRel 屋の他、社内外における配信屋をやっています。2020 年のコロナ禍を契機として、あらゆる物事のオンライン化が加速しま...

本エントリはZOZO Advent Calendar 2023 シリーズ4の5日目の記事です。私はDevRelとして、エンジニア向けの社内報でテクニカルライティングtipsを紹介する連載をしています。これまで自分が技術同人誌を書いて校正された経験を元に、少しずつノウハウを共有してみようとはじめました。数ヶ月続けた連載の内容に加筆・修正を加え、まとめたものを本記事で公開します。 一文を短くする一文は50文字程度までとしましょう。それだけで文章は見違えるほど良くなります。 よくない例改善したかったのは文のはじまりから結論に至るまでが長く読み手に負担をかけるところで、その改善方法...

はじめにこの記事は、ZOZO Advent Calendar 2023 カレンダー シーズン6 の 3日目の記事です。昨日の記事は @itiblogさんによる「AWS re:invent参加にあたって知っておいたほうが少し快適になること」でした。 概要Elasticsearchの公式ドキュメントをGitコマンドを使ってローカルにサクッとダウンロードする方法について紹介します。※ スクレイピング等の負荷をかけることはしません 前提知識Elasticsearchの公式ドキュメントは下記リポジトリで管理されています。https://github.com/elastic/...

!本記事は、ZOZO Advent Calendar 2023 シリーズ8の3日目の記事です。 はじめにCloud Functionsで軽量なバッチシステムを構築していたところ、システムを構成するリソースが多く、手動管理に限界を感じてTerraformを導入しました。Google Cloud公式チュートリアルを参考に導入したものの、あくまでチュートリアルなので、実用面でそのまま使うには不便な点がいくつかありました。そこで本記事では、公式チュートリアルをより実践的なTerraformコードに育てるポイントをいくつか紹介します。 実行環境macOS Ventura 13...

!本記事は、ZOZO Advent Calendar 2023 シリーズ9の2日目の記事です。 はじめにBigQueryのクエリ結果を定期的にSlack投稿するソリューションは様々あります。特に、固定行数を投稿する場合は、ノーコードで簡単に実現できるでしょう。https://techblog.zozo.com/entry/bq-to-slack-with-nocode一方で、実行タイミングによって可変な行数を投稿する場合は、GASで多少のローコードが必要になってきます。本記事ではこうしたケースでも、できるだけ最小限の労力で実現するためのソリューションを紹介していきます。...

はじめにタイトルの通り、今流行りのChatGPTを使ってSwiftのXCTestの自動生成ツールを作りました。どのように開発したのか、使い方などをざっくり解説します。スターくれたら嬉しいです。https://github.com/NakaokaRei/XCTestGen CLIツールの作成Swift Packagesを使い、CLIツールを作成しました。作業ディレクトリ下で以下のコマンドを実行するとテンプレートが作成されます。詳しい方法はSwift Packagesを使ったCLIの開発はいろんな方が解説しているのでそちらを参照ください。https://qiita.com/...