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

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

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

More Decks by レバレジーズTechアカウント

Transcript

  1. フロントエンドエンジニア育成PJに
    参加してみた
    レバレジーズ株式会社
    レバテック開発部 セールスコラボレートチーム
    松村一志
    2023/07/10

    View Slide

  2. 自己紹介
    松村 一志
    ● 経歴
    ○ 2020年 レバレジーズ新卒入社
    ● 出身
    ○ 徳島県徳島市
    ● 趣味
    ○ バイオリン
    ○ 謎解き
    ○ ボードゲーム

    View Slide

  3. 目次
    ● 始めに
    ● FEエンジニア育成PJについて
    ○ 背景・目的
    ○ 概要
    ○ 行ったこと
    ○ アウトプット
    ● まとめ
    ● 感想

    View Slide

  4. FE育成PJについて
    目的・背景
    狙い
     フロントエンド育成 PJが発足した目的ですが FEをリードできるエンジニアを排出する
    状況
     社内正社員のFEエンジニアが不足・また業務委託に依存している部分も大きい
     今後発生する大規模 PJや既存システムのリプレイス・リニューアルの際にも
     フロントエンジニアが必要不可欠

    View Slide

  5. 一度フロントエンドを基礎からみっちり学んで組織に還元したい!
    ほとんどバックエンドしか実装したことない
    ...
    何ならこの一年マネジメント業務が殆どでまともに開発できてない
    ...

    View Slide

  6. FE育成PJについて
    概要
    やること
     FE習得に必要な学習課題
     成果物作成(React, Nextを用いたアプリケーション)
    期間
     2ヶ月(インプット期間1ヶ月・成果物実装期間 2ヶ月)

    View Slide

  7. FE育成PJ
    身につけたスキル
    TypeScript
    関数型を理解して、型を使いこなせる程度
    フロントエンド
    UIフレームワークを利用したComponentの実装
    Web API(非同期通信・認証・CORS)
    Cookie、Sessionを利用した認証とその仕組の理解
    React, Next.js
    Componentを組み合わせて1つのpageを作成
    Formとかログイン状態を含めたステート管理
    非同期やCORSを意識したAPI呼び出し
    DevOps
    CI・CD
    単体テスト

    View Slide

  8. FE育成PJ
    育成PJで行ったこと
    継続的な学習
     プロを目指す人のための TypeScript入門
     type-challenges
     React チュートリアル
     Next チュートリアル
     TypeScript/Next.JSでつくる実践Webアプリケーション開発
    成果物
     生産性可視化アプリケーションの開発
     既存営業支援ツール(求職者向けの求人確認・応募マイページ)のフロントエンドリプレイス

    View Slide

  9. FE育成PJ
    育成PJで行ったこと(読書課題)
    継続的な学習
     プロを目指す人のための TypeScript入門
     React チュートリアル
     Next チュートリアル
     TypeScript/Next.JSでつくる実践Webアプリケーション開発

    View Slide

  10. 継続的な学習
     type-challenge
    type-challengeとは?
     TypeScriptの型についての問題集のようなもの
     型に関する問題とそのテストケースが提示され
     それを満たす実装を書いてコンパイルエラーをなくしていく
    TSの型表現の向上が図れる
     依存ライブラリの型の読解時
     汎用的な処理に汎用的な型表現を搭載する時
     依存ライブラリの型をラップしてより厳密な型を作りたい時
    FE育成PJ
    育成PJで行ったこと(学習課題)

    View Slide

  11. 成果物
     生産性可視化アプリケーションの開発
     社内開発チームが生産性を可視化できる様なアプリケーションを開発
    技術構成
     アプリケーション
      フロントはもちろん、バックエンドの処理も APIルートを用いて開発
     インフラ構成
      ECS + Fargate
      RDS
      定期的なデータ取得のため Lambda
    アウトプットについて
    生産性可視化アプリケーション

    View Slide

  12. 概要
     生産性を図る指標として DevOps Research and Assessment(DORA)が提唱した
     FourKeysをダッシュボードで提示
    FourKeysとは?
    ● デプロイの頻度 : 組織による正常な本番環境へのリリースの頻度
    ● 変更のリードタイム : commit から本番環境稼働までの所要時間
    ● 変更障害率 : デプロイが原因で本番環境で障害が発生する割合( %)
    ● サービス復元時間 : 組織が本番環境での障害から回復するのにかかる時間
    仕様
     LambdaがGithub APIを定期的に叩き社内リポジトリのデータを取得
     NextのCSRによりダッシュボードを提示
    アウトプットについて
    生産性可視化アプリケーション

    View Slide

  13. 機能
     生産性可視化に必要なデータ取得機能
     ダッシュボード表示機能
     期間・チーム選択機能
     認証機能
    開発人数
     4人
    期間
     3スプリント(27days)
    アウトプットについて
    生産性可視化アプリケーション

    View Slide

  14. 生産性可視化アプリケーション

    View Slide

  15. Atomic Designにはこだわり過ぎず開発
     デザインはなくラフを軽く作ってから開発という流れであったため。
     ただ最低限循環参照は起こさない ・アプリケーションロジックは Organismsに寄せるなど
    ライフサイクルを意識
     1年分のデータを取得できる仕様上、ダッシュボードの再レンダリングが大量になされると負荷がすぐ高く
    なるため、特にダッシュボードの再レンダリングのタイミングを意識
     
    スプリントスプリントレビューの意見を取り入れる
     仕様も比較的自由度高く決めれたため、スプリントレビューでステークホルダーの意見を
     吸い上げ、翌スプリントには反映できるように
    アウトプットについて
    開発時意識したこと

    View Slide

  16. 成果物
     既存営業支援ツール(求職者向けの求人確認・応募マイページ)のフロントエンドリプレイス
    技術構成
     既存
      アプリケーション Laravel + Vue
      インフラ EC2 RDS
     リプレイス後
      アプリケーション React + Next
      インフラ ECS + Fargate
      既存環境からフロントエンドだけ切り離し リプレイス
    アウトプットについて
    営業支援ツール フロントエンドリプレイス

    View Slide

  17. 機能
     求人取得・表示機能
     求人応募機能
     面接希望日時選択機能
     認証機能 etc...
    開発人数
     4人(PM 1人)
    期間
     1ヶ月
    アウトプットについて
    営業支援ツール フロントエンドリプレイス

    View Slide

  18. アウトプットについて

    View Slide

  19. Material UIの作法に則ったコーディング
     既存環境ではCSSのベタ書きがされており、改修が入れづらい状況であったため
     多少時間がかかっても改修を入れやすくなるよう Material UIの機能を使ってコーディング
    多少デザインが変わることは許容
     古いVue, Nuxtからのリプレイスでデザインデータもなかったため
     PMの許容範囲であればデザインは変更する
    SSR, CSRの使い分け
     叩くAPI自体はかわらないため既存では CSRで書かれていたところも
     静的ページはSSRによるレンダリングに変更
    アウトプットについて
    開発時意識したこと

    View Slide

  20. やったこと
     継続的な学習
     プロを目指す人のための TypeScript入門
     type-challenges
     React チュートリアル
     Next チュートリアル
     TypeScript/Next.JSでつくる実践Webアプリケーション開発
    成果物
     生産性可視化アプリケーションの開発
     既存営業支援ツール(求職者向けの求人確認・応募マイページ)のフロントエンドリプレイス
    得られたもの
     フロントエンドに関する網羅的な知識
     自信 etc…
    まとめ

    View Slide

  21. 感想
    アウトプットにこだわるのは大事
     自学習だけでは調べないような深い情報も発表やアウトプットがあることで取りに行くようになった
     また、毎日フロントエンドに関する記事を Slackで共有していたため自然と自学時間が増えた
    組織に還元する気持ち大事
     自分の成長だけでなく結果的に組織に還元することがわかっていたため、前向きに取り組めた。
     
    意識改革
     2ヶ月フロントエンドに関することばかり考えていたため、
     組織のフロントエンドを牽引しようという意識が自然と芽生えた

    View Slide