otaku-tokyo

 

Node.js

Node.jsとは

本来クライアント側の言語であるjavascriptをサーバーサイドで動かすための仕組み

Expressとは

Node.jsでWebアプリを開発するためのフレームワーク(※フレームワークとは開発を効率化するためのツール)で、Web開発に必要な機能(パッケージ)が入っている

[terminal]

$npm install express

でインターネットから自分のアプリケーションにパッケージをインストールする

Expressを使うには、次のコードを記述してExpressの読み込みと使用するための準備が必要

[app.js]

const express = require(‘express’);

const app = express();

サーバーを起動する

次のコードでlocalhost:3000でアクセス可能なサーバーを起動

[app.js]

app.listen(3000);

起動したらサーバー上でapp.jsを実行

[terminal]

$node app.js

ルーティング

まず、viewsファイル内にtop.ejsを新規作成する

list-app

–app.js

–views  –top.ejs

次に、localhost:3000/にアクセスしたときtop.ejsを画面に表示させる

[app.js]

app.get(‘/’,(req,res)=>{

res.render(‘top.ejs’);

});

CSSを適用する

まず、publicフォルダにCSSや画像を作成する

list-app

–app.js

–views

–public  –css  –style.css

–images  –top.png

次に、publicフォルダ内のファイルを読み込めるようにする

[app.js]

app.use(express.static(‘public’));

そして、style.cssや画像を読み込む

[top.ejs]

<link rel=”stylesheet” href=”/css/style.css”>

<img src=”/images/top.png”>

一覧画面を作る

まず、一覧画面用のejsファイルを新規作成する

list-app

–views  –top.ejs

–index.ejs(新規作成)

次に、localhost:3000/indexにアクセスしたときにindex.ejsが表示されるようにする

[app.js]

app.get(‘/index’,(req,res)=>{

res.render(‘index.ejs’);

});

EJSとは

Embedded JavaScriptの略で

HTMLコードの中にJavascriptを埋め込む(=Embedded)ことができるファイルのこと

ejsファイルを使うには次のコマンドが必要

[terminal]

$npm install ejs

[index.ejs]

<% const items=[

{id:1, name:’じゃがいも’},

{id:2, name:’にんじん’},

{id:3, name:’たまねぎ’},

];%>

<% items.forEach((item)=>{ %>

<span>id:<%= item.id %></span>

<span>name:<%= item.name %></span>

<% }); %>

 

MySQLを使う準備をする

データベースを管理するツールはProsgreSQLやSQLiteなどがあるが、Node.jsではMySQLを使用する

まず、mysqlパッケージをインストールする

[terminal]

$npm install mysql

次に、mysqlを読み込んで、データベース名などからmysqlのどの部分にアクセスするのか指定する

[app.js]

const mysql = require(‘mysql’);

const connection = mysql.createConnection({

host: ‘localhost’,
user: ‘progate’,
password: ‘password’,
database: ‘list_app’

});

データベースからデータを取得する

まず、console.logでresultsをターミナルに出力する

次に、renderメソッドの第2引数に{プロパティ: 値}と書くことでresultsの値をejs側に渡す

[app.js]

app.get(‘/index’,(req,res)=>{

============追加部分==========

connection.query(

‘SELECT*FROM items’, //クエリ

(error,results)=>{

console.log(results);

res.render(‘index.ejs’,{items: results});

} //クエリ実行後の処理

);

===========================

=============削除部分=========

res.render(‘index.ejs’);

===========================

});

作成画面を表示

まず、new.ejsを新規作成

list-app

–app.js

–views  –new.ejs(新規作成)

次に、localhost:3000/newにアクセスしたときnew.ejsを表示するようにする

[app.js]

app.get(‘/new’,(req,res)=>{

res.render(‘new.ejs’);

});

そして、index.ejsに作成画面へのリンクをつくる

[index.ejs]

<a href=”/new”>+新規作成</a>

フォームを用意する

まず、formタグでフォームをつくる

[new.ejs]

<form action=”/create” method=”post”>

<input type=”text” name=”itemName”>

<input type=”submit” value=”作成する”>

</form>

次に、データベースを変える処理なのでapp.getではなくapp.postを使う。

<input name=”itemName”>に「とまと」と入力すると、app.jsのreq.body.itemNameに「とまと」が入るので、その入力した値をデータベースに追加。その後/indexにリダイレクト。

[app.js]

app.post(‘/create’,(req,res)=>{

connection.query(

‘INSERT INTO items(name) VALUES(?)’,

[req.body.itemName],

//;ではなく,なので注意

(error,results)=>{

res.redirect(‘/index’);

}

);

});

フォームの値を受け取る

inputに入力した値を受け取るには次のコードが必要

[app.js]

app.use(express.urlencoded({extended: false}));

削除ボタンの準備

まず、削除ボタンをつくる

送信先URLにルートパラメータを含める

index.ejs

<form action=”/delete/<%=item.id %>” method=”post”>

<input type=”submit” value=”削除”>

</form>

 

次に、データベースを変更する処理なのでapp.postとし、ルーティングURLにルートパラメータを含める

そして、res.redirectする

app.js

app.post(‘/delete/:id’,(req,res)=>{

connection.query(

‘DELETE FROM items WHERE id = ?’,

[req.params.id],

(error,results)=>{res.redirect(‘/index’);}

);

});

 

編集ボタンの準備

まず、edit.ejsを新規作成する

ファイル構成

list-app

–app.js

–views–edit.ejs(新規作成)

 

次に一覧画面からリンクをつくる

index.ejs
<a href=”/edit/<%=item.id%>”>編集</a>

 

そしてクエリでitem.nameを取得し、ejsに渡す

results[0]は取得結果の1件目という意味

データベース上では{id:3,name:’たまねぎ’}となっている

app.js

app.get(‘/edit/:id’,(req,res)=>{

connection.query(

‘SELECT * FROM items WHERE id = ?’,

// *を忘れない

[req.params.id],

(error,results)=>{

res.render(‘edit.ejs’,{item: results[0]});

//itemsではなくitem

}

);

});

最後に取得したitem.nameを表示させる

edit.ejs

<form action=”/update/<%=item.id%>” method=”post”>

<input name=”itemName” type=”text” value=”<%=item.name%>”>

<input type=”submit” value=”更新する”>

</form>

 

更新ファイルの作成

app.js

app.post(‘/update/:id’,(req,res)=>{

connection.query(

‘UPDATE items SET name = ? WHERE id = ?’,

[req.body.itemName , req.params.id],

(error,results)=>{res.redirect(‘/index’);}

);

});

これでアプリは完成

環境構築

コマンドプロンプトでnode -vというコマンドを実行しNode.jsがインストールされているか確認する。

されていない場合は公式サイトから推奨版Node.jsをインストールする。

基本的に設定を変更する必要はないが次の項目はチェックを入れておく。

インストールしたらパソコンを再起動し、再びコマンドプロンプトで

node -v とnpm -vというコマンドを実行する。どちらもバージョンが表示されればインストール完了。

ローカル環境でExpressのアプリを作成する

まず、好きな場所に「list-app」というフォルダを新規作成する。

次にコマンドプロンプトを開いてlist-appフォルダにpackage.jsonを生成する

※package.jsonとは、npmパッケージをインストールするうえで必要なファイル。

そしてnpmのパッケージであるexpressとejsをインストールする

terminal

cd list-app

npm init –yes

npm install express ejs

※もちろんnpm install expressとnpm install ejsと分けてもOK。

このような画面が表示されたらOK。

サーバーを起動してページを表示する

パッケージはそろった。緑で囲った部分のファイルを新規作成する。ここまでの手順が正常に行われていれば他のファイルは既に作成されている。

つくったファイルにコードを記述する。

app.js
const express = require(‘express’);const app = express(); app.get(‘/’, (req, res) => { res.render(‘hello.ejs’); }); app.listen(3000);

 

views/hello.ejs
<h1>Hello World</h1>

ファイルが準備できたのでサーバーを起動する

terminal
node app.js

ブラウザを開いてlocalhost:3000というURLにアクセスし、Hello Worldと表示されればOK。

 

nodemon

jsファイルを変更した際には、Ctrl+Cでサーバーを停止した後に、node app.jsでサーバーを再起動させないと変更が反映されない。手動でサーバーを再起動する必要がないように、ファイルが変更されると自動でサーバーを再起動してくれるnodemonというnpmパッケージをインストールする

npm install -g nodemon

次に、nodemonを使ってサーバーを起動する。

nodemon app.js

以下の図のように表示されれば、nodemonでのサーバー起動は成功。サーバー停止はCtrl+C。

 

Node.jsとMySQLを接続する

list-appの直下で下記コマンドを実行しmysqlパッケージをインストールする

npm install mysql

MySQLで下記データベースを新規作成する

データベース名:list-app(“-“は使えないのでprogateに変更)

テーブル名:users

app.jsに必要な情報を記述する。ただしdatabaseはlist-appではなくprogateなので注意。

必要な情報は以下の通り。

①接続情報

const express = require(‘express’); const mysql = require(‘mysql’); const app = express(); const connection = mysql.createConnection({ host: ‘localhost’, user: ‘root’, password: ‘[設定したパスワード]’, database: ‘list_app’ });

②MySQLへの接続ができていないときにエラーを表示

connection.connect((err) => { if (err) { console.log(‘error connecting: ‘ + err.stack); return; } console.log(‘success’); });

➂localhost:3000/にアクセスしたときにデータベースの内容をconsole.log();で出力

app.get(‘/’, (req, res) => { connection.query( ‘SELECT * FROM users’, (error, results) => { console.log(results); res.render(‘hello.ejs’); } ); }); app.listen(3000);

 

app.jsを保存したら、node app.jsもしくはnodemon app.jsを実行してサーバーを起動し、localhost:3000にアクセスする。ターミナルに以下のようにデータが表示されれば成功