Webフロントエンド– tag –
-
PR TIMESにおけるPlaywrightを用いたVisual Regression Test
開発こんにちは、フロントエンドエンジニアのやなぎ( @apple_yagi )です。 昨年、Integration TestツールをCypressからPlaywrightに移行しました。その際、Visual Regression Test(以下、VRT)を始め、1年ほど経ったので弊社で行っているPlaywrightを用いたVRTの運用方法についてご紹介します。 https://developers.prtimes.jp/2023/04/10/migrate-from-cypress-to-playwright 【前提】 PR TIMESは、React + Vite製のアプリケーション(主に企業様の管理画面)とNext.js製のアプリケーション(SEOが重要... -
フロントエンドのGitHub Actions実行時間を削減するために取り組んだこと
開発こんにちは、フロントエンドエンジニアの小張です。GitHub Actionsの実行時間を削減するために取り組んだことについて紹介します。 【経緯】 PR TIMESではReactに関するコードを、monorepoとしてprtimes-frontendという1つのリポジトリで管理しています。 GitHub Enterprise Cloudプランでは月50,000分のGitHub Actionsを無料で実行することができますが、prtimes-frontendだけで7割近い時間を消費してしまっていました。またCIに時間がかかることで、Pull Requestを作成した後、10分近く待たないとコードレビュー... -
Renovateを使ってフロントエンドのバージョンアップを改善した話
開発こんにちは、フロントエンドエンジニアの小張です。Renovateを使ってフロントエンドのパッケージやライブラリのバージョンアップを改善したことについて紹介します。 PR TIMESではReactに関するコードを、monorepoとしてprtimes-frontendという1つのリポジトリで管理しています。 このリポジトリは作成されてから2年ほどしか経っておらず、使っているライブラリも比較的新しいため、今までバージョンアップの仕組みを特に整備していませんでした。 ただフロントエンドのライブラリはバージョンアップの頻度が多く... -
フロントエンドのLintツールをXOに統一した話
開発こんにちは、フロントエンドエンジニアのやなぎ( @apple_yagi )です。 PR TIMESではこれまでLintツールとしてESLintを使用していましたが、2023年9月からXOを使うようにし始めました。本エントリーでは、XOを導入した経緯や進め方、そして導入した結果についてご紹介します。 【導入をした経緯】 これまでPR TIMESでは .eslintrc.jsを自分たちで一から作り、ESLintルールを運用していました。しかし、その設定は最初期の環境構築時に色々なドキュメントを見ながら、つぎはぎで作成したものになってお... -
PR TIMES のフロントエンドを支える技術 2023
開発こんにちは。PR TIMES でエンジニアをしている岩元 (@yoiwamoto) です! プレスリリース配信サイト PR TIMES のフロントエンドは、一昨年ごろまでほぼ全てのページが Smarty + jQuery on PHP で実装されており、直近1、2年は機能追加・改修に合わせてこれらを順次 React 実装にリプレイスを進めています。 このような取り組みをどのような技術構成で行っているか、2023年の振り返りの意味も込めてざっくりと紹介します! 【リポジトリ構成】 React 実装は、これまでメインのバックエンドサーバーとのモノリスで構... -
BFCacheを利用してNext.jsで実装した無限スクロールのUX改善をした話
開発こんにちは、フロントエンドエンジニアのやなぎ( @apple_yagi )です。 先日、【月間9000万PV】プレスリリース掲載ページの Next.js 移行でやったこと、という記事が公開されました。こちらのブログの最後に軽く触れられていますが、プレスリリース掲載ページより前にキーワード検索ページのNext.js移行を行っていました。 https://developers.prtimes.jp/2023/12/13/replace-press-release-page-with-nextjs/ 本エントリーではキーワード検索ページをNext.js移行したモチベーションなどは割愛させていただきます... -
【月間9000万PVのPR TIMES】プレスリリース掲載ページの Next.js 移行でやったこと
開発こんにちは!PR TIMES 開発本部フロントエンドエンジニアの岩元 (@yoiwamoto) です。 先日、月間9000万 PV のプレスリリース配信サイト PR TIMES で、もっともアクセスが多い「プレスリリースページ」の実装を、PHP + Smarty + jQuery から Next.js に移行しました。 今回はこれについての詳細や難しかったことなどを共有します。 【背景と目的】 PR TIMES の Web アプリケーションのフロントエンドは、この数年、必要な部分から随時ページ単位で React 実装へのリプレイスが進んでいる状態で、まだ多くのページで... -
並列で実行していたGitHub ActionsのJobをまとめ、Billable timeを削減した話
開発こんにちは、フロントエンドエンジニアのやなぎ( @apple_yagi )です。 GitHub ActionsのBillable timeの削減のために、複数に分けて実行していたJobを、ある程度の粒度でまとめて実行するようにしたので紹介します。 【経緯】 弊社ではGitHub Enterpriseプランを契約しており、GitHub Actionsを月50,000分使用することができますが、先月(2023/07)使用時間の上限に達したため、一時的にGitHub Actionsが使用できない状況が発生しました。 その月は追加で課金を行なったため、すぐに使えるようになりましたが、... -
Storybookを用いてテストの可視化を進めた話
開発こんにちは、「PR TIMES Webクリッピング」の開発リーダーをしている小張です。 Storybookをユニットテストで活用している取り組みについて、紹介したいと思います。 【テスト文化と現状の課題】 半年ほど前から社内にテストを書く文化が根づき始め、フロントエンドのユニットテストも増えてきました。 https://developers.prtimes.jp/2022/10/31/tdd-workshop-2022/ それに伴い他のメンバーが書いたテストを修正する機会が増えたのですが、修正が難しい場合には一時的にtest.todoとしたり、テストを書いた人に修... -
CypressからPlaywrightに移行しました
開発こんにちは、フロントエンドエンジニアのやなぎ( @apple_yagi )です。 先日、フロントエンドのIntegration Testで使用されていたCypressをPlaywrightに移行したので、その理由や実際に移行してみて感じたメリットなどをご紹介いたします。 【なぜ移行したのか】 いくつか理由はありますが、大きな理由の1つとして Cypress は並列でテストを実行することができなかったことがあります。 Cypress で書かれた Integration Test はAPIリクエストを全てモックしているため、データベースの状態などにテスト結果が左右...