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

three.jsで表示するJSONファイルを手書きするときの最低限の要素

# はじめに
[Spectacles](https://github.com/tt-acm/Spectacles.WebViewer/ “Spectacles Viewer”)という、Webブラウザ上で簡単に3Dデータを表示できるthree.jsをもとにしたJavaScriptのライブラリがあります。「BIM」とか「AEC」とか書いてあるので建築業界向けのやつですね。
これを使うにあたっては基本的には上記URL内で誘導されているRevit、GrasshopperのExporterを使えば良いのですが、中身そもそもどうなってんの？ということでJSONファイルを自分で書いたときのメモです。（手書きといっても出力にはコードを書きました）
3D全然分からない者が最低限何かの物体が表示できれば…というものなのでガラスの透明感の表現などの領域には及んでいません、すみません。

# JSONファイルの構成
GitHubのthree.jsのwikiで[JSONのフォーマット](https://github.com/mrdoob/three.js/wiki/JSON-Object-Scene-forma

GoogleMapAPIでマーカーに数値を表示する方法

## GoogleMapAPIでマーカーに数値を表示する方法
### 結論
google.maps.Markerのインスタンスを作成する際に、label: に値を入れてあげる。
その際には文字列でないと、デフォルトのマーカーが表示される。

“`
new google.maps.Marker({
position: { lat: 12.97, lng: 77.59 },
label: ‘1’,
map: map,
});
“`

### 感想
ネットで探しても探し方の問題か、あまり良い記事がなかったので公式リファレンスをみたら一発だった。
今後は公式リファレンスを見る！（Google翻訳で問題なくみれるレベルでした）
https://developers.google.com/maps/documentation/javascript/examples/marker-labels?hl=ja#maps_marker_labels-css

JavaScript で複数の配列で重複したデータのみを取得するだけ

# はじめに

数学的に言うと共通部分、Intersection のことです。
AND 検索とかで使えるかもしれません。

# JavaScript と TypeScript

“`js
const getIntersection = (baseArray, …arrays) => {
return baseArray.filter((value) => {
return arrays.every((array) => {
return array.includes(value);
});
});
};
“`

“`ts
const getIntersection = (
baseArray: Array,
…arrays: Array>
) => {
return baseArray.filter((value) => {
return arrays.every((array) => {
return array.includes(value);
});
});

Iterableなオブジェクトを配列風に扱うためのライブラリを作った

# Iterableなオブジェクトを配列風に扱うためのライブラリを作った

JS標準オブジェクトの`Array`風に`Iterable`なオブジェクトを操作するライブラリ（`Iteration-JS`）を作ってnpmで公開しました。
このライブラリの持っている機能は先行で作ってる人が千人くらいはいると思います。[^1] [^2]
型定義ファイルを同梱しているのでTypeScript環境でも利用可能です。
大元のソースはTypeScriptで書いてあるのでDeno環境からなら直接インポートすることもできます。

## リポジトリ（GitHub,npm）

ソースコードはGitHubのリポジトリで管理しています。
ルート階層にソースが大量に置いてありますが、これはDeno環境などから直リンクで取得しやすい様にする工夫です。[^3]

https://github.com/felis392/iteration-js/
https://www.npmjs.com/package/@felis392/iteration-js

Issueを上げてもらえれば対応するかもしれません。

## 機能の

Blazor + canvas APIでアニメを描けるようにしてみた

# はじめに
Blazorなどの学習を兼ねてアニメを描けるシンプルなお絵描きWebアプリを作りました。
Blazorを使っているとは口ばかりで、C#よりもTypeScriptを書いてることの方が多いです。

[Demo(Firebase)](https://blazor-lightbox.web.app/)
[Source(GitHub)](https://github.com/msanou/animation-lightbox)

某謎アニ団さんぐらいアニメを描けたら良かったのですが、私では瞬きが限界です。

現在は8fps(いわゆる三コマ打ち)のみですが、いずれはフレームレートを変更できるようにします。レートの変更だけなら楽ですが、アニメーション1秒の再生に24枚(24fps:日本のアニメの一般的なフレームレート)は普通描かな

Vuex + TypeScript + vuex-module-decoratorsでのmutationとgetterの単体テスト

# やりたいこと

[vuex-module-decorators](https://github.com/championswimmer/vuex-module-decorators)を使うことで、TyepScriptでVuexを記述する際により型付けの恩恵を受けられるようになります。この記事ではvuex-module-decoratorsを使った際のVuexのmutationとgetterのJestでの単体テストの記述方法を紹介したいと思います。

以下の環境で動作検証しています。

– Vue.js: 2.6.19
– Vuex: 3.0.1
– vuex-module-decorators: 0.9.9
– 単体テストユニット: Jest

# テスト対象のVuex
テスト対象として以下のVuexを作成します。

“`TSX:counter.ts
import { Action, Module, Mutation, VuexModule } from “vuex-module-decorators”;

@Module({ name: “counter”, namespac

JavaScriptで指定した期間の、月単位、日単位の連番を作成する

#やりたいこと
datepicker等で選択した日付の範囲を、月単位、日単位で区切り配列にぶち込む。

‘2020-08-17’ から ‘2020-09-03’ で期間指定したとき、
日単位の場合は素直に
[‘2020-08-17′,’2020-08-18′,’2020-08-19′,…,’2020-09-03′]
月単位の場合は、’yyyy-mm’ 部分をみて
[‘2020-08′,’2020-09’]

が欲しい。

#本題

今回は、期間は決め打ちで。
配列を用意して

“`
var fromDate = ‘2020-08-17’
var toDate = ‘2020-09-03’

var monthlyRange = [];
var daylyRange = [];
“`

for文で日、月を加算していくので、date型に変換

new Date(‘yyyy-mm-dd’)
の形でOK。
参考：http://cly7796.net/wp/javascript/how-to-use-new-date/

new Date(‘yyyy-mm’)
だとddの部分は ’01’

【Rails】ページの上部に戻るボタン

##　はじめに
・Railsを使用してアプリケーションを開発
・viewsの下部地点から上部に戻るボタンを設置する

Ruby 2.5.7
Rails 5.2.4.4

## 流れ
・“`gem ‘jquery-rails’“` を導入
・アクションを起こすボタンを用意（画像でなく文字やfont-awesome等でも代用可能）
・viewにボタンを記載しcss及びjavascriptへ追記

## ボタン画像

適当に準備します・・・

画像ファイルをapp/assets/images配下に格納

## viewsへ追加
“`ruby

<%= image_tag asset_path('top_btn.png'), class: 'top-btn' %>

ツール比較サイトまとめ

#全体
stackshare
https://stackshare.io/

#npm
openbase
https://openbase.io

npm trends
https://www.npmtrends.com/

NPMCompare
https://npmcompare.com/

npmcharts

Awesome Node.js
https://nodejs.libhunt.com/

#静的サイトジェネレーター
StaticGen
https://www.staticgen.com/

[PlayCanvas]他のEntityのScriptを取得する

# 概要
例えば、衝突処理などが発生した時に、そのぶつかった対象に影響を与えるなどをするために必要な処理。

# 記述例
“` javascript:Sample.js
var Sample = pc.createScript(‘sample’);

Sample.prototype.test = function( param ){
console.log( param );
};
“`

“` javascript:Call.js
var Call = pc.createScript(‘call’);

Call.prototype.initialize = function(){
var entity = ~~~; // 何かしらの手段でEntityを取得したとする

// 安全でないアクセス
entity.script.sample.test(‘Unsafe Call.’);

// 安全なアクセス方法
// 1. EntityにScriptコンポーネントがあるかを調べる
// 2. Scriptコンポーネント内にS

GASを使ってスプレッドシートをPDF化してメールに添付する。

やったこと
・特定のシートを複数PDF化けること。
・別途JSONファイルを保存して、そこから個人情報を取得すること
・複数のPDFをメールに添付すること。

経緯：
今まで直書きしてたけど、`.envfile` のように個人情報は分けたくなりました。

下記のようなJSONファイルを用意

“`JSON
{
“user_info”: {
“mail_adress”: [
“hoge@gmail.com”,
“huge@gmail.com”
]
}
}
“`

コードがこちら

“`js
//個人データを保存したJSONファイル。共有用ファイルから確認可能。
const file_id = “1Jo6Dx6QPU_baFnCUzXlFiFyjRpyS71Nq”;
//送信内容を保存したスプレッドシートのID
const sheet_id = “1x6olwI_XZALOzayxh0vXlxKXqtzhEwT_b92c0QUW7zY”;

function sendMail(){

const currentTime =

非同期処理のタイムアウト時の処理をPromiseで書く方法の考察

# 背景

JavaScriptで非同期処理をコールバック関数としてセットしたとき、そのコールバック関数がいつまでたっても呼ばれないケースをケアするために、タイムアウト処理を書きたいことがある。

例:

* HTTPのリクエストを送信したがレスポンスがいつまでたっても返ってこない
* WebSocketで返信を期待して送信したが返信が返ってこない (ping を送ったが pong が返ってこない, etc.)

JavaScriptでは非同期処理をうまく扱うためにPromiseが言語組み込みでサポートされている。
したがって、以下のようなPromiseを作るのが言語の作法としても良さそうだし `await` キーワードとも相性がよいだろう。

* 成功したら `fulfilled` になる
* 失敗したら `rejected` になる（失敗の原因はタイムアウトに限らないが `reason` でわかる）

# やりたいこと

今回考えるシナリオの概要は
「Node.js上で、処理を移譲するため子プロセスを起動する。子プロセスの準備ができるまで待ち、準備ができたら実際に通信する」
という

varとletとconstの違い

#はじめに
自分が忘れないために備忘録的な物として残します。
ES6から変数宣言に利用可能なletとconstが追加されました。
10年選手のWEBアプリの開発をやっていたりすると、世の中から取り残される。
varとletとconstの違いを理解した上で、今後はletやconstを使う。

#先にまとめ
| | 初期化なしの宣言| 再宣言 | 再代入 | スコープ|
|:——|:————|:——-|:——|:————|
| var | 可能 | 可能 | 可能 | 関数 |
| let | 可能 | 不可能 | 可能 | ブロック |
| const | 不可能 | 不可能 | 不可能 | ブロック |

#var
##初期化なしの宣言
**可能**

“`
var x;
“`

##再宣言
**可能**

“`
var x = 1;
var x = 2;
“`

##再代入
**可能**

“`
var x = 1;
var x = 2;
c

JavaScriptのドット記法とブラケット記法について

#プログラミング勉強日記
2020年9月24日
「ブラケット記法」という単語を初めて聞いたので、ブラケット記法について調べていくうちに似たようなドット記法を知ったので両者を比較してみる。

#ドット記法とブラケット記法
　どちらもオブジェクトのプロパティにアクセスする方法である。

　ドット記法はその名の通り`.`(ドット)を使ってプロパティにアクセスする。`[]`はブラケットと呼ばれるので、ブラケット記法もその名の通り`[]`(ブラケット)を使ってプロパティにアクセスする方法である。

#違い
　ブラケット記法はプロパティ名に変数を使うことができるが、ドット記法は変数を使うことができない。また、ブラケット記法はプロパティ名が数字で始まるような不正な文字でもアクセスできる。(ドット記法の場合はエラーになってしまう)

#まとめ
　ここまで聞くとじゃあブラケット記法で書けばいいのでは？と思うが、基本はドット記法の方が読みやすいのでドット記法で書く。
　違いのところでも述べているように、プロパティ名に変数を使う場合や不正なプロパティ名にアクセスしたい場合にはブラケット記法を

Swiftで取得した画像をWKWebView内のHTMLで表示する方法

WkWebviewのコンテンツ内でSwiftで取得したPNG画像などのデータを使いたいケースがあると思います。

本記事では[WebViewJavascriptBridge](https://github.com/marcuswestin/WebViewJavascriptBridge)を使用した、PNG画像のSwiftとJavaScript間での通信にて表示する方法について記載します。

## ローカルのHTMLをWebViewで読み込み(Swift)

まずはWKWebviewでローカルのhtmlを読み込む。

“`Swift:Swift
class ViewController: UIViewController {
var webView:WKWebView?

override func viewDidLoad() {
super.viewDidLoad()
// WKWebViewのViewへの追加
self.webView = WKWebView(frame: view.frame)
vie

2020年で最も需要のあるプログラミング言語

本記事は[Most in-demand programming languages in 2020](https://lampstudy.net/most-in-demand-programming-languages-in-2020/)の日本語訳です。翻訳元に報告していますが、もし苦情が来たら消します。
翻訳は不慣れなので変なところもあると思いますが、ご容赦ください。

—

ソフトウェア開発業界は絶えず変化しており、それは開発者の能力に対する企業のニーズも変化していることを意味します。そのため、あなたが想像できるように、Webアプリケーション、ゲーム、アルゴリズムなどのあらゆる側面の開発をカバーするために、選択できるプログラミング言語はたくさんあります。その

Js：tokenを取得する為に苦労した事象

今回は、token取得が出来ない事象が発生しその原因と対処を忘れない様に覚書していきます。

事象内容
Payjpでのクレジット決済機能（テスト）を実装中にtokenが取得が出来なかった。
カード決済機能js

そこでturbolinksをコメントアウトしてみました。
turbolinksは、たまに発火に悪影響を及ぼす事があるみたです。


しかし、tokenが取得出来ない事と、その前に実装していた商品出品機能の販売価格のjsが発火しない様になってしまいました。
※販売価格jsはturbolin

【Gatsby.js】単一のjsonファイルを元に複数のページを生成する

Gatsby.jsを使って、jsonファイルから複数のページを生成する方法をまとめます。
Gatsby、情報自体はそこそこ豊富なんですが、日本語の情報が少ないですね。。

## 記事データをまとめたjsonファイルを作成
“`zsh
$ mkdir src/data
$ touch src/data/articles.json
“`
“`src/data/articles.json
[
{
“slug”: “how-to-use-gatsby”,
“title”: “【Gatsby.js】「ここだけ押さえれば普通に使える」って知識をまとめてみた”,
“content”: “Gatsby.jsでシンプルな静的サイトを作る際に必要な知識だけをまとめました。CMSとの連携等については今回は扱いません。本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト”,
“tags”: [“React”, “Gatsby”]
},
{
“slug”: “learn-react”,
“title”: “Reactの学習、今

組み合わせ爆発ハラスメントの処方箋

プログラミング初学者向けの内容です。
今のところ Golang, Ruby, Python, JavaScript, TypeScript による処方箋のみ掲載しています。

# ある日のこと

知人「店長からさぁ、

　　　『うちはメニューの数が少ないから、
　　　　コンビ・メニュー作ることにした』

　　　『とりあえず、
　　　　今あるメニューを組み合わせて、
　　　　単品から全部入りまで
　　　　すべての組み合わせのリスト作ってくれ！』

　　　って、言われたんだけど…」

俺「え？ それって、
　　???があるとしたら、
　　↓みたいなやつ？」

1:?
2:?
3:? ?
4:?
5:? ?
6:? ?
7:? ? ?

知人「そう。そう。それ！それ！」

俺「作れるけど、、
　　きっとものすごい数になるよ。
　　単品メニューって何種類くらいあんの？」

知人「20種類くらいかなぁ。。
　　　物好きな店長でしょ？！
　　　めんどくせぇ。。」

俺「…」

俺「あのさぁ、、
　　面倒くさいとかの次元じゃないんだけど。。」

俺「0.1 mm 厚の紙を 26 回折っ

セル内改行に対応したcsvの読み込み

# 前回のあらすじ

[何も知らないところからのhtml、CSS](https://qiita.com/tenpoul/items/4ce608943421261c2638)

プログラム自体は出来ているが記事にするまでに相当時間が空いた。
前回はレイアウトを作ることができた。
今回はリストをつくるために元のデータを読み込む。

#csvを読み込むために。

ローカルファイルのcsvを読み込みたい。
しかし、調べてみるとボタン操作をせずにファイルを読み込むためにはgoogleChromeではできないようだ。
さらに調べるとNode.jsを使えば操作できるようだ。ついでにデスクトップアプリ作成のためにElectronを導入することになる。

今後は
– Node.js
– Electron
が導入されている環境を想定して記事を書いていく。

最終的な表示の都合上、読み込むcsv元データはセル内改行を行っているものを想定する。
Excel→csvに変換したものである。

csvファイルの読み込みに関しモジュールを導入した。
npm で導入できるので詳細は検索して欲しい。

– モジュール