柳 龍哉– Author –

こんにちは、フロントエンドエンジニアのやなぎ（@apple_yagi）です。 PR TIMESではプレスリリース検索などを行う際にOpenSearchを使用しており、PHPで生成した検索クエリをOpenSearchに送信して、検索を行なっています。検索クエリの生成はコードを読むことである程度はわかるものの、複雑なものになると最終的にどのようなクエリが出来上がるのかわかりにくいという問題がありました。その問題を解決するために、先日 spatie/phpunit-snapshot-assertions を使用したスナップショットテストを導入したのでご紹介...

こんにちは、フロントエンドエンジニアのやなぎ（@apple_yagi）です。 PR TIMESではフロントエンドのReactリプレイス当初より Barrel file を作成するルールがありました。しかし、先日そのルールを廃止することに決めたため、その経緯についてご紹介します。 【Barrel filesとは】 Barrel filesとは複数のモジュールを1つのファイル（Barrel file）にまとめてexportすることを指します。以下の例ではutils/test.ts 、utils/fuga.ts 、utils/hoge.ts で export されている定数を utils/index.ts で再exportしてい...

こんにちは、フロントエンドエンジニアのやなぎ（@apple_yagi）です。 先日のリファクタリングデーでReact Routerのバージョンをv6からv7にバージョンアップしました。その際に行った変更やPR TIMESにおけるReact Router v7の使い方についてご紹介します。リファクタリングデーについては以下の記事をご参照ください。 https://developers.prtimes.com/2021/12/13/introducing-refactoring-day/ 【バージョンアップの手順】 元々PR TIMESではReact Routerをv5.3.0から使用しており、v6（v6.3.0）へのバージョンア...

こんにちは、フロントエンドエンジニアのやなぎ（@apple_yagi）です。 先日、メディアリスト機能のリニューアルを実施しました。リニューアルの詳細については、以下のプレスリリースをご覧ください。 https://prtimes.jp/main/html/rd/p/000001477.000000112.html 本エントリーでは、私が開発を担当したインポートリスト機能にTanStack Virtualを導入して、リリース前にパフォーマンス改善を行なった話についてご紹介します。 【インポートリスト機能とは】 インポートリスト機能は、企業が取引のあるメディアの...

こんにちは、フロントエンドエンジニアのやなぎ（@apple_yagi）です。 PR TIMESではフロントエンドのスタイリングライブラリにEmotionを使用していましたが、4ヶ月ほど前からCSS Modulesへの移行作業を開始しました（移行の経緯などについては別エントリーで紹介する予定なので、本エントリーでは割愛させていただきます）。その際にhappy-css-modulesを使用してCSS Modulesの型定義を生成する選択を取りました。 しかし、happy-css-modulesには一つ改善したい点がありました。本エントリーではその点を解消するた...

こんにちは、フロントエンドエンジニアのやなぎ（ @apple_yagi ）です。 PR TIMESのバックエンドではPHPUnitを使用してUnitテストが書かれているのですが、テスト実行時に不要なログが大量に出力されていました。これは Notice Error や Logger によるログ出力によるもので長年放置されてきました。次の画像はGitHub Actions上でPHPUnitを実行した時の画像です。この画像では全体のログの1/3ほどしか写っておらず、実際にはまだまだログが出ています。 最近、私はFlakyなPHPUnitの調査を行っていたので...

こんにちは、フロントエンドエンジニアのやなぎ（ @apple_yagi ）です。 先日、PR TIMES上で企業アカウントを作成する際に情報を入力する企業登録申請フォームをReact + Viteにリプレイスしました。 https://prtimes.jp/main/registcorp/form 本エントリーではリプレイスするにあたり、使用したライブラリや、工夫した点などをご紹介します。 【企業登録申請フォームをリプレイスする難しさ】 企業登録申請フォームは入力項目が30項目あり、データ量が多いフォームとなっています。このようなフォームを...

こんにちは、フロントエンドエンジニアのやなぎ（ @apple_yagi ）です。 プレスリリース掲載ページ、キーワード検索ページに続き、PR TIMESのトップページを PHP + Smarty + jQuery から Next.js（Pages Router）にリプレイスしました。 https://developers.prtimes.com/2023/12/13/replace-press-release-page-with-nextjs/ 本エントリーではトップページをリプレイスするにあたり、使用したライブラリや、キャッシュの設定などについてご紹介します。 【SP用ページで使用するカルーセルライブラリの選...

こんにちは、フロントエンドエンジニアのやなぎ（ @apple_yagi ）です。 昨年、Integration TestツールをCypressからPlaywrightに移行しました。その際、Visual Regression Test（以下、VRT）を始め、1年ほど経ったので弊社で行っているPlaywrightを用いたVRTの運用方法についてご紹介します。 https://developers.prtimes.com/2023/04/10/migrate-from-cypress-to-playwright 【前提】 PR TIMESは、React + Vite製のアプリケーション（主に企業様の管理画面）とNext.js製のアプリケーション（SEOが重要...

こんにちは、フロントエンドエンジニアのやなぎ（ @apple_yagi ）です。 先日、バックエンドで行っているUnitテストの実装効率を上げるために簡単なSeeder（テストデータを作成するツール）を実装したのでご紹介します。 【前提】 PR TIMESのバックエンドはノンフレームワークのPHPで実装されています。また、ORM（Object-Relational Mapping）ツールなども使用しておらず、PDO と TetoSQL を利用して社内で開発した PrSQL という class を用いてデータベースを操作しています。 Unitテストは、PHPUnit ...