20210315のNode.jsに関する記事は6件です。

投稿日：2021-03-15T22:34:23+09:00

nodeのhttp-serverをローカルにインストールして、起動する

とりあえずしたい事

普通にnodeで簡易的なサーバーを立てたいけど、グローバルにインストールするのはイヤなので、
ローカルに立てるよ。

　フォルダ構成はこうしたい
プロジェクトフォルダ/
   node_modules/
   html/
       index.html
       ＜ここにhtmlをおきたい＞
　 ＜nodeのプロジェクトでよく有る、あれやこれや＞.json
　 etc...
この状態でlocalhost:8080にアクセスしたら
index.htmlが表示するようにしたい

http-serverをインストールして使えるようにする。

インストールコマンド
npm install http-server
起動
node_modules\.bin\http-server
毎回こんなコマンド叩くの嫌なので、npm scriptに入れる

package.jsonに追加
{
  "name": "×××××",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "server":"node_modules/.bin/http-server ./html", //追加 htttpルートはhtmlフォルダになる。
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "http-server": "^0.12.3"
  }
}
起動はカレントディレクトリで
npm run server

　 Tweet
Qiitaで続きを読む

投稿日：2021-03-15T17:46:12+09:00

SlackでAPIを叩くときのボットのあれこれ

slackって？

Slack は、チームとコミュニケーションを図るための新しい手段です。メールよりも速く、整理され、安全な方法で実現できます。(公式から引用)

まあこんなQiitaみてるようなエンジニアに今更いうこともないので割愛させていただきます！

Botを作ってそいつに色々吐かせよう！

みなさんWebappとか作っててお問い合わせフォームとか作るじゃないですか。
その時にわざわざメアドで送らせてたりしてませんか？（煽り）

そんなのSlackのBotにやらせるのよ！

というわけで早速解説していこうと思うのですが、、、

あの〜〜フロント周りやバック周りは各自やってくださいね、、？？

それでは本編に

SlackのAppの欄から”アプリを作る”を選択。
右上あたりにBotと書かれているアイコンがあると思うので、それをクリック。
そしたら名前つけたり、画像決めたりなどありますが、今回重要なのはそこではなく

こいつがイッチバン大事！忘れないようにコピーしてメモにペースト！！！（まあ、忘れてもすぐ確認できるんだけどね）

そのあとは、ChannelのID！
こいつもないとBotがどこに吐き出していいかわからなくて困ってしまうよなあ？？

確認方法（一番簡単だと思うもの）はWeb上でSlackに入り、チャンネルを開いたURLの最後のパスがIDになってるぜ。

終わりに

これで一応の設定は終わり。ほとんど備忘録として残しました。
みてくれてありがとう！！！！

　 Tweet
Qiitaで続きを読む

投稿日：2021-03-15T15:35:29+09:00

【JavaScript】別ファイルに関数をまとめてexportsを利用して呼び出す。

開発環境

React.js

概要

JavaScriptで関数を共通化して別ファイルにまとめたときに、HTMLのscriptタグを使い呼び出すのは面倒だと思いました。JavaScriptのexportsを使い呼び出すことができることを知りましたので記事にしておきます。

import.jsとexport.jsファイルを作成

import.jsからexport.jsの関数を呼び出していきます。
export.js
exports.criminalIsKogoro = function () {
  console.log("犯人は毛利小五郎");
}

exports.detectiveCriminal = function (name) {
  console.log("犯人は" + name);
}

const criminalIsAgasa = function () {
  console.log("犯人は阿笠だ");
}
比較するためにcriminalIsAgasaだけはexportsしないようにしておきます。
import.js
import exportFunction from 'export.jsのパスを記述'
// または
// var exportFunction = require('export.jsのパスを記述');

exportFunction.criminalIsKogoro; // "犯人は毛利小五郎"
exportFunction.detectiveCriminal("元太"); //"犯人は元太"
exportFunction.criminalIsAgasa; // error. exportFunction.criminalIsAgasa is not a function
このようにexportsをしておかないと外部のファイルから読み込むことができないことが分かりました。

参考

　 Tweet
Qiitaで続きを読む

投稿日：2021-03-15T15:35:29+09:00

【React.js】別ファイルに関数をまとめてexportsを利用して呼び出す。

開発環境

React.js

概要

React.jsで関数を共通化して別ファイルにまとめたときに、HTMLのscriptタグを使い呼び出すのは面倒だと思いました。JavaScriptのexportsを使い呼び出すことができることを知りましたので、備忘録として記事に残しておきます。

import.jsとexport.jsファイルを作成

import.jsからexport.jsの関数を呼び出していきます。
export.js
exports.criminalIsKogoro = function () {
  console.log("犯人は毛利小五郎");
}

exports.detectiveCriminal = function (name) {
  console.log("犯人は" + name);
}

const criminalIsAgasa = function () {
  console.log("犯人は阿笠だ");
}
比較するためにcriminalIsAgasaだけはexportsしないようにしておきます。
import.js
import exportFunction from 'export.jsのパスを記述'
// または
// var exportFunction = require('export.jsのパスを記述');

exportFunction.criminalIsKogoro; // "犯人は毛利小五郎"
exportFunction.detectiveCriminal("元太"); //"犯人は元太"
exportFunction.criminalIsAgasa; // error. exportFunction.criminalIsAgasa is not a function
このようにexportsをしておかないと外部のファイルから読み込むことができないことが分かりました。

参考

　 Tweet
Qiitaで続きを読む

投稿日：2021-03-15T13:05:33+09:00

Node.js開発者なら知っておきたい便利なパッケージ12選

本記事は、Indrek Lasn氏による「12 Useful Packages Every Node.js Developer Should Know」（2020年9月２日公開）の和訳を、著者の許可を得て掲載しているものです。

Node.js開発者なら知っておきたい便利なパッケージ12選

毎日の生産性を上げるNodeパッケージ

はじめに

Node.jsはコードの再利用にぴったりです。コードを再利用するための根幹となるのはNPMパッケージです。

NPMパッケージは、時間と労力を大幅に節約してくれます。日付ライブラリが必要ですか？パッケージがあります。ユーティリティライブラリが必要ですか？問題ありません。コードの問題解決が必要な時はいつでも、必要に応じたパッケージがあるでしょう。

これは、すべてのNode.js開発者が知っておくべきパッケージのリストです。このNPMパッケージは、時間を節約し、魔法のように解決する助っ人のようなものです。

1. husky

huskyはgitフックの実装を簡単にしてくれます。チームで仕事をしていて、チーム全体にコーディング規約を適用したいと思うことはありませんか？問題ありません！huskyを使えば、リポジトリにコミットしたりプッシュしたりする前に、コードを自動的にlintしてテストするように全員に要求できます。

husky ― https://github.com/typicode/husky

インストール方法

yarn add husky

使い方

huskyフックの実装例です。
// package.json
{
   "husky": {
      "hooks": {
         "pre-commit": "npm lint",
         "pre-push": "npm test"
      }
   }
}
huskyexample.json
huskyフック例

pre-commitフックは、リポジトリにコミットする前に実行されます。

pre-pushフックは、コードをリポジトリにプッシュする前に実行されます。

2. dotenv

dotenvは、環境変数を.envファイルからprocess.envにロードするゼロ依存モジュールです。コードとは別の環境に設定を保存することは、The Twelve-Factor Appの方法論に基づいています。
dotenv

インストール方法

yarn add dotenv

使い方

アプリケーションのできる限り早い段階で、dotenvを要求して設定します。

require('dotenv').config()

プロジェクトのルートディレクトリに.envファイルを作成します。NAME=VALUEの形式で、新しい行に環境固有の変数を追加します。

例：
DB_HOST=localhost
DB_USER=root
DB_PASS=s1mpl3
process.envで、.envファイルで定義したキーと値が使えるようになりました。
const db = require('db')
db.connect({
   host: process.env.DB_HOST,
   username: process.env.DB_USER,
   password: process.env.DB_PASS
})
3. date-fns

lodashに似ていますが、date-fnsは日付のためのものです。日付の操作をもっと簡単にするユーティリティ関数がたくさんあります。

date-fnsは、ブラウザやNode.jsでJavaScriptの日付を操作するため、総合的かつシンプルで一貫性のあるツールセットを提供します。
date-fns

date-fns ― https://github.com/date-fns/date-fns

インストール方法

yarn add date-fns

使い方

date-fnsライブラリの簡単な例です。
import { compareAsc, format } from 'date-fns'

format(new Date(2014, 1, 11), 'yyyy-MM-dd')
//=> '2014-02-11'

const dates = [
   new Date(1995, 6, 2),
   new Date(1987, 1, 11),
   new Date(1989, 6, 10),
]
dates.sort(compareAsc)
//=> [
//    Wed Feb 11 1987 00:00:00,
//    Mon Jul 10 1989 00:00:00,
//    Sun Jul 02 1995 00:00:00
// ]
その他の事例や使用例については、ドキュメントを確認してください。

4. bunyan

bunyan は、分かりやすくてパフォーマンスが高いNode用のJSONロギングライブラリです。

bunyan ― https://github.com/trentm/node-bunyan

インストール方法

yarn add bunyan

コツ：bunyan CLIツールは、すべてのバージョンのbunyanのログと（合理的な範囲内で）互換性があるようになっています。そのため、yarn add global bunyanでグローバルbunyanをインストールしてbunyan CLIをPATHに追加してから、ローカルbunyanをインストールして、アプリでbunyanのNode.jsライブラリを使うと良いでしょう。

使い方

bunyanはシンプルで高速なNode.jsサービス用のJSONロギングライブラリです。
// hi.js
const bunyan = require('bunyan');
const log = bunyan.createLogger({name: "myapp"});
log.info("hi");
node hi.jsを実行するとコンソールに返される内容は、次の通りです。

5. ramda

rambda は JavaScript プログラマ向けの実用的で機能的なユーティリティライブラリです。rambdaは、より純粋な機能性を重視しています。

不変性と副作用のない関数は、rambdaの設計哲学の中心です。これにより、シンプルで洗練されたコードで仕事を成し遂げられます。

rambda ― https://github.com/ramda/ramda

インストール方法

$ yarn add ramda

使い方
import * as R from 'ramda'
const greet = R.replace('{name}', R.__, 'Hello, {name}!');
greet('Alice'); //=> 'Hello, Alice!'
上のコードの例です。

6. debug

debugはNode.jsコアのデバッグ手法をモデルにした、小さなJavaScriptデバッグユーティリティです。

debug ― https://github.com/visionmedia/debug

インストール方法

$ yarn add debug

使い方

debugには、モジュール名を渡すだけでconsole.errorの装飾版を返し、debugステートメントを渡す関数があります。
const debug = require('debug');
const log = debug('http:server');
const http = require('http');

const name = 'My App name';

log('booting %o', name);

http.createServer((req, res) => {
   log(req.method + ' ' + req.url);
   res.end('debug examplen');
}).listen(3200, () => {
   log('listening');
});

// run this command in the terminal
// DEBUG=http:server node app.js
app-debug-example.js
debug例

これによりデバッグ出力を、モジュール全体だけでなく、モジュールのさまざまな部分で切り替えられます。

7. flat

flat は、ネストされたJavascriptオブジェクトを取得して平坦化します。区切りキーを使って、オブジェクトの平坦化を解除することもできます。

flat ― https://github.com/hughsk/flat

インストール方法

$ yarn add flat

使い方
const flatten = require('flat')

flatten({
   key1: {
      keyA: 'valueI'
   },
   key2: {
      keyB: 'valueII'
   },
   key3: { a: { b: { c: 2 } } }
})

// {
//    'key1.keyA': 'valueI',
//    'key2.keyB': 'valueII',
//    'key3.a.b.c': 2
// }
8. JSON5

JSON5 データ交換フォーマットはJSON* のスーパーセットで、ECMAScript 5.1のプロダクションの一部を含めるために構文を拡張し、JSONの制限の一部を緩和します。
JSON5

json5 ― https://github.com/json5/json5

インストール方法
yarn add json5
const JSON5 = require('json5')
使い方

ファイル拡張子に注意してください。JSON5は、JSONの拡張機能とスーパーセットです。
{
   // comments
   unquoted: 'and you can quote me on that',
   singleQuotes: 'I can use "double quotes" here',
   lineBreaks: "Look, Mom! \

No \\n's!",
   hexadecimal: 0xdecaf,
   leadingDecimalPoint: .8675309, andTrailing: 8675309.,
   positiveSign: +1,
   trailingComma: 'in objects', andIn: ['arrays',],
   "backwardsCompatible": "with JSON",
}
example.json5

9. ESLint

ESLintは、バグを回避し、開発チームにコーディング規約を適用する素晴らしいツールです。ECMAScript/JavaScriptコードで見つかったパターンを識別して報告します。

ESLint ― https://github.com/eslint/eslint

インストール方法・使い方

$ yarn add eslint

次に、設定ファイルの作成が必要です。

$ ./node_modules/.bin/eslint --init

その後、任意のファイルやディレクトリでESLintを実行できます。

$ ./node_modules/.bin/eslint yourfile.js

詳しくは、公式ドキュメントを確認してください。始め方と設定の例がたくさんあります。

10. PM2

PM2は、Node.jsアプリケーション用のプロダクションプロセスマネージャーで、ロードバランサーを内蔵しています。これにより、アプリケーションを永続化させ、ダウンタイムなしでリロードし、一般的なシステム管理タスクを容易にできます。

pm2 ― https://github.com/Unitech/pm2

インストール方法

$ yarn add global pm2

使い方

任意のアプリケーション（Node.js、Python、Ruby、$PATHのバイナリ等）を起動できます。

$ pm2 start app.js

アプリはデーモン化され、監視され、永続化します。プロセス管理の詳細はこちら。

アプリケーション管理

起動したアプリケーションを簡単に管理できます。実行中のすべてのアプリケーションを一覧表示する方法は次の通りです。

$ pm2 ls

pm2 ls

機能と活用方法の全リストは、公式ドキュメントを確認してください。

11. helmet

helmetライブラリは、さまざまなHTTPヘッダを設定することでExpressアプリを保護するのに役立ちます。「特効薬ではないが、助けにはなる！」

helmet ― https://github.com/helmetjs/helmet

インストール方法

yarn add helmet

使い方

helmet はConnectスタイルのミドルウェアで、Expressなどのフレームワークと互換性があります（Koaのサポートが必要な場合は、koa-helmetを確認してください）。
const express = require("express");
const helmet = require("helmet");

const app = express();

app.use(helmet());
トップレベルのhelmetの関数は、11個の小さなミドルウェアのラッパーです。言い換えれば、この2つは同等です。
// This...
app.use(helmet());

// ...is equivalent to this:
app.use(helmet.contentSecurityPolicy());
app.use(helmet.dnsPrefetchControl());
app.use(helmet.expectCt());
app.use(helmet.frameguard());
app.use(helmet.hidePoweredBy());
app.use(helmet.hsts());
app.use(helmet.ieNoOpen());
app.use(helmet.noSniff());
app.use(helmet.permittedCrossDomainPolicies());
app.use(helmet.referrerPolicy());
app.use(helmet.xssFilter());
12. compression

compressionライブラリはNode.jsの圧縮ミドルウェアです。

compression ― https://github.com/expressjs/compression

インストール方法

$ yarn add compression

使い方

このモジュールをexpressやconnectで使うには、expressミドルウェアでcompressionを呼び出すだけです。ミドルウェアを通過したリクエストは圧縮されます。
const compression = require('compression')
const express = require('express')

const app = express()

// compress all responses
app.use(compression())

// ...
おわりに

私のニュースレターでは、コンテンツの最新情報の通知を、いち早く受け取ることができます。ぜひ登録してください。

Zack Shapiroに謝意を表します。

翻訳協力

この記事は以下の方々のご協力により公開する事ができました。改めて感謝致します。

Original Author: Indrek Lasn (@lasnindrek)
Original Article: 12 Useful Packages Every Node.js Developer Should Know
Thank you for letting us share your knowledge!

選定担当: @gracen
翻訳担当: @gracen
監査担当: -
公開担当: @gracen

ご意見・ご感想をお待ちしております

今回の記事はいかがでしたか？
・こういう記事が読みたい
・こういうところが良かった
・こうした方が良いのではないか
などなど、率直なご意見を募集しております。
頂いたお声は、今後の記事の質向上に役立たせて頂きますので、お気軽に
コメント欄にてご投稿ください。Twitterでもご意見を受け付けております。
皆様のメッセージをお待ちしております。

　 Tweet
Qiitaで続きを読む

投稿日：2021-03-15T09:59:02+09:00

【Node.js】Express.jsからMySQLのデータ加工、ejsへの受け渡し

目的

現在、MySQLの店舗データを編集できるアプリケーションを作成しています。Node.jsのexpress.jsを使用し、viewにはejsを利用しています。この記事では、初学者の私がつまずいた、パラメータの受け渡しについて記述します。

ずばり「企業一覧画面から、企業に属した店舗の一覧を表示させる」処理についてです。

一連の処理は、こんな感じです

企業一覧画面（ejsで表示）
→ 店舗名のリンクをクリック
→ express.js（app.js）でデータを加工
→ 加工したデータをejsに渡す
→ ejsで表示させる

参照

・Express.js(node.js)からMySQLへの接続とCRUD操作
・[Node.js][Express]リクエストからパラメータを取得する・POSTされたデータを取得する
・for 文と push メソッドを使って配列要素を複数生成

環境と周辺構造

・local (mac Big Sur)
・AWS MySQL

基本となるデータベースとの接続やCRUD処理の書き方等については、リンク先の記事で作成しました。そちらを参考にしてください！
★Express.js(node.js)からMySQLへの接続とCRUD操作

テーブル構造

テーブルの相関関係はこのような形です。
account_masterが企業、shop_masterが企業が運営する店舗を示しています。

テーブルの関係性を簡単に表すと、
account_master.account_id = shop_master.shop_account_idです。
企業側のaccount_idは店舗側のshop_account_idと同じことを意味しています。

画面イメージ

少し雑ですが、画面のイメージは以下の通りです。
・企業一覧画面（account_master_index.ejs）

・店舗一覧画面（shop_index）

企業名リンクをクリックすると、店舗一覧画面に遷移します。

ディレクトリ構造

※現在、未完成のため一部のみ記載
account_app/
├── node_modules
├── views
│   ├── account_master_index.ejs
│   ├── edit.ejs
│   └── shop_index.ejs
├── .env
├── .gitignore
├── app.js
├── package.json
└── README.md
前提

参考サイトでは、簡易なテーブルのデータで作成されていたため、企業の一覧や、店舗の一覧は簡単に表示まで出来ました。しかし、企業に基づく店舗など関係性がちょっと複雑な場合、どう表示させればよいかが全く分かりませんでした。

先に企業一覧について、次に店舗一覧について記述します。

企業一覧画面

app.js

企業一覧画面は参考サイトを元に、テーブル名、select文を変えるだけでOKでした。※記述外の設定は参考サイトを参照ください。
//app.jsの企業一覧に関する部分
app.get('/', (req, res) => {
    const sql = "select * from account_master where is_deleted = 0";
    con.query(sql, function (err, result, fields) {
    if (err) throw err;
    res.render('account_master_index',{account_master : result});
    });
});
app.getは express.js によるアプリケーションのルート( 今回は、localhost:3000 )へのGETメソッドに対応します。con.queryでデータベースから取得します。取得するデータはconst sqlで表記した select文（解約していない企業の情報すべて）です。

例外処理を記述した後、res.renderの第一引数にデータを表示させたいテンプレートを設定し、第二引数に .ejs に渡す名前を指定します。この命名により、ejs側ではresultではなくaccount_masterを使って取得したデータを利用できます。

account_master_indx.ejs

一部抜粋した記述です。
//account_master_indx.ejsの中身
    <% account_master.forEach(function (value) { %>
    <tr>
      <td><%= account_id %></td>
  ★   <td><a href="/shop_index/<%= value.account_id %>"><%= value.account_name %></a></td>
      <td><%= value.account_email.split('*') %></td>
      <td><%= value.mail_requested %></td>
      <td><%= value.is_deleted %></td>
      <td><%= value.updated_at %></td>
      <td><%= value.account_form_url %></td>
      <td><a href="/edit/<%= value.ue_account_id %>">up</a></td>
    </tr>
    <% }); %>
参考サイトはforEachを使っていたため、そのまま使っています。<%　%>や、<%= %>で処理を書くのか、 HTML として表示させるかを書きます。

★ここで4行目に注目
<a href="/shop_index/<%= value.account_id %>"><%= value.account_name %></a>で企業 id のパラメータをURLに指定しています。後にこれと同じURLにする処理を app.js 内に if 文で記述します。

ここからが今回の記事の本題です

ポイントとしては以下のとおりです。
・企業に基づく店舗一覧をいきなり呼び出すのではなく、まず店舗の全データを出す
・配列を新たに作成する
・for文、if文で条件指定する
・加工した店舗一覧のデータをejs側で呼び出す

app.jsでデータを加工する

失敗した考え方
店舗一覧画面を出そうした際に、まず企業一覧画面と企業の編集画面を参考にしました。というのも、編集画面は企業のaccount_idを自然に渡せていたからです。~~そのため、店舗一覧画面も企業一覧と編集画面のようにaccount_idを受け渡せないかと考えました。~~

そもそも、この↑部分の認識が間違っており、正しくはexpress.js側で処理したデータをejsで表示させる。つまり、ejsからgetメソッドで表示させる場合はejsかた値を受け渡すなどは行わないです。

成功した考え方
いきなり企業に紐づく店舗一覧を、expressで記述しそれをejs側で表示させるのではなく、まずapp.js内で先に店舗の全データを出します。そのデータを使って、必要な情報だけを載せた配列を新たに作成します。作成した配列をejs側で呼び出し、表示させます。

店舗一覧画面

店舗一覧画面に関する記述は以下のとおりです。

app.js
//上部に宣言を記載
var shopDat;

//app.jsの上部で、店舗の全データを取得
con.query('select * from shop_master where is_deleted = 0;', function (error, results, fields) {
  if (error) throw error;
  shopDat = results; //shopDatに代入
});

~~(中略)~~

//企業ごとの店舗一覧を取得しshop_index.ejsで表示させるためのデータ加工
app.get('/shop_index/:shop_account_id', (req, res) => {
    let shops = []; //新たな配列を作成
    for(let i = 0; i < shopDat.length; i++){ //※shopDat.lendgthは要変更
      if (req.params.shop_account_id == shopDat[i].shop_account_id) { //URLパラメータの値を条件付け
        var target_shop = { //配列に入れるオブジェクトデータを定義
            "shop_id": shopDat[i].shop_id,
            "shop_name_jp": shopDat[i].shop_name_jp,
            "shop_name_en": shopDat[i].shop_name_en,
            "shop_account_id": shopDat[i].shop_account_id,
            "is_deleted": shopDat[i].is_deleted,
            "updated_at": shopDat[i].updated_at
        };
            shops.push(target_shop) //空の配列shopsに.pushで追加
        }
    };
    res.render('shop_index',{shop_data :shops}); //for文作成した配列をshop_dataと命名
});
先に shopDat を宣言し、そこにMySQLから店舗の全データを代入します。店舗一覧画面を表示させる箇所に、 shops という新たな空の配列を作成します。更にi番目の shopDat のデータを保持させる target_shop というオブジェクトを作成します。shops.push(target_shop)を shops という空の配列に、 for 文で作成されたオブジェクトを追加して、加工データを作成します。

この時req.params.shop_account_id == shopDat[i].shop_account_idではURLに渡すパラメータと企業に紐づく店舗の情報を一致させるために記述しています。※shop_account_idは企業のアカウント id と同じです。

req.params はリクエストされたパスからパラメータを取得するに使う文字列です。
[Node.js][Express]リクエストからパラメータを取得する・POSTされたデータを取得する

shop_index.ejs
//店舗一覧画面に関係する部分
    <% for (let i = 0; i < shop_data.length; i++) { %>
      <tr>
        <td><%= shop_data[i].shop_id %></td>
        <td><%= shop_data[i].shop_name_jp %></td>
        <td><%= shop_data[i].shop_name_en %></td>
        <td><%= shop_data[i].shop_account_id %></td>
        <td><%= shop_data[i].updated_at %></td>
        <td><a href="/edit/<%= shop_data[i].shop_id %>">更新する</a></td>
      </tr>
      <% }; %>
企業一覧画面ではforEachを使いましたが、こちらは for 文で表記しました。これで、企業に属する店舗の一覧を表示させることができました。

小技とつまずいたポイント

・出力したいデータが正しいかどうかをHTML(.ejs)でみたい
→ <%- JSON.stringify(shop_data) %>と記述することで見られます！

・JavaScriptのデータは配列[ ]の中にオブジェクト{ }をもつことができる。
→ MySQLに格納されているデータはオブジェクトだったので、連想配列かと思ってしまいましたが、JavaScriptは [{ name:aaa, email:xxx@yyyy}, { name:bbb, email:yyy@xxxx}, ｛｝....]とできるようです。（要勉強）

・forとif文をに記述するのではなく、一つづつ書くこと
→ 処理を一気に書こうとして、ほしいデータをなかなか出すことが出来ませんでした。落ち着いて出力されたデータを見ながら、一つづつ解決するほうが結果早いですね。

・app.jsにて、if文のshopDatに[ i ]をもたせること
→ iをつけることに、なかなか気がつけませんでした。

まとめ

JavaScriptを勉強しはじめて３週間ほどですが、MySQLのデータを加工を実施しました！空の配列を作って、ほしいデータを作成をすることは初めての作業でしたが、なんとかうまく出来たので良かったです。途中で、配列なのか連想配列なのか迷ったりしたため中々答えにたどり着けませんでした。これが初学者の方のためになればと思います。

また、一部未完成・不十分な記述がありますので、ご教示いただけると幸いです！

以上

　 Tweet
Qiitaで続きを読む