-
PR TIMES フロントエンドの React 18 バージョンアップの取り組み
はじめまして。2022新卒で PR TIMES に入社し、フロントエンドエンジニアをしている岩元 (@yoiwamoto) です。 先日、PR TIMES の全ての React プロジェクトで React 18 へのバージョンアップを行ったので、この記事ではその経緯や学べたこと等を共有します。 【モチベーション】 今回のバージョンアップのモチベーションは一言で言うと、「まだコードベースが小さいうちに早めにやっておきたいね」です。 弊社のフロントエンドは、去年までほとんど全てバックエンドリポジトリ内でテンプレートエンジン + jQuery ... -
Storybookを導入した話
こんにちは。開発本部でインターンをしている桐澤です。インターンの業務では主にReactにリプレイスされたページのリファクタリングやコンポーネント修正を行ってきました。 今回はReactで実装されたコンポーネントを誰でも簡単に参照できるようにStorybookを導入したので、どのように行ったかを紹介します。 【】 PR TIMESではデザインチームを中心に去年からデザインシステムを構築してきました。デザインシステム導入当初からデザインと実装されたコードの連携が構想にあり、今回フロントエンドの開発基盤が整... -
PR TIMESで初心者向けAWS勉強会を開催しました
こんにちは。2022年5月に入社した開発本部のレー・ホアン・トゥです。 今回、6月16日に社内で AWS 勉強会に参加した感想をご紹介いたします。 【背景】 PR TIMES に入社してから、新しい技術を調べたり共有したりするため、技術共有会や勉強会などをよく行っている印象を受けました。 AWS は初心者で調べてばかりであるため、AWS の人とのミーティングによく参加しています。しかし、実際に触れた経験があまりないので、共有会で取り上げられた内容がまだ理解できないことがあります。 そのためAWS アカウントチー... -
PostgreSQLのデータを削減できた話
はじめまして、PR TIMESの開発本部でインターンをさせて頂いている永井と申します。現在はパフォーマンス改善のタスクをしています。 【はじめに】 自分は今回のタスクをやるまでSQLをあまり書いたことがありませんでした(ORマッパーしか使っていませんでした)。しかし、今回のタスクをやることで直接SQLを書くことが多くなりSQLはもちろんPostgreSQLの構造はどうなっていて、何がメモリを消費しているかなどについての理解も深まりました。本当に良い経験をさせて頂きました。 【なぜ削減することになったのか... -
Puppeteerを使ってクローラを作った話
こんにちは、開発本部のバックエンドエンジニアのThai(タイ)です。クローラ改善プロジェクトを行い、Puppeteerを使って新しいクローラを作りました。今回の記事ではPuppeteerで開発したクローラについて紹介したいと思います。 【Puppeteerとは】 Googleで開発されて、DevToolsプロトコルを介してChromiumやChromeを制御するための高レベルなAPIを提供するNodeライブラリです。 参照: https://devdocs.io/puppeteer/ 【クローラとは】 インターネット上の様々なWebページをスクレイピングするツールです。 【な... -
PR TIMESはISUCON12のシルバースポンサーとして協賛します! #isucon
PR TIMESでCTOをやっている金子 (@catatsuy) です。 去年に引き続き、PR TIMESはISUCON12にシルバースポンサーとして協賛しました。 「ISUCON」は、LINE株式会社の商標または登録商標です。 【ISUCONとは】 https://isucon.net/ お題となるWebサービスを決められたレギュレーションの中で限界まで高速化を図るチューニングバトル ISUCONはLINE株式会社が運営しているチューニングバトルです。参加者はお題となるWebサービス(言語はGoやPHPなど複数言語から選べます)を様々な手段で高速化します。必要な知識は多... -
esbuildに乗り換えたらビルド時間が劇的に改善された話
こんにちは、フロントエンドエンジニアのやなぎ( @apple_yagi )です。 PR TIMESでは、これまでReact/TypeScriptのコードをビルドする際にWebpackを使用していましたが、コード量が増えるごとにビルドにかかる時間が増えてきました。 そこでesbuildを導入し、ビルド時間の短縮に取り組んだのでご紹介いたします。 esbuildとは esbuildはGo言語で実装されたJavaScript/TypeScriptのビルドツールで、公式ドキュメントには従来のビルドツールと比べて10~100倍速くビルドできると書かれています。 esbuildが提供して... -
シンボリックリンクを活用した無停止デプロイとファイル削除を実装しました
こんにちは、インフラチームテックリードの櫻井です。 今回は prtimes.jp のデプロイ改善の一環としてシンボリックリンクを使った無停止デプロイと rsync --delete によるファイル削除とデプロイスクリプトの速度改善を行ったので紹介します。 【シンボリックリンクを使った無停止デプロイ】 まず初めにシンボリックリンクを使った無停止デプロイについて紹介します。 今まで prtimes.jp のデプロイは実際に稼働しているアプリケーションのディレクトリにデプロイサーバーから直接 rsync コマンドを実行し、ファイ... -
テスト自動化でリファクタリングを効率化
開発本部QAチームの山田です。 テストの自動化によりリファクタリングの際のQAも大きく効率化できましたので、ご紹介します。 【テスト自動化】 以前こちらの記事でもご紹介したように、QAチームではAutifyを使ってテストの自動化を進めています。 https://developers.prtimes.jp/2021/12/14/qa-team/ まずはPR TIMESのサービスにとって重要な機能でもある「プレスリリース配信」と「ユーザー登録」を重点的に自動化しました。これによってプレスリリースの情報を出したいときに出せなくなるということを防ぐこと... -
New Relic ダッシュボード共有会 in PR TIMES
こんにちは江間です。 先日、New Relic さん主催で New Relic ダッシュボードの共有会が開催されました。 この共有会では社内エンジニアが作成した・実際に利用している New Relic ダッシュボードを紹介し、作成のポイントや、運用してみてどうだったかを共有しました。 また、New Relic さんからダッシュボード作成にあたってのTipsなどを教えていただきました。 この記事では、今回の共有会で紹介した PR TIMES 社内で実際に使われているダッシュボードを、社外にも New Relic ダッシュボードの活用事例として共...