12/14勉強会

1. node.js入門
武藤 梨沙

2. 勉強会の参加ありがとうございます！
10/12 node.jsとは＆環境構築
11/9 文法基礎
12/14 APIを作る
node.js入門スケジュール

3. この勉強会ではこちらのUdemy講座をもとに
進めていきます
振り返り時には動画を見るのがおすすめです！
参考〜Udemy講座

4. 10/12 node.js入門①
node.jsとは
環境構築
インターネットが利用できる個人PC
社用PCはアクセス制限の可能性があるので注意！
必要なもの

5. node.jsとは
サーバサイドで動くJavaScriptのこと
（正確にはJSをサーバサイドで動作させるプラット
フォーム）
大量アクセスに強い、リアルタイム処理が可能とい
うメリットからサーバサイド言語に選択されるよう
になった

6. node.js活用例
BFF（Backend For Frontend）
AWS Lambda
フロントエンド（クライアント）のAPI呼び出しを
まとめてあげるバックエンド
https://techblog.zozo.com/entry/zozo-aggregation-api-bff
サーバレス構成でよく使われるLambdaでは
初動が早いnodeがよく使われます
（pythonもよく使われます）

7. node.js環境構築
node.jsインストール
https://nodejs.org/ja/
推奨版をダウンロード
インストーラーに従ってインストール
ターミナルからnode --version実行
VSCodeインストール
https://code.visualstudio.com
stableをダウンロード
1.
a.
b.
c.
d.
2.
a.
b.

8. node.jsを実行してみる
ターミナルで「node」と入力しEnter
定数を宣言する
const key = value
keyでEnter
変数を宣言、上書きする
let flag = false
flag = key ? false : true
環境変数を取得する
process.env.PATH
1.
2.
a.
b.
3.
a.
b.
4.
a.

9. 11/9 node.js入門②
node.js文法基礎
Expressインストール＆Webサーバ起動
インターネットが利用できる個人PC
社用PCはアクセス制限の可能性があるので注意！
必要なもの

10. ワークスペースを作る
これからnode.jsファイルを作成する
ワークスペースのディレクトリを作成しましょう
ディレクトリ名は英字でお願いします
例：~/node-handson

11. const today = () => {
const date = new Date();
return
`${date.getFullYear()}/${date.getMonth()}/${date.getDate()}`;
}
console.log(`今日は${today()}です`);
jsファイルを作成して実装
簡単なプログラムを書いてみよう

12. const formatDate = (date) => {
return
`${date.getFullYear()}/${date.getMonth()}/${date.getDate()}`;
}
const today = new Date();
console.log(`今日は${formatDate(today)}です`);
関数に引数を渡す
今日の日付と日付を整形する部分に分けます

13. Expressインストール&サーバ起動
expressインストール
npm init
npm install express
expressページにあるコードをコピペ
https://www.npmjs.com/package/express
node main.jsでサーバ起動！

14. 今日の日付を返すようにする
formatDateをエクスポート
module.exports = formatDate
コントローラーで上記をインポート
const formatDate = require('./date')
今日の日付をコントローラーから返却
res.send(`今日は${formatDate()}です`)

15. 12/15 node.js入門③
mysqlインストール＆テーブル作成
Node.jsからDB接続するAPI作成
インターネットが利用できる個人PC
社用PCはアクセス制限の可能性があるので注意！
必要なもの

16. mysqlインストール
mac
brew install mysql
windows
インストーラーをダウンロードする
https://dev.mysql.com/downloads/installer/
インストールされていることを確認する
mysql --version

17. mysqlログイン〜テーブル作成
mysqlにログインする
mysql -u root -p
スキーマを作成する
create database node_handson;
show databases;
use node_practice;
テーブルを作成する
https://prog-8.com/docs/mysql-database-
setup

18. DBユーザー作成＆権限付与
ユーザーを作成する
create user 'nodeapi'@'localhost'
identified by 'password'
権限を付与する
grant select on node_practice.users to
nodeapi@localhost;
grant insert on node_practice.users to
nodeapi@localhost;

19. Node.jsからDBに接続＆API作成
まずはmysqlコマンドでデータを登録する
insert into users values(0, 'admin');
nodeプロジェクトにライブラリをインストール
npm install mysql2 body-parser
DB接続生成コードを書く
データ取得処理とControllerを書く
ブラウザから動作確認する
データ登録処理とControllerを書く
curlやpostmanで動作確認する

20. var mysql = require('mysql2/promise');
let client
/**
* DB接続生成
*/
const createConnection = async() => {
client = await mysql.createConnection({
host: "localhost",
port: 3306,
user: "user",
password: "password",
database: "dbname"
})
}
DB接続生成コード

21. /**
* ユーザー一覧取得
* @returns ユーザー情報
*/
const getUserList = async() => {
await createConnection()
const [rows, fields] = await client.execute("select * from users")
await client.end()
return rows
}
データ取得処理

22. /**
* @Controller
* ユーザー一覧取得API
*/
app.get('/users', async(req, res) => {
const result = await getUserList()
res.send(JSON.stringify(result))
})
データ取得Controller

23. // リクエストボディ取得準備
const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({
extended: true
}));
app.use(bodyParser.json());
リクエストボディ受取処理

24. /**
* ユーザー登録
*/
const registerUser = async(userName) => {
await createConnection()
const result = await client.query(
`INSERT INTO users VALUES (0, '${userName}')`
)
await client.end()
return result
}
データ登録処理

25. /**
* @Controller
* ユーザー登録API
*/
app.post('/users', async(req, res) => {
const result = await registerUser(req.body.name)
res.send(result ? "ユーザー登録に成功しました" : "ユーザー登録に失敗しました")
})
データ登録Controller

26. 以上でハンズオン終了になります！！
Node.jsでAPI実装できました！