前回に引き続きProgate無料レッスンをやっていこうと思います。
今回はNode.jsです。
Progateの無料版のレッスンはこれで終わります。
以前のレッスンで既にインストール済みです。
Node.js
Expressの導入
・ExpressとはNode.jsでWebアプリを開発するためのフレームワーク。
RubyでいうところのRailsになんでしょうね。C#でいうところのASP.NETみたいな。
・おなじみのパッケージ。便利な機能、メソッドが揃った塊、ライブラリの事。
・npmコマンドでExpressをインストールする。npmとはNode Package Manager その名の通り、Node.jsのパッケージを管理するツール。これを使ってパッケージを取得する。
環境
最近こればっかりですが、VSCode使っていきます。
適当なデイレトリを作成し
VSVodeで開きます。
ターミナルを開きます。
まずinitします。
npm init
package name: (node)と聞かれた作成するpackage.jsonの名前をいれます。任意な値。nodeにしました。
次に、以下を実行してExpressをインストールします。
npm install express
こんな感じになるかと思います。
Progateのレッスンにもどります。
Progateのディレクトリ構成を再現します。
C:\job\Node
│ app.js
│ package-lock.json
│ package.json
│
├─node_modules
└─public
└─images
app.js等の中身もコピペします。
app.js
constexpress=require('express');constapp=express();サーバーの起動
・app.listen(3000);と記述することで、ポート3000のhttp通信を受けつけることになるらしい。
app.js
constexpress=require('express');constapp=express();app.get('/',(req,res)=>{res.render('hello.ejs');});// サーバーを起動するコードを貼り付けてくださいapp.listen(3000);getのところは、TOP/に GETリクエストがあった場合にhello.ejsをレンダリングする意味だと思います。ejsってなんすかｗ
Progateを真似すると、Viewsディレクトリが新たにできていて、その中にhello.ejsがあります。
hello.ejs
<!DOCTYPE html><html><head><metacharset="utf-8"><title>Hello World</title><script src="/send_url.js"></script></head><body><h1>Hello World</h1></body></html>/send_url.jsってなんだ？ｗ
ターミナルで
node app.js
と打って実行します。
http://localhost:3000にアクセスすると以下のエラーとなった
package.jsonの内容がちがったから、そのせいかな？
一緒にしてみる。
package.json
{
"name": "nodejs_lesson",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"eslint": "eslint ./",
"start": "nodemon -r './.module' ./app.js"
},
"author": "Progate",
"license": "ISC",
"dependencies": {
"ejs": "^2.6.1",
"express": "^4.16.4"
},
"devDependencies": {
"nodemon": "^1.18.10"
}
}
でも同じエラー。
あ、書き換えたpackage.jsonを適用するのかな？と思い
npm update
これで、package.jsonに記載した"ejs": "^2.6.1"が適用されずはず・・・。
実行後にhttp://localhost:3000にアクセス。
表示できました！
ページの表示の仕組み
・見た目部分にはejsという形式のファイルを使い、viewsディレクトリの下に配置するらしい。HTMLと同じと思えとのこと。
演習
・新たにtop.ejsが追加になる。
app.js
constexpress=require('express');constapp=express();app.get('/',(req,res)=>{res.render('hello.ejs');});// トップ画面を表示するルーティングを作成してくださいapp.get('/top',(req,res)=>{res.render('top.ejs');});app.listen(3000);top.ejs
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>LISTAPP</title>
<scriptsrc="/send_url.js"></script>
</head>
<body><divclass="top-wrapper"><divclass="top-detail"><h2class="subtitle">買い物リストアプリ</h2>
<h1class="title">LISTAPP</h1>
<pclass="description">LISTAPPは、買い物をリストアップするサービスです。<br>買いたいものをリストに追加してみましょう。</p>
<aclass="index-button">一覧を見る</a>
</div>
<divclass="top-image"></div>
</div>
</body>
</html>
npm app.jsしてからhttp://localhost:3000/topにアクセス
CSSの適用と画像の表示
・「Expressでは、CSSや画像などのファイルがどこに置かれているかを指定する必要があります」らしい。
publicにある。
・app.jsでapp.use(express.static('public'));を行う必要がある。
・Progateの説明の通り、style.cssを追加する。top.ejsで読み込む。
app.js
constexpress=require('express');constapp=express();// CSSや画像ファイルを置くフォルダを指定するコードを貼り付けてくださいapp.use(express.static('public'));app.get('/',(req,res)=>{res.render('hello.ejs');});app.get('/top',(req,res)=>{res.render('top.ejs');});app.listen(3000);public/css/style.css
/* reset ================================ */*{box-sizing:border-box;}html{font-size:100%;font-family:'Hiragino Sans',sans-serif;line-height:1.7;letter-spacing:1px;}body{margin:0;background-color:#f6faff;color:#6c7686;}ul,li{list-style-type:none;padding:0;margin:0;}a{display:block;text-decoration:none;color:#2d3133;font-size:14px;}a:hover{transition:all0.3sease;}h1,h2,h3,h4,h5,h6,p{margin:0;}h1{font-weight:600;}/* top ================================ */.top-wrapper{max-width:1200px;min-width:920px;display:flex;justify-content:center;align-items:center;margin:0auto;padding:60px;}.top-detail{width:36%;min-width:320px;margin-top:-40px;}.top-detail.subtitle{font-size:14px;font-weight:600;margin-bottom:4px;}.top-detail.title{font-size:54px;line-height:66px;letter-spacing:2px;margin-bottom:24px;}.top-detail.description{font-size:14px;line-height:28px;letter-spacing:0.5px;margin-bottom:40px;}.top-detail.index-button{width:184px;height:48px;text-align:center;line-height:45px;font-weight:600;color:#42cea9;;background-color:#ffffff;border:2pxsolid#58d2b2;border-radius:2px;}.top-detail.index-button:hover{color:#ffffff;background-color:#58d2b2;}.index-button{cursor:pointer;}.top-image{width:64%;text-align:center;overflow:hidden;}.top-imageimg{width:88%;}/* header ================================ */header{height:56px;background-color:#ffffff;border-bottom:1pxsolid#f0f4f9;}.header-logo{margin-left:56px;font-weight:600;font-size:20px;line-height:56px;color:#6c7686;display:inline;}.header-logo:hover{color:#58d2b2;}/* container ================================ */.container{width:80%;min-width:360px;max-width:720px;margin:0auto;margin-top:56px;}.container-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;}.container-headerh1{font-size:24px;}/* index ================================ */.table-head{display:flex;background-color:#b7cadc;border-radius:2px2px00;height:44px;font-size:16px;line-height:46px;color:#ffffff;}.id-column{width:72px;text-align:center;}.table-body{background-color:#ffffff;}.table-bodyli{height:72px;border:1pxsolid#f0f4f9;border-top:none;line-height:74px;display:flex;}.table-body.id-column{font-size:16px;color:#bac6d3;}.table-body.name-column{font-size:14px;font-weight:500;color:#8491a5;}top.ejs
<!DOCTYPE html><html><head><metacharset="utf-8"><title>LIST APP</title><!-- CSSファイルを読み込んでください --><linkrel="stylesheet"href="/css/style.css"><script src="/send_url.js"></script></head><body><divclass="top-wrapper"><divclass="top-detail"><h2class="subtitle">買い物リストアプリ</h2><h1class="title">LIST APP</h1><pclass="description">
LIST APPは、買い物をリストアップするサービスです。
<br>買いたいものをリストに追加してみましょう。
</p><aclass="index-button">一覧を見る</a></div><divclass="top-image"><!-- 画像ファイルを読み込んでください --><imgsrc="/images/top.png"></div></div></body></html>http://localhost:3000/topにアクセスして
実行結果
一覧画面の作成
・ndex.ejsというファイルで一覧画面を作成する。
/indexのGETをapp.jsに実装する。
app.js
constexpress=require('express');constapp=express();app.use(express.static('public'));app.get('/',(req,res)=>{res.render('hello.ejs');});app.get('/top',(req,res)=>{res.render('top.ejs');});// 一覧画面を表示するルーティングを作成してくださいapp.get('/index',(req,res)=>{res.render('index.ejs');});app.listen(3000);index.ejs
<!DOCTYPE html><html><head><metacharset="utf-8"><title>LIST APP</title><linkrel="stylesheet"href="/css/style.css"><script src="/send_url.js"></script></head><body><header><aclass="header-logo">LIST APP</a></header><divclass="container"><divclass="container-header"><h1>買い物リスト</h1></div><divclass="index-table-wrapper"><divclass="table-head"><spanclass="id-column">ID</span><span>買うもの</span></div><ulclass="table-body"><li><spanclass="id-column">1</span><spanclass="name-column">じゃがいも</span></li><li><spanclass="id-column">2</span><spanclass="name-column">にんじん</span></li><li><spanclass="id-column">3</span><spanclass="name-column">たまねぎ</span></li></ul></div></div></body></html>http://localhost:3000/topにアクセスして
EJSを使って値を表示しよう
・ejsとは「EJSは、HTMLとJavaScriptのコード両方を記述できるNode.jsのパッケージ」らしい。
Embedded javaScript
HTMLの中にJavaScriptを埋め込む
らしい。ReactはJSにHTMLを埋め込むイメージでしたよね。
・なんとnpm install ejsを最初にやる必要があったらしい。
紛らわしい。なぜその手順を最初に解説しなかったのか・・・。
・JavaScritpを埋め込むには<% %>または<%= %>を使用するらしい。Rubyと一緒かな？
forEachを使ったHTMLの表示
・ejs上でforEachできる。
ただし、forEachの閉じは<% });%>とかなり独特。
ページ間リンク
・リンクはaタグのhref=""のところにパスを記載する。
app.js
constexpress=require('express');constapp=express();app.use(express.static('public'));// 下記のルーティングを削除してください// 削除ここまで// ルートURLで表示されるように変更してくださいapp.get('/',(req,res)=>{res.render('top.ejs');});app.get('/index',(req,res)=>{res.render('index.ejs');});app.listen(3000);index.js
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>LISTAPP</title>
<linkrel="stylesheet"href="/css/style.css"><scriptsrc="/send_url.js"></script>
</head>
<body><header><!--href属性を追加してください--><aclass="header-logo"href="/">LISTAPP</a>
</header>
<divclass="container"><divclass="container-header"><h1>買い物リスト</h1>
</div>
<divclass="index-table-wrapper"><divclass="table-head"><spanclass="id-column">ID</span>
<span>買うもの</span>
</div>
<%constitems=[{id:1,name:'じゃがいも'},{id:2,name:'にんじん'},{id:3,name:'たまねぎ'}];%><ulclass="table-body"><%items.forEach((item)=>{%><li><spanclass="id-column"><%=item.id%></span>
<spanclass="name-column"><%=item.name%></span>
</li>
<%});%></ul>
</div>
</div>
</body>
</html>
top.ejs
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>LISTAPP</title>
<linkrel="stylesheet"href="/css/style.css"><scriptsrc="/send_url.js"></script>
</head>
<body><divclass="top-wrapper"><divclass="top-detail"><h2class="subtitle">買い物リストアプリ</h2>
<h1class="title">LISTAPP</h1>
<pclass="description">LISTAPPは、買い物をリストアップするサービスです。<br>買いたいものをリストに追加してみましょう。</p>
<!--href属性を追加してください--><aclass="index-button"href="/index">一覧を見る</a>
</div>
<divclass="top-image"><imgsrc="/images/top.png"></div>
</div>
</body>
</html>
http://localhost:3000/topにアクセスして
クリアしました
感想
・比較的簡単にWebが作れました。
DBから引っ張ってくるところとかはおそらく有料の上級編でやっているんだろうなぁ・・・。
・Node.jsに言えたことではないが、今まで無料レッスンやってきた言語のWeb系のデプロイってどうやるんだろうｗ
今回でProgate無料版はすべてこなしました。
いつも書いているように、無料版なので、基礎や基本的なことしかやらないので、即何かアプリを作れるかと言ったら、この内容だけじゃ難しいですが、他無料サイトをみながらアプリ作成を始めてみる際にはこのレッスンの経験が少しは生きてくると思いました。
次回はReactのチュートリアルの三目並べゲームをやってみたいと思います。