2023 年に使った技術まとめ

2023 年もそろそろ終わりなので、今年のエンジニア生活のまとめです。
正直今年はほとんど仕事しかやっていないです。どうしてもお仕事だと攻めた技術選定ができなくて（記事書くには）あんまり面白くないなあ…の気持ちではあるんだけど、その分実務でこんな技術使ってますよ、ってお話としてみていただければ幸いです。

React 18 / TypeScript

去年（2022）までは Vue と React 半々くらいで生きてたんだけど、今年はどっぷり React でした。
Vue の選択肢もないわけではなかったんだけど、ある程度の規模のプロジェクトで、かつアプリケーションとしての複雑度が高いものを作る時に Vue はやっぱりちょっと怖いんですよね。。正直コントロールできる自信がちょっとない。

多分当面は、ロジックの複雑度や抽象度が高いものは React、ロジックは素直でビューの分量や表現が多いものは Vue、みたいな使い分けになるんじゃないかなぁ…と思ってます。

CSS in JS : Emotion

去年に引き続いて Emotion 使ってます。
迷いがないわけではなくて、いろいろ検証しつつ春ごろには ↓ みたいなうめきを投げてました。

世の中は Tailwind 系が流行ってるとけど、個人的にはあれがハマるケースは結構限定的だと思ってるので、しばらくは Emotion か素直に CSS Modules でいいんじゃないかなぁ…と思ってます。あと、後ろの方で出てくるけど、個人的な推しはKuma UIです 🐻🐻‍❄️

状態管理 : Jotai

Jotaiも去年から引き続き。世間的には Jotai は状態管理ライブラリとして、わりかし限定的な使い方をお薦めされることが多い気がするけど、私はわりとガッツリ全部のロジックを Jotai の atom に載っけるアプローチです。UI のグローバルステートも API のキャッシュもルーティングの状態も全部 atom にした上で、atom の依存グラフでアプリケーションを設計していく感じ。

まだ社内でも完全に理解・共感を得られているかはちょっと自信ないけど、1 年近く回して結構ワークしてるとは思ってる。ただ、後から入ってくれたメンバーには「どこに何の atom があるか中々わからない」とは言われるので、そこはちょっと悩みどころ。Redux みたいに「グローバルの大きな state ツリーに全部入ってるから、とりあえずそこ読み書きしてコンポーネント作ってね」の方が確かに初見には優しいんだよね。わかる。でもそれが最終的にどれだけしんどいかは散々味わってきたので、Jotai を最大限使った上で、全体のわかりやすさをどう確保するか、無駄な重複をどう減らすかが今後の課題です。

共同編集 : Yjs

今年新しく習得した中で一番面白かったのがYjs。アプリに共同編集の仕組みをガッツリ作りたい時にはほんとに頼りになる。要は「Google Docs とか Figma みたいな、みんなでわちゃわちゃ編集できるアプリ」を（頑張れば）作れるライブラリです。

ただ、共同編集の難しいところはライブラリ使っても簡単には解決できない問題がボコボコでてくるところ。
特に配列のようなリスト構造を同時に編集したり、ツリー構造のノードを同時に組み替えたりする操作は Yjs を使っても本質的な安全性は保証できないのです。RDB みたいにサーバサイドでロックかけるって概念がないからね。

結局この辺りの難しいところは ↓ の Figma の技術ブログを丸っと参考にして実装させていただきました。有難い世の中だ。

How Figma’s multiplayer technology works

UI 管理 : Storybook

UI コンポーネントの管理にStorybookを導入した。弊社初。
今まで規模や期間的に Storybook が必要になる案件があんまりなかったんだけど、今年はちょっと長期戦のお仕事だったのと、私が技術選定の権限をもらってたので入れた。V6 までは結構しんどかったっぽいけど、V7 はかなり使いやすくなったみたいで、これといったトラブルもなく導入できた。
世間的には腐りやすいことで有名な Storybook だけど、弊社みたいに UI 作るのが大好きな人ばっかりいるところだと皆全然嫌がらずに使ってくれるので、素直に入れてよかったなー、って思います。

グラフィック : Canvas2D

「Canvas 2D ってあの <canvas>?」って思われそうだけど、その Canvasです。今年は Three.js も PixiJS も使わず、ひたすら生の Canvas 2D と戯れてました。
Canvas 2D って別に廃れた技術じゃないし、今でも色々現役で使われてて、かつ代替技術もそんなにないはずなんだけど、なぜか最近の情報が全然出てこないの。。

結局自分で色々試して性能測定して「何でこんなこともできないんだ…」とか「何でこんなに遅いんだ…」とか呪詛の言葉を投げながらなんとか使ってました。

でも Canvas 自体はかなり好きです。最近の CSS の「ほらほら、お前らこういうことしたいんだろ？用意してやったぞ？」な感じもないし、React や Vue みたいなフレームワークのトレンドとも無縁で、ただひたすらに作りたいもののためにロジックを積み上げるだけの世界。そういうの好き。

番外編 : Elm

今年は副業的なことをちょっとだけやったので、数ヶ月間だけ Elm に入門しました。
すっごく純粋で汚れのない世界観だなぁ…っていうのが率直な感想。worker みたいな DOM から切り離された世界で純粋なロジックを書くのにはすごく良い言語だと思う。
ただ、個人的にはこの世界観は自分の現実のプロダクト開発にはマッチしないな、っていうのが（今の時点での）結論。私はどちらかというと TypeScript の現実見てる感とか、React の大衆向けの最大公約数っぽさとか、Vue の「こういうので良いんだよ」感とかそういうのが好きなので、Elm の「わかる人だけわかれば良いです」みたいな思想はちょっと苦手なんだと思う。単純に「Not for Me」なだけなんだけど、こういう感覚自体は大事なことだと思うので、多分自分から Elm を選定することはないんじゃないかな、と思います。

2023 年に作ったものまとめ

次は作ったものコーナーなんだけど、今年は本当に作れなかった 😭 会社ではいっつも「定時で帰る」（っていってもリモートだから自宅なんだけど）って呪文のように言い続けながらも、お仕事が忙しい＆仕事自体は嫌いじゃないせいで、結局仕事大好きマンみたいな生活になってしまった。。反省

それでもちょっとだけ作ったものを書いておきます。

Canvas で縦書きできるライブラリを作って NPM に置いた

canvas-draw-styled-textってシンプルなライブラリを作りました。それなりに経験値あるエンジニアのふりしてるのでちょっと恥ずかしいんだけど、これが NPM に置いた初ライブラリでした。

文字描くのって案外めちゃくちゃ難しくて、散々苦労してなんとか使えるものにしたけど、これでもカーニングとかリガチャとか、できてないことはいっぱいある。。
私は単に CSS で装飾した span を画像にしたかっただけなんだよ（血涙）

バウンディングボックスを作って複雑 GUI に沼る

いわゆるクソアプリだけど、本気です。
🎉🎉 最高にイカしたバウンディングボックスを紹介するぜ 🎉🎉

バウンディングボックス系は何度かチャレンジしてるんだけど今まで満足いくものが作れたことがなくて、今回はようやくなんとか使えるレベルのものができたな、、ってレベル。
回転・入れ子・ズームあたりが入ってくるとマジ難しい。

時間に余裕ができたらこの辺りも使って、自作のお絵かきアプリを作りたいなぁ…と思ってます。

書いた記事とか登壇とかまとめ

最後に執筆とか登壇とか。

ご本書きました

ここまで読んでくれている人だったらきっと許してくれると思うのでダイマしときます。

『フロントエンドの知識地図』って本を共著で書きました。いわゆる入門書ではあるのだけど、そこそこ幅と深さがあるので 2,3 年目くらいまでの新人さんや、経験長いけどフロントは専門じゃないよ、みたいな人には結構役に立つと思います。

ただ、個人的には網羅的な教科書よりもピンポイントのテーマを深掘りしたい気持ちが強いので、次の機会があればもう少しマニアックなテーマも書いてみたいなぁ…の気持ちです。Zenn で書けば良いんだけど。

Findy さんのイベントでコンポーネント開発のことしゃべりました

『背伸びしないコンポーネントの始め方』ってタイトルで、React や Vue でコンポーネント作ってく時のベストプラクティス的なお話をしました。

私は仕事でも「コンポーネントがでかい」「責務が大きい」「命名がふんわりすぎ」みたいなことを自分にもひとにも言い続けているので、大体そういう話です。

ちょっと口うるさい奴って思われてそうな感もあるけど、個人的には超大切だと思ってるので（嫌がられない程度に）来年も言い続けると思います 🙇‍♀️

書いた記事：Kuma UI を推してる話

基本的に流行に鈍感で、新しいライブラリやらフレームワークやらの「触ってみた」系の記事はそんなに書かないんだけど、🐻‍❄️Kuma UI はまさに求めてるものだったので思わず書いた。

ちょっとだけ振り返ると、この頃 Emotion の代替としてVanilla Extract・Linaria・macaron・Pandaあたりを試してただひたすらに辛さを溜めていた時期だったので、Kuma UI はわりと暁光だった。
正直まだプロダクトで使うにはちょっと厳しい感じだし、そもそもこの方向性がほんとにうまくいくかは自信ない（技術的に成立するかではなく、ニーズの変化や競合の多い領域なので、受け入れられるかわからない）けど、個人的には来年支援したい OSS の一つです。

来年もよろしくお願いします 🐱

そんなわけで Web のエンジニア 4 年生のまとめでした。
来年はライフ・ワーク・バランスを取り戻しつつ、もう少し自分のやりたいこともやっていきたいなぁ…と思ってます。

Discussion