- 1. JavaScriptワンライナー #1 任意長のランダムな文字列を作る
- 2. TypeScriptでFormDataを良い感じに受け渡ししたい
- 3. Node.js のバージョン管理を nodebrew で行った際、VS Code に反映されなかった
- 4. Promise.all()内で軽率にawaitしてはいけない
- 5. Node.js(データベースを用いたWebアプリケーション)
- 6. 【JWT(JSON Web Token)】Node.jsで実際に使ってみた
- 7. Node.jsの基本的な使い方
- 8. Express+MySQLでログインする
- 9. CloudFunctionsで一定時間経過後に処理を実行する方法
- 10. Node.jsでルーティングを行う方法と、やってはいけないこと
- 11. Alibaba Cloud API Gateway を使ってみる
- 12. Javascriptで学ぶHTTP通信
- 13. Rails 6+Webpacker で Yarn, Node.js 環境をHerokuでもMacでも同じにする
- 14. Node.jsのEventEmitterについていろいろ
- 15. Node.jsで複数の画像をWebPに一度に変換する
- 16. LINE Bot開発 簡単な会話ができるようになるまで(前編)
- 17. Tensorflow.jsをNodejsで高速化しようとしたが、旧型CPUでは、WebGLの方が高速だった話
- 18. Node – Error: unable to verify the first certificate
- 19. Windows 10 + nodejs + selenium-webdriver + geckodriver で headless firefox を試してみる
- 20. mongoDB Atlas+mongooseでWebアプリをどうやって始めるんや?
JavaScriptワンライナー #1 任意長のランダムな文字列を作る
シェル芸ならぬワンライナー芸@JavaScriptで色々やってみようという試みです。
—
今回はテストデータを作るときに役に立つかもしれない「任意長のランダムな文字列を作る」というのをやってみます。
「ランダムな文字列を作る」というのをざっと調べるとよく見つかるコードにこんなのがあります。“`js
Math.random().toString(36).slice(-8);
“`– 乱数を発生させます。
– それを36進数としてパースすれば`0~9a~z`で値が表現されます。
– そのままでは先頭に`0.`というのが付いてしまうのでお尻から使えるところを拾っています。都合の良いワンライナーですので、ここから発展させてみたいと思います。
## `0.`を捨てる
“`js
Math.random().toString(36).split(‘.’)[1];
“`
– ピリオドで分割します。
– 後ろを拾います。## もっと長くしたい
このままでは得られる文字列の長さに限界があるので適当に繋げてみます。
先ずは4つぐらいかな…“`js
[0,1,2,
TypeScriptでFormDataを良い感じに受け渡ししたい
# 概要
以前こんな記事を書きました。JavaScript上でObjectをRailsで取得できる形のFormDataへ変換する
https://qiita.com/dorarep/items/f3aa1463123c1ae75879今回、似たような形でNode.js上で動くサーバサイド側へ楽にデータを受け渡ししたいので、クライアント側、サーバサイドの変換ロジックをTypeScriptで実装しました。
# 実装
クライアント側
“`ts
/**
* Convert object to FormData which backend can use.
* This function is useful for uploading files.
*
* ex)
* { id: 1, hero: { id: 1, name: ‘NewHero’ }, items: [1, 2] }
* -> FormData with following parameters
* id: 1
* hero.id: 1
* hero.name: NewHero
* items
Node.js のバージョン管理を nodebrew で行った際、VS Code に反映されなかった
## Prologue
稼働しているプロジェクトで node.js のバージョンが低く、パッケージがインストールできない問題が発生しました。
単純にバージョンをあげてもよかったのですが、以前 node.js のバージョンがチーム内で異なっていて検証がうまく進まなかったことがあったため、これを期に `nodebrew` で管理することにしました。
インストール自体はそれなりにスムーズにできたのですが、VS Code で使用した際にエラーが出たため、その辺りも含めて記載しておきます。
内容は Try&Error のため、不要な内容も入っているのでご注意ください。
最後にスムーズにいく流れを記載しています。(-> [まとめ](https://qiita.com/miiiii/items/c3dbe4d5f82595a050fc#%E3%81%BE%E3%81%A8%E3%82%81))## 環境
– macOS: 10.15.4
– terminal: iTerm
– VS Code 使用– Project概要
– パッケージマネージャ: `yarn`***
参考: h
Promise.all()内で軽率にawaitしてはいけない
# 事前知識
## Promise.all()> Promise.all(iterable) メソッドは単一の Promise を返し、これは引数 iterable の中のすべての Promise が解決されるか、引数 iterable の中に Promise がない場合に解決されます。最初に拒否された Promise の拒否理由をもって拒否されます。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/all
## JSONPlaceholder
例に用いるAPI
JSONを返してくれる
https://jsonplaceholder.typicode.com/#Promiseを返すことを意識する
Promiseを返さないとPromise.all()を使う意味が無い。。。
## 見かけ上並列で非同期処理を実行したい
下記のように、urlの配列があったとする“`js
const urls = [‘https://jsonplaceholder
Node.js(データベースを用いたWebアプリケーション)
# プログラミングの勉強日記
2020年6月18日 Progate Lv.130
Node.jsⅡ,Ⅲ##MySQL
データベースを管理するツールである。Node.jsからMySQLを操作するには、Node.jsからMySQLに接続する。そのためにmysqlパッケージを利用する。“`:ターミナル
$npm install mysql
“`“`javascript:app.js
//mysqlパッケージの読み込み
const mysql=require(‘mysql’);
//接続情報をcreateConnectionメソッドを用いて定数connectionに代入
const connection=mysql.createConnection({
//データベース名、パスワードなどを記述
});
“`##クエリの実行
`connection.query(‘クエリ’,クエリ実行後の処理)`と書くことで、Node.jsからデータベースに対してクエリを実行できる。
クエリ実行後の処理は
第1引数のerror:クエリが失敗したときのエラー情報
第2引数の
【JWT(JSON Web Token)】Node.jsで実際に使ってみた
# はじめに
認証方式の1つであるJWTについてのまとめと使用例# JWTとは
JSON Web Tokenの略
認証情報を含むJSONをbase64エンコードしたものに署名を付与したもの# 利用例
1. クライアント側から認証情報(例:ユーザー名、パスワード)をサーバーに送信
2. サーバー側で認証情報を確認し、認証OKの場合JWTを発行し、クライアント側に返却
3. クライアントは次回以降、JWTを付与したリクエストを送信
4. サーバー側はJWTを検証するなお、JWTの暗号化アルゴリズムは大きく分けて2種類ある。
– 共通鍵方式
HS256というアルゴリズムを使用する。
認証サーバとリソースサーバが同じ場合はこの方式が使われることが多い。– 公開鍵/秘密鍵方式
RS256というアルゴリズムを使用する。
認証サーバとリソースサーバが別々の場合にこの方式が使われる。
認証サーバに秘密鍵、リソースサーバに公開鍵が配置される。# JWTの構造
JWTの例は以下
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjoidGFy
Node.jsの基本的な使い方
# プログラミングの勉強日記
2020年6月17日 Progate Lv.122
Node.jsⅠ
Webアプリを作るために使われるNode.jsを学んだ。JavaScriptをサーバーサイドで動かす仕組みである。
今回はNode.jsのフレームワークであるExpressを扱う。Node.jsには便利な機能を使えるようにまとめたパッケージがあり、Expressはそのパッケージのうちの1つである。##npm
パッケージを用意するために使うシステムである。Expressをnpmからインストールするには、`npm install`コマンドを使う。“`:ターミナル(入力したらEnterを押して実行)
$ npm install express
“`
インストールしたExpressを利用するためにはパッケージの読み込みと使用する準備が必要。以下の文は定型文として覚えてOK“`javascript:app.js
const express=require(‘express’); //expressの読み込み
const app=exprss(); //ex
Express+MySQLでログインする
[前回の記事では](https://qiita.com/4201tosiyuki/items/80ee553ac42eeb323859)ユーザーtestパスワードtestのみのログインユーザーであった為、MySQLにユーザー情報を入れ、そこを参照してログインするを実装した備忘録です。
**各バージョン**
* Node v12.13.1
* express-session 1.17.1
* passport 0.4.1
* passport-local 1.0.0
* mysql 2.18.1
* bookshelf 1.2.0
* knex 0.21.1では実装手順です。
必要なモジュールをインストールします。“`:terminal
npm install i mysql knex bookshelf
“`前回記事のユーザー名・パスワードをチェックするプログラムです。
“`javascript:index.js
passport.use(new localStrategy({
usernameField:’username’,
passwordFie
CloudFunctionsで一定時間経過後に処理を実行する方法
# はじめに
CloudFunctionsで何らかの処理を実行して、その何分後かに別の処理を呼び出したいことがあります。
だけどsetTimeoutを使いたくない。事前にジョブを登録しておくわけにもいかない。そんな時に以下の方法で実装してみました。
+ cloudSchedulerに対して、実行させたい日時(例:○分後)にジョブを登録。
+ 実行時刻になると処理が呼び出される。
+ 処理が終わったら不要になったジョブを削除。
参考:[CloudSchedulerリファレンス](https://cloud.google.com/scheduler/docs/reference/rest/v1beta1/projects.locations.jobs?hl=ja)
# サンプルコード
“`javascript:index.js
const functions = require(‘firebase-functions’);
const admin = require(‘firebase-admin’);
const { google } = require(‘googl
Node.jsでルーティングを行う方法と、やってはいけないこと
##ルーティング
ルーティングとは:アクセスするパスに応じて、表示する内容や行う処理を変えること##Node.jsでのルーティングの記述方法
・Node.jsアプリのファイル構成“`
├──app.js //アプリのメインのバックエンド処理
├── public //UI(css,クライアントサイドのjavascript)を記述
│ └── css
│ └── style.css
├── routes //ルーティング処理を記述
│ └── index.js
└── views //特定のパスにアクセスした時に引き渡すファイル。テンプレートエンジンを用いて記述
├── home.ejs
├── index.ejs
├── login.ejs
└── register.ejs
“`・app.js
“`javascript
‘use strict’
//共通変数
const path = require(‘path’);
const morgan = require(‘morgan’); //ターミ
Alibaba Cloud API Gateway を使ってみる
今回は、API Gatewayを使ってみます。API Gatewayのバックエンドには、Function Computeを使ってみます。
# Function ComputeでバックエンドAPIの作成
API Gatewayのトリガーを利用するには、テンプレートを使用するのが便利です。![01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18582/87f6d2d3-4e58-d594-c523-2bedd5712d20.png)
![02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18582/bc143d75-54ef-24c7-209d-141d4f8c84b4.png)
![03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18582/4571d633-e772-763d-43d8-914427d880a8.png)
Javascriptで学ぶHTTP通信
# はじめに
本記事は、Webアプリを作るための基礎知識の習得を目的とした学習記事です。主に、
* windows上でExcelVBA等、プログラミングの基礎知識は持っているものの
* Linuxなどサーバは全く扱ったことがなくバックエンドサーバが全くのブラックボックスで
* Webブラウザの挙動がよくわからず、何を使ってどこをどう見れば理解していることになるのか不安という人を対象にしています。
まず、Webサーバを実装してHTTP通信の実体を確認していきます。
—
# 開発環境の構築
Windows PCにWebサーバを導入します。Webサーバを作るので処理系をインストール。
## nodejs
nodejsはJavascriptの処理系です。
* [nodejs公式](https://nodejs.org/ja/)からwindows用のパッケージをダウンロード
* 展開して実行
* コマンドプロンプトを開いてnodeと入力
* 終了は.exit—
## Visual Studio Code(VSCode)
VSCodeは各種プログ
Rails 6+Webpacker で Yarn, Node.js 環境をHerokuでもMacでも同じにする
Rails 6+Webpacker開発環境をJS強者ががっつりセットアップしてみた(翻訳)
のなかの「再現可能な環境: Node.jsとYarn編」。
### .nvmrc
nvmを使用してNode.jsのversionを管理する
### .yarnrc
“`bash
$ yarn policies set-version 1.22.4
“`### package.json
“`js
},
“engines”: {
“node”: “13.13.0”,
“yarn”: “1.22.4”
}
}
“`## 依存関係の自動Update
> JavaScriptやRubyの依存関係の自動アップデートについては、Renovateを一度チェックしてみることをおすすめします。### Renovate
GitHub に無料で追加できた
Node.jsのEventEmitterについていろいろ
Node.jsのEventEmitterについて書いていきます。
## EventEmitterとは
Node.jsにおいて独自のイベントを作成したいときに使われます。EventEmitterの基本的な使い方は、`on`や`once`メソッドなどを使って、イベント名を登録して、リスナーに登録したイベントが呼び出されたときに実行する処理を書いていきます。ここでいうイベントの呼び出しとは、`emit`メソッドでイベント名を指定して登録したイベントを呼び出します。
`’start’`イベントと`’end’`イベントを実装した簡単な例をやってみたいと思います:
“`:js
const { EventEmitter } = require(“events”);
const eventEmitter = new EventEmitter();eventEmitter.on(‘start’, () => {
console.log(‘start event!’);
});// This method don’t run.
eventEmitter.on(‘end’, () =
Node.jsで複数の画像をWebPに一度に変換する
既存の画像(jpgやpng)をディレクトリを分けつつコマンドで一度にWebPに変換するスクリプトを書きました。
WebPについての説明はここでは割愛します。
[公式アナウンス](https://developers.google.com/speed/webp)## 環境
* MacOS
* Node.jsのバージョン・・・12.8.1
* npmのバージョン・・・6.10.2### 前提
以下をインストール済みであることを前提としています。
* Node.js
* npm(又はyarn)## ディレクトリ構造
“`
├── node-extensions
│ └── sharp.js ← 実行するスクリプトファイル。
├── package.json
├── src
│ └── images
│ ├── original ← 元の画像を入れるディレクトリ。
│ └── webp ← 変換後の画像を入れるディレクトリ。
“`## パッケージのインストール・スクリプトの実行
### 必要なもの
* [sharp(0.25
LINE Bot開発 簡単な会話ができるようになるまで(前編)
#はじめに
[ダイエットをサポートしてくれるLINE Botを開発しました。](https://lin.ee/4CWNvQ8Lr)
AIアイスタントが、アドバイスを提案してくれます。そこでの知識をメモします。# 概要
LINE Botを開発する方法を記載しています。今回は簡単な会話botを作成します。BotはNode.jsで作ります。# 必要なスキルと環境
・Node.js/Javascriptの基本的な知識
・Githubを使ったことがある#開発の流れ
+ LINE DevelopersでLINEアカウント(以下チャンネル)を作成
+ Bot本体のプログラムを開発し、デプロイ
+ Bot本体のプログラムをカスタマイズしてデプロイするという作業を繰り返してBotを拡張していく。#開発
まずは、送信したメッセージをおうむ返ししてくれるBotを作ります。
##1.Channelを作成する
LINE Bot用のチャンネル(LINEアカウント)を作成します。無料で作成できます。
[作成方法はこちらを参考にしてください]
(https://develop
Tensorflow.jsをNodejsで高速化しようとしたが、旧型CPUでは、WebGLの方が高速だった話
Tensorflowjsで2000年からの株価を元に、新値3本値のAI予測をブラウザで行っていたが、Nodejsで高速化できないかトライしてみた。CPUは激古のi5-650。
作業手順は、こちら参照。
https://randomwalkjapan.blogspot.com/2020/06/nodejstensorflow-how-to-setup.htmlプログラムはこちら。
https://github.com/tanakayutaka/Tensorflow.js-tools-/blob/master/Nodejs%20Tensorflow%20BM%20test結論は、
NodejsでNodeジェネリックでないTensorflow処理 6分
NodejsでNodeジェネリックなTensorflow処理 CPUが古すぎて動作せずChromeでハードウエアアクセラレーションON 4分 <== 最速 ChromeでハードウエアアクセラレーションOFF 12分 ということで、最近のCPUを持っていない限り、Tensorflowをジェネリックで走らせることはできず、ただ
Node – Error: unable to verify the first certificate
Using https or wss to create a client connection. And it will create failed.
“`
Error: unable to verify the first certificate
“`Added the below code to disable the SSL check.
“`
process.env[‘NODE_TLS_REJECT_UNAUTHORIZED’] = 0;
“`https://blog.darkthread.net/blog/npm-unable-get-local-issuer-cert-issue/
https://medium.com/nodejs-tips/ssl-certificate-explained-fc86f8aa43d4
Windows 10 + nodejs + selenium-webdriver + geckodriver で headless firefox を試してみる
#目的
Firefoxをnodejs + selenium-webdriver + geckodriverからキックしてみる##SeleniumBasicのインストール
※環境変数の文字数制限により、同居(笑)
[Seleniumbasic](https://florentbr.github.io/SeleniumBasic/)の Release page より SeleniumBasic-2.0.9.0.exe をDLする
exeを実行すると、C:\Users\user_name\AppData\Local\SeleniumBasic にインストールされる
ソースコードのプロジェクトをVS2019で開くと .NET Framework 3.5 を指定しているので
Windowsの設定 -> アプリ -> オプション機能 -> Windowsのその他の機能 -> .NET Framework 3.5 が有効であることを確認する##selenium-webdriverのインストール
※v4なのは、Edgeと比較するため(かもしれない)> npm install -
mongoDB Atlas+mongooseでWebアプリをどうやって始めるんや?
## 1. Atlasにclusterを作成する
まずは登録やん。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324917/9a770787-95f1-09f5-ef45-575499c87ff8.png)### 1.1 Add New User
Securityの中にある"Database Access" 項目に行くと、Add New Database Userがあるからそこに行くやん。![71700.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324917/a2ac3fc2-f2f6-0c5c-c576-e696c1bc645a.jpeg)
### 1.2 whitelistの設定
ADD IP ADDRESSでWhitelist Entryを設定するやん。とりあえず、これは"ALLOW ACCESS FROM ANYWHERE"を押しとこ。![71701.jpg](https:/