読者です 読者をやめる 読者になる 読者になる

Nakano Computer Club 活動記録

明治大学中野キャンパスで活動するNakano Computer Clubの活動記録

NCCのWebサイトを作った

お久しぶりです。id:mactkg です。2015年の6月末に誕生してから、人づてで部員が順調に増えてきたのですが、ついに新歓時期となってしまいました。出遅れた我々は新歓申請に失敗してしまったので、インターネット上で告知活動を行うしかありません。しかしなんと我々はWebサイトを持っていなかったのです... という訳でNCCのWebサイト作成を行うことにしました。

割とナウい感じのツール構成になったと思うのでご紹介したいと思います。

技術構成

今回使用した主なツールの構成はこんな感じです。

  • ビルドツール: webpack
  • JSトランスパイラ: babel
  • テンプレートエンジン: jade
  • CSSトランスパイラ: postcss
    • autoprefixer
    • precss
    • postcss-import
  • CSSフレームワーク: basscss
  • 開発サーバ: browser-sync

Webpack

f:id:ncc-log:20160403090356p:plain:h200

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

f:id:ncc-log:20160403090429p:plain:h200

BabelはJSのコンパイラです。ES6の記法を用いるために使用しています。ちなみにbabelの設定ファイルは .babelrc に置いておくのが個人的にはおすすめです。

Jade

f:id:ncc-log:20160403090706j:plain:h200

JadeはHTMLをシンプルな文法で記述することの出来る言語で、HTMLに変換して利用します。ヘッダー部分やフッター部分といった再利用したい部分をテンプレートとして別で用意しておくなどの機能を持ち、単純にHTMLを記述するよりも便利に書けます。

PostCSS

f:id:ncc-log:20160403090900j:plain:h200

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

f:id:ncc-log:20160403090905p:plain:h200

Basscssは小さなCSSツールキットです。シンプルで無駄の無い枠組みのみを提供しています。ボタン機能などはBasscssのaddonとして別リポジトリで管理されているので、必要な物だけpostcss-importの機能を使ってimportすればCSSのサイズを小さく保てます。

テーマも幾つか用意されていて、かなり僕の好みと合ったものとなっていてお気に入りです。ReactのコンポーネントとしてBasscssをまとめたRebassも注目です。

Browsersync

f:id:ncc-log:20160403091006p:plain:h200

Browsersyncは開発用のWebサーバーなのですが、配信時に特殊なスクリプトを組み込むので、幾つかおもしろい働きをします。特徴的な働きは2つです。

  1. ファイルの監視・オートリロード
  2. ブラウザ間同期

「ファイルの監視・オートリロード」は言わずもがな、特定のファイルやディレクトリを監視して、自動でブラウザを更新します。ファイルに変更をかける度にリロードする手間が省けて便利です。

「ブラウザ間同期」はユニークな機能です。Browsersyncと接続しているブラウザ同士のスクロール位置を同期するだけではなく、キリックやリロード、フォームの送信等も同期してくれるので、複数の端末・ブラウザの検証を容易にしてくれます。サークルのサイトレベルではそんなに使うことはないとは思いますが、まあ便利です。

というわけで

長々と書いてしまいましたが、NCC公式Webサイトの基盤まわりに関してブログ記事を書いてみました。公式サイトの様子は次のリンクから見ていただけます。

http://meiji-ncc.tech/

NCC広告

NCCでは最新のWeb技術を使って遊ぶサークルメンバーを募集しています。

Twitterで申込む