- 1. EXCELファイルをバックアップし、DBに格納【Node.js Express】
- 2. htmlを介さずにjsonから自動でコンテンツを作って更新するスクリプト
- 3. TypeError: validator is not a functionが解決しない
- 4. node.js(express)のパーシャルとは何なのか
- 5. node.js(express)のbody-parserを理解する
- 6. 2020年版 Node.js+Reactのインストール
- 7. Node.js + Express + passport.jsでローカルサーバーにBasic認証ページを立てる
- 8. 雑に知ってしまったDockerを知り直す ~アプリケーション持ち込み編~
- 9. anyenv&nodenvの環境で、Node.jsのバージョンアップする
- 10. どこ住み?てかSlackやってる?生後10ヶ月のエンジニアが爆速10時間でChatbot制作!
- 11. Expressを習得するためにやったことまとめ(随時更新)
- 12. THE TYPESCRIPT WORKSHOPをやる時のハマりどころ・注意どころ
- 13. Mac で nodebrew が動かない ( #node )
- 14. Alexaスキルの開発 0から公開まで
- 15. npm audit fixで解決しないとき
- 16. Node.jsでCSVファイルを読みこんでJSONデータに変換するサンプルコード
- 17. Puppeteer Tips
- 18. nvm環境のnpm自体をコマンド一発で最新化する方法
- 19. [Node.js][JavaScript]CryptoAPIの違いでハマったのでまとめ
- 20. 画像をスライダー形式にするswiperをyarnで導入するところまで
EXCELファイルをバックアップし、DBに格納【Node.js Express】
エクセルファイルをアップロードしたら、バックアップを作成し、中身のデータをデータベースに登録するAPIを作りました。また似たような作業することになりそうなので、メモ。
Node.jsとExpress、データベースはMysqlを使用#使うもの
1)multer
アップロードされたエクセルファイルを特定のファイルにコピーする。
※ただし、multipart/form-dataのみ
https://www.npmjs.com/package/multerインストール:
“`npm install –save multer“`2)sheetjs
エクセルファイルの書き換え等ができる。
今回はエクセルファイルをJSONに変換するのに使用した。
https://www.npmjs.com/package/xlsxインストール:
“`npm install –save xlsx“`#実装
“““javascript
const express = require(‘express’)
const app = express()
const models =
htmlを介さずにjsonから自動でコンテンツを作って更新するスクリプト
こんにちは、wattak777 です。
最近、必要に迫られてNode.jsを嗜むようになったのですが、とある時に「jsonで記載された元データをロードしてコンテンツとして表示し、ユーザがそのコンテンツを更新するとそのjsonを更新する」みたいなことをしようとしてNode.jsでソース一本で出来ないか?と考えたサンプルです。
ファイル構成は以下。
+
├ server.js
└ db.json“`javascript:server.js
var express = require(‘express’) ;
var url = require(‘url’) ;var app = express() ;
var json_write = {
param1_label: ”,
param1_value: ”,
param2_label: ”,
param2_value: ”
}app.get(‘/update_param’, function(req, res) {
console.log(” GET” ) ;
var url_parse = url.p
TypeError: validator is not a functionが解決しない
#とりあえず初心者向けの書籍を一冊購入。
とにかく写経でもいいから一通りのアプリを作成したいと動きをメモしつつとりあえず書き上げた。
さあ動かしてみよう#しかしコンソールログに出たのは・・・
“`
TypeError: validator is not a function
“`#いやいや読み込んでますけど汗
“`js
var validator = require(‘express-validator’);
// ~~~~~~
// (中略)
// ~~~~~~
app.use(validator());
“`※本当はvar使っちゃいけないけどとりあえず写経なので、
あとサンプルのソースと比較しやすいためこのままにしてます#どこが違うのか比較しよう
ソースは同じ汗となると、インストールしたモジュールのバージョンがちがうのか?
以下自分のpackage.json
“`json:package.json
{
“name”: “mini-board-2”,
“version”: “0.0.0”,
“private”: true,
“scri
node.js(express)のパーシャルとは何なのか
#パーシャルとは
レンプレート内から更に読み込んで使われる、テンプレート内の小さな部品を”パーシャル”と呼びます。
node.jsのテンプレートはejsなどがあります。#パーシャルの例
“`html<%= key %> <%= val %> “`
これはテーブル内の一部の例で
これをテンプレートで読み込んで使います。#パーシャルの使い方
テンプレート内で下のように書いて読み込みます。
“`html
<%- incluede('パーシャルのファイル名',{受け渡す値}) %>
“`実際の例
“`html
<%- incluede('data_item',{key:key, val:data[key]) %>
“`
node.js(express)のbody-parserを理解する
#bodyParserとは、
HTML(ejs)のformのinputに入力された値を受け取れるようにするものです。例↓
“`html
“`
この例の場合は、
“`html
“`の値を取得します。
#inputの値をどう取得するの?
inputにnameを指定して、javascriptで
“`javascript
req.body.[inputのnameに指定した値]
“`というように書く事でinputの値を受け取れるようになります。
上の例のnameにmessageを指定した例ですと、下のように書けば値を受け取れます。
“`javascript
req.body.message
“`body-
2020年版 Node.js+Reactのインストール
# 1.概要
MacbookにNode.jsとReactをインストールし、アプリを開発するための環境を構築するための手順について。
# 2.前提条件
##作業日時
– 2020年2月## 環境
– MacBook Pro
– macOS Catalina# 3.インストール手順
## Node.jsをインストールする以下の流れでインストールする。
1. Homebrewのインストール
2. nodebrewのインストール
3. Node.jsのインストール### 参考記事
– MacにNode.jsをインストール
– https://qiita.com/kyosuke5_20/items/c5f68fc9d89b84c0df09## yarnのインストール
npmの代わりのパッケージマネージャ。
`yarn add`でパッケージをインストールできる。“`console
$ npm install -g yarn
“`## Reactのアプリの作成
以下コマンドでReactアプリのフォルダが作成される。
Typescriptで開発を行
Node.js + Express + passport.jsでローカルサーバーにBasic認証ページを立てる
# 経緯
FlutterアプリのWebViewからBasic認証ページの接続テストをしたかったので、サンプルとしてローカルでBasic認証ページを作ることにした。
[FlutterのWebViewからBasic認証ページにアクセスする – Qiita](https://qiita.com/unsoluble_sugar/items/84920666ebd58c44782a)ローカルサーバーを立てるだけならVSCodeのLive Serverでサクッとできたのだが、Basic認証のかけ方がいまいちわからなかったため、Node.js + Express構成を使うことにした。
環境はMacでnpmコマンドが使用できる前提。
# Passport-HTTPのインストール
認証まわりが簡単に実装できる[passport.js](http://www.passportjs.org/)というライブラリを使ってみた。[Passport-HTTP](http://www.passportjs.org/packages/passport-http/)をインストールする。
“`
$ npm
雑に知ってしまったDockerを知り直す ~アプリケーション持ち込み編~
## おさらい
第2回です。
前回の投稿は[こちら](https://qiita.com/wol/items/487a9d12aa8ec3001efc)
前回はnginxのイメージをpullして来てコンテナ起動。
ポートフォワードしてウェルカムページを表示させるまでやりました。## 今回やりたいこと
1. ローカルで適当にアプリケーションを用意する
2. どうにかしてそのアプリケーションをコンテナの中にぶちこむ
3. ホスト側から起動したアプリケーションへアクセスできるようにする## アプリケーションを用意
Nodeとgithubを勉強したときに作った、first-stepっていうオシャレ気取った名前のリポジトリが放置されていたので、これを再利用します。
せっかくなので触ったこと無いReactへ転生。この辺のステップは本題と外れてしまうので割愛。
“`$ npm start“`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278872/eb174b10-6111-fd0
anyenv&nodenvの環境で、Node.jsのバージョンアップする
Node.jsのバージョンを複数保持し、コマンドひとつでバージョンを切り替えるanyenvを現場で使用しています。
厳密には、`anyenv`の中で`nodenv`というソフトウェアを動かすことで、`Node.js`のバージョンを切り替えているのですが、今回初めての案件で新規作成を手掛けたので、忘れないようにメモとして残しておこうと思います。ついでに、gulpを使用できるようになるところまで、解説します。
#開発環境
・anyenvとnodenvでNode.jsのバージョン管理をしている。
・`gulp`を使うためにNode.jsを使用。
・既にanyenvとnodenvは導入済み。#新規作成のおおまかな手順
・anyenvやnodenvを使用して、Node.jsのバージョンを最新にする
・npmのバージョンを最新にする
・gulpってコマンドを使用できるようにする
↓ 確認
・npm init -y
・npm install -D gulp(ここでnpm auit fixが出なかったら素敵)
・gulp -v#やってみる
実際にファイルを新規作成して作ってみます。#
どこ住み?てかSlackやってる?生後10ヶ月のエンジニアが爆速10時間でChatbot制作!
[前置き]
閲覧ありがとうございます!エンジニア歴10ヶ月のひよっこwebでべろぱーです。
本投稿はエンジニア歴3年未満程度の初学者向け投稿になります。
個人で何か作りたいけど、丁度いい規模感のアイデアが思い付かない…
そんなあなたに!お手軽なChatbotの制作をオススメします!
というわけで作ってみましたー!↓↓##作ったもの -What I made-
###??地域の飲食店検索Slackチャットボット「GourmetNav」 ??
**Slack上で動作するチャットボット。**
**「駅名」+ 「空白」 + 「店名に関わるキーワード」**を入力すると、その地域の飲食店名とお店のURLを飛ばしてくれる(σ・ω・)σ
![gourmetnav.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507577/7aec46d0-1bf9-6ec1-1a07-d7762f46a213.gif)##おもしろいところ
– 地図を見ずに、**駅名**と**なんとなくの店名**だけで検索できる。**S
Expressを習得するためにやったことまとめ(随時更新)
Node.jsのフレームワーク、Expressを習得するためにやったことをここにまとめていきます。(随時更新!)
### 前提知識
Expressを使うためにはNode.jsのインストールが必要
※参考:[初めてのNode.js:インストール確認、REPL、Hello worldまで](https://www.i-ryo.com/entry/2018/11/21/223710)
REST APIとは何か
※参考:[REST APIとは何かを調べまくったらようやくイメージができてきたのでまとめた](https://www.i-ryo.com/entry/2020/02/04/083542)
### Express事始め
まず、Expressとはなんなのか。JSフレームワークとの役割の違い。
※参考:[https://www.i-ryo.com/entry/2020/02/13/083521](https://www.i-ryo.com/entry/2020/02/13/083521)
次はExpressでハロワ(Hello World)する予定。
随時更新していきま
THE TYPESCRIPT WORKSHOPをやる時のハマりどころ・注意どころ
## 概要
[THE TYPESCRIPT WORKSHOP](https://cdkworkshop.com/20-typescript.html)をやった時に感じた、ハマりどころ・注意どころをメモしました。## Node.jsの相互互換性問題
JavaScriptでlambdaを書く部分を以下のように修正しないと`SyntaxError`がでます。
lambdaの設定で、`runtime: lambda.Runtime.NODEJS_10_X`としているので、Node.jsが`ES Moduleのsyntaxを理解できないことが原因です。### Before
“`js:hitcounter.js
import { DynamoDB, Lambda } from ‘aws-sdk’;
“`### After
“`js:hitcounter.js
const { DynamoDB, Lambda } = require(‘aws-sdk’);
“`## DynamoDBは`cdk destroy`で削除されない
気をつけましょう。
これはデフォルトの挙動で、`R
Mac で nodebrew が動かない ( #node )
brewが使えないというひどい罠が。
# Error
“`
nodebrew list
No such file or directory at /usr/local/bin/nodebrew line 575.
“`# Resolve
https://github.com/hokaccha/nodebrew#install
“`
brew uninstall nodebrew
“`“`
curl -L git.io/nodebrew | perl – setup
“`“`
export PATH=$HOME/.nodebrew/current/bin:$PATH
“`“`
not installedcurrent: none
nodebrew ls
“`# Original by Github issue
https://github.com/YumaInaura/YumaInaura/issues/2988
Alexaスキルの開発 0から公開まで
初めて **Alexaスキル** の開発を始めてから公開するまでの流れについて。
# フローチャートを作成する
事前に Alexaにどう発話したらどう分岐するかをまとめたフローチャートを作っておくとフローが整理できて開発が捗るので以下のような感じで作成します。(黒塗り多くてすみません)![alexa-flowchart.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416295/eb926020-0439-8afd-7548-05d19c892f89.png)
# alexa developer console への登録
[amazon alexa](https://developer.amazon.com/ja-JP/alexa)にアクセスし、アカウントを作成してログインします。
「スキルの作成」ボタンを押し、好きなスキル名を入力して作成。スキルを作成した後、ビルドタブの左メニューから「エンドポイント」を選択し、表示される **スキルID** を覚えておきましょう。
![screens
npm audit fixで解決しないとき
随分古いバージョンのパッケージを使っていたシステムで、node.jsをアップデートをしたときに
“`shell
found 98 vulnerabilities (39 low, 13 moderate, 46 high) in 10622 scanned packages
94 vulnerabilities require semver-major dependency updates.
4 vulnerabilities require manual review. See the full report for details.
“`のような文言が出力されましたので、その対応を行います。
大体の場合は『`npm audit fix –force`』をすれば解決するようですが、今回は一部上手くいかないものがあったので、直接ファイルをイジイジして治すことにします。
(この辺はあまり自信がないので、もしかしたら間違えてるかもです)
# どのパッケージが問題なのか調べる
まずは、問題の原因であるパッケージの確認を行います。
“`shell
$ npm a
Node.jsでCSVファイルを読みこんでJSONデータに変換するサンプルコード
Node.jsでShift_JIS で書かれたCSVファイルを取り扱う必要があり、その際の備忘メモ。
**JSON変換までできた方が便利**なので、[csvtojson](https://www.npmjs.com/package/csvtojson) を使ってみました。## 要約
– csvtojsonを使えば、標準的なCSVファイルを**簡単にJSONデータ**に変更できました。
– Node.jsはファイル読み込みは基本UTF-8を想定しているようですが、UTF-8以外の場合は [iconv-lite](https://www.npmjs.com/package/iconv-lite)をかましてShift_JIS→UTF-8変換してあげればOKでした。
– **csvtojson はコマンドラインからも呼び出せる**ので、コマンドラインでCSV→JSON変換できるのはなにげに便利です。## 前提や環境
“`console
$ sw_vers
ProductName: Mac OS X
ProductVersion: 10.15.3
BuildVersion
Puppeteer Tips
## Puppeteer?
読み方は「**ぱぺてぃあ**」。
Node.jsのライブラリでChromeを操作しDOMの要素を取得、ステータスコードを取得、レスポンスタイムを計測・・等々できます。
※Chromeのデベロッパーツールで見れる情報は(たぶん)全てpuppeteerで取得できる## Sample
「サイト内の各ページのタイトルが予測した値になっているか?」という自動テストをPuppeteerを利用して処理してみます。
大まかな流れは下記のようになります。
1. テストデータをCSVファイルから読み込み
2. 1行ずつループし、取得した値と予測した値を比較
3. 結果表示### Code
https://github.com/yusukeito58/puppeteer-template
“`shell
$ tree -I node_modules
.
├── package.json
└── src
├── data
│ └── title.test.csv
├── lib
│ └── output.js
nvm環境のnpm自体をコマンド一発で最新化する方法
## コマンド一発でnpm自身を最新化する方法
nvm環境でnpm自体のアップデートがうまく行かなかったのでコマンド一発で成功する方法を公開しときます
### やり方
以下、bashコマンドラインで実行するだけの簡単なお仕事
ヒアドキュメント使ってるのでcatから下部のEOFまでコピーしてね
(Macの場合は「$PROGRAMFILES」環境変数とれないので書き換えればOK)“`
$ cat <npm_update.sh && chmod +x npm_update.sh && ./npm_update.sh && rm -rf ./npm_update.sh
#!/usr/bin/bash
cd “$PROGRAMFILES”/nodejs
rm npm npx npm.cmd npx.cmd
mv node_modules/npm node_modules/npm2
node node_modules/npm2/bin/npm-cli.js i -g npm@latest
rm -rf node_modules/npm2/
EOF
“`### やって
[Node.js][JavaScript]CryptoAPIの違いでハマったのでまとめ
#Overview
Node.jsはJavaScriptで書けるから、Webの中では”Write once, run anywhere”的な美味しいこともある。
しかし、各環境にbuiltinされているAPIを使ったときはそうはいかない時がある。
今回は暗号化のCryptoで不覚にも1日ハマったのでその記録を残しておく。#Target reader
– Node.jsで暗号化したデータをブラウザで復号化したいと思っている方。
#Prerequisite
– AESの概要は理解していること。
– 今回はAES256-CBCを使用する。
– 記憶が正しければAES192はブラウザのAPIでサポートされていない旨のエラーが出たため。#Body
##どうして片方のAPIで統一しないの?
これはいい質問だ。実際のところ、Node.jsのcryptoをブラウザで実行したことがある。
どうして採用されなかったのか?**なぜなら100KBほどバンドルサイズが増えたから。**
詳しく知りたい場合は、この方の記事を読んでみるといいかもしれない。
https://enginee
画像をスライダー形式にするswiperをyarnで導入するところまで
## yarnとは?
JavaScript(node.js)のパッケージマネージャで、2016年にFaceBookが公開したものです。
他にもパッケージマネージャーとしては**「npm」**とう言うものものありますが、今回は、yarnを使います。yarnの仕組みは簡単で、$ yarn add 〇〇と言う形で、使いたいパッケージをインストールすると、package.jsonと言うファイルに、インストールしたパッケージに関する情報が記載され、$ yarn installを実行すると、開発環境下にパッケージ(関係するファイル一式)がインストールされ、パッケージを使うことができます。$ yarn installを実行すると、yarn.lockと言うファイルが生成され、固定されます。
実は、gemの管理とよく似ていて、gemの場合は、Gemfileに記載されたgemは、どの環境でも$ bundle installすればgem同士の互換性など考慮して良しなに調整してインストールしてくれて使えるようになりますが、yarnも似たような管理方法で、package.jsonに記載されているパッケ