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

Node.js: printf風の文字列フォーマットをする方法

Node.jsでprintf風の文字列フォーマットをするには、`util.format`関数を使うと良い。

“`javascript
const {format} = require(‘util’)
const message = format(‘値は %s のうちのどれかにしてください’, [1, 2, 3])
console.log(message)
//=> 値は [ 1, 2, 3 ] のうちのどれかにしてください
“`

公式ドキュメント: [Util | Node.js v13.11.0 Documentation](https://nodejs.org/api/util.html#util_util_format_format_args)

Kinx 実現技術 – Switch-Case

# Switch-Case

## はじめに

**「見た目は JavaScript、頭脳(中身)は Ruby、（安定感は AC/DC）」** でお届けしているスクリプト言語 [Kinx](https://github.com/Kray-G/kinx)。作ったものの紹介だけではなく実現のために使った技術を紹介していくのも貢献。その道の人には当たり前でも、そうでない人にも興味をもって貰えるかもしれない。

前回のテーマは[構文解析](https://qiita.com/Kray-G/items/f198a8b105b37fd43fab)。今回のテーマは Switch-Case。

* 参考
* 最初の動機 … [スクリプト言語 KINX（ご紹介）](https://qiita.com/Kray-G/items/ca08b6fb40d15dd0ec76)
* リポジトリ … [https://github.com/Kray-G/kinx](https://github.com/Kray-G/kinx)

## Switch-Case

なぜ Switch-Case

RxJSv6入門：概念のまとめと日本語簡易リファレンス

Angularで登場してきたのでざっくり学習。厳密な理論ではなくて、使い所勘所まとめです。
v6ベースです。

## TL;DR
ゆるふわにまとめると、

* RxJSは、流れてくるデータのイテレイティブな処理の記述をシンプルにすることが出来るもの
* 使い所は、EventEmitterやPromiseに似てる
* 勘所的には、非同期的な配列をイメージすると良さそう

## 基本

* **Observer**
* データの処理の仕方を記述したもの、データの処理方法
* next, error, completeの3つが定義できる。それぞれPromiseのresolve, reject, (finaly callback)に相当する。
* ようは値を受け取って、処理をして、返すもの
* nextだけ定義するパターンが多い
* Observableのsubscribe()の引数に匿名関数わたして定義しちゃうのが多いっぽい
* **Observable**
* データの流れを抽象化したもの
* ファクトリーメソッドで

componentDidMountでReflow

chromeブラウザでReflowがCSSアニメーションと相性悪いようで、余計なアニメーションが走ってしまうことがある。

### 画面内容

画面遷移が発生する時に、次のように遷移先の画面が右側から左に移動するようCSSアニメーションが実装されている。

“`css
&SlideFromRight-enter,
&SlideFromRight-appear {
left: 100%;
transition: all 300ms cubic-bezier(.165, .84, .44, 1);
pointer-events: none;
opacity: 0;

&-active {
left: 0;
opacity: 1;
}
}

&SlideFromRight-exit {
left: 0;
transition: all 300ms cubic-bezier(.165, .84, .44, 1);
pointer-events: none;
opacity: 1;

&-active {
left: -10

async/await スリープ関数

“`javascript
// スリープ
const sleep = delay => new Promise(resolve => setTimeout(resolve, delay));

(async() => {
// 5秒待機
await sleep(5000);
})();
“`

[JavaScript] “10” + 1 は “101” だが “10” – 1 は 9 を理解する

そういうものなんです！仕様です！（完）

## だけではあれなので、仕様をちゃんとみてみる
### 加算演算子（＋）
[12.8.3 The Addition Operator ( + )](https://tc39.es/ecma262/#sec-addition-operator-plus)をみていきます。

>
**NOTE** The addition operator either performs string concatenation or numeric addition.
12.8.3.1 Runtime Semantics: Evaluation
AdditiveExpression:AdditiveExpression+MultiplicativeExpression

加算演算子は文字の連結と数値の加算を担うことがわかりました。
次に処理の流れをみていきましょう。

>
1. Let lref be the result of evaluating AdditiveExpression.
1. Let lval be ? GetValue(lref)

雑談に応答するLINE Botを爆速で作成する方法(Google Apps Script + Chaplus雑談対話API)

# 対象読者
・手軽にLINE Botを作って見たい方
・LINE Botに会話(雑談)をさせてみたい方

# 概要
Google Apps ScriptとChaplus 雑談対話APIを利用してLINE Botを爆速で作成する方法について紹介します。(作業所用時間は10分程度です)

関連の記事として、Google Apps ScriptとChaplus 雑談対話APIを利用したSlack Botの作り方に関しましては以下の記事で紹介しているので、ぜひ併せてお読みください。

[たった10分で雑談ができる脱力系Slack Botを作成する方法(セリフや口調のカスタマイズも簡単)](https://qiita.com/maKunugi/items/6a6abf83ca27716541df)

# どんな雑談LINE Botを作るのか
Stripe決済のDjangoでの実装

# 初めに
Stripeを使えば比較的簡単に決済機能を実装できます。この記事ではStripeが用意した決済フォームにページをリダイレクトさせることで、自サイトではクレジットカード情報を保持することなく支払い機能を自サイトに組み込むことができます。

基本は[Stripeのドキュメント](https://stripe.com/docs/payments/checkout/one-time)と[Github上のサンプル](https://github.com/stripe-samples/checkout-one-time-payments)を基にして実装しています。また、Djangoで実装します。~~正直、試行錯誤しながら適当に作ったので実装に関して突っ込みどころ満載です。~~

最終的には[Stripeのサンドボックス](https://0hczv.sse.codesandbox.io)の劣化版が実装されます。また、以下の情報は2020年3月時点のものです。

## 環境設定
– Python==3.8.1
– Django==3.0.4
– stripe==2.43.0
– djan

コピペで始めるNext.js + Firebase Hosting 【静的サイト】

## 概要
Next.jsで静的サイトをホスティングする手順

※この記事はさくっとデプロイまでの手順を記述しているだけなので、解説とかはありません。

[Next.js公式](https://nextjs.org/#features)

### 準備
firebase-toolsをインストールしておく
・[Firebase CLI リファレンス](https://firebase.google.com/docs/cli?hl=ja)

## Next.jsプロジェクトの作成

“`bash
$ npm init <プロジェクト名>
$ cd <プロジェクト名>
$ npm install –save next react react-dom
“`

`package.json`に`scripts`を追加する

“`package.json
“scripts”: {
“dev”: “next”,
“build”: “next build”,
“start”: “next start”,
“export”: “next build && next export”

JavaScriptメモ

#JavaScriptメモ
###データ型
– 文字列（String） ‘hello’, “うおおおお”
– 数値（Number） 1, 1.2, -9, -1.7, NaN
– Undefined
– null
– 真偽値（Boolean） true, false
– オブジェクト(Object) {a: 1, b: 2}

###論理演算子
– (等しい) ===
– (等しくない) !==
– (かつ) &&
– (または) ||
– (でない) !

###条件演算子

“`javascript:main.js
条件式 ? 条件式がtrueのときの処理 : 条件式がfalseのときの処理
“`

###switch文

“`javascript:main.js
const number = 1;

switch (number) {
case 9:
console.log(9);
break;
case 8:
case 7:
console.log(8 + ‘or’ + 7);
break;
defaul

moment.jsで単位を日に指定してdiffを使う時、時間を考えず日が変わったかどうかだけで比較する

# 結論: `startOf(‘days’)`で時間をまるめる

“`javascript
const dayOne = moment(‘2020-01-01 10:00:00’).startOf(‘days’);
const dayTwo = moment(‘2020-01-02 09:00:00’).startOf(‘days’);
console.log(‘dayOne’, dayOne.format());
console.log(‘dayTwo’, dayTwo.format());
console.log(‘diff’, dayTwo.diff(dayOne, ‘days’));
“`

# はじめに

moment.jsには指定し

Electronでカレンダーを作る⑤

# 前回まで
[link1]:https://qiita.com/turn-take/items/3858a33e884c2a263e48
[前回][link1]はカレンダーの表示月を切り替えたら画面も切り替わるようにした。
ただ、切り替える度に画面更新で数秒真っ白になるのでダサかった。

レスポンシブルな感じのUIにしたい。

# HTMLを最小限にする

HTML内にカレンダーの構造をそのまま書いているのでこれをごっそり削って最小限の記述にする。
カレンダーの構造自体はJavaScriptで作っていく。

####before
“`index.html

魔法JS☆あれい 第10話「もうmapにもforEachにも頼らない」

登場人物

丹生（にゅう）あれい
魔法少女「魔法（マジカル）JS（女子小学生）☆あれい」として活動中。

イテレー太
正体不明の魔法生物。

第1部「ミューテーター・メソッド編」
* [第1話「popでpushした、ような……」](https://qiita.com/8amjp/items/e44e707ccc8c95b4a40d)
* [第2話「shiftはとってもunshiftって」](https://qiita.com/8amjp/items/3fc1b2defd28ba1c2df3)
* [第3話「もうsortもreverseも怖くない」](https://qiita.com/8amjp/items/86f5294981fbebd3fe2d)
* [第4話「fillも、spliceも、copyWithinもあるんだよ」](https://qiita.com/8amjp/items/0741e35b70ea32711265)

第2部「アクセサ・メソッド編」
* [第5話「joinなんて、concatなわけない」](https://qiita.com/8amjp/items/22

vis.jsをさわってみて参考になった記事

##経緯
vis.jsをさわった経緯
チームでWebアプリ開発をしようとして、ネットワーク図を書けるやつないかな～って探して見つかったのがこのvis.jsだった！

##紹介基準
僕が見て役に立ったもの！
僕はJavaScriptをそれまで書いたことがなく、ちゃんと文法がわかっている訳でもないです。そんな僕が紹介するものなので、結構信頼してもらっても大丈夫だと思います！(笑)

##参考にしたもの
####vis.jsの公式ページ
これめっちゃすごくて、自分の実現したいことのコードは大体そろっています。「こういうネットワーク図書きたいな～」みたいな感じになったらとりあえずそういうものがあるかを見に行くといいと思います！公式githubからコードを取得できるのでコピペでとりあえず書けてしまいます。。。正直すごすぎてびっくりしました。
他にも3Dグラフとかいろいろあるのでやってみたいと思いました！(感想)

vis.js公式ページはこちら！
https://visjs.org/

vis.js ネットワーク図のサンプルページはこちら！
https://visjs.github.io/

SvelteとElmを比べておきたい！ テンプレートとview編

Stelte+Elmを学習中なもので、[Vue.jsとElmを比べてみよう！ テンプレートとview編](https://qiita.com/ababup1192/items/ae2cc6f507b2403e2ef4)に便乗させていただき、Svelte編を書かせていただきます。元記事のVue.jsとElmを対比してお読みくださいませ。

## ①オブジェクトの表示

### Svelte

汎用ループを扱うことがディレクティブは`each`となります。コレクションのそれぞれ(each)を扱うイメージを持つと良いかと。

“`html

{#each items as { message }, i}
• { message }

{/each}

“`

Svelteの場合、htmlコードの中に、

ReactNative + TypeScript + React HooksでFlatList使うときにrenderItemの型でハマった時の解決方法

# 導入
TypeScript無しでは、FlatListを書いたことあるので、スラスラ書けるかなと思って、
TypeScriptでFlatListを書いていました。

しかし、TypeScriptのエラーに引っかかりまくり、なかなか解決できなかったので、
その解決方法を共有する目的で記事を書いています。

# 前提

VersionとFlatListについての前提情報を記載します。

## Version
– ReactNative: 0.59.8
– Expo: 35.0.0

## FlatListとは？

スクロールできるリストのこといいます。
ReactNativeで作成するアプリで、リスト形式で表示したい時は多くの場合利用すると思います。


# ハマったこと
サンプルコードは以下の通りなのですが、ハマったのは

historyオブジェクトについて

# 課題
– historyオブジェクトを利用して、ページをリダイレクトしたいがreduxを利用すると上手く動かない。
– console.logを仕込んでみると、どうやらhistoryオブジェクト自体がpropsとして渡されていないようだった。

# 環境
– node v12.7.0
– express 4.16.1
– react 16.12.0
– npm 6.10.2
– macOS Mojave 10.14.4

# 解決方法
reduxとreact-router-domのみを利用するとhistoryが利用できないので、reduxとreact-routerの統合が必要となる。
上記を実現するためにConnected React Routerというライブラリをインストールする。
（react-router-reduxは現在、非推奨）
[引用元/@nacam403さんの記事](https://qiita.com/nacam403/items/22baa0549361777f8c6d)

# 実装の流れ
– まず、npmで上記のライブラリを全てインストールします。

“`
np

Nuxt.js 存在しないページを一括でリダイレクトしたい時

`/pages/*.vue`
を下記の内容で作成する。

“`vue


“`

That’s it.
Relax, man.

React FCで画像ファイルを『Content-type: multipart/form-data』でPOSTする方法(axios)

案件でPOSTする際、
『Content-type: form-data』で送信する機会があったので、まとめます。
ボタン部分はマテリアルUIを使っています、初見の方は細かく気にしなくても大丈夫です

## 環境
react　16.12.0
typescript　3.7.3
material-ui/core　4.8.0(Buttonに使用)

##したいこと
inputで選択したファイルをstateにセット、セットしたファイルを POSTする

## 全体

“`.tsx

const IconUpload: FC = () => {

const [userIconFormData, setUserIconFormData] = useState()

const handleSetImage = (e: ChangeEvent) => {
if (!e.target.files) return
const iconFile:File = e.target.files[0]
setUserIconFo

YouTube Liveのスパムを自動で非表示にするChrome拡張機能を作った話

## 動機
[YouTube Live Spam Killer – Chrome ウェブストア](https://chrome.google.com/webstore/detail/youtube-live-spam-killer/ldipjlelakcabalgnlkhbbdbabcihjbc)

突然ですが、自分はバーチャルYouTuber(VTuber)のライブストリーミングやそのアーカイブを複数窓垂れ流して作業するのが大好きです。
しかし、最近そのライブチャット欄に品のないユーザ名の出会い系スパムが多発しています。
これらのブロック作業で配信に集中できなかったりといった面倒が目立つようになりました。
せっかくの至福の時間を邪魔される、というのは人間誰しも嫌なものです。

人間様がクソプログラムに苛つかせられる必要はありません。
技術でなんとかしましょう。

YouTubeを利用している関係上、ブラウザ上でバックグラウンド動作してくれるタイプの技術を使うほうが見通しは良いです。
したがって今回、自分がメインで利用しているウェブブラウザであるGoogle Chrome上の拡張機能と