NCCのWebサイトを作った
お久しぶりです。id:mactkg です。2015年の6月末に誕生してから、人づてで部員が順調に増えてきたのですが、ついに新歓時期となってしまいました。出遅れた我々は新歓申請に失敗してしまったので、インターネット上で告知活動を行うしかありません。しかしなんと我々はWebサイトを持っていなかったのです... という訳でNCCのWebサイト作成を行うことにしました。
割とナウい感じのツール構成になったと思うのでご紹介したいと思います。
技術構成
今回使用した主なツールの構成はこんな感じです。
- ビルドツール: webpack
- JSトランスパイラ: babel
- テンプレートエンジン: jade
- CSSトランスパイラ: postcss
- autoprefixer
- precss
- postcss-import
- CSSフレームワーク: basscss
- 開発サーバ: browser-sync
Webpack
Webpackはbrowserifyやgulpなどとよく似たツールだと思いますが、ユニークな点は なんでもJSでimport出来るようにしちゃおう! という思想 でしょうか。適切な設定をした上で、JS内で import './style.css' と記述するとスタイルシートを読み込んでHTMLに反映させてくれます。その他にも、jsonやhtml、jadeやhamlで記述したテンプレートなど、設定はなんでも読み込めます。
それぞれのファイルをどのように読み込むか? はwebpackのconfigファイルで指定することができます(下部で示したソースコードの2行目、test です)。拡張子に対する正規表現を記述して、それにマッチすると loader が読み込み処理を行います。
{
test: /\.pcss$/,
loader: 'style!css!postcss'
},
post-internet.github.io/webpack.config.js at master · post-internet/post-internet.github.io · GitHub
loaderは ! マークで接続されていますが、これはUNIXのパイプをイメージすると分かりやすいです。UNIXと違うのは、右から左へと解決されます。つまりこの場合は、postcss-loader => css-loader => style-loader の順に解決されます。ですので、Web回りで流行っているトランスパイラの文化にも適用しています。
それにしてもWebpackのWebサイトは見にくいと思います。
Babel
BabelはJSのコンパイラです。ES6の記法を用いるために使用しています。ちなみにbabelの設定ファイルは .babelrc に置いておくのが個人的にはおすすめです。
Jade
JadeはHTMLをシンプルな文法で記述することの出来る言語で、HTMLに変換して利用します。ヘッダー部分やフッター部分といった再利用したい部分をテンプレートとして別で用意しておくなどの機能を持ち、単純にHTMLを記述するよりも便利に書けます。
PostCSS
PostCSSはBabelのCSS版と考えてもらえると分かりやすいかと思います。例えば、未だにprefixを付けないと利用できないような機能(--webkit-...や--moz-...)があると思いますが、こうしたものに対して自動でprefixを付けてくれるautoprefixerや、未だ全てのブラウザで使用できないCSSの記法を先取りして使えるようにするいくつかのpolyfillモジュールなど、様々なモジュールを組み合わせることで、気持ちの良いCSS記法でCSSを書けるというものです。
中でもpostcss-importはお気に入りです。CSSを @import で読み込めるというものなのですが、node_module内のCSSも自動で読み込んでくれるので、npmで管理されているCSSモジュールを簡単にimportできます。
また、precssもぜひ試していただきたい一品です。Sassのような記法を提供します。変数を使ったり、extend機能を使ったり、mixinsできたり...。色々便利です。import機能がこちらにもあるので、postcssでモジュールを指定する際、postcss-importが先に来るよう気をつけてあげてください。
id:EBAGmasa 的にオススメモジュールはpostcss-cssnextだそうです。
3846masa: どうでもいい話ではあるが、postcss-cssnext には postcss-import, postcss-url, cssnano が含まれているので便利（Examplesが古いままだけど.....）
Basscss
Basscssは小さなCSSのツールキットです。シンプルで無駄の無い枠組みのみを提供しています。ボタン機能などはBasscssのaddonとして別リポジトリで管理されているので、必要な物だけpostcss-importの機能を使ってimportすればCSSのサイズを小さく保てます。
テーマも幾つか用意されていて、かなり僕の好みと合ったものとなっていてお気に入りです。ReactのコンポーネントとしてBasscssをまとめたRebassも注目です。
Browsersync
Browsersyncは開発用のWebサーバーなのですが、配信時に特殊なスクリプトを組み込むので、幾つかおもしろい働きをします。特徴的な働きは2つです。
- ファイルの監視・オートリロード
- ブラウザ間同期
「ファイルの監視・オートリロード」は言わずもがな、特定のファイルやディレクトリを監視して、自動でブラウザを更新します。ファイルに変更をかける度にリロードする手間が省けて便利です。
「ブラウザ間同期」はユニークな機能です。Browsersyncと接続しているブラウザ同士のスクロール位置を同期するだけではなく、キリックやリロード、フォームの送信等も同期してくれるので、複数の端末・ブラウザの検証を容易にしてくれます。サークルのサイトレベルではそんなに使うことはないとは思いますが、まあ便利です。
というわけで
長々と書いてしまいましたが、NCC公式Webサイトの基盤まわりに関してブログ記事を書いてみました。公式サイトの様子は次のリンクから見ていただけます。
