suzukalight が 2020 年に使った技術スタックをまとめました。分類はこちらのサイトを基準にしています。
スケルトン生成
create-next-app を Next.js でのスケルトン生成に使用し、 create-react-app を通常の React アプリで使用しています。ブログサイトには Gatsby.js を使っていました（いまは Next.js に置き換え）
昔は webpack 職人として社内で名を馳せておりましたが、今はビルドプロセスは可能な限り自分で触らないようにしています。本質的な価値を提供する作業ではないし、本職の人が作ったチューニングに自分たちが合わせていくほうがより良い UX も提供できると考えています。
状態管理
API キャッシュ、アプリ状態管理、コンポーネント状態管理、の 3 つを考えれば良いと判断しています。Appllo InMemoryCache を API キャッシュとして、useContext をアプリ状態管理として、useState をコンポーネント状態管理として、それぞれ利用しています。ある程度大きな規模になっても Hooks で運用上の問題は発生しませんでした。
以前は API キャッシュとして normalizr/reselect を、状態管理には Redux / Redux Saga を使っていました。Redux の Single Source of Truth な感じも好きでしたしエコシステムも発達していましたので、こちらもまだまだ現役かと思います。
ルーティング
Next.js が使えるならそれを、SPA であれば React Router を使っています。
スタイリング
styled-components か CSS Modules かを選んでいます。CSS-in-JS(styled-components) はどちらかというとインタラクティブなデザインを多く使う場合、CSS Modules はスタティックなデザインを多く使う場合に使用しています。とはいえ、あまり明確な差は設けていません。
Tailwind CSS は、ざっとプロトタイプを作るときにとても便利でした。有志が公開している Tailwind CSS ベースの HTML と className をコピペして基本デザインを作り、そこから JSX を起こすような感じで使っています。ありがたや。
UI ライブラリ
Chakra UI を知ってしまったので、今はどっぷり浸かっています。Tailwind CSS に型をつけて JSX で提供したようなコンポーネントライブラリです。
テーマ変数もあり、トランジションも組め、アコーディオンやツールチップ、モーダルやドロワー、アバターやアイコンまで、アプリやサイト開発で使用するコンポーネントも一通り揃えています。
好きな考え方である「規約とハッチ」が揃っていて、基本は規約ベース（4px とかテーマ変数とか）で組み、必要であればハッチを開けて（スタイルを型付きで）追加記述できる。これらが両方あるので、私は 「CSS は何使う？」問題から解放されています。
アニメーション
react-spring を使っています。とはいえあまり詳しくない分野なので 2021 年勉強していきたい。
フォーム管理
Formik と yup でフォーム管理とバリデーションを組んでいます。ただウィザードのような規模の大きなフォームになっていくとパフォーマンスに問題が出てきたので、React Hook Form のようなライブラリも調査中です。
データフェッチ
Apollo Client には大変お世話になっています。これに GraphQL Code Generator を組み合わせて GraphQL に TypeScript の型をつけるのが最高の DX を与えてくれています。これらなしではアプリ作りたくないくらい。解説記事もかきました。
軽いデータフェッチであれば、fetch/axios などを使っています。
型チェック
TypeScript ありがとう。型のない開発はもうできないと思います。サジェストと typo 指摘ですごい助かっています。自分はもともとは型のある世界（C++）から来たので、より強く感じるのかも。
コードスタイル
自分はかなり重視している分野で、ESLint と Prettier の設定は必ず最初にやっています。これに Husky と Lint-staged をつけて、CI でも動かすようにしています。
つまらないタイポやミスで 3 時間とか使いたくないし、コードレビューのたびにフォーマットずれてて Diff 出まくったりとかしたくないし、そういうことを人間に指摘されるのもお互い精神的に嬉しくないので、真っ先にやっています。
認証
Auth0 を業務で使いました。基本的な認証から、SAML-SSO 認証、エンドポイント保護(jwks-rsa)、Rules による様々な認証カスタマイズなど、隅々まで行き届いた機能がありました。その信頼感をさらに増やしてくれるのが、豊富な公式ドキュメント。やはり公式がドキュメンテーションを厚くしてくれる OSS や SaaS は信用できる、と感じますね。
Firebase Authentication も手軽であり、OAuth で SNS 連携などもできるので、要件が厳しくないものであればこちらも便利ですね。
ホスティング
AWS を業務で使っています。EB→OpsWorks と経て、最近は ECS も学習しています。Terraform でインフラ書いて、CI/CD で自動デプロイする環境を早く作り上げたい。
テスト
Jest を基本として、ロジックには Jest で、コンポーネントには React Testing Library と StoryShots を、 E2E では Cypress を試しています。最近「test.each によるパラメータ化テスト」や「sqlite を使った統合テストのモック」なんかもブログでまとめました。
ユーティリティ
lodash を使わない開発を目標に、ES6 の機能で可能な限り実装しています。フロントエンドですからできる限りバンドルサイズ増やしたくないので。どうしても難しいところなどは lodash を個別 import して使っています。
イミュータブル
使わないです。すべての操作は immutable にすることを前提にしていて「引数はいじらない」「戻り値はコピーを返す」などをルールとしています。
WYSIWYG エディタ
Draft.js が業務で使用されました。WYSIWYG エディタは昔自分でも作りましたが、ブラウザの仕様に頼るところもあって闇が深く、あまり自作もしたくないし、使いたくもないなぁ、という直感があります。
決済
Stripe を業務で使っています。マケプレとか C2C とかのサービスを作るときに Stripe Connect を使ってみたい。
日付管理
date-fns が関数型なので好みです。昔は moment を使っていましたが、開発終了なので全部置き換えました。Day.js が moment の後継候補だと思うので、触っておきたいなとは思います。
アプリ化
Electron と Expo を使っています。またアプリ作る機会あるかな。
VR/AR
やったことないので試してみたい。
デザインプロトタイプ
Figma がとにかく便利なので頼りにしています。Excalidraw もやってみたい。
ドキュメンテーション
docz を一時期触っていました。いまは Next.js + mdx(next-mdx-remote) でサイト作っているので、それでも事足りるかなという気もしています。ドキュメントはとにかく markdown で書きたいですね。