【Node.js入門】Express Generatorで簡単Webアプリ作成

Contents

目的
- アウトプットイメージ
おすすめの書籍
Node.js開発環境構築
Express Generatorとは？
Express Generatorでのアプリケーション作成
補足情報_ Generatorのグローバル環境へのインストール
- インストールしたリストの確認
- npmコマンドを実行してエラーが出た時の対処法
まとめ

目的

今回の主な内容は、
Express Generatorというライブラリを使用して、
簡単にWebアプリケーションのテンプレートを作成していきます。

アウトプットイメージ

下記のWebアプリケーションの骨組みを簡単に作成することができます。

Node.js開発環境構築

開発環境構築がまだの方は、
下記の記事を参考に環境構築を実施してみて下さい。

【初心者向け】JavaScriptでWebアプリケーション開発をやってみよう_環境構築目的 Webアプリケーション開発を作成してみたいという方に対して、まずは何をすれば良いのか？ということがわかるように基本的な部分...

【初心者向け】Visual Stdio Codeを使ってみよう目的 Visual Stdio Code（以下 VS Code）について、ダウンロード方法や基本設定、拡張機能について備忘録とし...

Express Generatorとは？

Webアプリケーションに必要なファイルやライブラリ、設定情報などを１つのフォルダーにまとめたものです。それらを簡単にカスタマイズしてオリジナルのアプリケーションにすることができます。

Express Generatorでのアプリケーション作成

Express Generatorのグローバル環境へのインストール

コマンドには「-g」というオプションを付けます。
グローバル環境にインストールするためのものです。

npm install -g express-generator

アプリケーションフォルダの作成

パスの移動

cd 作成したい場所のパス

アプリケーション作成

express --view=ejs ex-gen-app

VS Codeでアプリケーションを開く

上記で作成した「ex-gen-app」VS Codeでフォルダーを開くを選択します。
フォルダが自動生成されていることがわかります。

VS Codeのターミナルで実行

npmインストールを実行することで、
package.jsonファイルの内容を元に１発で必要な物が組み込めます。

npm install

下記のコマンドでアプリケーションを実行できます。

npm start

Webブラウザでの実行

下記のアドレスを入力します。

http://http://localhost:3000/

ChromeなどのWebブラウザで実行。

補足情報_ Generatorのグローバル環境へのインストール

インストールしたリストの確認

npm list -g

実行結果

npmコマンドを実行してエラーが出た時の対処法

下記のコマンドを実行して、configの設定を確認します。

npm config get prefix

実行結果

localであることを確認します。

自分をオーナーにするコマンド（コマンド実行後、パスワード入力）

sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share}

参考にした記事

https://youki-takemoto.net/archives/89

まとめ

以上、Express Generatorというライブラリを使用して、
簡単にWebアプリケーションのテンプレートを作成してみました！
次回以降は、データベースも使用して簡単なアプリケーションを作成していきます。