Webフロントエンド– tag –

こんにちは、「PR TIMES Webクリッピング」の開発リーダーをしている小張です。 Storybookをユニットテストで活用している取り組みについて、紹介したいと思います。 【テスト文化と現状の課題】 半年ほど前から社内にテストを書く文化が根づき始め、フロントエンドのユニットテストも増えてきました。 https://developers.prtimes.jp/2022/10/31/tdd-workshop-2022/ それに伴い他のメンバーが書いたテストを修正する機会が増えたのですが、修正が難しい場合には一時的にtest.todoとしたり、テストを書いた人に修...

こんにちは、フロントエンドエンジニアのやなぎ（ @apple_yagi ）です。 先日、フロントエンドのIntegration Testで使用されていたCypressをPlaywrightに移行したので、その理由や実際に移行してみて感じたメリットなどをご紹介いたします。 【なぜ移行したのか】 いくつか理由はありますが、大きな理由の1つとして Cypress は並列でテストを実行することができなかったことがあります。 Cypress で書かれた Integration Test はAPIリクエストを全てモックしているため、データベースの状態などにテスト結果が左右...

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

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