Webフロントエンド– tag –

こんにちは。PR TIMES のフロントエンドエンジニアをしています岩元 (@yoiwamoto) です。 今回は、先日改善を行ったフロントエンドのプレビュー環境の自動生成の構成について紹介します。 【PR TIMES のフロントエンド構成】 本稿での「フロントエンド」は、React 実装にリプレイスして現在進行形で機能追加・改修が行われているページのことを指しており、これらのページはどれも SPA 構成をとっています。 https://developers.prtimes.com/2021/11/10/replace-react/ そのため、ここでいう「環境」の実態はバン...

こんにちは。PR TIMESの開発本部でフロントエンドエンジニアをしている鈴木雄大(@szkyudi)です。今回は、PR TIMESのフロントエンドエンジニアチームで行っている定例の様子をご紹介したいと思います。 【フロントエンド定例とは】 この定例は週に2回、30分ずつ行っています。主な目的は、各エンジニアが抱えている課題や疑問を解決することと、フロントエンド全体に関わる課題の解決、チーム間の情報共有です。司会と議事録はローテーションしながら担当を変えています。 役割分担用Notion 【定例を設定した背景と...

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

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

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

こんにちは。開発本部でインターンをしている桐澤です。インターンの業務では主にReactにリプレイスされたページのリファクタリングやコンポーネント修正を行ってきました。 今回はReactで実装されたコンポーネントを誰でも簡単に参照できるようにStorybookを導入したので、どのように行ったかを紹介します。 【】 PR TIMESではデザインチームを中心に去年からデザインシステムを構築してきました。デザインシステム導入当初からデザインと実装されたコードの連携が構想にあり、今回フロントエンドの開発基盤が整...

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