夛田小百合– Author –

こんにちは。PR TIMESでフロントエンドエンジニアをしている夛田(@unachang113)です。 今回はPR TIMES社内でHTML解体新書の輪読会を開催し、無事完走したので輪読会の進め方や効果について話そうと思います。 【輪読会を開催した経緯】 PR TIMESではエンジニアによってHTMLに対する知識量が人によって差があり、意味付けが間違ったマークアップやネストできる要素等がレビューで指摘できない課題がありました。 ネストできる要素はMarkuplintの導入で改善できましたが、意味付け等の知識に関しては個々人に委ねら...

こんにちは。PR TIMESでフロントエンドエンジニアをしている夛田(@unachang113)です。 PR TIMESではプレスリリース配信のエディターにTiptapというヘッドレスエディターフレームワークを使用しています。 2025年2月にTiptapのバージョンをv2.0.0-betaからv2.10.5まで上げ、3月に最新版までバージョンアップを実施したことを今回は話そうと思います。 【Tiptapのバージョンアップが滞っていた要因】 弊社では月に1回リファクタリングデーを実施していて、リファクタリングデーのタイミングでrenovateを使い依存して...

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

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

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

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

こんにちは。フロントエンドエンジニアの夛田(@unachang113)です。 PR TIMES はアクセシビリティカンファレンス福岡2024にゴールドスポンサーとして協賛・スポンサーブースの出展をします。今回は、アクセシビリティカンファレンス福岡の概要と、PR TIMESのアクセシビリティの現状について紹介しようと思います。 【アクセシビリティカンファレンス福岡とは】 2023年より開催されているアクセシビリティに関するカンファレンスイベントです。 本イベントは、「つぎはどうする」をテーマにアクセシビリティに関する...

こんにちは。2023年の7月に中途で開発本部に入社しました。フロントエンドエンジニアの夛田(@unachang113)です 昨年12月にリリースされたPR TIMESの新エディターの開発でRadix UIを使用したので、本エントリーではどのように活用したかを紹介します。 【Radix UIとは】 Radix UIはReact製のUIライブラリです。現在はThemesとPrimitivesの2つを提供されています。Themesの場合、styleが予め設定されていて、自分たちが実装したいUIとフィットしない場合が多いため、PR TIMESではheadlessUIのPrimitivesの方を採用し...