この記事はVue.js #1 Advent Calendar 2017の5日目の記事です。 昨日はakifoさんのエラーをユーザーへ伝えるVue.jsコンポーネント作りましたの記事でした。 本日は私がAtomic Designの概念を用いてVue.jsのコンポーネントを組み立てるというお話をさせていただきたいと思います。 コンポーネントって何?どう使うの? 公式ドキュメントにも記されている通り、コンポーネントはVue.jsの最も強力な機能の1つです。 UI上の各要素をパーツ化し、それぞれのパーツの中にHTML(意味)・JavaScript(機能)・CSS(見た目)を含めることが可能です。 これにより再利用性も高まりますし、プロジェクトのリソースを整然と管理することが可能となります。 例えば、ヘッダーをコンポーネントとして使いたい場合。 次のようにMyHeader.vueを作成し、それを他の