柳 龍哉– Author –
柳 龍哉
株式会社PR TIMES 開発本部 フロントエンドエンジニア
-
素朴なSeederを作成してUnitテストの実装効率を上げた話
開発柳 龍哉こんにちは、フロントエンドエンジニアのやなぎ( @apple_yagi )です。 先日、バックエンドで行っているUnitテストの実装効率を上げるために簡単なSeeder(テストデータを作成するツール)を実装したのでご紹介します。 【前提】 PR TIMESのバックエンドはノンフレームワークのPHPで実装されています。また、ORM(Object-Relational Mapping)ツールなども使用しておらず、PDO と TetoSQL を利用して社内で開発した PrSQL という class を用いてデータベースを操作しています。 Unitテストは、PHPUnit ... -
フロントエンドのLintツールをXOに統一した話
開発柳 龍哉こんにちは、フロントエンドエンジニアのやなぎ( @apple_yagi )です。 PR TIMESではこれまでLintツールとしてESLintを使用していましたが、2023年9月からXOを使うようにし始めました。本エントリーでは、XOを導入した経緯や進め方、そして導入した結果についてご紹介します。 【導入をした経緯】 これまでPR TIMESでは .eslintrc.jsを自分たちで一から作り、ESLintルールを運用していました。しかし、その設定は最初期の環境構築時に色々なドキュメントを見ながら、つぎはぎで作成したものになってお... -
BFCacheを利用してNext.jsで実装した無限スクロールのUX改善をした話
開発柳 龍哉こんにちは、フロントエンドエンジニアのやなぎ( @apple_yagi )です。 先日、【月間9000万PV】プレスリリース掲載ページの Next.js 移行でやったこと、という記事が公開されました。こちらのブログの最後に軽く触れられていますが、プレスリリース掲載ページより前にキーワード検索ページのNext.js移行を行っていました。 https://developers.prtimes.jp/2023/12/13/replace-press-release-page-with-nextjs/ 本エントリーではキーワード検索ページをNext.js移行したモチベーションなどは割愛させていただきます... -
並列で実行していたGitHub ActionsのJobをまとめ、Billable timeを削減した話
開発柳 龍哉こんにちは、フロントエンドエンジニアのやなぎ( @apple_yagi )です。 GitHub ActionsのBillable timeの削減のために、複数に分けて実行していたJobを、ある程度の粒度でまとめて実行するようにしたので紹介します。 【経緯】 弊社ではGitHub Enterpriseプランを契約しており、GitHub Actionsを月50,000分使用することができますが、先月(2023/07)使用時間の上限に達したため、一時的にGitHub Actionsが使用できない状況が発生しました。 その月は追加で課金を行なったため、すぐに使えるようになりましたが、... -
CypressからPlaywrightに移行しました
開発柳 龍哉こんにちは、フロントエンドエンジニアのやなぎ( @apple_yagi )です。 先日、フロントエンドのIntegration Testで使用されていたCypressをPlaywrightに移行したので、その理由や実際に移行してみて感じたメリットなどをご紹介いたします。 【なぜ移行したのか】 いくつか理由はありますが、大きな理由の1つとして Cypress は並列でテストを実行することができなかったことがあります。 Cypress で書かれた Integration Test はAPIリクエストを全てモックしているため、データベースの状態などにテスト結果が左右... -
去年に引き続いてカヤック x PR TIMES 合同技術勉強会を開催しました!
勉強会柳 龍哉こんにちは、フロントエンドエンジニアのやなぎ(@apple_yagi)です。 11月11日にカヤックさんと合同勉強会を開催しました。 去年の合同勉強会についてはこちら↓ https://developers.prtimes.jp/2021/11/11/kayac-x-prtimes-tech-study-meeting/ 【勉強会の内容】 今回の勉強会のテーマは 芸術的だなとか、褒められたいとか、偉業だよなとかで、なんかとにかく人に話したい話 でした。 約2時間で10本の発表が行われ、カヤックさん側からはRubyやprocessingについての尖った話や、GCPや負荷試験などの実務的な話、... -
Yarn Workspacesを利用したMonorepo環境の構築
開発柳 龍哉こんにちは、フロントエンドエンジニアのやなぎ(@apple_yagi)です。 今年(2022年)の4月頃に、PR TIMESのフロントエンド開発基盤の構築を行い、各プロジェクトのリポジトリに散らばっていたReactで実装しなおした Frontend のコードベースを一つのリポジトリに集約することができました。 https://developers.prtimes.jp/2022/04/14/web-front-end-development-enviroment-in-prtimes-inc/ しかし、この時点では Frontend のコードベースを一つにまとめただけで、各プロジェクトで共通のコンポーネントやスタイ... -
esbuildに乗り換えたらビルド時間が劇的に改善された話
開発柳 龍哉こんにちは、フロントエンドエンジニアのやなぎ( @apple_yagi )です。 PR TIMESでは、これまでReact/TypeScriptのコードをビルドする際にWebpackを使用していましたが、コード量が増えるごとにビルドにかかる時間が増えてきました。 そこでesbuildを導入し、ビルド時間の短縮に取り組んだのでご紹介いたします。 esbuildとは esbuildはGo言語で実装されたJavaScript/TypeScriptのビルドツールで、公式ドキュメントには従来のビルドツールと比べて10~100倍速くビルドできると書かれています。 esbuildが提供して... -
PR TIMESにおけるフロントエンド開発基盤の構築
開発柳 龍哉こんにちは、21新卒エンジニアの柳(@apple_yagi)です。今月から新卒2年目となり、一年早かったなとしみじみしています。 昨年PR TIMESでは企業ページをフルスクラッチでReactにリプレイスするプロジェクトを行い、モダンなフロントエンド技術を導入することができました。 https://developers.prtimes.jp/2021/11/10/replace-react/ また現在、別プロジェクト(リポジトリ)でもReactを用いてフロントエンドを実装するようになり始め、PR TIMES全体のフロントエンドのReact化が進行しています。 しかし、現状のフ... -
新卒エンジニアがプレスリリース画像の画質改善に取り組んだ話
開発柳 龍哉こんにちは、21新卒エンジニアの柳です。 この度、プレスリリースのサムネイル画像とプレスリリース詳細ページ内で掲載されている画像の画質改善を行いました。 今回行った画質改善の対象となる条件は以下の通りです。 12月中旬以降にアップロードして頂いた画像サイズが十分に大きい画像トップページ(https://prtimes.jp) で表示されているプレスリリースのサムネイル画像プレスリリース詳細ページで表示されている画像 【画質改善前のプレスリリース画像の問題点】 PR TIMESでは画像をエディタからアップロー...
12