magazine off

Express + Node.js + bootstrapでウェブアプリ開発

藤沢瞭介(Ryosuke Hujisawa)
2018年5月28日2021年2月8日

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

 

実行

Screen Shot 2018-05-27 at 13.45.09.png

参考

 

ここら辺の本を読んで、

 

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

 

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

 

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

 

基礎の徹底は、

 

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

 

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

 

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

 

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

[itemlink post_id=”9955″]

 

[itemlink post_id=”9956″]

 

[itemlink post_id=”9957″]

 

  1. JSのオブジェクトで、特定の条件に合致した値だけソートする
  2. JSでオブジェクトの値を使ってソートする方法
  3. JavaScriptで値を文字列に変換する5つの方法
  4. react-datepickerでバリデーションする方法
  5. –save-devを調べてみた（npm install ）
  6. ReactでPrettierを導入してVSCodeでファイル保存したら勝手に整形されるようにする、そしてESLintのコード整形は停止する
  7. ReactのuseMemoとは？shouldComponentUpdateを学び理解してみた。
  8. Stripe Connectで画像検証を登録する方法 | 子アカウントの本人確認 | Node.js
  9. node.jsで、A処理が終わったらB処理を実行するアレを今更書いてみる
  10. node.jsのAPIで画像を受け取る方法 | fetch , React
藤沢瞭介(Ryosuke Hujisawa)
  • 藤沢瞭介(Ryosuke Hujisawa)

  • りょすけと申します。18歳からプログラミングをはじめ、今はフロントエンドでReactを書いたり、AIの勉強を頑張っています。off.tokyoでは、ハイテクやガジェット、それからプログラミングに関する情報まで、エンジニアに役立つ情報を日々発信しています！

JavaScriptNode.js