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

Reactで外部ドメイン向けにリンクを生成する（ReactRouterだとできない？ので。。）

## 概要

Reactで外部ドメイン向けにリンクを生成する（ReactRouterだとできない？ので。。）

## 実装

↓で定義した`LinkToOtherDomain`コンポーネントを使う。

“`jsx
import React from “react”;

export const LinkToOtherDomain = props => {

const { to, children, …other } = props;
return (

{children}

);
};
“`

【ReactNatve】Platform.OSが必ずiosになった話

# TL;TR
– `Platform.OS`の値が常に`ios`になってしまった
– 原因は初歩的なタイプミスだった
– コミットの粒度はなるべく小さくしよう

# 何が起こったか
ざっくり説明すると`ReactNative`製アプリをAndroidで動かした時に、iOSでしか表示されないUIが表示されていました。
下記のように`Platform.OS`を表示させてみると、出力されるのは`ios`。
なぜかOSの種類に関わらずiosとして扱われてしまっているようでした。

“`javascript
import { Platform } from ‘react-native’;

console.log(‘os : ‘, Platform.OS); // –> “os : ios” と出力される・・・
“`

`react-native`の不具合ならもっとIssueで大々的に騒がれてそうだけど、そんな気配もない。
となると何らかのバグなのだが、Platform.OSの値が必ずiosになってしまうってどんな状況やねん・・・

と思いながら直近のコミットを細かく見ていくと、

“

var,let,const の違い

JavaScriptでは、変数や定数を宣言する際に、var/let/constを使用します。
と言っても使用は必須ではなく、var/let/constを使用せずに変数や定数を宣言できます。

こんな感じです。

“`javascript
var a = ‘Var’;
let b = ‘Let’;
const c = ‘Const’;
d = ‘Undeclared’;
“`

それぞれどのような違いがあるのでしょうか？
実際の動作をクイズ形式で確認してみます。

# 目的
var/let/const の違いを理解する

## Q1
エラーとならないのは(a)～(d)のどの変数でしょうか？

“`javascript
console.log(a1); // (a)
console.log(b1); // (b)
console.log(c1); // (c)
console.log(d1); // (d)

var a1 = ‘Var’;
let b1 = ‘Let’;
const c1 = ‘Const’;
d1 = ‘Undeclared’;
“`

正解は…
：
：

UserScript

### 概要
ブックマークレットはブックマーク一覧からユーザが「開く」ことでスクリプトを実行する一方、ユーザスクリプトはあるWebページのロード時に自動でスクリプトが実行されるように（URLフィルタなどで）設定することができる。

ユーザスクリプトの作成にあたって、バージョン情報やURLフィルタを埋め込むヘッダ（メタデータ）を付ける必要があるものの、それ以外では特別な記法などは特に要求されず、通常の（Webページ上で動作する）JavaScriptと同じように記述すればいいらしい。

さて、ユーザスクリプトの実行にはこれを実現するための拡張機能の導入が必要な場合がある。Chromeでは標準機能に含まれており、`chrome://extensions`にローカルのjsファイルをD&Dすることで通常の拡張機能と並べてユーザスクリプトを扱える。一方、Firefoxでは（今のところ）別途拡張機能の導入が必要らしい。

代表例っぽいものを例示する。むかし同様のコンセプトの[ScriptAutoRunner](https://chrome.google.com/webstore/detail/scr

Node.jsのworker_threadsに使えるバイナリフォーマットを考えた件

本記事は[Node.jsのworker_threadsに何を渡すべきか](https://qiita.com/ayatty/items/1f5dde995251ac5800ad)の続きです。
よろしければそちらも是非お読みになってください。

# 1. 前回のquickおさらい
– 大量のメモリを使う処理を並列で動かしたい。並列であることと省メモリであることが条件。
– Node.jsには、メモリを共有できるマルチスレッドの仕組みとしてworker_threadsが備わっている。
– ただしメモリ共有にはSharedArrayBufferを使う必要がある。
– SharedArrayBufferはバイナリ配列なので、JSON-likeな複雑な構造は直接は表現できない。
– JSON.stringify等のシリアライズ結果をBufferに載せることはできるがデシリアライズしないと使えないので省メモリにならない。
– デシリアライズせずにJSON-likeな構造を扱えるシリアライザーが欲しい！作ろう！

そして作ったものをにroJson(read only JSON)という仮称を付けました

配列

#配列とは

複数の値をまるで1つのデータのように、
取り扱うことができるようにすることです。

#作成方法

作成方法は２つ有り、

1.括弧を使ったリテラル記法
2.new演算子を使う方法

上記２点になります。

記述方法を見ていきましょう↓↓

“`js

// 配列は複数の値を格納できる

// リテラル
const array = [1, 2, 3, 4];

// newで作成する
const array2 = new Array(1, 2, 3, 4);
“`

#値の呼び出し方法

“`js
// リテラル　[ ]でまとめて宣言する
const sports = [ ‘baseball’ , ‘Football’ , ‘basketball’ ];

// new でまとめて宣言する
const sports = new Array ( ‘baseball’ , ‘Football’ , ‘basketball’ );
“`

上記の記述で、値を呼び起こしたい時、
下記のような方法をとります。

“`js
sports [ 0 ]
// basebal

入門の次のステップに進めないVue.js学習履歴（随時更新）

# 概要
ドットインストールの「Vue.js入門」を実施してある程度Vue.jsをわかった気になった。
https://dotinstall.com/lessons/basic_vuejs_v2

しかし、実際にリリースされているVue.jsのソースを見るとさっぱりわからなかった。
このため、疑問点と調査経緯を自分のメモ目的でこの記事に残していく。

# 疑問点

## yarn run xxx
package.jsonのscriptsで定義されたxxxを実行する。

“`
“scripts”: {
“xxx”: “～～～～～～～～”,　←これを実行
“yyy”: “～～～～～～～～”,
　　　　：
　　　　：
},
“`

■yarn runのドキュメントはこちら。
https://classic.yarnpkg.com/ja/docs/cli/run

## app.use(nuxt.render)

expressのミドルウェアとしてNuxt.jsを使う。

“`
const express = require(‘express’)
const ap

永遠に続くクソ計算クイズつくた html css javascript

## 成果物
https://yuzuru2.github.io/neta0/dist/

## リポジトリ
https://github.com/yuzuru2/yuzuru2.github.io/tree/master/neta0

## 環境

– node.js 12.14.0
– parcel 1.12.4

## UI


shortcut.jsでshortcut.removeしてもコールバック関数がイベントに登録されたままになる

## 環境

os : Windows 7

## バグ内容

以下のコードで`ctrl + s`を押したら`2つ目`と表示されてほしいのに両方のアラートが連続して表示されてしまう。

“` javascript
shortcut.add(‘ctrl+s’, function(){
alert(‘1つ目’);
});
shortcut.remove(‘ctrl+s’);

shortcut.add(‘ctrl+s’, function(){
alert(‘2つ目’);
});
“`

## 修正方法

[shortcut.js](http://www.openjs.com/scripts/events/keyboard_shortcuts/shortcut.js)
上記リンクがコード全体ですが219行目と220行目を入れ替えれば直ります。

“` patch
shortcut.remove
– if(ele.detachEvent) ele.detachEvent(‘on’+type, callback);
– else if(ele.removeEventListe

アロー関数について

#アロー関数とは？

functionの定義をより短く記述できる方法で、
「=>」という記号を使って記述します。

記述方法についてみていきましょう↓↓

#記述方法

####function有り文

“`js
//function文
let color = function () {
document.write( “white” );
}
color();//white
“`

上記の記述方法がこれまでの、基本でした。

下記を見て頂くと、
アロー関数を使用することにより、
短い分で、関数を定義することが出来ます。

####アロー関数　引数無し文

“`js
// アロー関数 引数無し (かっこいる)
let color = () => {
document.write( “white” );
}
color(); //white
“`

####アロー関数　引数１つ

“`js
//引数が１つの場合は引数の（）が不要
let test = n => n * 2;
document.write(test(4));//8
“`

####アロー関数　

4歳娘「パパ、具体的な名前をつけないで？」

## 36歳ザコーダーの休日
ワイ「何やこのコード、全然動かへんやん」
ワイ「怖いな～怖いな～…なんか嫌だなあ～」

よめ太郎「（何で自分が書いたコード見て**稲川淳二みたいに怯えとんねん・・・**）」
よめ太郎「（そんな鳥肌立つようなクソコード書いてんのかいな・・・）」

娘（**4歳**）「ねぇ、パパ」

ワイ「なんや、娘ちゃん」

娘「ちょっと、**作ってほしい関数**があるの」

ワイ「またかいな」
ワイ「娘ちゃんはホンマに**関数が大好き**やなぁ」
ワイ「しゃあない、パパはプログラミング苦手やけど、頑張って作ったるわ」

娘「ありがとう、パパ」

## 今回の要件
ワイ「ほんで、今回はどんな関数を作ればええんや？」

娘「えっとね」
娘「`’あ’`という文字列を渡したら」
娘「`[‘あ’, ‘あ’, ‘あ’]`という配列を返してくれる」
娘「そんな関数が欲しいの」

ワイ「そんなん何に使うんや・・・」

娘「その関数がなくて、**友達が困ってるの**」

ワイ「**何やて！？**」
ワイ「娘ちゃんの友達が！？」
ワイ「よっしゃ、もう細かい事情なんて聞いたりせん！」
ワイ「ワ

【JavaScript】flatMapで配列の配列を平坦化して各要素に親配列のインデックスを付けちゃう

# 経緯
* ページングしろ！一覧なんだから当たり前だろ！
* でもページ数は教えないし、1 ページあたりの件数も合計件数も教えないぞ！

# 解決策
* ページの目次を 0 から順にインクリメントする
* 要素数が 0 件の配列を引くまで繰り返す
* ↑ を非同期で実行し、取得結果をローカルに保持
* 取得結果は以下のような配列の配列となる様にする
* flatMap を使って平坦化していろいろする

“`javascript:取得結果
[
[
{ value: ‘0 番目の要素です。’ },
{ value: ‘1 番目の要素です。’ }
],
[
{ value: ‘0 番目の要素です。’ },
{ value: ‘1 番目の要素です。’ }
]
]
“`

# flatMapで配列の配列を平坦化するやつ
“`javascript
pages.flatMap((page, index) => {
return page.map(list => {
return ({ pageNo: `${index} ページ`,

Vue.js 現在時刻の表示 ~時計~

# Vue.jsとは

ユーザーインターフェイスを構築するためのプログレッシブフレームワークです。他の一枚板(モノリシック: monolithic)なフレームワークとは異なり、Vue は少しずつ適用していけるように設計されています。中核となるライブラリは view 層だけに焦点を当てています。そのため、使い始めるのも、他のライブラリや既存のプロジェクトに統合するのも、とても簡単です。また、モダンなツールやサポートライブラリと併用することで、洗練されたシングルページアプリケーションの開発も可能です。
>参考URL
>https://jp.vuejs.org/v2/guide/index.html

## Vue.jsを使用するメリット

– 気軽に使える：
Vue.js はjQueryと同様に、scriptタグを1行書くだけで使い始めることができます。
– DOM操作を自動的に行ってくれる：
HTMLドキュメント全体の要素の構成をDOM(Document Object Model)といいます。Vue.jsはHTML側の要素とJava

Vuexのmutations/actionsが実行された事をテストする方法を調べたメモ

Store側のテストについては言及があっても、コンポーネント側のテストについてはあまり見かけなかったので調べた内容をメモ。

## 結論コード

### 概要

– Vuex Storeを用意するよ
– mutationsのStubを用意するよ
– 上２つをセットしたwrapperでcalledを見るよ

### コード

“` ButtonStuff.vue