はじめに

今年の4月からWebエンジニアとして新卒で働き始めた自分が2021年に勉強した・扱ったWeb技術について紹介したいと思います。
前半は実務で勉強した・扱ったもの、後半はプライベートで勉強したものを紹介します。

学生時代に勉強した技術についてはこちらに書いていますので、まだ読まれていない方はぜひ🙏
学生エンジニアの自分が2020年に勉強したWeb技術

※ 4~6月は研修期間だったため、実務期間は7~12月までです。

React / TypeScript（実務期間 2021年7~10月）

React は、Metaとコミュニティによって開発されているユーザインタフェース構築のためのJavaScriptライブラリである。React.jsまたはReactJSの名称でも知られている。 Reactはシングルページアプリケーションやモバイルアプリケーションの開発におけるベースとして使用することができる。
公式ドキュメント

Reactは既存のページをリプレイスする際に記述しました（その時の記事）。
学生時代に元々書いていたこともあり、特に勉強せずに実務でも記述していましたが、書いている中で他のメンバーのコーディング方法やレビューでの指摘などで色々なことを学べました。

OpenAPI（実務期間 2021年7~10月）

以前はSwagger仕様として知られていたOpenAPI仕様は、RESTful Webサービスを記述、生成、使用、および視覚化するための機械可読インターフェースファイルの仕様です。
公式ドキュメント

OpenAPIはReactリプレイスプロジェクトで使用しました（その時の記事）。
OpenAPIも学生時代から知っていたので、OpenAPITools/openapi-generatorによるコードの自動生成などは特に詰まることなくスムーズに行うことができました。また、元々社内でAPIドキュメントを記述する際はGithubのwikiに書いており見ずらかったのですが、OASをRedocで表示させることで格段に見やすくなりました。

Go言語（実務期間 2021年10~11月）

Goはプログラミング言語の1つである。2009年、GoogleでRobert Griesemer、ロブ・パイク、ケン・トンプソンによって設計された。Goは、静的型付け、C言語の伝統に則ったコンパイル言語、メモリ安全性、ガベージコレクション、構造的型付け、CSPスタイルの並行性などの特徴を持つ。

Go言語はLambda関数を作成する際に記述しました。
難しい処理は書いていませんが、弊CTOに色々とレビューを頂けてとても勉強になりました。
今後はgoroutineなどを勉強して、実務で役立てたいなと思っています。

PHP（実務期間 2021年11~12月）

PHPは、 "The PHP Group" によってコミュニティベースで開発されているオープンソースの汎用プログラミング言語およびその公式の処理系であり、特にサーバーサイドで動的なウェブページを作成するための機能を多く備えていることを特徴とする。
公式ドキュメント

自分が働いている会社では主にPHPを用いてバックエンドを開発しているため、使用しました。
最近ではサービスの根幹となる部分（CRUDで言うCreate部分）の一部の機能変更を行ったりバッチ処理を書いたりして、PHP力がまあまあ向上している気がしています。
また、Xdebugというデバッガーを使用して既存のシステムの動きを見たりしているので、既存のコードの理解もスムーズにできています。

Fastly（実務期間 2021年11~12月）

Fastlyは、アメリカ合衆国のクラウドコンピューティングサービスプロバイダである。Fastlyは自身のネットワークについて、開発者がコアクラウドインフラストラクチャをネットワークのエッジ、つまりユーザーにより近い場所まで拡張することを助けるために設計されたエッジクラウドプラットフォームであると説明している。
公式ドキュメント

弊社のサービスの一部の静的リソースをFastlyで配信したい要件が発生したため、社内で初めて導入しました（どのようにFastlyを使用しているかは来年弊社の技術ブログで書きます）。
自分はこれまでCloudFrontとCloudflareしかCDNは使用したことがなく、ただコンテンツを配信することしかしていませんでしたが、FastlyはVCLでHTTPヘッダなど色々なものを変更することができ、とても面白いなと思いました。

Terraform（実務期間 2021年11~12月）

Terraformは、何百ものクラウドサービスを管理するための一貫したCLIワークフローを提供するコードソフトウェアツールとしてのオープンソースインフラストラクチャです。
公式ドキュメント

TerraformはFastlyの設定をコードで管理するために使用しました。
この技術は学生時代の頃から興味はありましたが実際に記述したことがなかったので、実務で初めて触った技術でした。ただ管理するリソースがFastlyだけだったのであまり詰まるところはなく使用することができました。

ここからはプライベートで勉強した技術です。

Gatsby（学習期間 2021年6月）

GatsbyはReact製の静的サイトジェネレーターであり、開発者が超高速の Web サイトやアプリケーションを構築するのに役立ちます。また、データフェッチにはGraphQLが使用できます。
公式ドキュメント

Gatsbyは個人ブログを作成しようと思い、学習しました（作成したブログ）。
最初は簡単にブログを作ることができて良かったのですが、色々とカスタマイズしようとプラグインの追加などをしていくと、組み合わせの問題か急にエラーが出てきたり、うまく動かないことがあり今は開発していないです（ブログの方もなかなか書く時間がなくて書けていないです...）。
また、開発しているとコードを変更するたびに静的サイトを再生成してしまい、少しのコード修正の反映ですら何十秒とかかってしまうことがあったため、DXがあまり良くないのではと思いました（今はそんなことないとGatsby好きのエンジニアが言っていましたが）。
ただ、10月くらいにGatsby 4がリリースされ、Deferred Static Generationのような機能が追加されたので、また機会があったら触って見たいと思っています。

Elixir / Phoenix（学習期間 2021年7~8月）

Phoenixは、関数型プログラミング言語Elixirで記述されたWeb開発フレームワークです。Phoenixは、サーバー側のモデル-ビュー-コントローラーパターンを使用します。

関数型言語を書いてみたくなり、Elixirを学習しました。また、Webを題材に学習したかったのでPhoenixも一緒に学習しました。
Elixirの記法は初見では全く理解できませんでしたが、分かってくるとなかなか面白いなと思いました。ただ、Phoenixと一緒に学習したことでElixirについてあまり深く学習することができなかったので、今度学習するときはElixirのみで何か作成したいと思います（特に並行プログラミングについて勉強したいと思っていますが、正直Go言語でも良さそう）。

Nuxt3（学習期間 2021年11月）

Vue 3を使用して次のアプリケーションを構築し、ハイブリッドレンダリング、強力なデータフェッチ、および新機能を体験してください。Nuxt 3は、Web開発をシンプルかつ強力にするオープンソースフレームワークです。
公式ドキュメント

Nuxt3は2020年にVue3が出てからずっと待ち望んでいたのでとても楽しみにしていたので学習しました。
学習してみて予想以上にNuxt2から進化しており、とてもDXが向上したと思いました。特にViteとNitro Engineは真新しさがあり、とてもワクワクしました。
個人的な意見ですが、Next.jsはユーザー体験が良いWebサイトを作ることができ、Nuxt.jsは良い開発者体験を得られて、Webサイトを作ることができるなと思いました（Nuxtでも十分ユーザー体験が良いWebサイトが作れると思っています）。

Prisma（学習期間 2021年11月）

Prismaは、Node.jsとTypeScriptのための次世代ORMで、Prisma Client、Prisma Migrate、Prisma Studioのツールで構成されています。

Prismaは近年かなり注目されている？ORMなので学習しました。
自分は元々TypeORMというORMを使用していましたが、Prismaの方がデータモデルの記述方法やデータベースからデータを取得した際の型付けが優れていると感じました。また、自動でTSの型を生成してくれるので確かに次世代感を感じるORMだと思いました。
現在のTypeScript用のORMはTypeORMかSequelizeが定番ではありますが、Prismaは今後のTypeScriptのORMのデファクトスタンダードになるのかなと思っています。

Remix（学習期間 2021年12月）

Remixは、フルスタックのWebフレームワークであり、ユーザーインターフェイスに集中し、Webの基本に立ち返って、高速で洗練された復元力のあるユーザーエクスペリエンスを提供できます。人々はあなたのものを使うのが好きになるでしょう。
公式ドキュメント

RemixはNext.jsの対抗馬？として出てきたので学習しみました。
クライアントサイドのアセットを極力少なくしてWebサイトを配信するという概念には共感はできますが、Next.jsとの使い分け・ユースケースが見えてこなかったのでそこまで学習はしていないです。また、今のNext.jsの勢いを見ていると、Next.jsよりRemixを採用するメリットが正直わからないので、Next.jsよりも優れているユースケースを知っている方はコメント頂けると嬉しいです。

Supabase（学習期間 2021年12月）

Supabaseは、Firebaseのオープンソースの代替手段です。サービスを構築するために必要なすべてのバックエンドサービスを提供します。完全に使用することも、必要なサービスだけを使用することもできます。
公式ドキュメント

自分は学生時代からFirebaseをよく使用してプロダクトを作成していたので、自らFirebase alternativeと謳っているSupabaseに興味を持ち学習をしました。
まだ少ししか触れていないですが、DBにRDBが使用できる時点でFirebaseより優っている感じはしますし、認証機能も手軽に実装できるので基本的な機能に関してはFirebaseに引けを取らないのかなと思います。ただ、FirebaseにはAnalyticsやCloud Functions for Firebaseなど様々な機能があるので、Supabaseは完全なFirebaseの代替ではなく、技術選定の１つの枠に落ち着くのかなと思います（どの技術にも言えることですが）。

まとめ

今年は初めて社会人として働き始めたこともあり、プライベートで学習する時間をあまり確保することができませんでした。ただ、仕事ではある程度枯れた技術を学び、プライベートではかなり新しい技術を学ぶことができ、良いバランスで学習することができたのではないかと思っています。

来年は技術のインプットだけでなく、技術ブログを書いたり何かしらのコミュニティに参加したいなと思っているので、アウトプット重視の年にしたいです！