🤟

共通言語としてのNext.jsテンプレート

2022/07/05に公開約1,400字

フロントエンド開発が好きです(突然の告白)
関わる人たちが前向きで、より良いwebを作ろうとしている姿勢に自分も貢献したいと元気付けられます。

一方で、その勢いからフロントエンド開発に必要な知識が日に日に増えてることも事実です。

などなど…

コンポーネント設計を正しく行わないと再利用性が消え、同じようなコードを何度も書くことになったり。カタログ化が行われていないと「このコンポーネントありますか?」とSlackの通知が止まりません。

このような状況を避けるべく、開発の効率化やコストを削減するために私たちはできる限りルールを決めてプロジェクトが破綻しないよう努力します。

しかし効率化や開発コスト低下のために敷くルールは、かえってそのプロジェクトへの参加コストを高めます。これはフロントエンド開発で特に顕著で、知識の移り変わりの早さと相まってキャッチアップが難しい状況が生まれている、とわたしは考えています。

したがって、重要なことは「チームでの最高率を目指すために開発に関わる全体のコストを最小化すること」です。

開発効率そのものだけではなく

  • 導入コスト
  • コミュニケーションコスト
  • メンテナンスコスト

など、チーム的な広い視野で最適化する必要があるのではないでしょうか。

Next.js Simple Template

この効率化の反動で増加した導入コスト削減を目指し、チーム全体を一気にボトムアップすることを目的としてNext.jsのテンプレートリポジトリを作成しました。

https://github.com/fumi-sagawa/next-simple-template

20000文字を超える図とドキュメントを添付し追いつきやすく、ライブラリの導入やコンフィグの設定を抑え運用しやすくすることを狙っています。

これから本格的にWebアプリ開発をされるチーム、アプリ開発を終えて次の環境構築を考えていらっしゃる方などに特に役立つはずです。


今回このテンプレート作成を通じ、全体としてフロントエンド開発の思想とツールが揃った感覚を持ちました。

  • コンポーネントの機能単位設計
  • Storybookへの登録
  • CSF3.0を利用したPlay functionとJestでのテスト
  • それらのscaffolding

と、うまく組み合わせるとこれまでになく効率的に開発が進められます。難解なパズルのようで苦戦したのですが、仕組みが出来上がると謎の気持ちよさがありました。

最後に、本テンプレートを作成するのにたくさんのzenn, 技術記事に助けられました。
この場を借りて心より御礼申し上げます。

(記事として物足りないなァと思ったのですが、蛇足になりそうなので我慢。さらば)

Discussion

ログインするとコメントできます