React– tag –

こんにちは、フロントエンドエンジニアのやなぎ（@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には一つ改善したい点がありました。本エントリーではその点を解消するた...

こんにちは。フロントエンドエンジニアの桐澤（@kiririLee）です。PR TIMESはプレスリリースを配信する企業様がプレスリリースを作成・編集するためのエディターを提供しています。昨年の12月にUIリニューアルプロジェクトの一環でUIの更新と新機能が追加されたエディターがリリースされました。現在（2024年9月時点）PR TIMES上には、UIリニューアル前のエディターとUIリニューアル後のエディターが存在し、それぞれ現エディターと新エディターと呼ばれますが、この記事は新エディターに関しての記事です。 現エ...

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

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

こんにちは、開発チーム・バックエンドエンジニアのSongです。 最近、プレスリリースを受信したいメディア関係者（メディアユーザー）向けのマイページを PHP + Smarty + jQuery から PHP + React にリプレイスしました。 メディアユーザーのマイページ - メイン機能 このプロジェクトではリーダーとして挑戦しました。今回は、プロジェクトをどのように進行したか、そして初めてリーダーとして挑戦してうまくできたことや悔しかったことについてシェアしたいと思います。 ちなみに、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 ）です。 PR TIMESではこれまでLintツールとしてESLintを使用していましたが、2023年9月からXOを使うようにし始めました。本エントリーでは、XOを導入した経緯や進め方、そして導入した結果についてご紹介します。 【導入をした経緯】 これまでPR TIMESでは .eslintrc.jsを自分たちで一から作り、ESLintルールを運用していました。しかし、その設定は最初期の環境構築時に色々なドキュメントを見ながら、つぎはぎで作成したものになってお...