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

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

Avatar for Tech Leverages Tech Leverages
July 20, 2023
3.7k

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

Avatar for Tech Leverages

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… まとめ