2022年に使った技術・作ったもの・書いたものまとめ
使った技術・作った物・書いた記事で今年のエンジニア生活の振り返りです。技術選定などお役に立てば幸いです🐱
2022年に使った技術まとめ
今年主に初めて使ったものを振り返ってみようと思います。
React関連
2022年は実質Reactに入門しました。これまでも誰かの作ってくれた土台に乗っかってちょろちょろコンポーネント書いたりhooks周りの仕組みを作ったり、辛い辛い言いながらReduxと戯れたりはしていたんだけど、所詮は作ってもらった仕組みの上での話なので、ぶっちゃけあんまりわかってなかったのです。
今年はたまたまReactの新規プロジェクトをフロント部分の技術選定からまるっと任せてもらえたので、そこで検討・利用したライブラリやらをさくっと振り返ります。
React 18
まずは本体から。開発初期は17で作ってんだけど、途中で18が正式リリースされたので移行しました。React.FCとVFC周りの変更とかuseEffectが開発中は2度発火するとか、ちょいちょい面倒な対応はあったけど、ドキュメント読んで理解すれば作業としてはすんなりだった気がする。ま、Vue 2 → 3に比べれば大抵のことは許せるよね😇
CSS in JS : Emotion
弊社の今までのプロジェクトは基本CSS Modulesだったのですが、今回全部JS側に寄せたかったのでCSS in JSを初採用（多分）しました。
CSS周りで検討・採用したもの：
-
Emotion（採用）
- 有名どころなので日本語も含めて情報が多い
- 基本Styled ComponentsなのでIDEのサポートも良い
- ランタイムのオーバーヘッドはいくらかあるらしい。ただ、今回使った範囲では特に気にならなかった（スタイルの書き換え頻度とかによるかも）
-
Styled Components
- これも情報は多いので比較的安心
- 書き方的にEmotionの方が自由度が高そうだったので今回はパス
- いちいちコンポーネントの名前考えるのが辛そう...って思ったけど、Emotionも完全に命名からは解放されないのでこの点は大差なかったかも
-
Linaria
- ランタイムのオーバーヘッドがゼロ、らしい
- ビルド時に全て生のCSSに変換されるので、当然だけどスタイル中にJS側のロジックや変数を持ち込む動的なスタイリングはできない
- 今回は性能を詰めるよりは機能や開発の生産性を取りたかったのでパス
-
Tailwind CSS
- 個人的にはデザイナーも一緒に動ける開発じゃないと辛そう...ということでパス
- ただ、結果的に「マージンつけるためのコンポーネント」みたいなCSSユーティリティ的なコンポーネントがいくつかできてしまったので、Tailwind自体はいいな、の気持ちになりつつある
ほかにもいくつか試して検討した気がするけど、長くなるのでここらへんで。
感想としては、Emotion超良かった。特に私はコンポーネントを小さく小さく作りたい主義なのでやりたいことにピッタリはまった感じ。CSS Modulesだと基本1つのコンポーネントを作るのにロジックのtsxとスタイルのcssが必要になるのだけど、これのせいで一度作ったコンポーネントを分割するのがどんどん面倒くなるのです。あと、なまじ普通のCSSなのでCSS設計的なノウハウを持ち込みがちだけど、これも後からリファクタリングするときの障壁になりやすいから🙅♀️NO（あくまでコンポーネント分割を重視する場合ね）
実践投入はちょい時期尚早感あるけど、Linariaみたいなゼロランタイム・ほぼゼロランタイムのライブラリもこなれていったら使ってみたいですね。
UIライブラリ：Radix UI
個人的にはUIライブラリにはあんまりいい体験がないのでフルスクラッチでいいじゃん派なのですが、最近はヘッドレスUIのライブラリが色々出てきているのでRadix UIを使ってみました。
使ったのはDialog・Accordion・Popoverなどなど。モーダルのアクセシビリティ周りを一通りやってくれたり、アコーディオンのコンテンツの高さに応じたアニメーションをさらっと追加できたり、ポップオーバーは吹き出しのツノ（▼部分）の位置を自動で調整してくれたり、ざっくりいうと最高。ヘッドレスなので、スタイリング自体はTailwindでもEmotionでも自由にできるのがまた最高ですね🤗
状態管理 : Jotai
ReduxとかVuexみたいな中央集権型のストア管理には辛い思い出がいっぱいあるので、今回は最初からRecoilを使うつもりで触っていたのですが、ちょっと思うところがあってTwitterで教えてもらったJotaiに切り替えました。
どっちも大体できること自体は一緒だと思うのですが、全体的にJotaiの方がシンプルな印象です。Recoilは再計算を回避するためにデフォルトで全ての状態履歴を保持していたり、メモリ周りの挙動で直感に反する部分が結構あったのだけど、Jotaiは最後までハマりどころがほとんどなかった。ほんとに。
あと、Recoilと違ってグローバルな名前をつける必要がないのも地味に好き。個人的にはJotaiは状態管理ライブラリというより、VueのComputedのような依存管理とキャッシュを持ったロジックを書くためのライブラリだと思ってます。
※ Jotaiまわりで困った時はJotai FriendsとTeruhisaさんに色々教えていただきました🙇一生足向けて寝られないくらい感謝です
ルーティング：React Location
せっかくだからルーティング周りもReact Location試してみました。
ページのリソースを読み込むためのRoute Loadersとか絶対便利じゃん！って思って採用したのだけど、結果的にはほとんど活用しなかった気がする。結局そういうのは全部Jotaiで事足りてしまった感じ。ページとリソースが密に連動しているページベースのアプリならいいと思う。
とはいえ、特にトラブルもなかったし悪い選択肢ではない、と思う。
Vue関連
Vueは年初に2022年の最新標準！Vue 3の新しい開発体験に触れようって記事を書いて、一通りVue 3の新しい環境に移っていたのでそんなに新しい物はなかった気がする。目立った話題はないけど、Vite + Vue3(<script setup>) + Piniaの構成はこなれてきて悪くないと思うので、もしまだVue 2系の方がいたら是非チェックして見てください。
Nuxt 3
Nuxtは2時代にもちょろっと触ってはいたのだけど、これも基本的にひとの作った環境上で普通のVueとして使うだけだったので、やっぱりほとんど分かってなかった。
今年はNuxt 3もようやくリリースされて、お仕事でもいくつか触っているのだけど...うーん、なんだろう。個人的にはちょっと苦手だな...感想。
Vue自体が結構魔法（良くも悪くも仕組みが隠蔽されてる）なので、そこに便利機能をてんこ盛りにしたNuxtは乗りこなすのがほんとに難しいです。。ありがたいことに同僚にNuxt結構詳しい民(@crayfisher_zari)がいるのでなんとかなってる感あるけど、一人で全部責任持てって場面で採用するのは怖いなーって気持ちです。
APIまわり
ここらへんはReact・Vueどっちもアリだったので別枠で
yupとzod
APIの入力チェックとかフォームのバリデーションとかで両方使った。
最初React Hook Formのドキュメントで先に書いてある、程度の理由でyupを使っていたのだけど、
わりとちょいちょいこんなレスをもらっていたので、年末のお仕事ではzodを採用してみました。結論としては、はい、zodですね😇すみませんでした。
yupがダメってことはないけど、圧倒的にzodが楽です。
openapi-typescript
API周りで辛い思いをしたくなくてZennの海を彷徨った結果【OpenAPI】APIスキーマから勝手に型がつくaxiosを作って幸せになる【openapi-typescript】を見つけて幸せになりました。サーバーサイドのチームが管理しているAPI定義（Open APIのドキュメント）が更新されたら自動でTSの型定義も更新されて不一致が型エラーになります。おかけで毎日エラーだらけだったけど😇
（それだけエラーになるってことは、真面目な話これがなかったらマジで詰んでたってことです。@sum0さまありがとうございます😭）
2022年に作ったものまとめ
今年はあんまり作ってないな...
4KBのアクションゲーム
毎年恒例？の猫の日ゲームです。
4KB（4096バイト）でゲームのロジックからサウンド・グラフィックまで詰め込んでます。
4KBって、「そこそこ自由に作りたい物を作れるけど凝りすぎて永遠に完成しないほどには絶対に作り込めない」って点ですごくバランスの良い題材だと思う。来年は4KB縛りで何か作るシリーズ、とかやってみても楽しいかも。
ChatGPTと一緒につくるクソアプリ
クソアプリも毎年恒例ですね。
個人的にAI関連はあんまり食指が伸びずに触ってなかったのだけど、うまく使えばコード書く部分以外でも超便利なのは分かったので、毛嫌いしないで使っていこうと思います。
書いた記事とか登壇とかまとめ
Web Animations APIのcompositeが凄過ぎてすごいからみんな見てくれ
Web Animations APIのcompositeがSafariでもサポートされた記念の記事。これはQiitaのイベントでもしゃべった。
- 発表資料： https://twitter.com/yuneco/status/1583421193377325056
- サンプル：https://twitter.com/yuneco/status/1583421400458530817
😡VueのTransition使えば簡単にトランジションできるって言ったじゃないですか！〜あるある沼と解決策〜
たまにはネタじゃない記事も書こうと思って書いた。仕事で使っててこんなの分かってないのは自分くらいなのかと思ってたけど、意外にも共感が得られてうれしかったです😀
ほんと何年やってても「チョットデキル」にはほど遠いね😇
2022年の最新標準！Vue 3の新しい開発体験に触れよう
上の方でもちょろっと言及したVue 3の構成周りの記事。1年前だけどまだそのまま使える内容だと思う。個人的にはVueは迂闊にNuxtとかVuetifyとか盛らずに、できる限り素で使うのが一番ストレスないと思ってるので、まずはこの構成を試してみて、やりたいことに足りなければ次のステップを考えるのが良いんじゃないかと思ってます。もちろん作りたい物次第だけど。
センスだけに頼らない！CSSとJSで作るパーティクル表現のテクニック
かわいいパーティクルの作り方講座の記事です。完全に個人の趣味でやってるだろ、って言われそうだけど、弊社サイトの技術記事が最近新技術とかライブラリとかの紹介によりがちだったので、「弊社可愛い物作れますぜ」的な宣伝兼ねて表現寄りの情報発信をしたいなー...って思って書いた物でした。まあ例によってこういうのはキライな人も結構いる（参考情報）のではてぶのコメントとか見てると難しいなー、って思います。
覚えれば一生もの！ウェブエンジニアのための正規表現活用入門
正規表現の基礎...ではなくて「正規表現ってこんなに便利だよ！使って！！」を紹介する記事。地味かなーって思ったら意外にも伸びた。
私自身はSI屋さんのシステム運用出身で、一般職入社のお姉さん（私が入社したときには実質廃止されてたけど昔はそういう区分があった）でも正規表現と簡単なLinuxコマンドは当たり前に使う環境だったので認識なかったんだけど、web界隈は正規表現使わないって人も結構多いっぽいんですね。もったいないなー、の気持ちで書いた記事でした。
来年もよろしくお願いします🐱
そんなわけで2022年のお仕事＆個人開発のざっくりまとめでした。当面フルタイムの転職予定はないけど、ちょっとした開発や執筆などなどなど、お仕事のお誘いがありましたらお声がけいただけると嬉しいです。
🐯2023年も楽しく開発できますように🐰
Discussion