技術ログ

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

2018年5月28日

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

参考

 

ここら辺の本を読んで、

 

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

 

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

 

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

 

基礎の徹底は、

 

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

 

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

 

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

 

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

created by Rinker
¥3,828 (2021/01/21 22:05:45時点 楽天市場調べ-詳細)

 

 

 

Pocket
LinkedIn にシェア

エンジニアにおすすめできる本

Card image cap
リーダブルコード

より良いコードを書くためのシンプルで実践的なテクニック

Card image cap
Webを支える技術

HTTP,URI,HTML,そしてREST

Card image cap
誰でもPythonで作れる

儲かるAIとソフトウェアの作り方

Card image cap
プログラマが知るべき97のこと

現場で使える実践哲学のマスターピース

Card image cap
情熱プログラマー

時代を超えて。ソフトウェア開発者の幸せな生き方

Card image cap
アジャイルサムライ

プログラミング達人開発者への道

Card image cap
Rubyを作った男 まつもとゆきひろ

コードの世界 スーパー・プログラマになる14の思考法

ご提供 sponsor
 

Meee!(ミー)は、ビジネスからプライベート利用まで、個人のスキルを気軽に売り買いできるスキルマーケットです。カテゴリや居住地から、検索することが可能です。

 

ランゲージエクスチェンジは、ネイティブスピーカーと気軽にマッチングできる言語交換プラットフォームです。あなたの地元に住む外国人を探したり、留学や海外移住の前に、現地のネイティブスピーカーと繋がることもできます!

宣伝
 

りょすけトークchは、仕事や私生活をより豊にするYouTubeチャンネルです。文献(本、映画、論文)から役に立つ情報をまとめ、生涯にわたり役に立つ哲学をお届けしています。是非、チャンネル登録してみてね

-技術ログ
-

Copyright© offブログ! , 2021 All Rights Reserved Powered by AFFINGER5.