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

GithubのContribution数をSlack通知するGithubActionを作った

## はじめに
### これは何?
– 2020年3月5日〜31日にかけて行われた[GithubActions Hackathon](https://githubhackathon.com)向けにGitHubActionを作ってみました。

### サンプル

## 本題
### 作ったもの
– 1週間分のContribution数をSlack通知するGithubAction

### ソースコード
– [kE-sakai/action-notify-growing-plants-to-slack](https://github.com/kE-sakai/action-notify-growing-plants-to-slack)

### 構成

Vue.js コンポーネント入門

## コンポーネントとは

– ページを構成するUI部品
– 再利用可能なVueインスタンス
– HTMLのテンプレートとJavaScriptのロジックを持つ

## Vue.jsのコンポーネントの特徴

– 再利用ができる
– メンテナンス性が高まる
– テンプレートとJsが1つのセットになっていて管理がしやすい

## コンポーネント定義（グローバル）

`Vue.component`メソッドで生成されたコンポーネントは全てのVueインスタンスから利用できる

第一引数に`コンポーネント名`、第二引数の`template`に表示させるテンプレートを記述する。

また、コンポーネントはVueインスタンス生成よりも前に定義する

“`js:js
Vue.component(‘hello-component’, {
template: ‘

Hello

‘
})

// インスタンス生成より上に記述

var app = new Vue({
el: ‘#app’,
})
“`

HTMLにタグを挿入してコンポーネントの表示ができる

“`html:html

ウイルス感染の簡易シミュレーション

## はじめに

March 14, 2020 のワシントンポスト紙の記事に、以下のような記事が掲載されました。

* ***Why outbreaks like coronavirus spread exponentially, and how to “flatten the curve”***
https://www.washingtonpost.com/graphics/2020/world/corona-simulator/

日本語版は、下記にあります。

* ***コロナウイルスなどのアウトブレイクは、なぜ急速に拡大し、どのように「曲線を平らにする」ことができるのか***
https://www.washingtonpost.com/graphics/2020/health/corona-simulation-japanese/

ボール同士の接触という簡単な原理を使って、
ウイルスの感染者数がどのように増えて、そして減少していくのかを紹介した記事で、
とても理解しやすかったかと思います。

ちなみに、Python(JupyterLab)で再現されている方も

失敗しない文字列シリアライザ選び.js

本記事は「[Node.jsのworker_threadsに使えるバイナリフォーマットを考えた件](https://qiita.com/ayatty/items/4b662dba4395388c7138)」のスピンオフ作品となっております。

# 1. お題目
「[Node.jsのworker_threadsに使えるバイナリフォーマットを考えた件](https://qiita.com/ayatty/items/4b662dba4395388c7138)」では、worker_threadを使った親子スレッド間でデータを共有するには`SharedArrayBuffer`[(MDN)](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer)を使うことを知りました。
`SharedArrayBuffer`はバイナリ配列ですから、JavaScriptの数値、文字列、オブジェクト、配列等々のデータは直接格納できません。そのため、ここに格納するためのシリアライザ、取

【React】stateはイミュータブルに

Reactではstateは[イミュータブル](https://developer.mozilla.org/ja/docs/Glossary/Immutable)でなければなりません。
”元のオブジェクトのプロパティは変更せず、プロパティを変更した新しいオブジェクトを作成する”ということに相性のよいスプレッド構文とObject.assign()について書きます。

##[スプレッド構文 – JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax)

Reactのreducerの例に適用すると（最近あった事例から取ってきました）

“`reducer.js
export default (events = {}, action) => {
switch (action.type) {
case READ_EVENT:
return { …events, [action.response.data.id]: a

React Nativeでゲームを作る(ための、はじめの一歩)

フロントエンジニアの、YAMATAKUです。
今回はチーム「LOT」の初開発についての方針と、準備(サンプルアプリ開発)を記事にしていきます。

## 背景

チームで結成前に、こんなサービスが欲しい、世の中の不便を解決できるようなサービスを作ろうなど、チームで議論したものの、まずはチームとしてのモチベーションの底上げが先決だと思いたつ。そのためには、例えユーザーがいなくても、とりあえずは開発している側も楽しめそう、ということで、ゲーム開発を念頭において、スタートすることにしました。

## 開発ツール、言語、フレームワークなど

– React Native
https://reactnative.dev/

– react-native-game-engine
https://www.npmjs.com/package/react-native-game-engine

で作ります。

### 選定理由
– JSを使いたい
– これからも当分JS強い(はず)
– React知名度(from Facebook)
– スマホアプリのゲームが作れる
など

### その他候補メモ
– C

Kinx ライブラリ – Array

# Array

## はじめに

**「見た目は JavaScript、頭脳(中身)は Ruby、（安定感は AC/DC）」** でお届けしているスクリプト言語 [Kinx](https://github.com/Kray-G/kinx)。言語はライブラリが命。ということでライブラリの使い方編。

今回は Array です。

* 参考
* 最初の動機 … [スクリプト言語 KINX（ご紹介）](https://qiita.com/Kray-G/items/ca08b6fb40d15dd0ec76)
* 個別記事へのリンクは全てここに集約してあります。
* リポジトリ … [https://github.com/Kray-G/kinx](https://github.com/Kray-G/kinx)
* Pull Request 等お待ちしております。

## Array 特殊オブジェクト

Array オブジェクトに対して関数定義する例は以下の通り。例では単に map をラップしただけですが。

“`javascript

[初心者向け]herokuをデプロイしよう

herokuとは
–
開発したWEBアプリケーションを10分程度で全世界に公開することができ、そのままサービスを本格的に運用することも可能なホスティングサービスの事を指します。

実行と流れ
–
まず前提としてデプロイしたいアプリが作成済み、GitHubにアカウント登録済み、GitHubにリポジトリを作成済みという前提でお話しして行きます。今回はrailsで作成したアプリをデプロイしていきます。
流れとしては以下になります。

herokuアカウント作成→Heroku Toolbelt (CLI)のインストール→デプロイ

1.アカウント作成
–
herokuに登録してアカウントを作成
(1)herokuの公式サイトにアクセス
sign upボタンを押す


(2)下記の赤枠の部分を入力
![a.png](https://qiita-i

コロナウィルス日本国内累計感染者数を予測してみた。

コロナで緊急事態宣言が出た昨今、皆様いかがお過ごしだろうか？

累計感染者数の推移をグラフ化すると指数関数的になると聞いて、今後の累計感染者数を予測してみた。

指数を算出するのに厚生労働省の定例報告の数値をベースにすると、

2020/4/8発表の4/7時点累計感染者数:4168
2020/4/9発表の4/8時点累計感染者数:4667

※参考：
新型コロナウイルスに関連した患者等の発生について(４月８日公表分) https://www.mhlw.go.jp/stf/newpage_10785.html
新型コロナウイルスに関連した患者等の発生について(４月７日公表分) https://www.mhlw.go.jp/stf/newpage_10724.html

「aをe乗するとbになる」と言う関係になる「e」が「指数」となるのだが、javascriptで算出するとこんな感じでできる。

“`javascript
const e= Math.log(b)/Math.log(a);
“`

これを利用して、「4/7の国内累計感染者数をe乗すると4/8の国内累計感染者数になる

TypeScriptで学ぶデザインパターン〜Singleton編〜

# 対象読者

– デザインパターンを学習あるいは復習したい方
– TypeScriptが既に読めるあるいは気合いで読める方
– いずれかのオブジェクト指向言語を知っている方は気合いで読めると思います
– UMLが既に読めるあるいは気合いで読める方

# 環境

– OS: macOS Mojave
– Node.js: v12.7.0
– npm: 6.14.3
– TypeScript: Version 3.8.3

# 本シリーズ記事一覧(随時更新)

– [TypeScriptで学ぶデザインパターン〜Iterator編〜](https://qiita.com/junkimatsuda/items/c5b016b9762f29ef6f50)
– [TypeScriptで学ぶデザインパターン〜Adapter編〜](https://qiita.com/junkimatsuda/items/e8523185d14e53279fb8)
– [TypeScriptで学ぶデザインパターン〜Template Method編〜](https://qiita.com/junkimatsud

JavaScriptでIPアドレスを正規表現を使ってreplaceする方法

# この記事は？

JavaScriptでIPアドレスを置換する時の書き方についての記事です。
忘れないように書いておきます。

# やり方

## IPv4の場合

“`javascript

const ipv4 = “192.1.1.1” ;
const ipv4Regex = new RegExp(
“[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}”
);
console.log(ipv4.replace(ipv4Regex, “0.0.0.0”));

> “0.0.0.0”
“`
## IPv6の場合

“`javascript

const ipv6 = “2001:0db8:1234:5678:90ab:cdef:0000:0000” ;
const ipv6Regex = new RegExp(
“((([0-9a-f]{1,4}:){7}([0-9a-f]{1,4}|:))|(([0-9a-f]{1,4}:){6}(:[0-9a-f]{1,4}|((25[0-5]|2[0-4]\\d

js ファイルから JSDoc で d.ts の型を参照して型チェックする ( jest.config.js を例に)

# 概要
jsにd.tsの型をつけ、補完したり、間違った値を入れたら分かるようにする

# 方法

“`js
// @ts-check
/**
* @type {import(‘@jest/types’).Config.InitialOptions}
*/
const config = {
…
};

module.exports = config;

“`

# 備考
– VSCodeでしか確認していない
– `@typedef` でもimportが使える
– allowJsとcheckJsを有効にしたら `// @ts-check` 不要かもしれない

# 参考

Using typescript declaration files with JSDoc, anybody got a good workflow? from javascript

https://gist.github.com/hrdtbs/f7e567c0738725a16a9de7326dc11127

100日後にエンジニアになるキミ – 21日目 – Javascript – JavaScriptの基礎4

今日もJavaScriptの続きをやっていきましょう。

前回はこちら

[100日後にエンジニアになるキミ – 20日目 – Javascript – JavaScriptの基礎3](https://qiita.com/otupy/items/c960b99342746a7f1abd)

## Array型(配列)

Array型はデータ型の一種で
複数の値を管理するためのデータ構造を持っています。

**Array型の書き方**

`[要素,要素,・・・・]`
`new Array(要素,要素,・・・・)`

`[ ]` (四角カッコ) か `new` 演算子 と `Array`関数を用いる。

Array型を定義して値を代入する

“`
var array1 = [1,2,3,4,5];
let array2 = new Array(1,2,3);
“`

空のarray

“`
var array3 = [];
let array4 = new Array();
“`

※new Array(数値) とすると数値のサイズで空の値の配列となるので注意
`array5 =

Vueのレンダリング時インクリメントした値がおかしかった件

# TL;DR

“`
[Vue warn]: You may have an infinite update loop in a component render function.
“`

これが起こる理由としては、レンダリング中に変数の値を変更すると無限ループが発生する。

詳しい解説は下記
[You may have an infinite update loop in a component render function. 問題の調査](https://qiita.com/amuyikam/items/b1580a20a0b12aee0d48)

# なにをしようとしたら起こったか

下記のように`computed`と`computed`の検証を行っていた。

“`html

{{incNum}}
{{incNum}}
{{incNum}}

{{incNumMet()}}
{{incNumMet()}}
{{incNumMet()}}

【React + Material-UI】タイピングゲームを作ろう！【2020年4月版】

# はじめに

この記事は**「Reactのチュートリアルを終えて、何かを作ってみたい」**という読者を想定しています。
分からない部分が出た場合はReactの[公式ドキュメント](https://ja.reactjs.org/)に立ち返りましょう。

material-uiの[公式ドキュメント](https://material-ui.com/getting-started/usage/)も要チェック

### 前にReact+Material-UIで作ったもの

1. [電卓アプリ](https://qiita.com/shinhiro/items/91b48dfdb47eece38604)
2. [数字当てゲーム](https://qiita.com/shinhiro/items/312d72ab788ca1c45da0)

# 今回作ったもの

[typeee!](https://shintaro-hirose.github.io/typeee/)
英単語のタイピング速度を測定できるアプリです。ランダムな英単語20個を入力したタイムからCPM(1分に入力できる文字数)を計算し、

【Nuxt.js】firebase導入編(firestore版)：データの追加 取得をしよう

# 前置き

便利なfirebase！
シンプルに導入の仕方を解説していきます?
簡単なデータの書き込みと取得をしてみます?

❓そもそもfirebaseとは
簡単に言うと
オンラインにデータを保存できて
取得もできる優れものです！
自分で1から作るとなると大変ですが
firebaseを使えば簡単ですね?
https://firebase.google.com/docs/database

❓どんな時に使うか
例えば、チャットアプリ！
リアルタイムにデータを保存・同期できるので
メッセージを送り合うことが簡単になります?

例えば、フリマサイト！??
会員情報とその会員が出品した商品が
DBに保存されていきます。
それを会員はいつでも編集でき、
反映したらすぐ表示が変わるわけです?
会員自身でデータが作れて編集もできる！
といった感じです?

❓Referenceの読み方
基本的にfirebaseのreferenceは
**英語の状態で表示し、
自分でgoogle翻訳で翻訳しましょう??**

言語を日本語にすると
古いバージョンだったりするので、
最新の英語を翻訳していくのがベスト！

kintoneで都道府県フィールドを作る方法

## はじめに

kintoneで都道府県をドロップダウンで作るのは~~ダルい~~大変ですよね。
私もそういう地道な作業は大嫌いです。

もちろん別アプリで都道府県マスタ作ってルックアップする方法もありますが、~~たかが~~都道府県にルックアップというのは私的にはあまり好きではありません。

かといって、そのためだけにプラグイン使うのもどうかと思います。
他のカスタマイズと競合してもイヤですし、アプリに入れるプラグインは少ないに越したことはありません。

という訳で、特定アプリのドロップダウンフィールドの選択候補として47都道府県を設定する方法をメモしておくことにします。

## 必要なもの

– Node.js
– kintone-js-sdk

これらのインストールの仕方が分からない人は・・・、適当にググってください。
そんなの余裕という人は次のセクションへどうぞ。

~~未来のバカになった私のため~~どうしてもやり方が分からない人のために、ここもメモに残します。

“Node.js“は問題ないでしょう。
インストーラーからインストールするだけです。

“kint

ブラウザからS3に直接ファイルをアップロード vue.js+VueDropzone

# はじめに
前回までで
[Node.jsのLambdaでPre-Signed URLを発行する](https://qiita.com/gungungggun/items/66d0128436e0dcb176b2)
[Pre-Signed URLでS3に直接ファイルをアップロードする](https://qiita.com/gungungggun/items/c1dd5da5fced8c044e3c)
をしたし、ブラウザからでも簡単にいけるだろうと思ってたけど、かなりハマった。
僕が一番ハマったのは`signatureVersion: ‘v4’`が必要ってところでした。
一応手順をメモしておいたので参考になればと思います。

# S3に直接
S3に直接ファイルをアップロードするにはPre-Signed URLを使うと良いです。
ここまでは前回までで実装できています。
ブラウザからとなると、CORSの設定と、クライアントのjsの実装くらいなのでそこまでハマらないはず。って思いますよね？

# CORSの設定
ブラウザからのアクセスなのでCORSの設定が必要です。
S3のバケット＞アクセス権

IE11でエラーが出るjavascriptを条件分岐で読み込まなくする方法

# IE11だけコードエラーが出る
jQueryのmouseenter/mouseleaveが、IE11だけエラーが出て動作せず困ってしまいました。。。（Edgeは大丈夫だったのに）
他のブラウザでは問題ないので、
とにかくIE11はこのjavascriptを起動させないようにしようと思い、
色々試してみました。

# 条件分岐でIE11のエラー回避を試す
## javascriptを使った判定

こちらを参考にさせていただきましたm（_ _）m
[https://developers.wano.co.jp/311/](https://developers.wano.co.jp/311/)

“`javascript
var userAgent = window.navigator.userAgent.toLowerCase();
if( userAgent.match(/(msie|MSIE)/) || userAgent.match(/(T|t)rident/) ) {
//IEの時、mouseenter/mouseleaveが効かないため、静止svgを挿入
jQuery(

#javascript の some / every の挙動を #node で確認する

“`
$ node
“`

# some

“`js
// 配列の中の一つでも値が1であればtrue
> [1,2,3].some(value => value == 1)
true
> [3,4,5].some(value => value == 1)
false
“`

複数条件をつなげることも出来る

“`js
// 配列の中の一つでも値が1または2の要素があればtrue

> [1,2,3].some(value => value == 1 || value == 2)
true
> [2,3,4].some(value => value == 1 || value == 2)
true
> [3,4,5].some(value => value == 1 || value == 2)
false
“`

# every

“`js
// 配列の全ての値が1または2または3であればtrue
> [1,2,3].every(value => value == 1 || value == 2 || value == 3)
true
> [2,3,4].every(va