ID:32873さん

# 具体的な実務 チームの技術的リードを行いフロントエンドにとどまらず GraphQL を利用した API サーバの設計・開発にも従事した。モブプロの試行を継続し開発プロセスとして習慣化させ、属人化の排除や学習体制が構築できたことで試行から実践レベルに達することができた。PO やデータアナリスト、デザイナーとの協力を積極的に行うことで、スクラムを採用した開発の中で優先度を決めたり、期日のある開発の旗振りを行ったり、ムダなプロセスを排除したり、役割を選ばず出来ることはすべて対応した。 ## ポイントと習慣化、GraphQL API とフロントエンド ユーザーにコンテンツ利用をポイントというインセンティブを得ることで体験してもらう、というサービスを MVP として最小限機能を開発・リリース、その後グロースを続けた。フロントエンドフレンドリーな構成を妄想し、GraphQL API として Apollo Server を採用。機能追加を考慮し、クリーンアーキテクチャーからエッセンスとして DIP やレイヤリングのみを拝借したユースケースベースとなる設計・開発を行った。フロントエンドは React を用いて Context と Hooks、apollo-client が提供する状態管理を利用した構成で開発。 関連資料：[週一でリリースし続けるためのフロントエンドにおける不確実性との戦い方](https://speakerdeck.com/tkdn/developers-summit-2020-summer-c-4) ## ゲームプラットフォーム、ヘッドレスCMS と Next.js SSG 広いユーザー層にカジュアルにゲームを楽しんでもらうことを目的にゲームプラットフォームのサイトを開発。当初は掲載本数も少なく開発は手製のビルドスクリプトで静的サイトを作成していたが、運用コストを鑑みてリニューアル。ヘッドレスCMSに microCMS を採用、Next.js SSG で静的サイト生成というシステムに変更し、リリースのリードタイムやユーザーへの提供スピードも向上した。 関連資料：[開発を介さなくてもコンテンツが更新できるように！｜microCMS blog](https://microcms.io/blog/usecase-mediba/)

# プロジェクト詳細 - プロジェクトのインフラが uncontrollable でミドルウェアのバージョンアップができない状態の解決 - バックエンドとフロントエンドの技術的な乖離が大きく作業効率やリソースバランスの改善のため - 上記を利用し JavaScript エコシステムを取り入れた技術的戦略を見据えた対外的なエンジニア市場価値の創出 この3点を大きな目的として、au Webポータルのシステムリニューアルプロジェクトが行われた。プロジェクトにおいて、設計・PoC実装などを担った。 ## 関連 URL - [未学習領域におけるチーム{学習,プレイ}とは /au Web portal frontend, BIT VALLEY -INSIDE- Vol.8 - Speaker Deck](https://speakerdeck.com/tkdn/au-web-portal-frontend-bit-valley-inside-vol-dot-8) - [Next.js / TypeScript でリニューアル・運用におけるハマりどころ](https://tkdn.github.io/slides/2019-06-26-nextjs-and-typescript/#0) - [au Webポータルの開発現場から始まるmediba Re;Growth 〜技術の垣根をなくして、ユーザーの課題に寄り添う〜 | mediba広報ブログ](https://koho.mediba.jp/2019/04/23/au-web-portal-symposium/) # 具体的な実務 アプリケーションの下回りの設計からリリース直前のバグフィックス・チューニングまで、開発チームの中では役割を選ばず出来ることはすべて対応してきた。 - React/Redux といった技術スタックを扱うため実績のある外部エンジニアからヒアリング - フレームワークに Next.js を選択し React/Redux をベースにした PoC実装 - Yarn Workspace を利用した monorepo 構成, ならびに Jest 実行のための環境構築 - フロントサーバ Express のミドルウェア・ハンドラ実装 - プロジェクト用にカスタム Webpack Plugin ほかフロントエンドビルドパイプライン実装 - Web パフォーマンス計測自動化とチューニングを実施 - Sentry を利用したエラーロギングとアプリケーションへの組み込み - ティーチングやペアプロを実施しチームにペアプロの文化・土壌を形成 ## ゼロベースから、チームでの学習プロセスからデザイン React/Redux の経験者が少ない中で、どういった学習で取り組めば良いか試行を繰り返しチームにおける暗黙知の浸透、知識伝搬のための環境づくりに取り組んだ。 1. TypeScript を緩やかに導入し序盤から後半までスキルを前進させながら、学習と並行させた開発体制づくり 2. ペアプロを行うことで知識差分や暗黙知の共有を行い新しい技術的要素をチームに伝搬 3. 自ら新しい領域に踏み入れ失敗と成果をすぐフィードバックすることでチーム内からの自発的な自己学習意欲を助長する ## リリース直前におけるチューニング リリース直前に収益影響が懸念されるパフォーマンスの問題が発生した。問題特定のために指標取りから始め、ボトルネックになっている箇所を洗い出しどういった対応が好ましいか課題の分解と対応を1週間で行った。Resource Hints の最適化や、優先度の低いタスクをコールバックキューに積んで処理に優先度をつけるなど泥臭い対応でクリアしつつ、無事にリリースにこぎつけた。 ## 運用におけるパフォーマンス・チューニング React CSR を切り捨てから盛り返しを図るためパフォーマンス計測と改善を続け収益影響がないような形でリリース可能か AB テストでのリリースでテストを実施した。 ### 参考 URL - [React SSR, 定期計測とプロダクトに最適なパフォーマンスアプローチ](https://tkdn.github.io/slides/2019-10-29-react-perfup-in-nihonbashijs/#0) - [Datadog と Lighthouse を利用した WebPerf の継続的計測 | mediba Creator × Engineer Blog](https://ceblog.mediba.jp/post/186341145447/webperf-measuring-with-lighthouse-and-datadog)