Linuxコマンドを用いてAtomic Designのディレクトリ構造を一発で作る
hisacomです。
AtomicDesignの単一ファイルコンポーネント方式で新しいプロジェクトを開始する際に、毎回「あれモルキュラスってスペルなんだっけ…」と分からなくなり「全部で分類何個だっけ…」となり『AtomicDesign Atoms』あたりのワードで検索したサイトからコピーして、ひとつひとつ必要なディレクトリを手作業で用意していました。
これは自体は簡単な操作ですが、いざやると意外に面倒だし何よりスマートではないと思います。
書籍「Vue.js入門 基礎から実践アプリケーション開発まで」のなかで「お、これ使える」と思ったLinuxコマンドで一気にディレクトリ構成を作成する方法を見つけたので
[TIPS]として、内容解説とともにメモしておきます。
Vue.js入門 基礎から実践アプリケーション開発まで | 川口 和也, 喜多 啓介, 野田 陽平, 手島 拓也, 片山 真也 | コンピュータ・IT | Kindleストア | Amazon
atoms,molecules,organisms,templatesのディレクトリを作成する
プロジェクトディレクトリで、以下のコマンドを実行します。
するとsrc/components/配下に目的のディレクトリが一気に作成されます。
$ mkdir -p src/components/{atoms,molecules,organisms,templates}
▼コマンドの各内容は以下の通り。ブレース展開の使い方がミソです。
mkdir: ディレクトリ作成のコマンド
-pオプション: mkdirのオプション、引数のディレクトリがなければディレクトリを作成する（すでにあった場合もエラーを発生させない）。
ブレース展開:「,」カンマで区切った複数の文字列を「{}」ブレース（中括弧）で囲むと囲んだ文字列を展開できます。上記の場合は、src/components/ディレクトリ内に4つのディレクトリを作成することになります。
それぞれのディレクトリ配下に単一ファイルコンポーネント（Vueファイル）を配置する
開発初期であれば、Atomic Designそれぞれのディレクトリに必要なVueファイルを一気に作りたくなります。その場合もコマンドで一気に作ると楽ですし、命名規則に統一性をもたせる事の間違いが少なくなると感じました。
方法としては、ディレクトリ作成の時と同じくブレース展開を利用して、atomsの配下にPrjButton.vueとPrjIcon.vueを作成します。以降molecules,organisms,templatesのディレクトリに対してもコマンドで複数同時に作成します。
$ touch src/components/molecules/Prj{hoge,fuga}.vue
$ touch src/components/organisms/Prj{Piyo,Nishi}.vue
$ touch src/components/templates/Prj{Xxx,Yyy}.vue
▼コマンドの各内容は以下の通り。こちらも接頭辞とブレース展開をうまく利用します
touch: 第一引数のファイルを作成する。
まとめ
Linuxコマンドを用いる事でAtomic Designのディレクトリ構造を一発で作ることができます。下記のLinuxコマンドは作成時の雛形として持っていると便利かなと思いました。ここにメモしておきます。
$ mkdir -p src/components/{atoms,molecules,organisms,templates}
$ touch src/components/atoms/Prj{Button,Icon}.vue
$ touch src/components/molecules/Prj{hoge,fuga}.vue
$ touch src/components/organisms/Prj{Piyo,Nishi}.vue
$ touch src/components/templates/Prj{Xxx,Yyy}.vue
Linuxコマンドについてはついつい苦手意識を持ってあまり活用できない場面が多いですが、できるだけ自分で使えるコマンドを増やし、作業時間の短縮に努めたいものです。
