Webフロントエンド– tag –

こんにちは、フロントエンドエンジニアのやなぎ（@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を導入して、リリース前にパフォーマンス改善を行なった話についてご紹介します。 【インポートリスト機能とは】 インポートリスト機能は、企業が取引のあるメディアの...

こんにちは。開発部で主にフロントエンドの開発を行なっている古園（@miyabin4113）です。 普段はプレスリリースを作成するエディターに関する業務に携わっています。 今回なぜフロントエンドエンジニアがバックエンド開発に挑戦したかと言いますと、以前からバックエンド領域に興味があったことが大きいです。 元々大学院ではゼロからサーバーを立てて研究開発用の環境を作成したり、個人開発でTwitter APIを用いたWebアプリを作成したりといった経験はあったのですが、業務でバックエンドを触ったことは一度もあ...

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

ここんにちはPR TIMES開発本部のインターンの Chanoknan です。 PR TIMESについてフロントエンドのCI パイプラインを改善についてお話しします。 PR TIMESでは、Reactで書かれたすべてのフロントエンドのコードのコードはMonorepo として管理しています。 そのMonorepoのCI パイプラインは、システム全体のLint、Type Check、Test、Buildを行うようにCIパイプラインが設定されており、これにはかなりの時間がかかり、GitHub ActionsのBillable Timeにも影響を与えます。これを緩和するため、CI処理時間を減らすた...

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

こんにちは　PR TIMES開発本部のインターンの Chanoknan です。 PR TIMES のトップページのアクセシビリティ改善に取り組みました。具体的にどのような改善を行ったのかについてお話しします。 【アクセシビリティとは？】 アクセシビリティとは、ウェブサイトやアプリケーションをすべての人が利用できるようにすることを指します。ここで「すべての人」とは、視覚や聴覚に障害のある人、高齢者、身体的な制約のある人、さらには一時的な障害（例：腕を骨折している、騒がしい場所にいる）を持つ人々も含まれます...

こんにちは、フロントエンドエンジニアのやなぎ（ @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用ページで使用するカルーセルライブラリの選...

こんにちは。2023年の7月に中途で開発本部に入社しました。フロントエンドエンジニアの夛田(@unachang113)です 昨年12月にリリースされたPR TIMESの新エディターの開発でRadix UIを使用したので、本エントリーではどのように活用したかを紹介します。 【Radix UIとは】 Radix UIはReact製のUIライブラリです。現在はThemesとPrimitivesの2つを提供されています。Themesの場合、styleが予め設定されていて、自分たちが実装したいUIとフィットしない場合が多いため、PR TIMESではheadlessUIのPrimitivesの方を採用し...

こんにちは、フロントエンドエンジニアのやなぎ（ @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が重要...