Webフロントエンド– tag –

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

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

こんにちは、フロントエンドエンジニアインターンの髙橋（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...

こんにちは。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してい...

こんにちは。開発部フロントエンドエンジニアの古園(@miyabin4113)です。 先日PR TIMESの全コンポーネントからReach UIを剥がし、Radix UIに移行することが完了しました。 PR TIMESでは当初「アクセシビリティを最優先に考えて設計されている」「スタイル無しでカスタマイズが柔軟」などの理由からReach UIを使用していました。 https://developers.prtimes.com/2022/03/03/why-we-use-reach-ui-for-our-frontend/ ですが、近年Reach UIはあまりメンテナンスされておらず2024年12月に安定版がリリースされたReact...

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

こんにちは。PR TIMESでフロントエンドエンジニアをしている夛田(@unachang113)です。 みなさん、フロントエンドのテストって書いてますか？ 今回は自分が所属しているエディターチームのエディターに関するフロントエンドのテスト戦略について書こうと思います。 【エディターについて】 PR TIMESでは、プレスリリースを入稿するためのエディターを提供していて、2023年の12月にUI刷新を行いました。 https://prtimes.jp/main/html/rd/p/000001357.000000112.html エディターは、2024年12月現在、React、Tiptap（...

こんにちは、フロントエンドエンジニアのやなぎ（@apple_yagi）です。 先日のリファクタリングデーでReact Routerのバージョンをv6からv7にバージョンアップしました。その際に行った変更やPR TIMESにおけるReact Router v7の使い方についてご紹介します。リファクタリングデーについては以下の記事をご参照ください。 https://developers.prtimes.com/2021/12/13/introducing-refactoring-day/ 【バージョンアップの手順】 元々PR TIMESではReact Routerをv5.3.0から使用しており、v6（v6.3.0）へのバージョンア...