新卒2年目フロントエンドエンジニアの技術スタック2020

いつもブログをご覧になってくださっている皆さん、こんにちは。そうでない方は初めまして。

2020年もあと1ヶ月となりましたので、この記事では筆者が今年扱った技術について振り返ってみます。

なお、筆者は2019年に新卒で████社に入社し、██████のフロントエンドを担当しています。新卒2年目のフロントエンドエンジニアのみなさんはぜひ参考にしてみてください。

プログラミング言語

業務・趣味ともにほぼ全てTypeScriptを使っています。一応、たまに書き捨てのものをJavaScriptで書くことがありますが、一定以上の規模のものを作りたい場合や一定期間以上メンテナンスしたい場合はTypeScriptを使います。また、ASTを扱うときや新しいライブラリを触るときなど、型情報による補完の恩恵が大きい場合もTypeScriptを積極的に使用します。どれにも当てはまらないのでJavaScriptを使った例としてはQiita記事のために書いたプロキシサーバーが挙げられます。

ただし一つだけ例外があり、2011年にリリースされ現在も月1回の更新を続けている月下人狼のメンテナンスをする際はCoffeeScriptを書きます。以前は全てがCoffeeScriptで書かれていましたが、数年前に一念発起してフロントエンドにTypeScriptを導入しました。しかし、フロントエンドの基礎部分（オレオレSPA的な）とバックエンド（node.js）は今だにCoffeeScriptが数万行程度残っており、またnode.jsが4.0になる前にメンテナンスが停止したWebSocketベースのフレームワークの上に乗っています。つらいですね。

2018年から2019年にかけてRustを書いていたため現在でもRustを最低限書くことができ、今年も言語処理系を書くためにRustを使おうとしましたが時間がなかったため完成しませんでした。

以上のように、今年はほぼずっとTypeScriptだけを書いて過ごしました。とても新卒2年目らしいですね。

フロントエンド関連ライブラリ

技術スタックとしてはReact一辺倒であり、業務も含めて全てのUIをReactで作りました。趣味で作ったのはこのあたりです。全部Reactとはいえ、自らのスキルアップという目的もあるので毎回多少構成技術に色を付けています。

Type Puzzles （ReactのConcurrent Modeを使ってみた）
このブログ（Gatsbyを使ってみた）
Rocon Website（後述のRoconを使った）
例のアレ（急いで作ったので普通の構成）

今気になっていてこれまで使っていないのはNext.jsで、Rocon for Next.jsを作ってNext.jsユーザーを救済するのを機にNext.jsに手を出してみようと思っています。

ちなみに、Reactで全てのUIを作ったと書きましたが一つだけ例外があります。先ほども出てきた月下人狼のメンテナンスをする際はフロントエンドの一部のコードでjQueryを触る必要がありました。

とはいえ、まともに使ったのはReactだけと言っても間違いありません。とても新卒2年目らしいですね。

ステート管理

Reactといえばステート管理ライブラリですが、今年は「何も使わない」か「Recoilを使う」の二択でした。今のところグローバルなステート管理が必要な場合はRecoilがあれば十分という考えです。

月下人狼ではMobXを使っていて、あれも好きです。Reduxも使ったことがありますが、中央集権的なステート管理があまり好きではないので好んで使いません。

CSS in JS

ReactといえばCSS in JSですね。以前かstyled-componentsを好んで使っていましたが、今年はlinariaも使い始めました。

ただ、最近まとまったCSSを別のコンポーネントに分けないでほしい話に書いたような設計に対する思いが発生したため、それを実現してくれるCastellaというCSS in JSライブラリを作りました。次の機会から使っていきたいですね。

サーバーサイド関連

業務や趣味でサーバーサイドのロジックを作りこむ場合もありますが、全てnode.jsです。デプロイ先としては業務の場合オンプレのいい感じのアプリケーション基盤があります。趣味の場合はDockerコンテナをVPS（メモリ2GB）にデプロイします。このときはAnsibleでdocker runします。docker-compose？　K8s？　クラウド？　知らない名前ですね。サーバーサイドが必要ない場合はNetlifyとかに置きます。

今年はサービス開発欲があまり無かったので、今年趣味で作ったものは全部サーバーサイドがありませんでした。一応過去には、VPS（メモリ2GB）に載せる以外にもRealtime Database目当てでFirebaseに載せたりfly.ioに乗せてEdge Workerを試してみたりしたこともあります。

ちなみに、今年は触りませんでしたが、趣味でデータベースを扱う場合は大体MongoDBとRedisです。もちろんVPS（メモリ2GB）に乗っています。

正直いい加減AWSとかその辺をちゃんとやりたい気持ちもありますが、ネタ（あとそのために手を動かす時間）が無くて手を出せていないのと、フロントエンドエンジニアならAWSよりも先に極めるべきものがあるだろという気持ちに阻まれています。

OSS活動

新卒2年目なので技術スタックというお題だと書くことがこれくらいしかありません。そこで、2020年のOSS活動をついでに振り返ってみます。

一番多くコントリビュートしたのはTypeScriptコンパイラで、3つのプルリクエストがマージされました。また、5個のプルリクエストが拒否されることもなく放置されています（一番長いもので4ヶ月ほど）。

また、Babelに対するPRが1つ、CSS Selectors Level 4仕様書に対するPRが1つ、ECMAScript仕様書に対するPRが2つマージされました。

新卒2年目らしくお試し程度のOSS活動量ですね。

自製ライブラリ

今年はReactのエコシステムにより理想的な環境をもたらしたいという思いが高じて、ライブラリを2つ作り公開しました。

1つはRoconで、究極のReact向けルーターライブラリ「Rocon」を作ったでも説明したように、既存のルーターライブラリがぜんぜん型安全でないという現状を打ち破るためのものです。採用された例があるのかどうかは知りません。多分ないと思います。

もう1つは先ほども少し出てきたCastellaで、これは既存のCSS-in-JSライブラリ（あるいはCSS Modules）がCSSとコンポーネント設計の観点から理想的ではないという問題を解決し、ついでに将来のWeb標準によりフレンドリーなAPIを提供してくれる夢のようなCSS-in-JSライブラリですが、採用された例は多分ないと思います。

ぜんぜん使われないライブラリを作って喜ぶのはとても新卒2年目っぽいですね。