[Node.js] mysqlと連携

1. mysqlパッケージをインストール
$ npm install mysql

var express = require('express');
var mysql = require('mysql');

const app = express();

const connection = mysql.createConnection({
	host: 'localhost',
	user: 'root',
	password: 'hoge',
	database: 'test'
});

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

app.get('/', (req, res) => {
	connection.query(
		'SELECT * FROM master_zip',
		(error, results) => {
			console.log(results);
		}
	);
});

app.listen(8000);

$ node app.js
success
[
RowDataPacket {
zip_code: ‘1690075’,
pref_name: ‘東京都’,
city_name: ‘新宿区’,
town_name: ”,
area_name: ‘高田馬場’
},
// 省略
]

mysql.createConnectionで接続して、connection.queryでqueryを実行するのね
基本はわかりました。

ただ、これをconnection.queryの外に変数を出そうとするとできない。

var getAddress = function(args){

	var zip_code = args.zip_code;

	const connection = mysql.createConnection({
		host: 'localhost',
		user: 'root',
		password: 'password',
		database: 'test'
	});
	// conection.queryは非同期関数なので外に出せない
	connection.query(
		'SELECT * FROM master_zip',
		(error, results) => {
			var db_results = JSON.parse(JSON.stringify(results));
			}
	);
	return db_results.filter(address => {
 			return address.zip_code == zip_code;
	})[0];
}

なかなか複雑…

Node.jsでGraphQLを動かす

$ npm init
$ npm install graphql express express-graphql -save

server.js

var express = require('express');
var express_graphql = require('express-graphql').graphqlHTTP;
var { buildSchema } = require('graphql');

var schema = buildSchema(`
	type Query {
		message: String
	}
`);

var root = {
	message: () => 'Hello World!'
};

var app = express();
app.use('/graphql', express_graphql({
 schema: schema,
 rootValue: root,
 graphiql: true
}));
app.listen(8000, () => console.log('Express GraphQL Server Now Running On 192.168.34.10:8000/graphql'))

{
	message
}
{
  "data": {
    "message": "Hello World!"
  }
}

$ curl -XPOST -H “Content-Type:application/json” ‘http://192.168.34.10:8000/graphql’ -d ‘{“query”: “query { message }”}’
{“data”:{“message”:”Hello World!”}}
L jsonでクエリをリクエストすると返ってくる

### パラメータを受け取る

var express = require('express');
var express_graphql = require('express-graphql').graphqlHTTP;
var { buildSchema } = require('graphql');

var schema = buildSchema(`
	type Query {
		course(id: Int!): Course
		courses(topic: String):[Course]
	},
	type Course {
		id: Int
		title: String
		author: String
		description: String
		topic: String
		url: String
	}
`);
var coursesData = [
{
	id: 1,
	title: '初めてのGraphQL ―Webサービスを作って学ぶ新世代API',
	author: 'Eve Porcello',
	description: '本書で紹介するGraphQLは2015年にFacebookによって公開されたRESTとは異なるアプローチのアーキテクチャです。',
	topic: 'GraphQL',
	url: 'https://www.amazon.co.jp/%E5%88%9D%E3%82%81%E3%81%A6%E3%81%AEGraphQL-%E2%80%95Web%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%82%92%E4%BD%9C%E3%81%A3%E3%81%A6%E5%AD%A6%E3%81%B6%E6%96%B0%E4%B8%96%E4%BB%A3API-Eve-Porcello/dp/487311893X/ref=sr_1_1?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&dchild=1&keywords=graphql&qid=1633041782&sr=8-1'
},
{
	id: 2,
	title: '基礎からはじめるGraphQL',
	author: '志村翔太',
	description: '本書ではGraohQLの基礎文法や概念を学び、実際にGraohQLを利用したアプリケーションの完成を目指していきます。',
	topic: 'GraphQL',
	url: 'https://www.amazon.co.jp/%E5%9F%BA%E7%A4%8E%E3%81%8B%E3%82%89%E3%81%AF%E3%81%98%E3%82%81%E3%82%8BGraphQL-%E5%BF%97%E6%9D%91%E7%BF%94%E5%A4%AA-ebook/dp/B08PC8H5HF/ref=sr_1_2?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&dchild=1&keywords=graphql&qid=1633071074&sr=8-2'
},
{
	id: 3,
	title: 'Node.js超入門 第3版',
	author: '掌田津耶乃',
	description: 'Node.jsの入門者向け書籍です。2018/8に出た「Node.js超入門 第2版」の改訂版です。改訂内容は新バージョン14対応、データベースはSQLite3、ORMはSequelizeに変更しています。CSS関連はBootstrap利用、Expressは最初からGeneratorを使う形で解説しています。',
	topic: 'NodeJS',
	url: 'https://www.amazon.co.jp/Node-js%E8%B6%85%E5%85%A5%E9%96%80-%E7%AC%AC3%E7%89%88-%E6%8E%8C%E7%94%B0%E6%B4%A5%E8%80%B6%E4%B9%83/dp/479806243X/ref=sr_1_1_sspa?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&dchild=1&keywords=nodejs&qid=1633071225&sr=8-1-spons&psc=1&spLa=ZW5jcnlwdGVkUXVhbGlmaWVyPUEyNEMxVzdLVUtWOU1ZJmVuY3J5cHRlZElkPUEwNjIwNjAzMkhaN1dYSzZVSEw2NiZlbmNyeXB0ZWRBZElkPUExSkVDRkoyVzMwTlBBJndpZGdldE5hbWU9c3BfYXRmJmFjdGlvbj1jbGlja1JlZGlyZWN0JmRvTm90TG9nQ2xpY2s9dHJ1ZQ=='
}
]
var getCourse = function(args){
	var id = args.id;
	return coursesData.filter(course => {
		return course.id == id;
	})[0];
}
var getCourses = function(args){
	if(args.topic){
		var topic = args.topic;
		return coursesData.filter(course = course.topic === topic);
	} else {
		return coursesData;
	}
}
var root = {
	course: getCourse,
	courses: getCourses
};

var app = express();
app.use('/graphql', express_graphql({
 schema: schema,
 rootValue: root,
 graphiql: true
}));
app.listen(8000, () => console.log('Express GraphQL Server Now Running On 192.168.34.10:8000/graphql'))
query getSingleCourse($courseID: Int!) {
 course(id: $courseID) {
  title
  author
  description
  topic
  url
 }
}

{ 
 "topic":"Node.js"
}

$ curl -XPOST -H “Content-Type:application/json” ‘http://192.168.34.10:8000/graphql’ -d ‘{“query”: “query getSingleCourse($courseID:Int!){course(id:$courseID){title author description topic url}}”, “variables”: {“courseID”:1}}’
{“data”:{“course”:{“title”:”初めてのGraphQL ―Webサービスを作って学ぶ新世代API”,”author”:”Eve Porcello”,”description”:”本書で紹介するGraphQLは2015年にFacebookによって公開されたRESTとは異なるアプローチのアーキテクチャです。”,”topic”:”GraphQL”,”url”:”https://www.amazon.co.jp/%E5%88%9D%E3%82%81%E3%81%A6%E3%81%AEGraphQL-%E2%80%95Web%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%82%92%E4%BD%9C%E3%81%A3%E3%81%A6%E5%AD%A6%E3%81%B6%E6%96%B0%E4%B8%96%E4%BB%A3API-Eve-Porcello/dp/487311893X/ref=sr_1_1?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&dchild=1&keywords=graphql&qid=1633041782&sr=8-1″}}}

query getCourses($topic: String!) {
 courses(topic: $topic) {
  title
  url
 }
}

{
  "topic": "GraphQL"
}

{
“errors”: [
{
“message”: “course is not defined”,
“locations”: [
{
“line”: 2,
“column”: 2
}
],
“path”: [
“courses”
]
}
],
“data”: {
“courses”: null
}
}

なんやろう、ようわからんね

[pickr] color pickerを実装したい

RGBを入力するのは、RGBを調べるという手間が入るので、color pickerを実装したい。
pickrというライブラリがある様なので、それを使う。

$ npm install @simonwep/pickr

githubそのままですが、

<!DOCTYPE html>
<html lang="en">
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta charset="UTF-8">
	<title>Document</title>
	<link href="/node_modules/@simonwep/pickr/dist/themes/classic.min.css" rel="stylesheet">
	<link href="/node_modules/@simonwep/pickr/dist/themes/monolith.min.css" rel="stylesheet">
	<link href="/node_modules/@simonwep/pickr/dist/themes/nano.min.css" rel="stylesheet">

	<script src="/node_modules/@simonwep/pickr/dist/pickr.min.js"></script>
	<script src="/node_modules/@simonwep/pickr/dist/pickr.es5.min.js"></script>
</head>
<body>
	<div class="color-picker"></div>
	<script>
		const pickr = Pickr.create({
		    el: '.color-picker',
		    theme: 'classic', 

		    swatches: [
		        'rgba(244, 67, 54, 1)',
		        'rgba(233, 30, 99, 0.95)',
		        'rgba(156, 39, 176, 0.9)',
		        'rgba(103, 58, 183, 0.85)',
		        'rgba(63, 81, 181, 0.8)',
		        'rgba(33, 150, 243, 0.75)',
		        'rgba(3, 169, 244, 0.7)',
		        'rgba(0, 188, 212, 0.7)',
		        'rgba(0, 150, 136, 0.75)',
		        'rgba(76, 175, 80, 0.8)',
		        'rgba(139, 195, 74, 0.85)',
		        'rgba(205, 220, 57, 0.9)',
		        'rgba(255, 235, 59, 0.95)',
		        'rgba(255, 193, 7, 1)'
		    ],

		    components: {

		        // Main components
		        preview: true,
		        opacity: true,
		        hue: true,

		        // Input / output Options
		        interaction: {
		            hex: true,
		            rgba: true,
		            hsla: true,
		            hsva: true,
		            cmyk: true,
		            input: true,
		            clear: true,
		            save: true
		        }
		    }
		});
	</script>
</body>
</html>

これは凄い。使いたいな。

[three-dots] spinnerを実装してみる

Github: https://github.com/nzbin/three-dots

$ npm install three-dots –save

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link href="/node_modules/three-dots/dist/three-dots.css" rel="stylesheet">
	<style>
		.spinner {
			margin: 50px;
		}
	</style>
</head>
<body>
	<div class="spinner">
		<div class="dot-elastic"></div>
	</div>
</body>
</html>

なるほど、CSSで表現できるのね。処理に時間がかかる時に使えそうですな。

node.jsのhttpモジュールの中身ってどうなってるの?

node.jsはノンブロッキング処理

// nodeが用意しているhttpモジュール
var http = require('http');
var server = http.createServer();

// server.onでイベント待ち受け
// 引数はリクエストとレスポンスのオブジェクト
server.on('request', function(req, res){
	// httpのステータスコード200
	res.writeHead(200, {'Content-Type': 'text/plain'});
	res.write('hello world');
	res.end();
});

// サーバを待ち受け状態する
server.listen(1337);
console.log("server listening...");

httpモジュールを読み込んで、リクエストに対してレスポンスを記述している。listenはサーバのポート。
さて、この具体的に”http module”って何? 公式ドキュメントを見ます。

HTTP | Node.js
https://nodejs.org/api/http.html#http_http
– Class: http.Agent
— new Agent([options]), agent.createConnection(options[, callback]), agent.keepSocketAlive(socket), agent.reuseSocket(socket, request), agent.destroy(), agent.freeSockets, agent.getName(options), agent.maxFreeSockets, agent.maxSockets, agent.requests, agent.sockets
– Class: http.ClientRequest
— Event: ‘abort’, Event: ‘connect’, Event: ‘continue’, Event: ‘information’, Event: ‘response’, Event: ‘socket’, Event: ‘timeout’, Event: ‘upgrade’, request.abort(), request.aborted, request.end([data[, encoding]][, callback]), request.flushHeaders(), request.getHeader(name), request.maxHeadersCount, request.path, request.removeHeader(name), request.reusedSocket, request.setHeader(name, value), request.setNoDelay([noDelay]), request.setSocketKeepAlive([enable][, initialDelay]), request.setTimeout(timeout[, callback]), request.socket, request.writableEnded, request.writableFinished, request.write(chunk[, encoding][, callback])
– Class: http.Server
— Event: ‘checkContinue’, Event: ‘checkExpectation’, Event: ‘clientError’, Event: ‘close’, Event: ‘connect’, Event: ‘connection’, Event: ‘request’, Event: ‘upgrade’, server.close([callback]), server.headersTimeout, server.listen(), server.listening, server.maxHeadersCount, server.setTimeout([msecs][, callback]), server.timeout, server.keepAliveTimeout
– Class: http.ServerResponse
— Event: ‘close’, Event: ‘finish’, response.addTrailers(headers), response.cork(), response.end([data[, encoding]][, callback]), response.flushHeaders(), response.getHeader(name), response.getHeaderNames(), response.getHeaders(), response.hasHeader(name), response.headersSent, response.removeHeader(name), response.sendDate, response.setHeader(name, value), response.setTimeout(msecs[, callback]), response.socket, response.statusCode, response.statusMessage, response.uncork(), response.writableEnded, response.writableFinished, response.write(chunk[, encoding][, callback]), response.writeContinue(), response.writeHead(statusCode[, statusMessage][, headers]), response.writeProcessing()
– Class: http.IncomingMessage
— Event: ‘aborted’, Event: ‘close’, message.aborted, message.complete, message.destroy([error]), message.headers, message.httpVersion, message.method, message.rawHeaders, message.rawTrailers, message.setTimeout(msecs[, callback]), message.socket, message.statusCode, message.statusMessage, message.trailers, message.url
– http.METHODS
– http.STATUS_CODES
– http.createServer([options][, requestListener])
– http.get(options[, callback])
– http.get(url[, options][, callback])
– http.globalAgent
– http.maxHeaderSize
– http.request(options[, callback])
– http.request(url[, options][, callback])

主に(1)agent, (2)client request, (3)server, (4)server response, (5)incoming responseを提供しています。

apacheのgit hubを見ます。 https://github.com/apache/httpd
apacheのモジュールと比べると大分シンプルなように見えるが、それにしても、量的にボリュームがあるな。
あれ、待てよ、各言語やフレームワークでビルトインサーバーの機能があるけど、あれって、nodeのhttpモジュールのように、requestやresponseを各言語でserver機能として書いているってこと??
こりゃ参ったね。。 何をやっても、結局、C言語やらないと駄目って結論になるな。

npmでReact.jsの環境を作る

react-calendarがnpmなので、npmで環境を作ります。

$ npm init
$ npm install –save-dev webpack webpack-cli webpack-dev-server
$ npm install –save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader

ここまでは、これまでやってきた通り

$ npm install –save-dev react react-dom
npm ERR! code ENOSELF
npm ERR! Refusing to install package with name “react” under a package

?? package.jsonのnameがreactで同じだからインストールできないとのこと
“name”: “react1” に変更して、再度実行

$ npm install –save-dev react react-dom

続いてwebpackの設定

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');

module.exports = {
	context:math.josin(__dirname, "src"),
	entry: "./js/client.js",
	module: {
		rules: [{
			text: /\.jsx?$/,
				exclude: /(node_modules|bower_components)/,
				use: [{
					loader: 'babel-loader',
					options: {
						presents: ['@babel/preset-react', '@babel/preset-env']
					}
				}]
		}]
	},
	output: {
		path: __dirname + "/src/",
		filename: "client.min.js"
	},
	plugins: debug ? [] : [
		new webpack.optimize.OccurrenceOrderPlugin(),
		new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false}),
	]
};

./src/index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>React</title>
	<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/cosmo/bootstrap.min.css" type="text/css" rel="stylesheet"/>
</head>
<body>
	<div id="app"></div>
	<script src="client.min.js"></script>
</body>
</html>

ここまでで、Reactの環境構築完了!?

import React from "react"
import ReactDOM from "react-dom"

class Layout extends React.Component {
	render(){
		return (
			<h1>Welcome</h1>
		);
	}
}

const app = document.getElementById('app');
ReactDOM.render(<Layout/>, app);

[vagrant@localhost react]$ webpack –mode development
Hash: 12eaf7dc67869ad64caf
Version: webpack 4.41.2
Time: 1874ms
Built at: 2019-11-20 15:39:17
Asset Size Chunks Chunk Names
client.min.js 1.08 MiB main [emitted] main
Entrypoint main = client.min.js
[./js/client.js] 2.69 KiB {main} [built]
+ 11 hidden modules

何言いいいいいいいいいいいいいい

npm i –save-devの “–save-dev”とは?

–save-dev は、ローカルインストール
-g がグローバルインストール
-gをつけないと、ローカルインストールになる

ローカルインストールの場合は、node_modulesにパッケージがインストールされる
ローカルに入れると、package.jsonのdevDependenciesに追記される

webpackとは?

WebpackはNode.jsでサーバーサイドで動かすモジュールハンドラー
-npmはJSライブラリのバージョン管理
-Bowerはフロントエンドのライブラリ管理
-Gulp:タスクランナー
-webpackはJSファイルのコーディングで手助け(JS,CSSのバンドリング)
https://webpack.js.org/

ん?npmとは違うのね。
Webpackもlessやsassのコンパイラツールのようなもの。
え?それなら、gulpはいらない??
gulpはsassのコンパイル

webpackは自分で書いたJSとライブラリのjsを一つにまとめる
JSで読み込むライブラリもまとめる
JS, CSS、画像ファイルをDataURI(base64)で一つのjsにまとめる

うん、なんかイマイチよくわからない。
複数のJSファイルをまとめられる、ってことはわかった。
Babelも用いる

とりあえず、npm initから
[vagrant@localhost front]$ npm init -y
Wrote to /home/vagrant/front/package.json:

{
“name”: “front”,
“version”: “1.0.0”,
“description”: “”,
“main”: “index.js”,
“scripts”: {
“test”: “echo \”Error: no test specified\” && exit 1″
},
“keywords”: [],
“author”: “”,
“license”: “ISC”
}

# インストール
$ npm i -D webpack webpack-cli

main.js

import { hello } from "./sub";

hello();

sub/sub.js

export function hello(){
    alert("hello method exection");
}

[vagrant@localhost front]$ npx webpack
Hash: e9a08af5f50ea936c82f
Version: webpack 4.41.2
Time: 163ms
Built at: 2019-11-19 23:43:38
Asset Size Chunks Chunk Names
main.js 982 bytes 0 [emitted] main
Entrypoint main = main.js
[0] ./src/index.js + 1 modules 104 bytes {0} [built]
| ./src/index.js 41 bytes [built]
| ./src/sub.js 63 bytes [built]

WARNING in configuration
The ‘mode’ option has not been set, webpack will fallback to ‘production’ for this value. Set ‘mode’ option to ‘development’ or ‘production’ to enable defaults for each environment.
You can also set it to ‘none’ to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="main.js"></script>
</head>
<body>

</body>
</html>

なんだこりゃ、あーこれか。webpackで書かれてたのか。なるほどねー
main.js

!function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=0)}([function(e,t,r){"use strict";r.r(t),alert("hello method exection")}]);

puppeteerを入れよう

$ npm install –save puppeteer

main.js

const puppeteer = require('puppeteer');
const url = 'http://www.google.co.jp';

(async function(){
	const browser = await puppeteer.launch();
	const page = await browser.newPage();
	const response = await page.goto(url);

	await browser.close();
})();

[vagrant@localhost ~]$ node main.js
(node:9969) UnhandledPromiseRejectionWarning: Error: Failed to launch chrome!
/home/vagrant/node_modules/puppeteer/.local-chromium/linux-662092/chrome-linux/chrome: error while loading shared libraries: libXss.so.1: cannot open shared object file: No such file or directory

TROUBLESHOOTING: https://github.com/GoogleChrome/puppeteer/blob/master/docs/troubleshooting.md

at onClose (/home/vagrant/node_modules/puppeteer/lib/Launcher.js:342:14)
at Interface.helper.addEventListener (/home/vagrant/node_modules/puppeteer/lib/Launcher.js:331:50)
at Interface.emit (events.js:187:15)
at Interface.close (readline.js:379:8)
at Socket.onend (readline.js:157:10)
at Socket.emit (events.js:187:15)
at endReadableNT (_stream_readable.js:1094:12)
at process._tickCallback (internal/process/next_tick.js:63:19)
(node:9969) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:9969) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

あれれ

SyntaxError: Use of const in strict mode.

JavaScript has introduced const and let in ECMAScript 2015, which is relatively recent. This is enabled by default in Node.js since Node.js 4.x.

$ git clone git://github.com/creationix/nvm.git ~/.nvm
$ source ~/.nvm/nvm.sh
$ nvm help
$ nvm ls-remote
[root@localhost vagrant]# nvm install v8.16.0
Downloading and installing node v8.16.0…
Downloading https://nodejs.org/dist/v8.16.0/node-v8.16.0-linux-x64.tar.xz…
######################################################################## 100.0%
Computing checksum with sha256sum
Checksums matched!
Now using node v8.16.0 (npm v6.4.1)
[root@localhost vagrant]# node -v
v8.16.0

[root@localhost test]# node chromeTest.js
/home/vagrant/local/app/test/chromeTest.js:3
var By = webdriver.By;
^

ReferenceError: webdriver is not defined
at Object. (/home/vagrant/local/app/test/chromeTest.js:3:10)
at Module._compile (module.js:653:30)
at Object.Module._extensions..js (module.js:664:10)
at Module.load (module.js:566:32)
at tryModuleLoad (module.js:506:12)
at Function.Module._load (module.js:498:3)
at Function.Module.runMain (module.js:694:10)
at startup (bootstrap_node.js:204:16)
at bootstrap_node.js:625:3

What…