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

three.js と CANNON.js で ニュートンのゆりかご を作りたい！

## はじめに
最近、Three.jsにハマっていて物理演算が可能な Cannon.js と組み合わせて何か作りたかった(※物理演算に関する知識はありません)。何を作ろうかと悩んだ末にあるものが思いつきました。

それが 「ニュートンのゆりかご」(正式名称初めて知った)

こういうの↓([Wikipedia](https://ja.wikipedia.org/wiki/%E3%83%8B%E3%83%A5%E3%83%BC%E3%83%88%E3%83%B3%E3%81%AE%E3%82%86%E3%82%8A%E3%81%8B%E3%81%94 “ニュートンのゆりかご”))より


## 初めに結果から

なんか変なのできた。気持ち悪い。

Node.js Worker Threads: スレッド間でデータを送受信する方法

前回、[Node.js: CPU負荷で3秒かかっていた処理を「Worker Threads」で1秒に時短する](https://qiita.com/suin/items/bce351c812603d413841)という投稿をしました。

本稿では、Node.jsで本物のスレッドが扱えるWorker Threadsにて、スレッド間でデータを送受信する方法について解説します。

## 本稿で分かること

* メインスレッドからワーカーをデータを送信するのはどうやるのか？
* ワーカーからメインスレッドにデータを送信するのはどうやるか？
* ワーカー同士のデータの送受信は？

## メインスレッドからワーカーへデータを送信する方法

メインスレッドからワーカーへデータを送信するには、`Worker`の`postMessage`メソッドを用います。次の例は、`’Hello!’`という文字列データをワーカーに送信するものです:

“`main.js
const {Worker} = require(‘worker_threads’)
const worker = new Worker(‘./w

JavaScript(TypeScript)で map と for of どちらがいい？

# 結論

パターンを増やしてループ回数をいろいろ試しました
どうも結果が安定しない感じでした

確実言えることは「配列から配列のmap処理」をするなら「map」を使え

それ以外はどうでもいい

~~`for of`のほうが効率よいです~~

# 二度目

## 実行結果

“`console
$ ts-node test.ts
————————————–
loop count: 100
loopforOf: 0.135ms
loopMap: 0.010ms
loopforOf-add: 0.018ms
loopMap-add: 0.009ms
loopforOf-copy: 0.023ms
loopMap-copy: 0.019ms
loopfor-copy: 0.017ms
————————————–
loop count: 10000
loopforOf: 0.468ms
loopMap: 0.052ms
loopforOf-add: 0.350ms
loopMap-add:

Javascriptのobjectに入ってるfunctionの中のthisのスコープがアロー関数と普通の関数で違うっぽい

Javascriptでご飯を食べてる人にとっては、今更な話題かもしれませんが、、、

Objectに追加した関数内の”this”のスコープが、普通の関数とアロー関数で違ってくるのに気付きました。

“`javascript
const methods = {
test_function: function () {
console.log(this);
},
test_arrow: () => {
console.log(this);
}
}
“`

chromeのコンソールで試した画像がこちら

コンソールではアロー関数だとWindowがスコープになってるみたいです。

最近覚えてカッコつけてアロー関

兵庫県の地表形状（建物等含む）を地図上に可視化【DSM】

## 1. 背景
兵庫県の1m精度の地表面（建物等含む）点群データを3D地図上に表示する。
詳しい方法は[個人ブログ](https://sw1227.hatenablog.com/entry/2020/03/12/075147)に公開するが、JSXのシンタックスハイライトが失敗したため、ソースコードのみQiitaに記載する。

**前処理等の詳細**
[兵庫県土の1m精度3次元データをWeb地図上に3D可視化【DSM】](https://sw1227.hatenablog.com/entry/2020/03/12/075147)


## 2. 実装
### 2.1. 注意点
#### 定数
コード内の `YOUR_MAPBOX_TOKEN`, `YOUR_MAP_STYLE` には値を埋める必要がある。

– `YOUR_MAPBOX_TOK

React+Laravelでpublicフォルダ内の画像を表示する

#はじめに
React+Laravelでwebサイトを書くぞー！っとなってとりあえずコンポーネントを作ることにしたのですが、そもそもReact初体験で、Reactで画像ってどうやって表示するのかわからなかったのでメモ。

#環境
– docker
– Laravel Framework 6.16.0
– npm 6.12.1

### ディレクトリ構成
“`
├── docker
│ ├── nginx/
│ └── php/
├── docker-compose.yml
└── laravel
├──app/
├──artisan
├──bootstrap/
├──composer.json
├──composer.lock
├──config/
├──database/
├──node_modules/
├──package.json
├──phpunit.xml
├──public/
│ ├──img/
│ ├──h

JavaScript 変数宣言

#はじめに

プログラミング言語には、文字列や数値などのデータに名前をつけることにより、
繰り返し使用できるようにする変数という機能があります。

JavaScriptには「これは変数ですよ」
という宣言をするキーワードとして、
###var,let,const
上記3つがあります。

今回はその内の、varについて説明していきます。

#varの記述方法

“`ruby:qiita.rb
var　変数名;
var 変数名, 関数名;
var 変数名　= 値;
“`

上記のように、記述します。
値を代入する場合は、変数はその値で初期化され、代入されない場合は、
「undefined」という無効なことを表す値が表示されます。

コード

静的サイトジェネレーター　11ty(eleventy)

Nunjucksだけでなく PUG / Handlebars / EJSも使用することのできる優れものです。
やり方によっては、yamlを使用してhead内のテキスト内容を挿入することも可能です。

以前僕も、この案件はEJSであの案件はNunjucksってゆう感じにJSテンプレートエンジンを変えていました。
その度にgulpの設定を変えていました。

めんどくさいです。

Nuxtを使って静的サイトを作っていくのも流行っているし、かっこいいしいいかもと思いましたが、
他に選択肢はないかなと思い、dev.toを眺めていると出会いました。

使用方法も至ってシンプル。

すぐに案件で使ってみました。

“`js

src/
views/
_includes
_data

“`
上記のディレクトリで大丈夫です。
.eleventy.jsに下記を記述

“`js
module.exports = function(eleventyConfig) {
return {
dir: {
input: ‘src/views’,
inclu

【まとめ】GoogleMapsPlatformで駆け出したいときの参考サイト3選

##GoogleMapsPlatformとは？

webサイトやアプリケーションにgoogleマップを表示・カスタマイズするためのAPI等を提供している~~重課金推奨~~サービス。

GoogleMapsPlatformの公式サイトは[こちら](https://cloud.google.com/maps-platform/?hl=ja)。

公式ドキュメントが日本語対応していないというイカしたAPIが揃っているのです。。

英弱なので頭を抱えてしまいました。。。

(イカしたAPI達を紹介する記事は後日書こうかと。)

##GoogleMapsPlatform、情報少なくない？？

以前はGoogleMapsAPIとして提供されていたのですが、
2018年6月11日からはGoogleMapsPlatformにリニューアルされました。

そのタイミングで、新しい仕様を満たさないままAPIを呼び出し、表示させているマップは警告が出たり、グレーアウトされてしまうようになったようです。

また、有料化も相まって、元々多くない日本語の解説サイトでもデモが動いていなかったり、
意外と日本語の情報が

【5日目】Javascript 関数、コンストラクタ

#本日の学び

こんばんは。
本日も学びのアウトプット

– Progate Javascript 学習コース3
– Progate Javascript 学習コース4

“`js

//アロー関数(イコールより先を代入する)
//引数(関数に追加の情報を与える)
const masa　=(　, , ) =>{　//箱
console.log(” “); //表示
};
masa( , , ); //具体的情報

//戻り値(情報を与えて結果を戻す)
const masa=(A,B)=>{ //箱
return A+B; //戻り値(retuenは関数を終了させる性質あり)
};
const C = masa(1,3); //具体的情報
console.log(C) //表示したい結果

//スコープ
//関数内で定義した定数、変数は関数内でしか使えない。{}の間のイメージ
//外で定義すれば使える

//getMax
const number1 = 103; //定義
const number2 = 72;
const number3 = 189;

const

express-generator作成：自分用メモ

# express-generatrでアプリ作成
“`bin
express -e “ファイル名”
“`

# npm install
作成したファイルに移動し、

“`bin
npm install
“`

※もしnpm start がエラーになる場合は、

“`
npm install –save npm
“`
と打つ。

#アプリをスタート

“`
npm start
“`
これで動きます。

GitHub Pages & GitHub Desktop ですぐにウェブサイトを作るためのメモ

# はじめに
この記事では GitHub Pages & GitHub Desktop ですぐにウェブサイトを作るために心がけたことをまとめています。作業環境は Windows 10 Pro です。

## GitHub Pages とは
名前の通り、GitHub が提供しているウェブサイト作成ツールです。ウェブサイトの内容が独立したリポジトリとして保存され、Git によってバージョン管理されます。URLにはユーザー名が入ります。
### GitHub Pages の長所
– サーバーやドメインを自前で用意する必要はない
– 編集作業はローカルでやるので、好きなテキストエディタを使える
– Git によるバージョン管理ができる
– 個人なら無料 (GitHub は団体・企業だと有料です)

### GitHub Pages の弱点
– 自分でHTMLソースを用意しなければならない (エディタに拡張機能を導入しない限り、Google Sites などのように編集作業を補助するツールはない)
– URLの自由度がない (URLにはユーザー名が入ります)

## GitHub Desktop

Progate無料版をやってみる【JavaScript II ES6】

#無料レッスンJavaScript II ES6
[前回](https://qiita.com/GodPhwng/items/351c14f0d767bf590c9e)の続きになります。

これの次のレッスンからは有料っぽいので、JavaScriptのレッスンは今回までとなります。
[レッスン一覧](https://prog-8.com/lessons/info)

###変数の復習
・前回のレッスンの復習
　console.logで数値を出力。
　1を足して複数回出力。

“`javascript

// 変数numberを定義してください
let number = 1;

// 変数numberの値を出力し、その後に変数numberに1を加えてください
console.log(number);
number++;

// 上述の2行のコードを4回、貼り付けてください
console.log(number);
number++;

console.log(number);
number++;

console.log(number);
number++;

console.log

【Vue.js】storeの変更を検知して、dataプロパティの値を変更する。【Vuex】

## はじめに
Vuexのstoreの値が変更された際、それをコンポーネント側で検知して、
コンポーネント内のdataプロパティの値を変更するサンプルです。

## ソース

“`sample.js

const state = {
sampleList: []
}

const getters = {
sampleList: state => state.sampleList,
}

const actions = {
SET_SAMPLE_LIST({ commit }, values) {
commit(‘SET_SAMPLE_LIST’,values);
}
}

const mutations = {
SET_SAMPLE_LIST(state, { values }) {
state.sampleList = values;
},
}

export default {
namespaced: true,
state,
getters,
actions,
mutations
}
“`

“`sample.vue

//

nuxt.config.jsで.envで定義した値を使う方法

.envを導入すると

“`js
process.env.XXX
“`

で`.env`に定義した値を環境変数としてとってこれます。
便利ですね。

ただ`nuxt.config.js` のファイル内で`process.env.XXX`を使うと`.env`で定義した値を取得できませんでした。
調べたところ以下の記述

“`js:nuxt.config.js
import dotenv from ‘dotenv’
dotenv.config()
“`

を書いてやることで`process.env.XXX`が効くようになりました。

JQueryのextendメソッド

#JQueryのextendメソッド（備忘録）

オブジェクトのマージにはextend()を使用する。

“`javascript
var obj1 = {name: “taro”, age: 20};
var obj2 = {age: 25, sex: “man”};

$.extend(obj1, obj2);

console.log(obj1);

結果
{name: “taro”, age: 25, sex: “man”}
“`

第一引数に空オブジェクトを指定すると元オブジェクトを壊さずに済む。

“`javascript
var obj1 = {name: “taro”, age: 20};
var obj2 = {age: 25, sex: “man”};

var newObj = $.extend({}, obj1, obj2);

console.log(obj1);
console.log(nowObj);

結果
{name: “taro”, age: 20}
{name: “taro”, age: 25, sex: “man”}
“`

connected-react-routerでReactのルーティング情報をReduxで管理する

react-reduxで開発するなら、ルーティングの管理はconnected-react-routerが便利ですね。

詳細は[こちら](https://tech.playground.style/javascript/connected-react-router/)に書きました。

fitieが動かないきみへ

要するに、jsであとから追加したものには適用されない

“`js
this.fitie(document.getElementById(‘hoge’));
“`

ajaxとかなんとかかんとか使ってるとこだと

“`js
$(‘img.hoge’).bind(‘load’, function(e){window.fitie(e.target);});
“`

ってすると幸せになれるかもしれない

GatsbyサイトにGoogleAdSenseを導入する

## これは何

先日[自分のブログ](https://www.takigawa-memo.com/)にGoogleAdSenseを導入しました。
申請してから承認されるまで待たされたり、承認された後もGoogleからサイトが認識されるまで時間がかかったりともどかしい日々が続きましたが、一週間程度で問題なく広告が表示されるようになっていました。
今回は、GatsbyサイトにGoogleAdSenseを導入する方法、特にGatsbyのSSRに対応する方法や、表示される画面のサイズに応じて広告の表示非表示を切り替える方法などをまとめていきます。
なお、GoogleAdSenseに自身のサイトを登録する方法などは検索すればいろんなサイトで紹介されていると思いますので今回は省略させて頂きます。

## gatsby-plugin-google-adsense

GoogleAdSenseをサイトに導入するためには、適当なscriptタグをヘッダに追加する必要があります。
それをしてくれるのが[gatsby-plugin-google-adsense | GatsbyJS](htt

FormDataでファイルもオブジェクトも一緒に送る方法

#ハマった箇所
axiosでファイルも、オブジェクトも送りたいが、オブジェクトが[object Object]になってしまう。

#なぜ送れなかったのか？
[FormData.append]（https://developer.mozilla.org/ja/docs/Web/API/FormData/append）

> The field’s value. This can be a USVString or Blob (including subclasses such as File). If none of these are specified the value is converted to a string.

FormDataに追加するときにValueはUSVStringかBlobにしてね、それ以外だと全部テキストにするよとのこと。

その為直接入れるのはNG

#送る方法
Axiosでファイルを送る方法

“`js
storeFiles(reportId) {
let formData = new FormData()
//複数送り