Webフロントエンド– tag –
-
axe-coreの検出レベルを全深刻度に引き上げ、a11yを継続的に担保できるようにしました
開発
こんにちは、PR TIMESでインターンをしている勝間田(@Sho_26_ts)です。 今回は、フロントエンドにおけるアクセシビリティ向上の一環として、axe-coreを用いた改善と、それを継続的に担保するための方法を紹介します。 【これまでのアクセシビリティの取り組み】 PR TIMESではMarkuplintとPlaywright、Storybookでアクセシビリティ(a11y)テストを行ってきました。 MarkuplintとPlaywrightでのアクセシビリティ品質のチェック方法はこちらの記事をご覧ください。 https://developers.prtimes.com/2025/03/10/mar... -
社内デザインシステムMCPとFigma MCPを活用したゼロから作らない開発
開発
こんにちは。2025年の9月に中途で入社しましたフロントエンドエンジニアの白濱(@shiraha_maru)です。社内デザインシステムのMCP化、Figma MCPを活用して入社1ヶ月目からスムーズに開発を進められる体制作りを行いましたので紹介します。 【背景】 現在PR TIMESではUI刷新のプロジェクトが進行中で、私も入社後にこのプロジェクトへ参画しました。このプロジェクトでは、Figmaのデザインをもとに社内デザインシステムのコンポーネントを使って実装を進めます。 しかし、入社して間もないため既存コードや文脈の理... -
PR TIMESのフロントエンド環境に typescript-go を導入し、typecheck を高速化する
開発
こんにちは、フロントエンドエンジニアのやなぎ(@apple_yagi)です。 先日 PR TIMES のフロントエンド環境に typescript-go を導入し、 tsgo( typescript-go の実行コマンド) で typecheck を実行するようにしました。その結果、typecheck の実行時間が最大で 9 倍速くなったので、導入に向けて行った対応と結果をご紹介します。 【typescript-go とは】 typescript-go は Microsoft によって Go 言語で書き直されている TypeScript のコンパイラです。TypeScript 7 からはこのコンパイラが使用される予定で、... -
@axe-core/playwrightの導入で実現するHTML全体のアクセシビリティ品質担保
開発
こんにちは、フロントエンドエンジニアのやなぎ(@apple_yagi)です。 PR TIMESのフロントエンドではこれまで、MarkuplintやStorybook Testを用いたアクセシビリティ(a11y)テストを実施してきました。以下の記事はMarkuplintを導入した際の記事になります。 https://developers.prtimes.com/2025/03/10/markuplint/ しかし、PR TIMESではReactを利用して開発を行っているため、これまではコンポーネント単位での品質担保が中心となっていました。そこで、@axe-core/playwrightを導入し、HTML全体のa11y品質もチ... -
プレスリリースアワードマイページの技術スタック ~ Hono × React Router SPA Mode のフルスタック TypeScript による効率的な開発 ~
開発
こんにちは、フロントエンドエンジニアのやなぎ(@apple_yagi)です。 PR TIMES では 2021 年からプレスリリースアワードを開催しており、1 年間の内に日本で発表されたプレスリリースの中から、社会性・公共性・共感性・将来性等の視点から、プレスリリースの可能性拡大に貢献したものを審査・選考し、表彰しています。 https://prtimes.jp/pressreleaseawards 今年から新たな取り組みとして、プレスリリースアワード用のマイページをリリースしました。開発にあたっては、フロントエンドとバックエンドの両方で ... -
フロントエンドカンファレンス北海道2025に協賛しました! #frontendo
カンファレンス
こんにちは!PR TIMESで主にフロントエンドの開発をしている古園 (@miyabin4113) です。 以前フロントエンドカンファレンス北海道2025に協賛する記事を公開しましたが、今回の記事はその参加報告です。 https://developers.prtimes.com/2025/08/15/frontend-conf-hokkaido-2025-sponsorship/ ちなみに北海道へ行くのは今回が初めてでした。PR TIMES本社がある関東と比べると涼しく、夏は過ごしやすくていいですね。 【フロントエンドカンファレンス北海道2025とは】 フロントエンドカンファレンス北海道2025はWeb... -
ESLint の設定を Flat Config にして XO のメジャーバージョンを上げました
開発
こんにちは、フロントエンドエンジニアの桐澤(@kiririLee)です。 PR TIMESではリファクタリングデーを月に一回開催しています。今回そのリファクタリングデーを活用してXOのバージョンを v0.60.0 から v1.2.2 に上げたためやったことを紹介します。 XO は2016年から開発されており歴史の長いライブラリですが、メジャーバージョンが上がるのは初めての事で ESLint の Flat Config 対応が主な修正として含まれていました。 【PR TIMESフロントエンドのディレクトリ構成】 PR TIMES のフロントエンドはモノレポで... -
PR TIMESはフロントエンドカンファレンス北海道2025に協賛します #frontendo
開発
こんにちは!PR TIMESフロントエンドエンジニアの古園(@miyabin4113)です。北海道の好きな食べ物は味噌ラーメンです。 今回、PR TIMESはフロントエンドカンファレンス北海道2025にシルバースポンサーとして協賛します。 【フロントエンドカンファレンス北海道2025について】 フロントエンドカンファレンス北海道2025はWebフロントエンド領域に関心のある参加者を対象とした技術イベントです。 2025年9月6日(土)に北海道札幌市のエア・ウォーターの森にて開催されます。 https://www.frontend-conf.jp CM 会場... -
メディアリストのUIリニューアル後に発生したフロントエンドのバグとその解決
開発
こんにちは。エンジニアの松浦です。 私は現在、フロントエンドエンジニアとしてメディアリストの機能実装やバグ修正を行っています。今回は新UIのメディアリストがリリースされて半年経ち、今までに出てきたフロントエンドのバグやどのようなものを修正してきたかについて書いていこうと思います。 【メディアリストとは】 メディアリストは、プレスリリースをどのメディアに配信するか取りまとめたリストのことです。企業のユーザーはあらかじめプレスリリースを送りたいメディアを選び、それをリストとして管理... -
【PRTIMES.DEV】エディター勉強会 #1 を開催しました
勉強会
こんにちは、フロントエンドエンジニアの古園(@miyabin4113)です。2025年7月22日にWebサービス上で動くエディター開発の勉強会を開催しました。 https://prtimes.connpass.com/event/358977 【】 近年、Webサービス上で動くエディターを開発する企業や個人をブログやXで見かけることも増えてきたように思えます。ですが、依然として他のフロントエンド技術と比べるとニッチな分野です。 だからこそ、エディター開発を行うエンジニアが一堂に会し、各自の持っている知見を共有することで日々の開発に役立てる場を提...
