コネクティ流スタイルガイドのススメ grunt-frontnoteでスタイルガイドを作成

こんにちは。Web制作チームの平田です。
いきなり寒くなりましたね。外に出て涼しいとテンションがあがります！

今回もフロントで制作する上で役立つGruntプラグインのご紹介です。
前回の記事はこちら。

Frontnote(grunt-frontnote)

弊社はCMS on DemandというCMSアプリケーションを提供していますが、最初のサイト構築は弊社で請け負っています。
その後、お客様に運用をお任せするにあたってスタイルガイドを用意しなくてはならないケースが多いのですが…
さすがに手動で一から作成するのは何かと手間がかかりますので、機械的に作成していきます。
今回利用するのはgrunt-frontnoteです。gulpも用意されているのでお好きなほうをお選び下さい。

npm install grunt-frontnote --save-dev
でプロジェクト単位にインストールしておきます。

grunt.initConfig({
	frontNote: {
		options: {
			title: 'Style Guide',
			overview: './doc/index.md',
			out: './doc',
			css: '/common/css/style.css'
		},
		all: ['./sass/**/*.scss']
	}
});

FrontenoteのGitHubをみれば基本的なオプションは全て日本語で掲載されているので細かな説明は省きますが、
grunt-frontnoteにある例を参考にするとcompileされなかったのでGruntfile.jsの設定は掲載しておきます。

あとは各cssやsassソースに

/*
#styleguide
title

comment
```
code
```
*/

といった形でコメントを入れていくだけなのですが、生のcssは特にそうですがsassなど、
直で編集するsassに書いていくと、コメントアウトだらけになり視認性が損なわれる懸念があるので別のディレクトリを切るなどして分けて管理する事をオススメします。

root/
└ sass/
　　├ style.scss (codeのみ)
　　└ styleguide/
　　　　└ style.scss (スタイルガイド用のコメントを挿入する)

当然、codeのみを書いていくほうでスタイルガイドを作成するべきcodeを書いた場合は、もう一方にちゃんとガイドを記述しなければなりません。
分けて管理するのは煩雑さが増すものなので、そこまでガイドラインが多くならないのであれば同一ファイルでも良いかもしれません。

何もスタイルガイドはお客様のためだけのものではなく、社内運用時にもとても有用なものです。
既に存在するスタイルを次から次へとcssへ追記されてしまっては誇大化は防げません。
運用するチーム全員がガイドラインに目を通し、効率良く作業を進めたいものです。

コネクティではそんなスタイルにも理解があり素敵なWebデザインを作成出来るデザイナーを募集しています！興味がある方は是非こちらからご応募下さい！

◆転職サイトGreenでも求人情報を掲載しております◆