Webフロントエンド– tag –

こんにちは、フロントエンドエンジニアのやなぎ（ @apple_yagi ）です。PR TIMESでは、これまでReact/TypeScriptのコードをビルドする際にWebpackを使用していましたが、コード量が増えるごとにビルドにかかる時間が増えてきました。そこでesbuildを導入し、ビルド時間の短縮に取り組んだのでご紹介いたします。esbuildとはesbuildはGo言語で実装されたJavaScript/TypeScriptのビルドツールで、公式ドキュメントには従来のビルドツールと比べて10~100倍速くビルドできると書かれています。esbuildが提供している主...

こんにちは、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/【リプレイスに至った背景】リプレイス前の企業ページのフロントエンドの技術スタックは...