桐澤康平– Author –

こんにちは、フロントエンドエンジニアの桐澤（@kiririLee）です。 PR TIMESではリファクタリングデーを月に一回開催しています。今回そのリファクタリングデーを活用してXOのバージョンを v0.60.0 から v1.2.2 に上げたためやったことを紹介します。 XO は2016年から開発されており歴史の長いライブラリですが、メジャーバージョンが上がるのは初めての事で ESLint の Flat Config 対応が主な修正として含まれていました。 【PR TIMESフロントエンドのディレクトリ構成】 PR TIMES のフロントエンドはモノレポで...

こんにちは、フロントエンドエンジニアの桐澤（@kiririLee）です。Tiptapで開発したエディターをどのようにテストしているかについて書きます。 昨年末に2024年版のPR TIMESエディターテスト戦略についてまとめられたブログが投稿されました。フロントエンドチームではエディターのテストを日々模索しており、その過程で新たに書いたテストパターンを紹介します。 https://developers.prtimes.com/2024/12/25/press-release-editor-frontend-testing/ 詳細は後の章で深掘りしていきますが、はじめに今回紹介する3...

こんにちは、フロントエンドエンジニアの桐澤（@kiririLee）です。2024年12月10日に株式会社ユーザベースさんと株式会社ZOZOさんと合同でフロントエンド勉強会を開催しました。 https://prtimes.connpass.com/event/335335 弊社フロントエンドチームは日々様々な機能開発や改善活動を行っています。このような技術的な取り組みを対外的にも発表したいという社内の声をきっかけに、「フロントエンドのエンジニアリング」というテーマで技術的な取り組みを発信する場を作ることに焦点を当てた勉強会を企画しました。...

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

こんにちは、フロントエンドエンジニアの桐澤（@kiririLee）です。先日、合同会社DMM.comとの合同勉強会を行いました。 【経緯】 今回の合同勉強会は先日開催されたPHPカンファレンス北海道2024がきっかけとなり開催される運びとなりました。 これまでの合同勉強会ではWebアプリケーションに付随する様々な内容のLTが発表されてきましたが、各社フロントエンドの知見を共有したいという思いがあり、今回はフロントエンドがテーマの勉強会を開催しました。 【弊社メンバーの発表内容】 今回もLTの発表順は当日その...

こんにちは。フロントエンドエンジニアの桐澤（@kiririLee）です。PHPのアプリケーションから配信されるプレスリリースがサニタイザーを通るようにしたため、導入するまでに取り組んだことを書きます。 【サニタイザーとは】 HTMLにスクリプトを埋め込んでユーザーのブラウザ上で実行する方法としてまず思い浮かぶのはscriptタグを使用する方法かと思います。ですがこれ以外にもimgタグのonerror属性を使用する方法などHTMLでスクリプト実行する方法は意外と多く存在しています。 悪意のあるスクリプトや不正な HT...

こんにちは。開発本部でインターンをしている桐澤（@kiririLee）です。今回、「PR TIMES Webクリッピングβ版」 というプロジェクトのフロントエンドで実装されていたE2Eテストに対して、APIリクエストを全てモックするように修正を行ったためその取り組みを紹介したいと思います。 【Webクリッピングβ版 について】 Webクリッピングβ版とは、WEB上の記事を調査してくれる機能です。キーワードを指定するだけで調査結果を報告をしてくれるため自社の記事掲載状況や社会動向の分析に役立てられます。 【フロントエン...

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