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

実行

参考

ここら辺の本を読んで、

めっちゃ勉強になりました、

ブログって簡単にわかるけど、

深い部分で基礎が結構抜け落ちてたりするんだよね...

基礎の徹底は、

良いエンジニアの基本なので、

ここら辺を横着するか否かで将来のエンジニア人生も大きく変わる。

なので、こういう本はしっかり読もうと思います。

（お勧めなので、是非勝ってみればいいと思います :)）

現場で使える Ruby on Rails 5速習実践ガイド [ 大場寧子 ]

created by Rinker

¥3,828 (2021/04/22 05:52:47時点楽天市場調べ-詳細)

Vue．js入門基礎から実践アプリケーション開発まで [ 川口和也 ]

created by Rinker

¥3,718 (2021/04/22 05:52:47時点楽天市場調べ-詳細)

created by Rinker

¥2,420 (2021/04/22 14:38:47時点楽天市場調べ-詳細)

<br />

Pocket

Share on Tumblr