Upgrade to Pro — share decks privately, control downloads, hide ads and more …

フロントエンド育成PJに参加してみた

Tech Leverages
July 20, 2023
3k

 フロントエンド育成PJに参加してみた

Tech Leverages

July 20, 2023
Tweet

More Decks by Tech Leverages

Transcript

  1. 自己紹介 松村 一志 • 経歴 ◦ 2020年 レバレジーズ新卒入社 • 出身

    ◦ 徳島県徳島市 • 趣味 ◦ バイオリン ◦ 謎解き ◦ ボードゲーム
  2. 目次 • 始めに • FEエンジニア育成PJについて ◦ 背景・目的 ◦ 概要 ◦

    行ったこと ◦ アウトプット • まとめ • 感想
  3. FE育成PJ 身につけたスキル TypeScript 関数型を理解して、型を使いこなせる程度 フロントエンド UIフレームワークを利用したComponentの実装 Web API(非同期通信・認証・CORS) Cookie、Sessionを利用した認証とその仕組の理解 React,

    Next.js Componentを組み合わせて1つのpageを作成 Formとかログイン状態を含めたステート管理 非同期やCORSを意識したAPI呼び出し DevOps CI・CD 単体テスト
  4. FE育成PJ 育成PJで行ったこと 継続的な学習  プロを目指す人のための TypeScript入門  type-challenges  React チュートリアル  Next チュートリアル

     TypeScript/Next.JSでつくる実践Webアプリケーション開発 成果物  生産性可視化アプリケーションの開発  既存営業支援ツール(求職者向けの求人確認・応募マイページ)のフロントエンドリプレイス
  5. 概要  生産性を図る指標として DevOps Research and Assessment(DORA)が提唱した  FourKeysをダッシュボードで提示 FourKeysとは? • デプロイの頻度

    : 組織による正常な本番環境へのリリースの頻度 • 変更のリードタイム : commit から本番環境稼働までの所要時間 • 変更障害率 : デプロイが原因で本番環境で障害が発生する割合( %) • サービス復元時間 : 組織が本番環境での障害から回復するのにかかる時間 仕様  LambdaがGithub APIを定期的に叩き社内リポジトリのデータを取得  NextのCSRによりダッシュボードを提示 アウトプットについて 生産性可視化アプリケーション
  6. 成果物  既存営業支援ツール(求職者向けの求人確認・応募マイページ)のフロントエンドリプレイス 技術構成  既存   アプリケーション Laravel + Vue   インフラ EC2

    RDS  リプレイス後   アプリケーション React + Next   インフラ ECS + Fargate   既存環境からフロントエンドだけ切り離し リプレイス アウトプットについて 営業支援ツール フロントエンドリプレイス
  7. やったこと  継続的な学習  プロを目指す人のための TypeScript入門  type-challenges  React チュートリアル  Next チュートリアル  TypeScript/Next.JSでつくる実践Webアプリケーション開発

    成果物  生産性可視化アプリケーションの開発  既存営業支援ツール(求職者向けの求人確認・応募マイページ)のフロントエンドリプレイス 得られたもの  フロントエンドに関する網羅的な知識  自信 etc… まとめ