Webフロントエンド– tag –

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

こんにちは。PR TIMESでフロントエンドエンジニアをしている夛田(@unachang113)です。 今回はPR TIMES社内でHTML解体新書の輪読会を開催し、無事完走したので輪読会の進め方や効果について話そうと思います。 【輪読会を開催した経緯】 PR TIMESではエンジニアによってHTMLに対する知識量が人によって差があり、意味付けが間違ったマークアップやネストできる要素等がレビューで指摘できない課題がありました。 ネストできる要素はMarkuplintの導入で改善できましたが、意味付け等の知識に関しては個々人に委ねら...

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

こんにちは、PR TIMESでインターンをしている勝間田（@Sho_26_ts）です。 今回は、「メディアリレーション」プロジェクトの一員として担当した「自動選択リスト」機能のリニューアルについてご紹介します。2025年6月23日にリリースしたこのリニューアルでは、他のメディアリスト作成・編集画面と同じ仕様・デザインに統一しました。加えて、これまでできなかった検索や並び替えも可能となり、より使いやすい画面へと進化しています。 また、これに先立って2024年12月5日にメディアリストの管理画面もリニューアル...

こんにちは、フロントエンドエンジニアのやなぎ（@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を便利にするためのツールキットで...

こんにちは、フロントエンドエンジニアの小張（@kobari41257）です。 PR TIMESのフロントエンドはpnpm workspaceを用いたモノレポ（以下prtimes-frontend）で開発されていますが、ほぼ全てのworkspace packageでpackage.jsonのtypeが指定されていませんでした。 そのため、Next.jsがCommonJSランタイムで実行されていたり、モジュール解決に不要なコストが発生するリスクを抱えていました。 今回全てのpackage.jsonに"type": "module" を指定し、上記のようなCommonJSに依存した挙動をなくし、モジュール解決の不...

こんにちは。フロントエンドエンジニアの古園です。 PR TIMESでは日々エディターの機能開発を行っています。 今回はそんな中から多くのユーザーから要望があり、開発がスタートした見出し（ハイライト）機能をTiptapのExtensionを使用して開発した件について解説します。 【Tiptapについて】 まず解説の前提となるエディターライブラリ、Tiptapについて軽く触れておきます。 Tiptapはモダンなリッチテキストエディタの基盤として使用されているヘッドレスフレームワークで Extensionという数多くの拡張機能が用意...

こんにちは。PR TIMESでフロントエンドエンジニアをしている夛田(@unachang113)です。 PR TIMESではプレスリリース配信のエディターにTiptapというヘッドレスエディターフレームワークを使用しています。 2025年2月にTiptapのバージョンをv2.0.0-betaからv2.10.5まで上げ、3月に最新版までバージョンアップを実施したことを今回は話そうと思います。 【Tiptapのバージョンアップが滞っていた要因】 弊社では月に1回リファクタリングデーを実施していて、リファクタリングデーのタイミングでrenovateを使い依存して...

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

こんにちは。PR TIMESでフロントエンドエンジニアをしている夛田(@unachang113)です。 今回はエディターの機能の導線改善でリスト機能の利用数が上がった話をしようと思います。 【リスト機能とは？】 「リスト機能」は4分割サイズの画像を最大4つまで横並び表示できる画像装飾機能です。 画像の下の欄にはテキストを入れることができます。 PR TIMESは横並びで表示できる画像装飾機能として画像タイルという機能も存在していますが、画像タイルとの違いとしては以下があります。 画像が固定サイズで横並びで配置...