はじめに フロントエンドエンジニア組織の部署内で毎週読み合わせ会を開催している。開始してから1年半が経ち、執筆時点では開催回数は70回を超えた[1]。 きっかけ 毎週、個人でJSer.infoを読んでいたが、ほかのメンバーとの実務に関する会話の中で「（この話題は）JSer.infoでも取り上げられていたなー」と思う場面もあり、いっそのこと皆でパブリックに読む機会を作るのが良いでは…と考え、読み合わせ会を開始した[2]。 読み合わせ会とは 大まかには以下のような形式で実施している。 開催方法： Slackのハドルを利用 所属部署のrandomチャンネルで実施 開催頻度と時間： 毎週1回、1時間程度 ファシリテーター： 筆者（主催者） 参加者： 任意参加（出欠報告不要）・聞き専OK・発言自由 部署外や業務委託のメンバーが参加することもある 形式： 画面共有しながら記事の内容を読み上げつつ所感を

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

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

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

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

:has()の登場以前 :has()が利用できるようになり、CSSでの表現力は飛躍的に上がっている（:has()は最近のモダンブラウザならどれでも利用できるような状態である）。 Chrome Edge Safari Firefox Safari on iOS

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

この記事は 2023 年 11 月 6 日に行われた ZOZO Tech Meetup - Web フロントエンドで発表した資料を記事にリライトしたものです。 資料だけでは伝わらない部分や、もっと詳細に触れたい部分もあったので記事にしました。 当時の発表資料は以下です。多くの部分では同様のことが記載されていますが、細部や扱う内容を若干変えています。 はじめに 3 年前にコンポーネントではなく Hook 自体をテストしたいというモチベーションから「React Hooks でテストをゴリゴリ書きたい」という記事を書きました。 この記事を書いた当時は Hook やコンポーネントで使われる関数がそれぞれ正しく動いていることが確認できれば、それらを組み合わせて作るコンポーネントもある程度正しいことが担保されるではないかと考えていました。 また、コンポーネントは JSX が書かれていて DOM 構造と

これは ZOZO Advent Calendar 2023 カレンダー Vol.3 の 22 日目の記事です。昨日の投稿は @yuuuuuu10 さんの「GitHub Actions で XML の構文チェック」でした。 はじめに こんにちは。計測プラットフォーム開発本部バックエンドブロックのディーノです。普段は ZOZOMAT,ZOZOGLASS,ZOZOFIT といった計測技術に関わるシステムの開発、運用に携わっています。 下記会社説明資料の 11 ページ目に計測技術の紹介があるのでご興味あれば覗いてください。 本記事は、計測プラットフォーム開発本部に 3 年近く在籍しているバックエンドエンジニアが改めて組織やチームの良さについて振り返ってみたものです。 プロフィール 第二新卒として 2021 年 5 月に中途入社 約 3 年近く計測プロダクトを活用した新規事業開発にバックエンドエンジ

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

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

プロローグ 私は新規のプロジェクトを立ち上げるときにVanilla-Extractを採用しました。 型安全なCSSがかけることやスコープをもたせることができ、管理画面のような肥大化しやすいプロジェクトでの導入が望ましいと考えたためです。 しかし、この考えは現在打ち砕かれてしまいました。 泣く泣くVanilla-Extractの導入を諦めSASSでの開発をしていたときStyleXのリリースのニュースが飛び込んで来たのです。 Type-Safeで再利用可能であり、静的なCSSのパフォーマンスとスケーラビリティを手に入れられるとのこと。 これを逃すわけにはいきません。早速詳細を確かめ、次回新規プロジェクトが立ち上げるときに候補にできるのかを確かめましょう。 概要 この記事ではVanilla-Extractで問題だったことを振り返りつつ、StyleXではどのような構文が採用されVanilla-Ex

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

はじめに BigQueryのクエリ結果を定期的にSlack投稿するソリューションは様々あります。 特に、固定行数を投稿する場合は、ノーコードで簡単に実現できるでしょう。 一方で、実行タイミングによって可変な行数を投稿する場合は、GASで多少のローコードが必要になってきます。 本記事ではこうしたケースでも、できるだけ最小限の労力で実現するためのソリューションを紹介していきます。また、サービスとしての制約がいくつかあるため、ハマるポイントも合わせて解説していきます。 システム構成 システム構成は以下の通りです。詳しくは次章以降で解説していきます。 データ取得 BigQueryから対象データを取得する処理は、Connected Sheetsを利用してGoogle Sheetsに出力します。 メッセージ投稿 取得したデータを読み込み、Slackメッセージとして編集・送信する処理は、Google A

これは ZOZO Advent Calendar 2022 カレンダー Vol.7 の 13 日目の記事です。昨日の投稿は@yan_yanさんの 「Looker Studio（旧データポータル）を利用したダッシュボード作成の属人化を解消するための Tips」でした。 はじめに 今回はKubernetesにおけるリリースフローを改善したのでどのように行なったか紹介します。 最終的なアーキテクチャ 以前のリリースフロー applicationリポジトリのmainブランチにMerge Dokcer ImageのBuild manifestリポジトリのimageTagをKustomizeで変更 manifestリポジトリのmainブランチに対して変更内容をPush Argo CDがimageTagの変更を検知してPodのローリングアップデート 2,3,4はGitHub Actions上で行なってい

タイトルがすべてです。 本記事の対象者は NVIDIA GeForce RTX 2060 以上の NVIDIA 製 GPU を搭載した Windows PC ユーザーですが、macOS ユーザーでも NVIDIA Broadcast 以外のパートは適用できます。 Google Meet、Zoom、Microsoft Teams、Cisco Webex …と様々なビデオ会議ソリューションがありますが、ビデオ会議を実施する相手によって使われているソリューションが異なることはそう珍しくありません。そのたびにバーチャル背景を変えるのは面倒ですし、使用するソリューションによっては背景画像が設定できないこともあります。そんなときは汎用性の高い OBS の「仮想カメラ」を使うと捗るかもしれません。 髭を消したい 筆者は普段から髭を伸ばしていないので、時間帯によっては少しだけ伸びた髭が目立つことがあります

はじめに この記事は　ZOZO #2 Advent Calendar 2022 1日目の記事になります。 Elasticsearchに大量のデータを投入して、様々な検索処理を実験したいと思いました。 このような場合、よくWikipediaのデータが利用されますが、巷のWikipediaのデータをインデクシングする記事が古くて、最新の環境だと難航したので、今回まとめることにしました。 やること３行 Dockerで環境構築 Wikipediaのデータをダウンロード＆整形 整形したデータをElasticsearchにインデクシング 環境 M1 Mac Docker & Compose v2 イメージ：Python 3.10 準備 Elasticsearchにインデクシングするためのデータを用意したり整形したりといった準備について以下では説明しています。 最終的なファイル構成 最終的なファイル構成