開発– category –

こんにちは。PR TIMESでフロントエンドエンジニアをしている夛田(@unachang113)です。 今回はエディターの機能の導線改善でリスト機能の利用数が上がった話をしようと思います。 【リスト機能とは？】 「リスト機能」は4分割サイズの画像を最大4つまで横並び表示できる画像装飾機能です。 画像の下の欄にはテキストを入れることができます。 PR TIMESは横並びで表示できる画像装飾機能として画像タイルという機能も存在していますが、画像タイルとの違いとしては以下があります。 画像が固定サイズで横並びで配置...

こんにちは　PR TIMES開発本部のインターンの Chanoknan です。 PR TIMESエディターのフロントエンドテスト戦略開発の一環として、エディターのPlaywright統合テストをPage Object Model（POM）パターンを使ってリファクタリングしました。このブログでは、このリファクタリングについて話したいと思います。 PR TIMESエディターのフロントエンドテスト戦略については、以下の記事で詳しく読むことができます。 https://developers.prtimes.com/?page_id=7762 【問題点】 最初は、テストを直接テストファイルに記...

こんにちは。PR TIMESでフロントエンドエンジニアをしている夛田(@unachang113)です。 今回はMarkuplintを導入した話をしようと思います。 【Markuplintとは】 Markuplintはマークアップ開発者のためのHTMLリンターです。 HTMLのタグが正しいか、Aria属性が適切に設定されているか等の適合性のチェックを行ってくれます。 https://markuplint.dev 【Markuplint導入の背景】 レビュー時に目視でHTML要素の使い方正しいかどうかを確認していくのは、レビュワーのHTML仕様の理解度に左右されてしまいます。 HTMLの品...

初めまして、フロントエンドエンジニアインターンの髙橋(RYU)です。 この記事では、PR TIMESのインターンについて紹介したいと思います。PR TIMESでフルタイムインターンとして参加させていただきました。そこで学んだことや感じたことを皆さんにお伝えできればと思います。 これからインターンを考えている方や、PR TIMESに興味がある方の参考になれば嬉しいです。 【インターン概要】 参加した経緯 ハッカソンをきっかけに、インターンに誘っていただき参加しました。ハッカソンに参加した当時はプレスリリース...

こんにちは、フロントエンドエンジニアのやなぎ（@apple_yagi）です。 PR TIMESではプレスリリース検索などを行う際にOpenSearchを使用しており、PHPで生成した検索クエリをOpenSearchに送信して、検索を行なっています。検索クエリの生成はコードを読むことである程度はわかるものの、複雑なものになると最終的にどのようなクエリが出来上がるのかわかりにくいという問題がありました。その問題を解決するために、先日 spatie/phpunit-snapshot-assertions を使用したスナップショットテストを導入したのでご紹介...

こんにちは、フロントエンドエンジニアインターンの髙橋（RYU）です。 一部のテストを Vitest の Browser Mode で実行するようにしました。その経緯と理由、効果についてご紹介します。 【背景】 これまで、フロントエンドのユニットテストには Vitest と jsdom を組み合わせて使用してきました。jsdom を利用することで、Node 環境下でもブラウザの DOM をエミュレーションでき、コンポーネントの単体テストなどが可能でした。 【課題】 しかし、Vitest と jsdom の組み合わせには以下の問題がありました。 ブラ...

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

こんにちは。バックエンドエンジニアの筒井（@tsuttsun_wind）です。今回は、PHPでAWS SDKのテストをMockする方法について紹介します。 【背景】 現在、PR TIMESでアップロードされる画像はAWS S3（以降S3）に格納されています。 これまでに実装されたテストコードでは、開発環境のS3に直接接続しているため、不必要なデータ書き込みやコストが発生するという問題を抱えています。 AWSなどの外部環境に直接接続してテストすることは上記の問題で好ましくないことや、外部サービスがメンテナンスなどで停止している...

こんにちは。PR TIMESでフロントエンドエンジニアをしている夛田(@unachang113)です。 今回はPR TIMES社内でHTMLクライテリアを作成したのでその話をしようと思います。 【つくろうと思ったきっかけ】 PR TIMES社内ではHTMLの品質に対するエンジニア間の共通の指標がなかったため、何を満たせば品質を担保していると言えるのかの指標やルールがありませんでした。 指標がないとlintを導入した際に何を入れると品質が向上できるのかがわからなかったり、HTMLの仕様理解が個々人ばらつきが生じ、プロダクトコードで...

こんにちは、フロントエンドエンジニアのやなぎ（@apple_yagi）です。 PR TIMESではフロントエンドのReactリプレイス当初より Barrel file を作成するルールがありました。しかし、先日そのルールを廃止することに決めたため、その経緯についてご紹介します。 【Barrel filesとは】 Barrel filesとは複数のモジュールを1つのファイル（Barrel file）にまとめてexportすることを指します。以下の例ではutils/test.ts 、utils/fuga.ts 、utils/hoge.ts で export されている定数を utils/index.ts で再exportしてい...