React– tag –

こんにちは。PR TIMES フロントエンドエンジニアの岩元 (@yoiwamoto) です。 PR TIMES ではいくつかのページが React で実装されており、Webpack でビルドを行っていました。 今回は、一部のページを除いてこの Webpack を Vite へ置き換えたので、その経緯や結果を共有します。 【まとめ】 ビルド時間が長いことが課題で移行を行い、結果として開発体験・デプロイ時間等が大幅に改善されました。 開発環境のみの移行 → フィーチャートグルでの本番試験 → リリース → Webpack の廃止と、移行は段階的に進めました...

こんにちは！開発本部のレーホアントゥです。 先日PR TIMESがサムネイル画像をPDFの１ページ目から自動生成し、その画像が資料とガイドラインのサムネイルとして使用されるという新機能をリリースました。なので、今回PDFの1ページ目からサムネイル画像を作成する方法を紹介したいと思います。 【やりたいこと】 現在、プレスキットの編集画面ではロゴ、画像、資料などのプレスキットの素材となるファイルをアップロードできる機能があります。ロゴ、画像はそれぞれの画像ファイルを変換したサムネイルが表示され...

こんにちは、フロントエンドエンジニアのやなぎ（@apple_yagi）です。 今年（2022年）の4月頃に、PR TIMESのフロントエンド開発基盤の構築を行い、各プロジェクトのリポジトリに散らばっていたReactで実装しなおした Frontend のコードベースを一つのリポジトリに集約することができました。 https://developers.prtimes.jp/2022/04/14/web-front-end-development-enviroment-in-prtimes-inc/ しかし、この時点では Frontend のコードベースを一つにまとめただけで、各プロジェクトで共通のコンポーネントやスタイ...

はじめまして。2022新卒で PR TIMES に入社し、フロントエンドエンジニアをしている岩元 (@yoiwamoto) です。 先日、PR TIMES の全ての React プロジェクトで React 18 へのバージョンアップを行ったので、この記事ではその経緯や学べたこと等を共有します。 【モチベーション】 今回のバージョンアップのモチベーションは一言で言うと、「まだコードベースが小さいうちに早めにやっておきたいね」です。 弊社のフロントエンドは、去年までほとんど全てバックエンドリポジトリ内でテンプレートエンジン + jQuery ...

【Introduction】 This article discusses the process of choosing a new React-based editor library for PR TIMES's press release editor. 【Background】 At PR TIMES, press release publishing is one of the core services that we provide, therefore, we strive to provide the best possible editing experience to our users so that they can express their ideas better. However, our current editing page is built with legacy codes that have not been well maintained over the past several ...

こんにちは、21新卒エンジニアの柳(@apple_yagi)です。今月から新卒2年目となり、一年早かったなとしみじみしています。 昨年PR TIMESでは企業ページをフルスクラッチでReactにリプレイスするプロジェクトを行い、モダンなフロントエンド技術を導入することができました。 https://developers.prtimes.jp/2021/11/10/replace-react/ また現在、別プロジェクト（リポジトリ）でもReactを用いてフロントエンドを実装するようになり始め、PR TIMES全体のフロントエンドのReact化が進行しています。 しかし、現状のフ...

こんにちは。PR TIMES の開発本部でフロントエンドエンジニアをしている鈴木雄大(@szkyudi)です。2022年2月、企業ページにプレスキット機能を追加するリリースしたので、そのお話をしようと思います。 企業ページおよびプレスキットについては下記の PR TIMES MAGAZINE の記事をご覧ください https://prtimes.jp/magazine/corporate/ https://prtimes.jp/magazine/prtimes-press-kit/ 【新機能「プレスキット」とは】 「プレスキット（または、メディアキット）」とは、メディア関係者向けに作成する、企業や事業...

こんにちは、21新卒のフロントエンドのTepy（テッピー）です。 お読み頂いた方がいるかもしれませんが、先日こちらのReactの便利なライブラリーを紹介する記事を書きました。今回もReact業界での良いライブラリーをもう一つ紹介したいと思います。 本記事で紹介したいのは Reach UI という UI ライブラリーです。PR TIMESの企業詳細ページリプレイスプロジェクトにReach UIを利用していくつかのコンポーネントを作成しました。利用するきっかけや実装中の感想などの経験をお伝えらればと思います。 【Reach UIとは...

こんにちは、21新卒エンジニアのTepyです。 PR TIMESでは自社サービスのプレスリリース配信プラットフォームのレガシー改善を行っており、その中の企業詳細ページのフロントエンドをReactにリプレイスするプロジェクトを行いました。 今回のリプレイスプロジェクトに限らず、新しいReactプロジェクトをゼロから作るたびに、ステート管理やAPIからのデータフェッチやテストなどのライブラリーを選択するのは悩ましいことだと思いますので、本プロジェクトに利用した便利なReactライブラリーを紹介したいと思います...

こんにちは。PR TIMES の開発本部でフロントエンドエンジニアをしている鈴木雄大(@szkyudi)です。 2021年10月に2020年新卒の僕と2021年新卒の2人の計3人で企業ページのフロントエンドをレガシーなコードから React.js にリプレイスしたものをリリースしたので、そのお話をしようと思います。 企業ページがどういったページかについては下記の PR TIMES MAGAZINE の記事をご覧ください。 https://prtimes.jp/magazine/corporate/ 【リプレイスに至った背景】 リプレイス前の企業ページのフロントエンドの技術スタッ...