sena-v.com

sena-v.com
画像

画像

画像
scroll top

2022年前半振り返り

2022-08-09    

前からだいぶ間が空き、昨年末~今年まで本気でフロントエンド周りの知識UPに努めてきたので振り返り、今後きちんとアウトプットしていくことも含めて記録を残します。

blogに関して理解しやすい形で記事を公開ようとしてnotionに下書きアウトプットしまくっておりそれで満足してしまっていた部分もあるので、notionの下書きを公開を意識しつつ、書き溜める → 記事化する方向に持っていければ今月以降は安定して振り返っていけるイメージです。 DoorLog さんのやり方がすごくいいと思ったので。

技術関連

本業

  • Vue / Nuxt + AWS Lambda中心のフルスタック環境での開発
  • React / Next + AWS ECSのフロントエンド専任開発

フルスタック環境での開発

フルスタック開発については GraphQLのサーバー側機能を作ったり、LamdaからDynamo or RDS みたいなつなぎ方もしていたため、Reactを使用していない以外フルスタック環境としては現在のモダン開発現場としての体験ができたかなと思います。

  • Vue2 + Nuxt + TypeScript + Vuex
  • Cypress によるテストコード経験、過去のJest経験と合わせてテストコードで完結
  • GitHub Actions + CloudFormationによるCI/CDの基礎、改善(時間半分程度まで短縮)
  • Apollo ServerでのBFFクッション + GraphQLメインのAPI環境開発

フロントエンド専任開発

フロントエンド専任開発についてはほぼテックリードの立ち位置だったため、環境構築くらいから新しいことに挑戦しつつどうしたら開発が楽・効率的に進められるか?を重視し取り組みました。

フルスタック環境での経験からバッドプラクティスの部分(特にCI/CD)を改善しつつ、Nextを使用する環境としてはほぼ最新と言っていい環境で気持ちよく開発ができるような環境が作れたと思います。svelteの採用案も出ていたため検証したところ、今回の要件であるISR化部分がかなり辛い(基本SSGでナレッジがない)ため採用については見送りとしました。

  • React18 + Next + TypeScript
  • Reduxの単Storeが辛いのでRecoilで状態管理を楽に
  • SWRを使用してGraphQLのfetch結果をキャッシングしパフォーマンス向上
  • fetch → state管理をSWR使用有無と使い分けるため、Genericsを使用したカスタムフック化
  • MSWを使用することによりBFFからのAPI戻り値をmockすることにより、開発の高速化
  • React-testing-libraryによるJestでテストできる範囲の増加(UT+ITまで実施可能に)
  • Cypressで環境依存エラーが発生しやすいため、Playwrightを採用し解決(Playwrightはlinux上で起動必須になり依存が発生しにくい)
  • eslintのAirbnbルール適応、自動整形、型チェックをnpm scriptで1コマンド化
  • GitHub ActionsにてCI/CD初期構築

当時のNuxt、現在のVueについての問題点

2021-2022 にかけてVue2からVue3が主流になりつつあり、技術記事もぐっと増えたと思います。

  • 破壊的変更が比較的多く、置換するだけだと動かない可能性がある
  • Vue単ファイルではなくNuxtで導入している場合、更に対応コスト感が上がる

Vue3では以上の点があるため、将来的にアップデートされた場合に置換コストがかかる可能性があり、Angulerの轍を踏まないかが心配なところではあります。

Reactが思ったより開発体験が良かった

個人的にはReactの開発しやすさがすごいので、Vueと比べても以下がVueで満たされない限りはReactを第一選択肢として上げていきたいかなと思います。

  • 純粋にJavaScriptなのでNodeJSの知識がフルで使える
  • 単方向データフローが実装・コード理解しやすい
  • 採用事例の幅広さ、問題解決がしやすい、Nextの「設定より規約」に乗れる
  • computed等をいちいち実装する必要があり、実装の面倒くささ・漏れが増える
  • カスタムフックが便利すぎる

生活系

本格的な筋トレを始めた

去年の夏くらいから可変ダンベルから集め始めて、筋トレが完結できる環境を整えました。

ジムはコロナの懸念があったり家からの距離、コスト感的にも家でできたほうが良いのでは?となり、自宅にジムがあって筋トレしない人間はどこにあってもやらないだろうという考えから懸垂台、可変ダンベル、筋トレ用ベンチ、腹筋ローラー、ストレッチポール、ヨガマットまで揃えました。

懸垂台は部屋が狭くて下の物を移動する必要がありほぼ使ってないので早く引っ越したい。

引っ越し

転職に伴い現職に続いて自宅作業ができる環境になったので、今の家より広い(作業部屋を分けたい意図)かつ周辺設備が今より充実した箇所に住みたい。前回の引っ越しの時も絶対条件を満たす箇所が出るまでひたすら待つ戦法だったので、今回も今年~年度末を目安に決めたい。

    

Tags

    ALL(11)
    Firebase(1)
    GraphQL(1)
    JavaScript(7)
    Nuxt(2)
    React(2)
    TypeScript(2)
    Vue(1)
    個人開発(1)
    勉強法(1)
    技術(6)
    振り返り(1)