共通言語としてのNext.jsテンプレート
フロントエンド開発が好きです(突然の告白)
関わる人たちが前向きで、より良いwebを作ろうとしている姿勢に自分も貢献したいと元気付けられます。
一方で、その勢いからフロントエンド開発に必要な知識が日に日に増えてることも事実です。
などなど…
コンポーネント設計を正しく行わないと再利用性が消え、同じようなコードを何度も書くことになったり。カタログ化が行われていないと「このコンポーネントありますか？」とSlackの通知が止まりません。
このような状況を避けるべく、開発の効率化やコストを削減するために私たちはできる限りルールを決めてプロジェクトが破綻しないよう努力します。
しかし効率化や開発コスト低下のために敷くルールは、かえってそのプロジェクトへの参加コストを高めます。これはフロントエンド開発で特に顕著で、知識の移り変わりの早さと相まってキャッチアップが難しい状況が生まれている、とわたしは考えています。
したがって、重要なことは「チームでの最高率を目指すために開発に関わる全体のコストを最小化すること」です。
開発効率そのものだけではなく
- 導入コスト
- コミュニケーションコスト
- メンテナンスコスト
など、チーム的な広い視野で最適化する必要があるのではないでしょうか。
Next.js Simple Template
この効率化の反動で増加した導入コスト削減を目指し、チーム全体を一気にボトムアップすることを目的としてNext.jsのテンプレートリポジトリを作成しました。
20000文字を超える図とドキュメントを添付し追いつきやすく、ライブラリの導入やコンフィグの設定を抑え運用しやすくすることを狙っています。
これから本格的にWebアプリ開発をされるチーム、アプリ開発を終えて次の環境構築を考えていらっしゃる方などに特に役立つはずです。
今回このテンプレート作成を通じ、全体としてフロントエンド開発の思想とツールが揃った感覚を持ちました。
- コンポーネントの機能単位設計
- Storybookへの登録
- CSF3.0を利用したPlay functionとJestでのテスト
- それらのscaffolding
と、うまく組み合わせるとこれまでになく効率的に開発が進められます。難解なパズルのようで苦戦したのですが、仕組みが出来上がると謎の気持ちよさがありました。
最後に、本テンプレートを作成するのにたくさんのzenn, 技術記事に助けられました。
この場を借りて心より御礼申し上げます。
2022/10/27 追記
全体的にブラッシュアップしました。ちょっと使いやすくなってると思います。
大きな変更点としてテスト自動化に関するライブラリ・ドキュメント・サンプルの追加、およびStorybookの責務変更を行いました。
Play functionはとても素敵な機能ですが、まだまだドキュメントも少なくキャッチアップが簡単ではありません。
本ドキュメントの目的が
- プロダクション運用が可能な最低構成を作ること
- 共通言語の構築であること
であり、またsimpleとなづけていることから現在デファクトになっている技術を積極的に採用する形に変更しました。
Next.js 13の対応は悩み中です。
Tanstack QueryのSuspenseからbetaが外れた辺りが本格的な検討タイミングでしょうか…
Discussion