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

【Vue.js】v-forで配列をn個ずつ描画する

## やりたいこと


このように、配列をn個(今回は3個)並べたら改行したい。
前提：配列はAPI等で受け取るデータで、何個来るかわからない。

v-forで描画するまでやってる記事は見かけなかったのでメモです。

## そのままv-for

“`vue

```

## 注意点
当然ですが、`

空欄に数字を入れて式を成立させるという問題です。
自分もJSで解こうとし

JavaScriptで簡潔な、複数のキーでのオブジェクトの並び替え

JavaScriptで複数のキーでオブジェクトを並び替えるプログラムです。

例えば、

```javascript
const fruitsArr = [
{name: 'ぶどう', price: 5000, weight: 1000},
{name: 'もも', price: 3000, weight: 2000},
{name: 'りんご', price: 5000, weight: 5000},
{name: 'バナナ', price: 1500, weight: 1000},
{name: 'メロン', price: 5000, weight: 1200},
{name: 'マンゴー', price: 10000, weight: 900},
{name: 'みかん', price: 1500, weight: 5000},
]
```

このような配列を、priceの昇順、同じpriceであればweightの昇順で並び変えます。
``compareByAttr``関数を作成し、このように書くとシンプルです。``compare

javasqriptの便利メソッド等について

#初めに
現在、ES6のJavaScriptを学習しており、個人的なアウトプットとしたいと思います。

#for分では考えることが多い？

まずはこちらを見てください。

```javascript

const images = [
{ height: 10, width: 30 },
{ height: 20, width: 90 },
{ height: 54, width: 32 }
];
const areas = [];
for (i = 0; i < images.length; i++){ areas.push(images[i].height * images[i].width) } console.log(areas) /* [300, 1800, 1728] */ ``` こちらのfor文でやっていることはオブジェクトが入っているimagesという配列の数だけfor文内で繰り返しをしてareaという面積を求める処理です。 僕はfor文の中で考えることが多いなという印象があります。 ・ imageがトータル数を数える。 ・ i を　ループするた

Promiseの処理をキャンセルする

Promise で Web Speech API をラップして使っていましたが、キャンセルできるように実装するのに試行錯誤しました。想定していたような動きが実現できたので、メモを残しておきます。

先に成果品を貼っておきます。

See the Pen 2016年から2019年までのJavaScriptの全て

以下はAlbertoM( [Webサイト](https://inspiredwebdev.com/) / [Twitter](https://twitter.com/montalesi) / [GitHub](https://github.com/AlbertoMontalesi) / [dev.to](https://dev.to/albertomontalesi) )による記事、[Everything you need to know from ES2016 to ES2019](https://inspiredwebdev.com/everything-from-es-2016-to-es-2019)の日本語訳です。

# Everything you need to know from ES2016 to ES2019

JavaScriptは絶え間なく進化し続けている言語であり、この数年で多くの新機能がECMAScriptの仕様に追加されました。

この記事は私の著書[Complete Guide to Modern JavaScript](https://inspired

【動画付き】 draw.io 使い方まとめ 〜エンジニアでなくても使えるTips集〜

[draw.io](https://www.draw.io/) はブラウザを使用してフローチャート、プロセス図、組織図、UML 図、ER モデル、ネットワーク図などを作成できる優れたツールです。作成した図は xml ファイルとして保存でき、GitHub との連携もシームレスに行われます。3 年ほど愛用しているツールですが、隠された使い方がたくさんあります。すぐに忘れてしまうので取りまとめておきます。

「こんな使い方あるよ！オススメだよ！！」という方はぜひ編集リクエストをいただければ追記していく予定です ?

※ 主に参照している文献は以下、公式ブログは非常に分かりやすいのでオススメです。

- [ツイッター公式アカウント](https://twitter.com/drawio)
- [公式ブログ]

【React】 郵便番号から住所を自動入力

こんにちは。
今回は[ajaxzip3](https://github.com/ajaxzip3/ajaxzip3.github.io)を使って、Reactでも簡単に住所の自動入力を実装する方法を紹介します。

#住所自動入力
オンラインショッピングを利用するユーザーの約3分の2が購入を完了する前にカートを離脱していることが明らかとなっています。ECサイトのカート破棄率は平均約70%とされていて、カートの離脱を防ぎ、購入率を上げるためにもEFO（入力フォーム最適化）は重要です。

#使い方
はじめにhtmlファイルのbody内にajaxzip3を読み込みます。

```HTML:index.html

```

##関数

AjaxZip3.zip2addr()の引数にinputタグのnameを指定し、郵便番号を入力すると、指定したフォームに対して都道府県、市町村、番地が自動で入力されます。
自動入力ではonChangeが発火しない

Google Apps Script を V8 ランタイムで実行する方法

## 概要

先日 (2020/02/05) に Google Apps Script が V8 Runtime で実行できるようになりました。 Google Apps Script はこれまで JavaScript 1.6 のバージョンがベースとなっていましたが、アロー関数や const, let が利用できるなど、モダンな書き方ができるようになりました。

詳しくは各種ドキュメントをリンクしておきます。

* [リリースノート](https://developers.google.com/apps-script/releases#february_5_2020)
* 公式ドキュメント: [V8 Runtime Overview](https://developers.google.com/apps-script/guides/v8-runtime)
* 公式ドキュメント: [V8 runtime へのマイグレーション方法](https://developers.google.com/apps-script/guides/v8-runtime/migration)

## V8 ラン

bullで管理するNodeJSの分散job

# bullとは
NodeJSで分散ジョブとメッセージを処理するためのキューパッケージです。redisをベースに動作します。
kueの後継的なライブラリです。

# 確認環境
- node: v10.17.0
- [redis ( for windows )](https://github.com/microsoftarchive/redis/releases): 3.0.504

# express-generator にてプロジェクト作成
ここでは、`play_node_bull`というプロジェクトで作成します。

```
npx express-generator play_node_bull
cd play_code_bull
npm install
```

# bullのインストール

```
npm install bull
```

# app.js の編集
app.jsに以下の行を追記します。

```Diff:App.js
var createError = require('http-errors');
var express = require('express

redux-sagaで排他制御をするサンプル

## はじめに
[redux-saga](https://redux-saga.js.org/) で排他制御がやりたくて,
[await-semaphore](https://www.npmjs.com/package/await-semaphore)を使ったらうまくいきました.

サンプルは [こちら](https://github.com/somq14/qiita-article/tree/master/saga-semaphore) にアップロードしています.
何かの参考になれば幸いです.

## やりたいこと

やりたいことは, **複数のsagaがstore上のデータを同時並行に取り合う処理**です.
より具体的には, 次のようなことがやりたいです.

- storeにデータのリストがある `['a', 'b', 'c']`
- 2つのsagaが同時並行で以下をやる
- storeからリストを取得する
- リストから最初のデータを選択する
- 取り出したデータをstoreから削除する

**sagaが同じデータを取り出してしまったらNGです.**
2個のsagaが

Node.jsでGoogle Slides内のテキストの書き換え

Google Slides APIをNode.jsから触ってみてます。

* [Node.jsでGoogle Slides APIを触ってみる](https://qiita.com/n0bisuke/items/8a343ca4d8fe2f1bac55)
* [Node.jsでGoogle Slides内のテキストを取得してみる](https://qiita.com/n0bisuke/items/325fbe56a48e7d83e8dc)
* [Node.jsでGoogle Slidesの新規スライド作成](https://qiita.com/n0bisuke/items/1160bb5c524cdaff3342)

の記事の続きです。

## batchUpdate()で更新

[presentations.batchUpdate](https://developers.google.com/slides/reference/rest/v1/presentations/batchUpdate)でどうやら更新ができそうです。

## presentations.batchUpdate

FirebaseのRealtime Databaseで簡易投票システムを作ってみる

## 概要
社内の懇親イベントで、Web上での投票ページが必要になりました。
しかし1回きりのイベントなので、そんなに工数をかけたくない。
そうだ、Firebaseを使ってみよう！

## Firebaseで何ができる？
Firebase統合バックエンドサービスであり、
本来自力でサーバーサイドで構築するようなDBや認証機能などを提供しています。
またWeb,iOS,Androidなど多くのプラットフォームに対応しています。

従量課金のサービスではありますが、小規模な開発には充分な無料枠が設定されています。
（Sparkプランの場合。大規模向けのBlazeプランは完全従量課金制）

料金の詳細は[こちら](https://firebase.google.com/pricing)

コンソール画面から各種サービスの利用を開始することができます。

### Firebaseの主な機能

**アナリティクス（Analytics）**
Googleが提供するGCPのサービスであるため、Googleアナリティクスが標準で利用できます。
Firebaseコンソールの管理画面でアクセス推移の確認が

FirebaseをWebアプリに導入する準備をした【備忘録】

自分用の備忘録です。
Firebaseを自作Webアプリに導入する準備をしました。
[Firebaseの公式サイト](https://firebase.google.com/)

# 0. 概要
1. Firebase上で準備をする
2. 便利なパッケージをインストールする
3. 設定ファイルを作成する

# 1. Firebase上で準備をする

## 1-1. アカウントを作成する
`Sign in` ボタンをクリックして、アカウントを作成します。
ログインしたら `Go to console` ボタンをクリックします。

## 1-2. プロジェクトを作成する
名前を付けて、プロジェクトを作成します。
アナリティクスは入れても入れなくても問題ありません。

## 1-3. アプリを追加する
`iOS` `Android` `Web` の3つの選択肢があると思います。
Webアプリなら `Web` をクリックして追加します。

# 2. 便利なパッケージをインストールする
Firebaseを便利に設定できるパッケージがあるので、それを導入します。

```terminal
$ np

Web Workerを別ファイルにしないでインラインスクリプトで実行する方法

参考：[The Basics of Web Workers - HTML5 Rocks](https://www.html5rocks.com/en/tutorials/workers/basics/#toc-inlineworkers)

こちらの参考で知ったので、そのまま試してみたという内容になります。よろしくお願いいたします。:bow:

```index.html