パンジェンシーの「汗だく開発日誌」

システム開発の備忘録です。

【Node.js】express-generatorを使ったウェブアプリのひな形

どうも!パンジェンシーです。

 

f:id:x-fieldatts:20150502134035p:plain

 

前回は、Node.jsのインストールと、サンプルアプリとして簡単なウェブサーバーを動かしてみました。

 

pangency.hatenablog.com

 

今回は、応用として、"express-generator"というモジュールを使って、ウェブアプリを作成してみましょう!

 

expressとは?


expressというのは、ウェブアプリを簡単に作成するためのフレームワークです。Node.jsのモジュールとして提供されています。expressを使えば、ウェブサーバーに必要な色々な処理を、簡単に実装することができるのです!いいでしょ?

 

express-generatorとは?


expressを使ったウェブアプリのひな形を作成してくれるモジュールです。これもNode.jsのモジュールとして提供されています。


express-generatorを使えば、ウェブアプリ実装の最初に毎回行う、「空のHTML作成」などの作業が自動でできちゃいます!他にも、ディレクトリ構成なども最初からいい感じにやってくれるので、私のように「いきあたりばったりでディレクトリ掘っていったら、迷宮のようになってしまって管理できなくなった…」なんてことにならずに済むというわけです。楽したいなら迷わずgenerator様に頼りましょう!

 

express-generatorのインストール


まず、express-generatorをインストールします。


npmでモジュールをインストールする場合、プロジェクト毎に使うものと、どのプロジェクトでも使うもの(グローバルインストール)で、若干インストールする方法が違います。express-generatorは、グローバルインストールするので、-gオブションをつけましょう。

$ sudo npm -g install express-generator

サンプルアプリの作成


次に、サンプルアプリを作ってみましょう。


ディレクトリを作って、expressを実行します。

$ mkdir express-sample && cd $_ 
$ express


次に、必要なモジュールをプロジェクトにインストールします。

$ sudo npm install


アプリを実行します。

$ npm start


ブラウザから、http://127.0.0.1:3000にアクセスしてみましょう!


Express
Welcome to Express


というページが表示されればokです!

まとめ


今回は、express-generatorを使ったひな形作成をしてみました。独自アプリを実装する時は、ここで作ったひな形を土台にすると捗ると思います。

 

次回は、このひな形を改造して、ウェブアプリに必須の「ログイン機能」を実装してみたいと思います!


ではまた。

 

pangency.hatenablog.com