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

初めての Azure Bot Service – Sample code と local test 編 –

# はじめに
今回は Azure Bot Service を使用して連続した対話に対応できる Bot を作成します．
Azure Bot Service を初めて使用する人を（できる限り）想定してます．
（熟練の方々からしたら退屈するかと思います．）

また，今回は Bot の sample を local test するところまでで
Azure への Deploy については次回行います．

（訂正や指摘などあれば，温かく教えていただけると助かります．）

# 私の開発環境
– PC : surface laptop2 (windows 10)
– Editor : VS Code

PC に関しては何でも大丈夫です．
Editor に関しては 本記事を参考にされる場合は VS Code をご使用ください．
（後程お話しますが， Azure への　deploy 時に VS Code の Extension を使用しています）

# Azure Bot Service の概要
Azure Bot Service とは，Microsoft 社のクラウドサービスである Azure のサー

`let`にあんまり知られてなさそうな性質が結構あった話

# 前書き

“`javascript:A
for (var i = 0; i < 5; i++) { setTimeout(() => {
console.log(i);
}, 100);
}

// 5 5 5 5 5
“`

“`javascript:B
for (let i = 0; i < 5; i++) { setTimeout(() => {
console.log(i);
}, 100);
}

// 0 1 2 3 4
“`
この2つのコード、`var`と`let`の違いとしてそこそこ有名なものだと思います。

この動作自体に文句はありませんし、自分もそういうもんだと思って使っていたのですが･･･

よくよく考えると**B**のコード上では

1. `console.log(i)`は`let`で宣言された変数`i`を参照している
2. `let`で宣言された変数`i`は、`for`文によってインクリメントされている
3. `console.log(i)`が実行されるのは、`for`ループが完了した後である

という処理になっているため、**

色空間を 3D で可視化した Web アプリで色への理解を深める

0. はじめに
=========

色に関して「ちゃんと知りたい・理解したい」と思っている方、実は多かったりしないでしょうか。
私は以前、下記のようなもやもやした気持ちを抱いていました。

– 色が見える根本的な仕組みを知りたいけど、なんか難しそう
– 「RGB」とかって、なんとなく分かるけどよく知らない
– 「彩度」と「明度」という言葉をたまに聞くけど、ぶっちゃけよく分からない（でも日常生活は困らない）
– 資料作成やデザイン関連作業で、色をどうやって選んだらいいか分からない・なかなか出したい色にたどり着けずイライラする

本記事では、上記のような色に関する素朴な疑問の解決（もしくは解決への糸口）を可能な限り目指して、**色及び色空間に関する基礎的な内容**をご紹介したいと思います。

背景としては、この年末年始に下記動画のような **[色空間を 3D で可視化する Web アプリケーション ―ColorSpace―](https://colorspace.choo.works/)** を趣味で開発したこともあり、開発の目的だった**「色空間の直感的な理解」**を一人でも多くの

webサイトの更新の表示をgithubのreleaseで管理

# TD;LR
webサイトの更新履歴をgithubのリリースで管理したら便利だった
releaseの更新に合わせてツイートをするgithub actionsを作った

# releaseで管理
よくウェブページについている下みたいな更新履歴を作ろうと思ったけど

“`
20xx/0x/xx xxxxxの内容を更新
20xx/0x/xx xxxxxを追加
20xx/0x/xx xxxxxを更新
“`
ファイルにまとめたりして一々追記していくのが嫌だったのでgithubの機能を使いました。

## release機能
releaseはgithubの機能でリリースノートや添付ファイルを付けてユーザーに公開する事ができます。
ここの`releases`と書いてある部分から作成でき、
初心者による ES6 関数

#複数の戻り値を個別の変数に代入する
「関数から複数の値を返す」ためには、配列/オブジェクトとして値を一つにまとめる方法があります。
そのような場合には、

“`javascript:sample.js
function getMaxMin(…nums) {
//配列で返す
return [Math.Max(…nums), Math.Min(…nums)]
}

//分割代入
let [Max, Min] = getMaxMin(1,2,3,4,5)
//Maxがいらない場合(最大値は切り捨てられる)
let [, Min]
“`
#タグ付きテンプレート文字列
変数を埋め込む際に「<」「>」などの文字列を「&lt」「&gt」に置き換えたい(エスケープしたい)ときに、役立つのがタグ付きテンプレート文字列です。
タグ付きテンプレート文字列の実態は、単なる関数呼び出しでしかありません。

“`
関数名`テンプレート文字列`
“`
の形式で呼び出されます。タグ付きテンプレート文字列で利用するためには、関数は次のような条件を満たしておく必要があります。

“`
1. 引

JSON.Stringifyで循環オブジェクト参照構造体が処理できないのをcycle.jsで処理した

#概要
https://qiita.com/saitoeku3/items/9e9a608e53029d541a8f
と同じエラーにあったので、cycle.jsで処理したサンプルコードを紹介するよというお話

##cycle.js
https://github.com/douglascrockford/JSON-js/blob/master/cycle.js

##インストール
“`
npm install json-cyclic
“`

##サンプルコード
“`
//import
const decycle = require(‘json-decycle’).decycle;
const retrocycle = require(‘json-decycle’).retrocycle;
…

…
//文字列に変換
receiveNewAcString = JSON.stringify(receiveNewJson, decycle());

//JSONオブジェクトに変換
receiveNewAc = JSON.parse(receiveNewAcString, retr

VueとFirebaseと使ってAtCoderのAC数をツイートするウェブアプリケーションを作った

# 概要
AtCoder上でのAC数を1日1回ログインしたツイッターアカウントでツイートしてくれるdevotterというアプリケーションを作成したよというお話

##リンク
– https://devotter.app/

##スライド
– https://www.slideshare.net/KaoruIshizawa/devotter

##Github
– https://github.com/10kaoru12/devotter_backend
– https://github.com/10kaoru12/devotter_frontend

## ソースコード（フロントエンド）
“`