step1.expressでプロジェクトを作成

まずはexpressコマンドでnode.jsのプロジェクトを作成します。

express-generatorがわからない人はnode.jsのexpress-generatorはとても便利。を先に読んで下さい。

それでは早速作っていきますが、まずは環境チェックです。

$ node -v
 v12.1.0

$ express --version
 4.16.0

作業用フォルダを用意しておく

マイドキュメントの中でも良いですがnodeで作成したプロジェクトは1つのフォルダの中に入れておくのが良いと思います。

私はnodeというフォルダをドライブ直下に作っています。

日本語フォルダが入るとちゃんと動かないシステムもあったりしたので昔からの癖ですね(^_^;

$ cd /node

お使いのパソコンによってコマンドは変わってくるかと思いますが、macのターミナルを開き作業ディレクトリを移動します。

$ express todolist --view=ejs
 create : todolist/
    create : todolist/public/
    create : todolist/public/javascripts/
    create : todolist/public/images/
    create : todolist/public/stylesheets/
    create : todolist/public/stylesheets/style.css
    create : todolist/routes/
    create : todolist/routes/index.js
    create : todolist/routes/users.js
    create : todolist/views/
    create : todolist/views/error.ejs
    create : todolist/views/index.ejs
    create : todolist/app.js
    create : todolist/package.json
    create : todolist/bin/
    create : todolist/bin/www
 change directory:
      $ cd todolist
 install dependencies:
      $ npm install
 run the app:
      $ DEBUG=todolist:* npm start

テンプレートエンジンはjadeではなくejsを使いますので「–view=ejs」とオプションで指定します。

最初からejsのテンプレートが入ってて便利です。

npm installをしよう

あとは出来上がったプロジェクトをVSCodeで読み込ませてターミナルからnpm installをして準備は完了です！

$ npm install
 npm notice created a lockfile as package-lock.json. You should commit this file.
 added 53 packages from 38 contributors and audited 141 packages in 2.79s
 found 0 vulnerabilities

デバッカーを起動してデフォルトページが表示されるか確認してみましょう。

http://localhost:3000/

上記の表示が出たら大丈夫です。

さぁ作って行きましょう。