柳 龍哉– Author –

こんにちは、フロントエンドエンジニアのやなぎ（@apple_yagi）です。 2026年6月25日にGitHub Actionsに追加されたparallelを利用してPHPUnitを並列実行するようにした結果、CIのtest job全体の実行時間を4分42秒から2分58秒へ約37%削減できました。実行時間は、変更前後でそれぞれ複数回計測した結果から代表的な値になります。 本記事では、GitHub Actionsのparallelを使ってPHPUnitを並列化した方法と、並列化する過程で発生した問題についてご紹介します。 【GitHub Actionsのparallelとは】 GitHub Actionsの...

こんにちは、フロントエンドエンジニアのやなぎ（@apple_yagi）です。 PR TIMESでは、2023年からPlaywrightを用いたVisual Regression Test（VRT）を運用しています。VRTの運用方法については以下のエントリーで紹介していますので、ぜひあわせてご覧ください。 https://developers.prtimes.com/2024/04/26/visual-regression-test-using-playwright-in-prtimes/ 先日リリースされたPlaywright v1.62.0では、スナップショットの生成・比較を行うtoHaveScreenshotがWebP形式をサポートしました。PR TIMESではVRTの...

こんにちは、フロントエンドエンジニアのやなぎ（@apple_yagi）です。 PR TIMESでは2023年9月から XO をリンター・フォーマッターとして使ってきましたが、先日 Oxlint に移行しました。本エントリーでは Oxlint に移行した経緯や進め方、そして導入した結果についてご紹介します。 XO は、sindresorhus 氏が開発した Opinionated なリントルールを備えたESLintベースのラッパーツールです。フォーマッターの機能も兼ね備えており、 xo というワンコマンドでリントとフォーマットを実行することができます。 【XO ...

こんにちは、フロントエンドエンジニアのやなぎ（@apple_yagi）です。 先日 PR TIMES のフロントエンド環境に typescript-go を導入し、 tsgo（ typescript-go の実行コマンド） で typecheck を実行するようにしました。その結果、typecheck の実行時間が最大で 9 倍速くなったので、導入に向けて行った対応と結果をご紹介します。 【typescript-go とは】 typescript-go は Microsoft によって Go 言語で書き直されている TypeScript のコンパイラです。TypeScript 7 からはこのコンパイラが使用される予定で、...

こんにちは、フロントエンドエンジニアのやなぎ（@apple_yagi）です。 PR TIMESのフロントエンドではこれまで、MarkuplintやStorybook Testを用いたアクセシビリティ（a11y）テストを実施してきました。以下の記事はMarkuplintを導入した際の記事になります。 https://developers.prtimes.com/2025/03/10/markuplint/ しかし、PR TIMESではReactを利用して開発を行っているため、これまではコンポーネント単位での品質担保が中心となっていました。そこで、@axe-core/playwrightを導入し、HTML全体のa11y品質もチ...

こんにちは、フロントエンドエンジニアのやなぎ（@apple_yagi）です。 PR TIMES では 2021 年からプレスリリースアワードを開催しており、1 年間の内に日本で発表されたプレスリリースの中から、社会性・公共性・共感性・将来性等の視点から、プレスリリースの可能性拡大に貢献したものを審査・選考し、表彰しています。 https://prtimes.jp/pressreleaseawards 今年から新たな取り組みとして、プレスリリースアワード用のマイページをリリースしました。開発にあたっては、フロントエンドとバックエンドの両方で ...

こんにちは、フロントエンドエンジニアのやなぎ（@apple_yagi）です。 先日、企業ページを Recoil から脱却したエントリーを公開しました。 https://developers.prtimes.com/2025/07/18/company-page-recoil-migration/ このエントリーでも紹介した通り、Recoil を useMemo、useContext、TanStack Query、Jotai に移行しました。その後、Recoil の atomFamily を Jotai の atomFamily に移行したことによる無限レンダリングの事象を発見し、修正したのでご紹介します。 【発生した事象】 Jotai の atomFamily へ R...

こんにちは、フロントエンドエンジニアのやなぎ（ @apple_yagi ）です。 PR TIMESのフロントエンドでは、これまで状態管理にRecoilを利用してきました。しかし、Recoilは現在アーカイブされており、React19にも対応していません。そのため、現在Recoilからの脱却を進めています。昨年、弊社の桐澤が以下のスライドでRecoil脱却の進め方について紹介していましたが、その後の進捗としてRecoilの依存が深いページの脱却を完了することができたのでご紹介します。 https://speakerdeck.com/kirik/recoilwob...

こんにちは、フロントエンドエンジニアのやなぎ（@apple_yagi）です。 先月公開したエントリーでもご紹介した通り、PR TIMESのフロントエンドは現在CSS Modulesを使用してスタイリングを行っています。 https://developers.prtimes.com/2025/05/09/migrate-from-emotion-to-css-modules/ 上記のエントリーではhappy-css-modulesを使用してCSS Modulesの型定義ファイルを生成していましたが、先日css-modules-kitに移行したのでご紹介します。 【】 css-modules-kitはCSS Modulesを便利にするためのツールキットで...

こんにちは、フロントエンドエンジニアのやなぎ（@apple_yagi）です。 PR TIMESのフロントエンドではこれまでEmotionを使ってスタイリングを行っていましたが、2024年6月からCSS Modulesへの移行作業を進めており、先日その作業がすべて完了しました。本エントリーでは、移行の背景や技術選定、移行作業中に発生した問題などについてご紹介します。 【移行の背景】 社内の一部機能を2024年3月頃にRemix SPA Modeへ移行しようとしましたが、Emotionが動作しなかったため断念し、その経験からCSS Modulesへの移行を...