1分で完成するNode.jsを使ったWebページの雛形

4653 ワード
Express Bootstrap Node.js webpack ava Node.js テキストリンク

概要

簡単なサイトを作ったりWebツールを作ったりするときに諸々の設定をするのに以外と時間がかかったりするので、簡単な雛形を作って使い回しできるようにしました。

完成イメージ

こんな感じのWebページが一瞬でできるようなイメージです。

使い方

※Node.jsとnpmが動く環境が前提です。

1.gitのリポジトリをクローンします。

$ git clone https://github.com/hikarut/NodeWebSkeleton.git

2.パッケージをインストールします。

$ npm install

3.ビルドします。

$ npm run build

4.スタートします。

$ npm run start

5.ページを開きます。

以上です。

ざっくり解説

全体のディレクトリ構成はこんな感じです。
https://github.com/hikarut/NodeWebSkeleton

|--src
| |--lib
| | |--lib.js
| |--model
| | |--model.js
| |--routes
| | |--index.js
| |--server.js
|--template
| |--bundle.js
| |--client.js
| |--css
| | |--custom.css
| |--views
| | |--index.ejs
|--test
| |--example.js

src以下にサーバ側の処理を書き、template以下にhtml,css,jsなどのクライアント側のファイルを起きます。test以下はテストコードを置きます。

サーバ側はserver.jsをエントリポイントにしてExpressを使ってルーティングします。
ディレクトリ構成はどうゆうのが良いのか悩みますが、、libとmodelを置くシンプルな形にしてあります。

クライアント側はclient.jsをエントリポイントにしてWebpackでビルドしてbundle.jsの1ファイルにまとめます。

使っているもの

Node.js

サーバサイドはNode.jsを使います。簡単なページを作るくらいならサクッとできるのでおすすめです。

Express

Node.jsのサーバサイドフレームワークにExpressを使います。もちろん何を使っても良いのですが、Nodeのフレームワークはいっぱいある中でExpressが一番有名なフレームワークだと思うので今回はこちらを使っています。

EJS

Expressとよく一緒に使われるテンプレートエンジンです。テンプレートエンジンもいっぱいあってどれを使っても良いですが、個人的にはhtmlと同じような書き方ができるEJSを使っています。

Bootstrap

テンプレートといえばやっぱりBootstrapが便利かなと思います。自分みたいにhtmlとかcssとかがっつり書けない人にとっては特に便利です。Webツールを作るならグラフとかラベルとかもいっぱいあるのでかなりそれっぽいのが作れると思います。カスタマイズもできるのでプラスでアレンジすることもできます。

参考

AVA

テストコードを書くようにテストフレームワークも入れてあります。こちらもいっぱいあってなんでも良いですが、何となくAVAがシンプルで書きやすそうなきがするので今回はAVAを使っています。

参考

Webpack2

クライアント側で使うcssやjsを1つのファイルにまとめるようにWebpackを使ってビルドしています。client.jsをエントリポイントにしてbundle.jsを出力させ、クライアント側ではこのbundle.jsを1つ読み込むだけで完結するようにしてあります。その方がテンプレート側もシンプルになっていいかなーと思っています。またそのためにstyle-loaderやcss-loaderを使ってjs内でcssを読み込めるようにしたり、ビルド時にESLintをかけたりしています。Webpackは1系と2系で多少書き方が変わっていますが、今回は2系を使っています。

ESLint

jsファイルのチェックに使っています。ルールのカスタマイズもできるのでその場合は.eslintrcを修正してカスタマイズします。今回はWebpackのビルド時にESLintをかけていますが、現状だとクライアント側のclient.jsしかチェックできない状態です。。本当はサーバサイドで使うjsファイルもチェックしたいのですがうまいやり方がわからなかったので、一旦はクライアント側のjsのみのチェックにしてあります。。

終わりに

こんな感じに雛形があるとさくっとWebページのプロトタイプを作ったり、ツールを作ったりが簡単にできるかなと思います。また今回はEJSとかBootstrapとか入れてますがテンプレート系のパッケージを外せばAPIの雛形としても使えると思います。(その場合Expressとちょっとしたルーティングだけなので雛形という程でもないですが。。。)
またハッカソンなど限られた時間で何か作る場合とかにも割とこの辺のセットアップ系に時間を取られたりすることがあるので、ある程度雛形があると便利かなぁと思います。