Waplusテックチームブログ

よく参照するのをわかりやすくまとめよう！

node.jsのexpress-generatorはとても便利。

by · 2019年4月8日

expressとはnode.jsのアプリケーション生成ツールのようなものです。
とても簡単にひな形を作ってくれます。
もはやコレ無しで開発出来る気がしません。

インストールしてみる

それでは早速expressをインストールしてみましょう。
※前提条件としてnode.jsとnpmがインストールされている状態として話しを進めます。

$ npm install -g express-generator

ターミナル(mac)を開いてnpmインストールするだけです。

オプションに-gが付いているのはグローバルインストールという意味です。
グローバルインストールはnpm自体にパッケージを追加するイメージです。
npmの機能拡張のような感じですね。

-gが付いていない場合はローカルインストールになります。
ターミナルの現在地(パス)にパッケージを追加します。
作成しているアプリケーション個々にパッケージを追加することになります。

インストールされたか確認してみる。

それではexpressがインストールされているか確認してみましょう。

$ express -h

  Usage: express [options] [dir]


  Options:

        --version        output the version number
    -e, --ejs            add ejs engine support
        --pug            add pug engine support
        --hbs            add handlebars engine support
    -H, --hogan          add hogan.js engine support
    -v, --view <engine>  add view <engine> support (dust|ejs|hbs|hjs|jade|pug|twig|vash) (defaults to jade)
        --no-view        use static html instead of view engine
    -c, --css <engine>   add stylesheet <engine> support (less|stylus|compass|sass) (defaults to plain css)
        --git            add .gitignore
    -f, --force          force on non-empty directory
    -h, --help           output usage information

expressのヘルプが出ました。ということはexpressコマンドが実行出来ているということですね。

使ってみる

それでは早速アプリケーションのひな形を作って貰いましょう

$ express myapp

  warning: the default view engine will not be jade in future releases
  warning: use `--view=jade' or `--help' for additional options


   create : myapp/
   create : myapp/public/
   create : myapp/public/javascripts/
   create : myapp/public/images/
   create : myapp/public/stylesheets/
   create : myapp/public/stylesheets/style.css
   create : myapp/routes/
   create : myapp/routes/index.js
   create : myapp/routes/users.js
   create : myapp/views/
   create : myapp/views/error.jade
   create : myapp/views/index.jade
   create : myapp/views/layout.jade
   create : myapp/app.js
   create : myapp/package.json
   create : myapp/bin/
   create : myapp/bin/www

   change directory:
     $ cd myapp

   install dependencies:
     $ npm install

   run the app:
     $ DEBUG=myapp:* npm start
myappはひな形として生成されるアプリケーション名となります

プロジェクト名として作成しますのでわかりやすい方がいいです。

warningが出ていますが、読んでみるとview engineが指定されていないからとりあえず今はjade使いますね。みたいな事が書いています。ちゃんとjadeを使う事を指定するかヘルプを読めとも書いてますね。

動かしてみる

とりあえず、先に進みます。

$ ls
myapp

lsコマンドでディレクトリー内を見てみるとmyappというフォルダが新規に作成されています。
作成するパスに日本語が入っていると上手くいかないことがあるので可能な限りcドライブの直下に移動してからexpressすると良いと思います

   change directory:
     $ cd myapp

   install dependencies:
     $ npm install

   run the app:
     $ DEBUG=myapp:* npm start

ご親切な事にexpressを実行したときに次にやるべきコマンドも記載してくれています。

$ cd myapp/
$ npm install
npm WARN deprecated jade@1.11.0: Jade has been renamed to pug, please install the latest version of pug instead of jade
npm WARN deprecated constantinople@3.0.2: Please update to at least constantinople 3.1.1
npm WARN deprecated transformers@2.1.0: Deprecated, use jstransformer
npm notice created a lockfile as package-lock.json. You should commit this file.
added 99 packages from 139 contributors and audited 194 packages in 36.357s
found 3 low severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details
MacBook-Air:myapp kiyoshiohira$

記載の通りにmyappに移動しnpm installしてみます

npm installはpackage.jsonというファイルがある場所で実行します。

package.jsonはアプリケーションに必要なライブラリを管理しているファイルです。

npm installするとpackage.jsonの中身を確認しにいき、依存関係も含めてアプリケーションにライブラリをインストールしてくれます。とても便利。

色々とWarningが出ていますが、無視してnode.jsを起ち上げます。

$ DEBUG=myapp:* npm start

> myapp@0.0.0 start /node/myapp
> node ./bin/www

  myapp:server Listening on port 3000 +0ms

動いているか確認してみる

起動しました。
3000ポートでアクセスしてください。ということなのでブラウザを開いて見ましょう

http://localhost:3000/

表示されましたか？
これでnode.jsのアプリケーション開発を始めることが出来ますね。

タグ:

おすすめ