Express + Node.js + bootstrapでウェブアプリ開発
目次
Express + Node.js + bootstrapでウェブアプリ開発
前提
- macOSを使っている
- node.jsが既に入ってる
準備
$ mkdir new_project
$ cd new_project/
$ npm init
# プロンプトに回答していく
$ ls
package.json
expressとejsをインストール
$ npm install express --save
$ npm install ejs --save
app.jsを作って下記のように書く
/* 1. expressモジュールをロードし、インスタンス化してappに代入。*/
var express = require("express");
var app = express();
/* 2. listen()メソッドを実行して3000番ポートで待ち受け。*/
var server = app.listen(3000, function(){
console.log("Node.js is listening to PORT:" + server.address().port);
});
// View EngineにEJSを指定。
app.set('view engine', 'ejs');
// "/"へのGETリクエストでindex.ejsを表示する。拡張子（.ejs）は省略されていることに注意。
app.get("/", function(req, res, next){
res.render("index", {});
});
index.ejs
new_projectの中にviewsというディレクトリを作ってその下にindex.ejsを作る
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="active"><a href="/">Home</a></li>
<li><a href="/about">JSA</a></li>
</ul>
</div>
</nav>
<div class="jumbotron text-center">
<h1>JSA NodeJS/Express Bootstrap Page</h1>
<p>This is a responsive page! You can resize the page to see affect!</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-6">
<h3>Express</h3>
<p>JSA uses Express framework and Bootstrap to build a demo web application.</p>
<p>Express.js is a web application framework for Node.js, it is free and open-source software under the MIT License.</p>
</div>
<div class="col-sm-6">
<h3>Bootstrap</h3>
<p>Bootstrap is a free front-end framework for faster and easier web development</p>
<p>Bootstrap includes HTML and CSS based responsive design templates</p>
</div>
</div>
</div>
</body>
</html>
サーバーを起動する
$ node app.js
Node.js is listening to PORT:3000
実行
参考
ここら辺の本を読んで、
めっちゃ勉強になりました、
ブログって簡単にわかるけど、
深い部分で基礎が結構抜け落ちてたりするんだよね…
基礎の徹底は、
良いエンジニアの基本なので、
ここら辺を横着するか否かで将来のエンジニア人生も大きく変わる。
なので、こういう本はしっかり読もうと思います。
（お勧めなので、是非勝ってみればいいと思います :)）
[itemlink post_id=”9955″][itemlink post_id=”9956″]
[itemlink post_id=”9957″]
714
294
450
94
119
りょすけと申します。18歳からプログラミングをはじめ、今はフロントエンドでReactを書いたり、AIの勉強を頑張っています。off.tokyoでは、ハイテクやガジェット、それからプログラミングに関する情報まで、エンジニアに役立つ情報を日々発信しています！