Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
96
Help us understand the problem. What is going on with this article?
@don-bu-rakko

Node.jsを使ってWebアプリケーションを作るための流れ - Expressで構築してみよう 編 -

More than 1 year has passed since last update.

前回の記事の続きです!

↓の記事の続きです。
Node.jsを使ってWebアプリケーションを作るための流れ - 事前知識 & ベタ書きで書いてみる 編 -

前回、httpモジュールを読み込んでサーバーをベタ書きで起動する方法についてまとめました。
今回は、Node.jsで有名なWebフレームワーク、Expressを用いてサイトの構築を行ってみたいと思います。

node.jsがインストールされてない人は予めインストールしておいてくださいね!確認の方法などについては前回の記事を参照してください〜〜

Expressをインストール

では、まずはExpressをインストールしちゃいましょう。
まずは--versionオプションでexpressがインストール済みかどうかを確認してください。

$ express --version
4.16.0

バージョンが出てこない場合は、Expressをインストールしましょう。
よく使う場合は、-gオプション(グローバルにインストールする)をつけちゃいましょう。私は-gオプションでインストールしてしまっています。

$ npm install -g express

そして、公式で準備してくれているexpress-generatorもインストールしておきます。
https://expressjs.com/ja/starter/generator.html

$ npm install -g express-generator

これで準備は完了です。

プリセットを作成

では、expressを使って実際にアプリを作ってみましょう。

任意のディレクトリで、下記コマンドを実行します。

$ express [任意のアプリ名]

今回はfirst_appという名前で作成します。

$ express first_app

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


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

   change directory:
     $ cd first_app

   install dependencies:
     $ npm install

   run the app:
     $ DEBUG=first-app:* npm start

すると、first_appというディレクトリができているので、指示に従って下記コマンドを実行します。

$ cd first_app
$ npm install

これでセットアップは完了です。
では、実際にexpressを実行してみましょう。DEBUG=first-app:* npm startを実行しましょう。
必ずfirst_appのディレクトリの中で実行してくださいね!

$ DEBUG=first-app:* npm start

> first-app@0.0.0 start /hoge/first_app
> node ./bin/www

  first-app:server Listening on port 3000 +0ms

こんな感じの画面になったら成功です。
では、この状態のまま http://localhost:3000 にアクセスしてみましょう。

こんな画面が出たら成功しています!簡単ですね!

image.png

ターミナル上でも 200が返されている事が確認できます。
image.png

ちなみに、 http://localhost:3000/users にアクセスするとこんな画面になっているはずです。これ、あとで使うので覚えといてください。

image.png

前回の苦労はなんだったんだ。。。

試しに/routes/index.js/の中身を書き換えてみましょう。

/routes/index.js
var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
-  res.render('index', { title: 'express' });
+  res.render('index', { title: 'どんぶラッコ' });
});

module.exports = router;

保存したら、サーバーを止めて再度立ち上げ、 http://localhost:3000 にアクセスしてみましょう。
ターミナル上でctrl + cを押す事でサーバーを止められます。

image.png

表示が変わりましたね!

ファイル構成

ファイル構成を確認しましょう。node_modulesを除いた形でtreeコマンドします。

$ tree -I 'node_modules'
.
├── app.js
├── bin
│   └── www
├── package-lock.json
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── routes
│   ├── index.js
│   └── users.js
└── views
    ├── error.jade
    ├── index.jade
    └── layout.jade

すごくシンプルな構成ですね。

  • app.js
    • httpアクセスがあった時の処理部分です
  • /routes
    • ルーティング処理が書かれています
  • /public
    • 画像やCSSなどの静的ファイルの置き場所です
  • /views
    • 描画のための.jadeファイルが配置されています。私はAPIサーバーとしてしかnode.jsを使った事がないのではいじった事がありませんが、、

JADEを使わない、という方であれば、基本的に上3つをこねくり回せばOKです。

ルーティング処理

今回は最後に http://localhost:3000/rakko にアクセスできるようにして、終わりにしようと思います。

/routesディレクトリをみてください。index.jsusers.jsがあるはずです。
先ほど、 http://localhost:3000/users にアクセスしたら、コンテンツが表示されましたよね?
そうです、それは/routesにすでにusers.jsが用意されていたからなんですね!

という事は、rakko.jsを作ればルーティング処理してくれるのでは!?

早速、/routes/rakko.jsというファイルを作ってみましょう。コードについてはusers.jsをパクってきましょう。

/routes/rakko.js
var express = require('express');
var router = express.Router();

/* GET ラッコ listing. */
router.get('/', function(req, res, next) {
  res.send('ラッコだよ!');
});

module.exports = router;

しかし、これだけでは Not Foundになってします。

image.png

何故ならば、app.jsにrakko.jsがあるよ!と伝えていないからです。

という事でapp.jsに処理を追記しましょう。

8行目付近にvar rakkoRouter = require('./routes/rakko');を追記し

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var rakkoRouter = require('./routes/rakko');

24行目付近にapp.use('/rakko', rakkoRouter);を追記しましょう。

app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/rakko', rakkoRouter);

改めてサーバーを起動しましょう。
すると、

image.png

ちゃんと表示されました!

$ DEBUG=first-app:* npm start

> first-app@0.0.0 start /hoge/first_app
> node ./bin/www

  first-app:server Listening on port 3000 +0ms
GET /rakko 200 6.781 ms - 18

通信も良好ですね。

補足:

ちなみにこのルーティングについてですが、こんな書き方をしても動作します。
routes/index.jsに下記を追記してみてください。

routes/index.js
var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'どんぶラッコ' });
});

+ router.get('/rakko2', function(req, res, next) {
+   res.send('ラッコ2だよ!');
+ });

module.exports = router;

その上で、http://localhost:3000/rakko2 にアクセスすると、ちゃんと表示されている事がわかります。動かないよ!って人はサーバー再起動したか、確認してくださいね

image.png

app.jsに処理を追記しなくても動きました!

「じゃあもうこれでいいじゃん!」と思われるかもしれません。
確かに、これくらいミニマムなアプリケーションであればこの対応でも問題ありませんが、ページ数をどんどん増やしていった時に、index.jsが長くなりすぎて処理がわかりづらくなってしまいます。

例えば、本屋さんにいった時、「漫画コーナー」「ビジネス書コーナー」「参考書コーナー」というように、大きくジャンル分けされているから自分が欲しい本の場所を把握できますよね。これがもし、なんのジャンル分けもされておらず、雑多に並べられているだけだったら、自分が欲しい本の場所なんてわかるはずがありませんよね?

今のうちから整理整頓をする手法を身につけておいたほうが、今後の自分の為になります!この段階から慣れておきましょう!!

96
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
don-bu-rakko
ECコンサルタントしたり、SEしたりしてました。今はWebサービス開発中。JavaScript (Vue.js, Nuxt.js) / PHP (Laravel) / Python をよく使っています。 G's Academy Lab6th。
proglearn
"満足の最大化"をキーワードにWebサービスを生み出す会社です。議事録をDXするOneMinutes, オンライン動画試験のLINEプラットフォームNEXAM などを運営しています

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
96
Help us understand the problem. What is going on with this article?