三年間の関わりから見る PR TIMES エンジニアリングの変化 / Transition of PR TIMES Engineering
>100 Views
December 10, 24
スライド概要
2024年12月10日に開催された 株式会社ユーザベース×株式会社ZOZO×株式会社PR TIMES 3社合同フロントエンド勉強会 (https://prtimes.connpass.com/event/335335/) のセッション資料です。
SIer での受託開発を経て、2012 年に株式会社サイバーエージェントに入社。プロダクト開発の傍ら、エンジニア組織のマネジメントに従事。2018 年に株式会社メルカリに入社後は、株式会社メルペイの Frontend チームの立ち上げや Web 版の「メルカリ」の刷新、メルカリアプリのコードベース刷新を牽引した後に、執行役員 VP of Engineering としてメルペイのエンジニアリング部門を管掌。2023 年 4 月にデジタル庁入庁。2023 年 7 月に株式会社ハウテレビジョン入社、執行役員プロダクト本部長に就任し、事業と組織の成長を主導。Mond 認定回答者、TechFeed 公認エキスパート (Web 標準技術 • JavaScript)、HTML5Experts.jp エキスパート。
関連スライド
各ページのテキスト
三年間の関わりから見る PR TIMES エンジニアリングの変化 三年間の関わりから見る PR TIMES エンジニアリングの変化 by @1000ch 1
Shogo SENSUI (shogosensui.com) Advisor at PR TIMES, Inc. Advisor at Macromill, Inc. Advisor at JR West 三年間の関わりから見る PR TIMES エンジニアリングの変化 by @1000ch 2
Shogo SENSUI @1000ch · フォローする X の皆さんご無沙汰しています。@PRTIMES_JP での支援が 始まって早三年が経ったので、書きました / “三年間の関 わりから見る PR TIMES エンジニアリングの変化 | PR TIMES 開発者ブログ” developers.prtimes.jp 三年間の関わりから見る PR TIMES エンジニアリングの… Technical Advisor の @1000ch です。私がジョインしたの が 2021-09 なので、気… 午前9:45 · 2024年9月25日 54 返信 リンクをコピー Xでもっと読む 三年間の関わりから見る PR TIMES エンジニアリングの変化 by @1000ch 3
- https://twitter.com/1000ch?ref_src=twsrc^tfw|twcamp^tweetembed|twterm^1838741563188613246|twgr^|twcon^s1_&ref_url=file:///var/folders/w7/sbkxpdns38j73ppp2gqhvj040000gn/T/tmp-23491-Vjink7PfSskQ-.html
- https://twitter.com/intent/follow?ref_src=twsrc^tfw|twcamp^tweetembed|twterm^1838741563188613246|twgr^|twcon^s1_&ref_url=file:///var/folders/w7/sbkxpdns38j73ppp2gqhvj040000gn/T/tmp-23491-Vjink7PfSskQ-.html&screen_name=1000ch
- https://twitter.com/PRTIMES_JP?ref_src=twsrc^tfw|twcamp^tweetembed|twterm^1838741563188613246|twgr^|twcon^s1_&ref_url=file:///var/folders/w7/sbkxpdns38j73ppp2gqhvj040000gn/T/tmp-23491-Vjink7PfSskQ-.html
- https://t.co/iVLE8npJRn
- https://twitter.com/1000ch/status/1838741563188613246?ref_src=twsrc^tfw|twcamp^tweetembed|twterm^1838741563188613246|twgr^|twcon^s1_&ref_url=file:///var/folders/w7/sbkxpdns38j73ppp2gqhvj040000gn/T/tmp-23491-Vjink7PfSskQ-.html
- https://twitter.com/intent/like?ref_src=twsrc^tfw|twcamp^tweetembed|twterm^1838741563188613246|twgr^|twcon^s1_&ref_url=file:///var/folders/w7/sbkxpdns38j73ppp2gqhvj040000gn/T/tmp-23491-Vjink7PfSskQ-.html&tweet_id=1838741563188613246
- https://twitter.com/intent/tweet?ref_src=twsrc^tfw|twcamp^tweetembed|twterm^1838741563188613246|twgr^|twcon^s1_&ref_url=file:///var/folders/w7/sbkxpdns38j73ppp2gqhvj040000gn/T/tmp-23491-Vjink7PfSskQ-.html&in_reply_to=1838741563188613246
- https://twitter.com/explore?ref_src=twsrc^tfw|twcamp^tweetembed|twterm^1838741563188613246|twgr^|twcon^s1_&ref_url=file:///var/folders/w7/sbkxpdns38j73ppp2gqhvj040000gn/T/tmp-23491-Vjink7PfSskQ-.html
- https://bento.me/1000ch
遡ること 2021 年 三年間の関わりから見る PR TIMES エンジニアリングの変化 by @1000ch 4
機能追加もままならないプロダクト レガシーでモノリスな PHP に jQuery で振る舞いを実装した古き良き Web アプリ クラウドではなくオンプレでホストされ、CI/CD も組まれていないシステム Frontend/Backend どうこう以前に、エンジニアリングの方向性が示されていない 三年間の関わりから見る PR TIMES エンジニアリングの変化 by @1000ch 5
エンジニアリングの梃入れに伴い参画 現 CTO が参画し、セキュリティを優先にシステム課題および優先度の明確化 古い PHP のアップグレードや React の導入など、大まかな方向性が決定 2021 年の夏頃に依頼があり、Frontend を中心にサポートを開始 三年間の関わりから見る PR TIMES エンジニアリングの変化 by @1000ch 6
状況の把握と支援の模索 三年間の関わりから見る PR TIMES エンジニアリングの変化 by @1000ch 7
未開拓のシステム 古く大きな PHP に jQuery で実装された Frontend 実装を開拓 React を部分的に導入したものの、先々の方向性は不明確な状態 未成熟のチーム この状況に置かれた、所謂 Frontend なソフトウェアエンジニアは新卒 3 人 「アドバイザーらしき人が来たらしいが、どう協調すれば良いかわからない」 三年間の関わりから見る PR TIMES エンジニアリングの変化 by @1000ch 8
Frontend 領域の確立に向けたチーミング まずは継続的に対話する場を設け、何が起きて何に困っているのかを把握分析 とにかく自己開示の機会を増やし、領域内外の関係構築を促進 「やりたい」で終わらない課題解決に向けて 課題の解像度を高め、取捨選択を繰り返すように議論を補助 個人の WANT ではなく組織の SHOULD、短期ではなく中長期を優先 三年間の関わりから見る PR TIMES エンジニアリングの変化 by @1000ch 9
これが伴わないアイデアは、考えることを放棄した思い付き 唯一やった型化「背景 → 課題 → 提案」 現状を整理して俯瞰 抽象度を高めた課題を抽出 課題の対処方法を考案 如何なる課題解決にも適用できる思考の基本でありフレームワーク 起案のフォーマットとし、議論を繰り返す。これで議論の質が徐々に向上 三年間の関わりから見る PR TIMES エンジニアリングの変化 by @1000ch 10
取り組みが徐々に結実 三年間の関わりから見る PR TIMES エンジニアリングの変化 by @1000ch 11
Shogo SENSUI @1000ch · フォローする レガシーな実装だった PR TIMES のフロントエンドが徐々 に、そして着実に改善されている。モダン化に向けて一気に 修正することが難しい中で、このフロントエンドを切り離す 一手の意義は大きい。 / “PR TIMESにおけるフロントエンド 開発基盤の構築 | PR TIMES 開発者ブログ” Backend と同居していた Frontend 実装を別リポジトリ に分離 developers.prtimes.jp PR TIMESにおけるフロントエンド開発基盤の構築 こんにちは、21新卒エンジニアの柳(@apple_yagi)です。今月から新卒2年目と なり、一年早かったなとし… 午前10:38 · 2022年4月14日 24 三年間の関わりから見る PR TIMES エンジニアリングの変化 by @1000ch 返信 リンクをコピー 1件の返信を読む 12
- https://twitter.com/1000ch?ref_src=twsrc^tfw|twcamp^tweetembed|twterm^1514417828954210308|twgr^|twcon^s1_&ref_url=file:///var/folders/w7/sbkxpdns38j73ppp2gqhvj040000gn/T/tmp-23491-Vjink7PfSskQ-.html
- https://twitter.com/intent/follow?ref_src=twsrc^tfw|twcamp^tweetembed|twterm^1514417828954210308|twgr^|twcon^s1_&ref_url=file:///var/folders/w7/sbkxpdns38j73ppp2gqhvj040000gn/T/tmp-23491-Vjink7PfSskQ-.html&screen_name=1000ch
- https://t.co/qbwQPvDhjI
- https://twitter.com/1000ch/status/1514417828954210308?ref_src=twsrc^tfw|twcamp^tweetembed|twterm^1514417828954210308|twgr^|twcon^s1_&ref_url=file:///var/folders/w7/sbkxpdns38j73ppp2gqhvj040000gn/T/tmp-23491-Vjink7PfSskQ-.html
- https://twitter.com/intent/like?ref_src=twsrc^tfw|twcamp^tweetembed|twterm^1514417828954210308|twgr^|twcon^s1_&ref_url=file:///var/folders/w7/sbkxpdns38j73ppp2gqhvj040000gn/T/tmp-23491-Vjink7PfSskQ-.html&tweet_id=1514417828954210308
- https://twitter.com/intent/tweet?ref_src=twsrc^tfw|twcamp^tweetembed|twterm^1514417828954210308|twgr^|twcon^s1_&ref_url=file:///var/folders/w7/sbkxpdns38j73ppp2gqhvj040000gn/T/tmp-23491-Vjink7PfSskQ-.html&in_reply_to=1514417828954210308
- https://bento.me/1000ch
Shogo SENSUI @1000ch · フォローする 正解のない議論に時間を費やし ていた ESLint による lint を xo へ置換 みんなでコツコツ進めて、ようやく適用完了した。しっ かり目のルールをこの行数のファイルに適用できたのは 凄い 確かにフルスキャンは重いけど、基本はテキスト エディタの拡張機能と、変更差分に適用できれば大丈夫そ う やなぎ @apple_yagi フロントエンドのLintツールをXOに統一した話 developers.prtimes.jp/2024/02/09/fro… 午後10:59 · 2024年2月9日 7 三年間の関わりから見る PR TIMES エンジニアリングの変化 by @1000ch 返信 リンクをコピー Xでもっと読む 13
- https://twitter.com/1000ch?ref_src=twsrc^tfw|twcamp^tweetembed|twterm^1755954694093238737|twgr^|twcon^s1_&ref_url=file:///var/folders/w7/sbkxpdns38j73ppp2gqhvj040000gn/T/tmp-23491-Vjink7PfSskQ-.html
- https://twitter.com/intent/follow?ref_src=twsrc^tfw|twcamp^tweetembed|twterm^1755954694093238737|twgr^|twcon^s1_&ref_url=file:///var/folders/w7/sbkxpdns38j73ppp2gqhvj040000gn/T/tmp-23491-Vjink7PfSskQ-.html&screen_name=1000ch
- https://twitter.com/1000ch/status/1755954694093238737?ref_src=twsrc^tfw|twcamp^tweetembed|twterm^1755954694093238737|twgr^|twcon^s1_&ref_url=file:///var/folders/w7/sbkxpdns38j73ppp2gqhvj040000gn/T/tmp-23491-Vjink7PfSskQ-.html
- https://twitter.com/intent/like?ref_src=twsrc^tfw|twcamp^tweetembed|twterm^1755954694093238737|twgr^|twcon^s1_&ref_url=file:///var/folders/w7/sbkxpdns38j73ppp2gqhvj040000gn/T/tmp-23491-Vjink7PfSskQ-.html&tweet_id=1755954694093238737
- https://twitter.com/intent/tweet?ref_src=twsrc^tfw|twcamp^tweetembed|twterm^1755954694093238737|twgr^|twcon^s1_&ref_url=file:///var/folders/w7/sbkxpdns38j73ppp2gqhvj040000gn/T/tmp-23491-Vjink7PfSskQ-.html&in_reply_to=1755954694093238737
- https://twitter.com/explore?ref_src=twsrc^tfw|twcamp^tweetembed|twterm^1755954694093238737|twgr^|twcon^s1_&ref_url=file:///var/folders/w7/sbkxpdns38j73ppp2gqhvj040000gn/T/tmp-23491-Vjink7PfSskQ-.html
- https://bento.me/1000ch
Output/Outcome Frontend で積み重ねた改善の数々 Frontend の実装を集約するリポジトリを作成し、分割統治 webpack によるビルドを esbuild を経て Vite に移行し、高速化 終わりのないルールの議論に時間を割いていた ESLint から xo へ移行 Frontend が支配的だった GitHub Actions の実行時間を分析し改善 三年間の関わりから見る PR TIMES エンジニアリングの変化 by @1000ch 14
- https://developers.prtimes.jp/2022/04/14/web-front-end-development-enviroment-in-prtimes-inc/
- https://developers.prtimes.jp/2022/06/01/build-time-improvements-using-esbuild/
- https://developers.prtimes.jp/2023/02/08/migrate-from-webpack-to-vite/
- https://developers.prtimes.jp/2024/02/09/frontend-lint-tools-unified-xo/
- https://developers.prtimes.jp/2024/02/16/github-actions-frontend/
- https://bento.me/1000ch
Outcome/Outgrowth ソフトウェア以外の副次的な変化や成長 仲間も増えて Frontend という技術領域が確立し、経験だけでなく信任が蓄積 バックエンドエンジニアがフロントエンド開発・フロントエンドエンジニア がバックエンド開発に相互でコミット 課題の解像度を磨き続けた ことで「やらなければ良かった」が体感的に減少 困難な状況下でも結果を積み重ねた自信が、個人や組織としての主体性 に 潜在的な技術負債を予め察知し対処できている 三年間の関わりから見る PR TIMES エンジニアリングの変化 by @1000ch 15
まだ終わらない改善 三年間の関わりから見る PR TIMES エンジニアリングの変化 by @1000ch 16
アドバイザーとしての支援を振り返った雑感 焦点はマインドセットや課題解決で、実のところ「The 技術」の提供は少ない 100 点の正解は持ち合わせていないし、劇的な課題解決からは程遠い それなりに重要な役割でありながら、（良い意味で）放任ベースだった 変化に相応の忍耐力が問われる中で、皆が根気よく向き合ってきた 三年間の関わりから見る PR TIMES エンジニアリングの変化 by @1000ch 17
個人や組織の更なる発展に向けて コミットの賜物で負債は着実に減っている アクセシビリティをはじめとした、更に発展的な非機能要件への取り組み 個人での頑張りから組織としての協調へ 開発に留まらない、事業や採用などの領域への関心と観点の拡大 三年間の関わりから見る PR TIMES エンジニアリングの変化 by @1000ch 18
キャリアの悩み、チームの課題、PR TIMES のこと、etc お気軽にお声がけください 三年間の関わりから見る PR TIMES エンジニアリングの変化 by @1000ch 19