JavaScript関連のことを調べてみた2020年10月13日

配列同士の要素を比較する方法

配列同士の要素を比較するプログラムを書いてプルリクした際､レビューでもっといい方法を教えて頂いたのでメモです！

具体的には､下記のとおり､**Afterの方がより目的(配列同士の要素を比較)に沿った方法になっている**ということです｡
Before → 配列2つを文字列にして一致するかどうかチェック
After → 配列の中身をすべて比較してチェック

## やりたいこと
｢配列A,Bの要素に差分があるかどうか｣を知りたい｡
配列内の数字はajaxで通信して取得していて､今の所いつでも昇順で入っている｡

## やったこと

### Before

“`index.vue
~ 略 ~

methods: {
isDiffArrays() {
let arrayA = [1, 2, 3, 4]; // 仮で入れています　実際はfunctionの外からもってきました
let arrayB = [2, 3, 4, 6];　// 仮で入れています　実際はfunctionの外からもってきました
return (arrayA.toStr

初心者のプログラミング

# 勉強の記録
## 勉強した内容
– letの使い方。
– ツイッターなどでよくある診断ツールの作成。

## 何をベースに勉強してるか
– [N予備校 プログラミング入門](https://www.nnn.ed.nico/home)

## 内容の詳細
### わかったことについて
– 影響される範囲を絞れるので、別の場所で同じ引数を使ってエラーが出にくくなるってスゲーって思いました。
ただ、まだどういう状況でそれが役立つのかよくわかりません。
– 文字にはcharaCodeがあり、それによって同名なら同じ結果がでるようにできるって知りました。
– for(let i = 0; i < userName.length; i++){　のようにプロパティ全体を式に組み込めるのが面白い！ ### むずかしかったよ - 正直全体的に難しい…。 なるほどねって思える部分があるだけマシなのかなって思えるけど。 もう一度同じ内容をやらないと同じことを出来る気がしない。 ## 次回やる予定のこと - というわけもう一度同じところはやるつもりです。 次回からはテキストを先に読み、予習してから取り

Node-REDのobnizノードがバージョンアップした！

Node-REDのobnizノードをバージョンアップしましたので、使い方概要を書いていきたいと思います。

## バージョンアップ概要

– obnizとの通信用のjsonデータを書かなくて良くなった！楽！
– obnizにアウトプットしかできなかった(ディスプレイに文字出すとかLEDつけるとか)のが、インプットもできるようになった！
– JavaScriptSDKでできることが全部そのままできるようになった！
– 互換性なくなった！

# インストール方法

NodeREDの右上のメニューから、パレットの管理を選びます

「ノードを追加」タブにてobnizと検索します。

node-red-contrib-obnizがv0.6.1で出てきますので、右側の「ノードを追加」ボタンを押します

javascriptで複利計算プログラム

“`html

```

エントリーポイントでインポートして必要に応じてオプシ

【Web】Oculus Questなどのプロジェクトをパソコンでデバッグする際に便利な方法【PlayCanvas】

基本的には、Oculus Questのデバイスをデバッグする際にはVR端末などの実機でデバッグをすることが多いと思いますが、Oculus Questの実機で確認ができない場合にはこの、拡張機能として使えるエミュレーターを使うと便利です。

WebXR emulator extensionを使ってPlayCanvasのチュートリアル、WebXR UI Interactionパソコンのブラウザから操作をしてみます。
https://developer.playcanvas.com/en/tutorials/webxr-ray-input/

### 1. 拡張機能をインストール

拡張機能
WebXR emulator extension
https://github.com/MozillaReality/WebXR-emulator-extension

FirefoxとGoogle Chromeで使用できますのでこちらから拡張機能をインストールします。
#### Firefox
https://addons.mozilla.org/firefox/addon/webxr-api-emu

Symbol from NEMやmijin Catapultで最新のアカウント情報を取得する

ページにアクセスしたタイミング、入金したタイミングで最新のアカウント情報を取得するためのTIPSです。

今回はAliceアカウントを作成し、そこに記録されたモザイク一覧情報を、ページ表示時など能動的に取りに行く方法とWebSocketを利用して入金時に受動的に取得する方法を同じロジックを使用して処理する流れで説明します。

#### 事前準備
```js
(script = document.createElement('script')).src = 'https://xembook.github.io/nem2-browserify/symbol-sdk-pack-0.21.0.js';
document.getElementsByTagName('head')[0].appendChild(script);
```
chromeブラウザを開いてF12キーを押し、コンソール画面で上記スクリプトをコピー＆ペーストしてください。

#### ライブラリインポート、変数初期化
```js
NODE = 'https://sym-test.opening-line.jp:3001';

Azure Communication Services ことはじめ (2) : 音声通話ができるまで

Azure Communication Services は、リアルタイム コミュニケーション基盤となるサービスで、テキスト | 音声 | ビデオ によるコミュニケーションのハブとなり、接続やコントロールを行うアプリやサービスを SDK などを用いて容易に開発できます。

今回は、Azure Communication Services を使ったアプリ開発の第一歩として、音声通話ができるまでを手順を追って確認し、Node.js の Web アプリを作成してみます。

# 開発環境

- 開発環境
- Windows 10 (Build 19042)
- Visual Studio Code (ver 1.50.0)
- Node.js (12.14.1)
- 利用ライブラリー、フレームワークなど
- Azure Communication Services
- Webpack: webpack@5.0.0、webpack-cli@4.0.0、webpack-dev-server@3.11.0

# 0. 事前準備

[Azure Communic

Nuxt.ts - axiosのheadersに常にtokenを付与する方法

JWTのトークンをリクエストの度に付与するのが面倒で、この実装で実現できたのでメモ

```plugins/axios.ts
import { Context } from '@nuxt/types';
import Cookies from 'js-cookie';

export default function ({ $axios }: Context) {
$axios.onRequest((config) => {
const token = Cookies.get('authToken');
if (token) {
config.headers.common['Authorization'] = 'Bearer ' + token;
}
return config;
});
}
```

```nuxt.config.js
export default {
// ...
plugins: ['@/plugins/axios'],
// ...
}
```

YellowfinでJavascriptだけでダッシュボードのレポートをすべてExcelでダウンロードする


#概要
Yellowfinのバージョン9ではダッシュボードのExportはPDFしかできないこともあり、なんとかできないかというリクエストから色々調べて実現できたところのメモです。
前提としてYellowfinはwebserviceのREST化を進めていますが、レポート周りの機能はまだxmlベースのSOAPのやり取りでレガシー過ぎて苦労しました。。
調べたことのそれぞれは下記になります。
[今更ながらJavascriptでSOAPを通してxmlをparseする](https://qiita.com/celery/items/dedf9b4e02d0a10945cd)
[Javascriptでbase64エンコード化されたExcelファイルをダウンロードする](https://qiita.com/celery/items

既存のプロジェクトにprettierを使用する

### 最初に
自動コード整形に、prettier を使い始めてみたのですが、既存のコードに適応する方法が分からなかったので、調べてみました。

### 手順

1. Install
2. `.prettierignore` の作成
3. prettierの実行

#### Install

最初にprettierをインストールします。

```
npm install -g prettier
```

#### `.prettierignore` の作成

自動コード整形しないファイルを記載します。

```js:.prettierignore
node_modules/
```

#### prettierの実行

最後にprettierを実行します。

```
prettier --write "**/*.js"
```

### まとめ

プロジェクトの途中からでも、prettierを入れることが簡単なので、フォーマット揃えたいなと思った時は気軽に試してみてください。

JavascriptのFetchをネストして2回リクエストを投げる

#やりたいこと
大元は、配列から値を1つずつ回してXmlHttpRequestでPOSTを2回やろうと思ってたのですが、なかなかネスト後の値が検知できずにいたところで難しそうだったのでFetchを使ったところうまくネストして2回リクエストを送った値が取得できたのでメモします。化石の知識しかないので過不足は多分結構あります。

#コード例
これは例なのでPOSTする先やbody、headerは適宜変更してください。
1回目のリクエスト後にresponseをparseして、使いたい値を取り出してreturnで返すことで次のthenで使うことができます。
これをさらにretuenでfetchを投げることで次のthenで処理できるようにしているという流れになります。(or はJsonで返ってくることを想定したコードです)

```javascript:fetchNest.js
fetch('http://localhost:8922/services/AdministrationService', {
method: 'POST',
body: 'fname=aaaaa&uui

◯日前のデータだけをQueryする方法【moment.js, firebase, firestore, typescript, javascript】

# TODO
*「〜日前」のデータだけQueryしたい*

# CODE

```typescript:index.ts
const now = moment();
const days = 10
const time = now.subtract(days, "d");

const start = time.startOf("day").toDate()
const end = time.endOf("day").toDate()

console.log(time.startOf("day")); // Moment<2020-10-12T00:00:00+09:00>
console.log(time.endOf("day")); // Moment<2020-10-12T23:59:59+09:00>

const snapshot = await collectionReferennce
.where("date", ">", start)
.where("date", "<", end) .get(); ``` # REFERENCE htt