🐾

2023年にフロントエンドエンジニアに転職してから経験したことを振り返る

2024/01/04に公開

JavaScript

はじめに

記事を見ていただき、ありがとうございます。
2023年、フロントエンジニアとして転職して色々な変化があったので、記事にまとめました。

マークアップエンジニアが、Webアプリ開発会社のフロントエンドエンジニアとして転職すると、こんなことができるんだな〜というのを知ることができる記事になると思います。

ざっくり言うと2023年は、
本業で転職したアプリ開発会社がとても良い会社で、エンジニアとして良い経験を積めました。
副業のWeb制作も安定してお仕事をいただける状態になったので、
割と2023年の始めに理想として描いていた形になることができました。

軽く自己紹介

2023年を振り返る前に、私について軽く自己紹介を致します。

20代後半のフロントエンジニアです。
・2023年3月までは、Web制作会社でディレクター&マークアップエンジニア
・2023年4月から、アプリ開発の会社でフロントエンドエンジニア
という感じのステータス？でございます。

やったことをざっくり表まとめ

2023年は、
本業: Webアプリ開発
副業: Webサイト制作
をしておりました。

副業のも混ざってます。
結構もりもりかな〜と思います。

月別詳細まとめ

詳細の振り返りは、基本は本業のみにさせていただきます。

1〜3月

「Web制作会社を退職」
3月に、Web制作会社を退職しました。パラハラなどが割とあって、3~4ヶ月に1人辞めるような環境の会社だったんですが、会社が親会社に吸収されたり、Web開発エンジニアとしてやっていきたい気持ちがあり、退職しました。
1月に次の会社が決まって、退職を確定した感じです。
会社の仕事は、既存の担当案件の残りを対応していただけだったので、とても暇でした。そこで副業を始めました。

副業で、Next.js案件に挑戦をしました。
「自分個人宛に仕事をご依頼いただける状態にしたい。」と言う思いがあったので、Web制作会社での経験を活かして、サイト制作案件を受けまくっていたのですが、たまたま受けたお仕事が、Next.jsによるアニメーションの多いサイトの開発だったので、無理やりキャッチアップして対応しました。(めちゃめちゃ辛かった。。)
4月から転職する会社では、Nuxt.jsを使う開発だったので、割とこの経験は、後に活きました。

それと、4月から入社する会社が、Vue3(入社してみたらNuxt3だった)ので、Vue3の本で学習してました。

これを使って勉強してました。

4〜6月

「アプリ開発会社入社・Nuxt3/TypeScriptでアプリ開発をする」
始めてNuxt3/TypeScriptでアプリ開発をしました。
始めてにしては、バックエンドとのAPIの繋ぎこみを実装したり、アーキテクチャに触れたり、mswというライブラリでAPIモックを作ったり、フロントのテストを書いたり、結構いろんなことができました。

作ったもので言うと、駐車場の空き検索/予約/決済ができるアプリです。

アプリ開発のフロントエンドのスタンダード？的な経験ができたと思います。

7〜9月

「フロントエンドのテストをめちゃ書く・AWSに触れる・LIFFアプリに触れる」
フロントエンドのテストをめちゃ書きました。
特にNuxt3は、オートインポート機能などが原因で、テストを書くのがめんどくさかったのですが、キャッチアップして頑張って書いてました。(vitest)
また、AWSのS3を使って画像をストレージに保存する処理などもしてました。
LIFFアプリという、自作L STEPのようなアプリの経験もしました。

作ったものは、配達・在庫管理アプリです。管理画面側とユーザー画面側どちらもです。
配達曜日の指定や、在庫の記録、配達キャンセルをする機能などがあるアプリです。

英語の公式ドキュメントを読んで開発できるようになってきたな〜という感覚を持ちました。

Nuxt3のテストは、以下の記事がめちゃいいのでおすすめです

学習では、Nuxt3/JavaScript/TypeScriptの基礎を復習しました。
基礎が足りてないなという感覚があったので、公式ドキュメントや、MDNを結構読みました。
意外と知らなかった気づきがあったので、基礎学習はめちゃ大事でした。

ここら辺からZenn投稿を始めました。初めてのZenn投稿はこれでした。

10〜12月

「フォーム実装しまくる・ライブラリを自分でプロジェクトに導入・共通コンポから自分で作る」
10~12月は、フォーム実装をゴリゴリやってました。無限フォーム実装編って感じでした。
そのおかげで、フロントエンドで実装する可能性のあるフォーム実装のパターンはほぼほぼ押さえられたかと思います。
vee validate×yupでフォーム実装をしました。

作ったアプリは、クリエイタースクールの、講師シフト管理・スクールの登録・レッスンの登録/予約・生徒情報の管理などができるアプリです。
10月頃は、めちゃ複雑なフォームを作成しまくる時期があり辛かったです()

また、所属している会社のフロントエンドユニットで、使ったことのないライブラリの技術的な検証して、プロジェクトに導入するということをしました。
プロジェクトに導入するので、ちゃんと使い方を調べたり、既存プロジェクトに反映する際どうするか考えました。

記事にまとめられている情報が少ないライブラリだったので大変でした。
その時に書いた記事が、以下の記事です。

共通コンポを自分で作ることもしたので、プロジェクト内で自分裁量を広げられました。vuetifyを使ったのですが、vuetifyは癖が強くてあまり好きじゃないです←

エラーハンドリングも少し触れました。
認証・認可系があまり実装できてないので、2024年早いうちにできるようになっておきたいなと思っております。

学習では、Node.jsに触れる・app routerに触れる・本を読む・Zenn投稿頑張りました。
バックエンド側の理解が浅かったので、Node.jsを使って、DB操作・API開発をすることで、バックエンドのしていることをざっくり理解をしました。

DBはMongo DBを使いました。APIの仕組みだったり、CORSについて色々知れたので、めちゃよかったです。
Render.comというHerokuの無料版のようなサービスでアプリケーションをデプロイしたのですが、結果的にGithub Actionsを使って、CI/CD的なこともしてました。
ちなみにNode.jsで作ったプロジェクトはこちらです。

これからNext.jsを書いていきたい気持ちがあるので、app routerを試しに使ってました。
app routerは正直大変でした。考えることが多くて大変なのと、まだ色々と定まってない感があるので、ちゃんとキャッチアップしていきたいと思います。2024年は、Next.jsをもっと使っていきたいですね。

「良いコード/悪いコードで学ぶ設計入門を読む」という本を読みました。コードを書く時に考えた方が良いことを色々と学べました。この本を読んだおかげで、いい加減なコードを書きそうになった時、一度立ち止まって考え直すことができるようになりました。

Zenn投稿も頑張ってました。
1ヶ月に2~3件投稿してました。割と頑張ってましたね。

まとめ

2023年は頑張ったので、2023年1月に思い描いていた理想の通りになった感じでした。めちゃよかったです。かなり頑張ってたと思います。

Web制作会社にいた頃と比べて、作るものは全然違いますね。そして技術も新しいです。
アプリ開発ですと、開発しがいのあるものを作れて楽しいなと思いました。転職して良かったです。

ただ、眼精疲労が出てきたり、背中に小さな脂肪の塊ができたり、健康面は良くありませんでした。来年は健康に生きたいと思ってます。

2024年やりたいこと

2024年は、以下のことを考えてます。

健康に気を使う
副業でもアプリ開発案件を行う(Next.jsを書いていきたい)
できればバックエンドの開発を経験する
情報発信・アウトプットを頑張る

割とモリモリですが、7~8割達成できれば良いかなと思ってます。
副業の方で、Next.jsのアプリ開発案件をいただけたので、すでに実行しつつあります。
頑張りたい気持ちが一番ですが、体を壊さぬよう、頑張りすぎずに、走り続けることを第一に動ければと思います。