Nuxt + Docker + CIrcleCI + Storybookという構成でAtomic Designにて開発していく

初めまして。
WELLNESONE JAPAN株式会社（株式準備中）代表取締役CTOの@yusuke_1011です。
自社で一からサービス開発を行う際に実践した構成をここに記しておきます。

対象

• Nuxt.jsの学習はしているが開発経験はまだないエンジニア
• Nuxt.jsでAtomic Designを実践したいエンジニア
• DockerやCircleCIを取り入れた実践的なポートフォリオを作成したいエンジニア志望

の方々が読めるようなレベル感で説明できればと思います。

構成

1. Nuxtの開発環境をDockerで構築
2. NuxtでAtomic Designを実践
3. Nuxt + Storybookでコンポーネントを管理
4. Storybookを用いたテスト（ストラクチャルリグレッションテスト編）
5. Storybookを用いたテスト（ビジュアルリグレッションテスト編）

ここでは簡単な用語の説明などを行います。
（Nuxt、Docker、CircleCIは省略します）

Atomic Design

コンポーネントを細かく分割して定義していくコンポーネントベースのデザイン手法です。
「Atomic」という言葉の通り、最小単位（Atom）から作成し、それを組み合わせるような形でデザインしていきます。

利点

• コンポーネントを使いまわしやすい
• 並行開発しやすい
• テストがしやすい
• メンテナンスしやすい

Storybook

コンポーネントのカタログを作成し、管理できるツールです。
コンポーネントのテストもStorybook上で実施できます。

Atomic Designで開発を進める以上は、Storybookのようなツールは必要不可欠かなと思います。
主な用途としては、

• デザインスタイルガイドとしてデザイナーとのコミュニケーションに使用
• コンポーネントの挙動や表示を確認するテストに使用

です。
元々はスリランカのスタートアップがReact用に開発したらしいですが、現在は

• React
• Vue
• Anguler

で幅広く使用できます。