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

新型コロナ感染箇所マップを作ってみる【FastAPI/PostGIS/deck.gl(React)】（データ表示編）

こちらの記事は[新型コロナ感染箇所マップを作ってみる【FastAPI/PostGIS/deck.gl(React)】（データ加工編）](https://qiita.com/nokonoko_1203/items/579fc0133d0a2184da42)の続きです。

上の記事をご覧になってからお読みください！

# Reactの環境構築

ここまででcsvの元データをAPIからGeoJSON形式で吐き出せるようになっていると思いますので、そのデータを利用して地図上にコロナウイルス感染者の位置を表示できるようにしていきましょう！

まずはReactのプロジェクトを簡単に作成できる`create-react-app`を実行するための`Node.js`がインストールされているか確認しましょう

“`shell-session
$node -v
v12.13.1

$npm -v
6.12.1
“`

上記2つのコマンドを入力してバージョンの数字が表示されればインストールされています。

コマンドがないよー！なんて怒られた場合にはインストールされていませんので[NodebrewでNode

JavaScriptのスコープについて

##スコープとは
スコープとは変数を参照できる範囲のことです。今回はJavaScriptのvar,let,constについて解説します。
constは定数(再代入不可)の宣言なので特に難しく考えることはないのですが、letとvarは少し紛らわしいのでここを理解することでコードレビューの指摘が減ると思います。

##今回の記事用に書いたコード
コメントに解説が書いてあるので、これだけでも分かるかもしれませんが一応ひとつずつ解説します。

“`javascript
function Test(){
var hoge = 1

// hogeは関数スコープなのでTest関数の中で使う場合はエラーにならない
console.log(hoge)

if (true){
let fuga = 2
// fugaはブロックスコープなので、ブロック内(この場合はif文の中)で使用する場合はエラーにならない
console.log(fuga)
}
// fugaはブロックスコープなので、ブロック内で定義した変数をブロックの外で呼び出そうとするとエラーに

日本の航空路誌における座標表示をGoogle Mapsなどで使える10進法表示に置き換えるJavaScriptスニペット

国土交通省航空局が運営している[AIS Japan](https://aisjapan.mlit.go.jp/Login.do)から入手できる航空路誌では、ウェイポイントやATC境界などの座標が以下のような形式で記載されています。区切りはありませんが、これは60進法表記です。

eAIP の `GEN 2.1.2` では、通常の書体で表記されているものは Tokyo Datum 、斜体で表記されているものはWGS84座標系であるとされています。適当にチャートを漁る限り、その多くが斜体（WGS84座標系）で示されているのでTokyo Datumはあまり考慮しなくてよいでしょう。

ということで雑に「eAIPにおけるWGS84の60進法座標表示を、Google Maps などで使える10進法表示に変換する」スニペットを置いておきます。
なお、駐機場ス

プログラミングド素人でもAPIを使えるのか試してみた

プロトアウトスタジオという、プログラミングスクールではなく、プロトタイピングをアウトプットするというスクールに参加し始めた人の記事です。

前回の投稿で、LINE bot とAPIを繋げる宿題を達成できず、講師の方に対応策をご指南いただきました。
※前回投稿：ド素人がプロトタイピングスクールに入ったらどうなったか＆宿題公開
https://qiita.com/hiromae0213

繋げ先のAPIは、「リクエストをもらったらランダムに柴犬画像を返す」というAPIを使っています。

※API：
https://shibe.online/

下記記事を参考にしています。

物知りLINE BOTを作ろうとしたらfugaしか答えない残念な奴になった話
https://qiita.com/zgw426/items/a5196ab7f26b785479ec

“`js
‘use strict’;

const express = require(‘express’);
const line = require(‘@line/bot-sdk’);
const axios = require(‘

Swiper.jsが動作しなかった時の対処法[備忘録]

##はじめに
##バージョン確認の重要性
Swiper.jsはバージョンによってサポートしてくれるブラウザが違う。ver5.0以降から、IEは完全にサポート対象外になった。今回私はchromeで開発を行っているので最新版でいけると思いきや、挙動が意図したものにならなかったので、4.5.0系を使うことにした。

##便利なオプションたち

オプションが豊富で有名なSwiper.js

ここでは、私が参考にした記事を載せておくだけに留めておく。

####参考記事
実例12パターン】画像スライダーはSwiper使っておけば間違いない！実用的な使い方を紹介

【実例12パターン】画像スライダーはSwiper使っておけば間違いない！実用的な使い方を紹介

swiper.js使ってみたからそのオプションについて(v4.1.6)

swiper.js使ってみたからそのオプションについて(v4.1.6)

## 実際のコード

“`swiper.js

$(function(){
var mySwiper = new Swiper(‘.swiper-container’, {
slidesPe

JavaScript JavaScriptでポップアップウィンドウを作成

### 完成品

### HTML
“`html




JavaScript の論理演算子 (&&, ||) の応用

#基本
– **JavaScript の処理は左から右へ進む!**
– AND / OR 演算子は2つの値を左から順に Boolean にキャストしてチェックし、どちらかの値を返す.
– Boolean を返すわけではない.

“`JavaScript:例
x = {foo:4} && null; // = null
y = 1 || window; // = 1
“`
##AND 演算
AND 演算 `a1 && a2` の返り値は `Boolean(a1)===false ? a1 : a2` と等価.
~~AND 演算は〔先に false と判定された値〕or〔最後の値〕を返す.~~
計算効率を上げるために、**false 判定される可能性が高い方の値を先(左)に置く**.

“`JavaScript:AND_演算子(&&)
// 1 2
true && true // = true ← 2
true && false // = false ←

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

# 対象読者

– デザインパターンを学習あるいは復習したい方
– 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編〜

# Adapterパターンとは

**インターフェースに互換性の無いクラス同士を組み合わせるためのパターン**です。

AdapterのAdaptというのは”適合させる”という意味です。皆さんの中にも、USB Type-Aに対応していない端末にアダプターを用いてそれ

Kinx ライブラリ – Zip

# Zip

## はじめに

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

今回は Zip です。

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

アプリ作る時に Zip 機能は欠かせないですね。あと、脆弱だ、脆弱だ、言われてますけど、業務アプリの中ではパスワード付き Zip が（建前上）求められることも事実。なので、パスワー

JavaScript の配列の要素をすべて削除する

clear とか clearAll とか remove とか delete とか配列を空にするシンプルなメソッドがあるのかと思ったけどなかった。

もう少し高機能な splice メソッドを使うのが良さそう。

[Array\.prototype\.splice\(\) \- JavaScript \| MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/splice)

> splice() メソッドは、 (in place で) 既存の要素を取り除いたり、置き換えたり、新しい要素を追加したりすることで、配列の内容を変更します。

サンプルコード。

“`js
let array = [‘Tanis’] // 配列要素を指定して初期化
array.push(‘Sturm’) // 要素を1つ追加
array.push(‘Flint’, ‘Tasslehoff’) // 要素を複数追加
Array.prototype.push.apply(array, [‘C

フィボナッチ数列 Ruby Perl JavaScript

# はじめに
フィボナッチ数列の記事ってフィボナッチ数列100番目より遅いところですが、勉強中の*[もっとプログラマ脳を鍛える数学パズル アルゴリズムが脳にしみ込む70問](https://www.amazon.co.jp/dp/B078LMFXXC)* のアウトプットということでお許しください。

# Ruby
“`rubymemo.rb
@memo = {0 => 1, 1 => 1}
def f(n)
return @memo[n] if @memo[n]
@memo[n] = f(n – 1) + f(n – 2)
end

puts f(10) # => 89
“`
“`rubyarray.rb
N = 10

f = Array.new()
f[0] = f[1] = 1
2.upto(N) do |i|
f[i] = f[i – 1] + f[i – 2]
end

puts f[N] # => 89
“`
*javascript* の様にハッシュではなく配列でも実装可能と思われます。
# Perl
“`perlmemo.pl
my %memo =

途中で戻したり進めたりできるイテレータ

構文解析する際に、文字列イテレート中に戻したりスキップしたりできるイテレータがあれば便利かと思い作ってみました。
参考： https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Iterators_and_Generators

“`js
function iter(pattern) {
let index = 0
return {
[Symbol.iterator]: function() {
return this
},
next: function() {
if (index < pattern.length) { return { value: pattern[index++], done: false } } else { return { done: true } } },

JavaScript : ブラウザ中央にポップアップウィンドウを開く

今どきポップアップウィンドウなんて時代でもないですが、TwitterやFacebookなどSNSのシェアボタンでは未だに使われており、それとよく併用するコードです。

`window.open()`は特定の位置を指定してウィンドウを開けます。
ブラウザの位置・広さをもとにブラウザの中央にウィンドウを配置するよう指定します。

“`javascript
function popupWindow(url, name, w, h) {
url = encodeURI(decodeURI(url));
wTop = window.screenTop + (window.innerHeight / 2) – (h / 2);
wLeft = window.screenLeft + (window.innerWidth / 2) – (w / 2);
window.open(url, name, ‘width=’ + w + ‘, height=’ + h + ‘, top=’ + wTop + ‘, left=’ + wLeft + ‘, personalbar=0, tool

Google Apps Scriptで快適にWEBスクレイピングするためのライブラリを作ったら、重すぎて動かなかったお話。

>
ウガアッ！

#作るに至った経緯
GASでのWEBスクレイピングといえば、送られてきたhtmlソースを**ただの文字列として**受け取り、正規表現やmatch、split、indexOfなどで無理矢理目的の要素・テキストを削り出してくるもの。一応**[スクレイピング用のライブラリ](https://script.google.com/d/1Mc8BthYthXx6CoIz90-JiSzSafVnT6U3t0z_W3hLTAX5ek4w0G_EIrNw/edit?usp=drive_web)**もあるが、やっていることは対して変わらない。

「我々が求めるものはPythonのbs4のような、CSSセレクタなどで簡単に要素を見つけ出し、情報を抽出するものではなかろうか？」

そんなこんなで火が付いた。作ったプロトタイプもGoogle Chrome

TypeORM x AuroraDataAPI – タイムゾーン問題への対処

# TypeORM x AuroraDataAPI – TIMEZONE問題への対処

ローカルタイムゾーンがJSTだとしたとき、
DBに書き込まれる時刻が9時間未来になる(JSTのまま書かれてしまう)
DBから読み込まれる時刻が9時間過去になる(JST扱いで読まれてくる)問題への対処です。

## 前置き
本記事の解決法では、TypeORMの外側で自力で時刻を補正するため、
ライブラリ(TypeORMとAuroraプラグイン)の仕様が変わったり、バグが治った場合は毒になりえます。
そのへんの影響まで自分で管理してやんよシュババってひとむけです。

## 環境

– Aurora Serverless MySQL 5.6
– time_zone, system_time_zone: `UTC`
– TypeORM 0.2.24
– typeorm-aurora-data-api-driver 1.1.8
– Node 10
– timezone(TZ環境変数): `Asia/Tokyo`

上記環境 (TypeORM x AuroraDataAPI) での観測ですが、

Vue.js テンプレート制御ディレクティブ まとめ

## はじめに

[Vue.jsでTO DOアプリを作る](https://qiita.com/yukiji/items/dc45f45f7f3f0e53f626)の続きです。

今回はディレクティブを深掘りしていきます。

## v-once

– 初回だけテキストバインディングを行う。
– 初回以降は静的なコンテンツとして扱う。
– 描画更新のパフォーマンスを上げたいときに利用できる

“`js
var app = new Vue({
el: ‘#app’,
data: {
message: ‘Hello Vue.js!’
},
methods: {
click(e) {
// 文字列を反転するメソッドを定義
this.message = this.message
.split(”)
.reverse()
.join(”)
}
}
})
“`

以下は`v-once`を定義しているので、初回だけテキストバインディングを行っている。

初回以降は静的なコンテンツ

JavaScript学習 – 関数 –

#JavaScriptにおける『関数』
関数そのものの仕組み(入力に対してなんらかの処理を行い、その結果を返す)はJavaと同じ。
JavaScriptでは関数は`データ型の一種`として扱うのがJavaとの大きな違い。

・『関数の引数に名前を指定する』
・『複数の戻り値をそれぞれ指定した変数に代入する』 …etc

型推論もあるので、かなり柔軟に関数や変数の設定が出来る。

#関数の定義

主に以下の4つ(3つの)の方法がある

・ `function命令による定義`
・ functionコンストラクターによる定義
・ `関数リテラルによる定義(無名関数)`
・ `アロー関数による定義`

これら4つのうちfunctionコンストラクターは外部から任意のコードが実行できてしまう可能性があるので使用は推奨されていない、原則としてfunction命令・関数リテラルあるいはアロー関数のどれかで定義することになるので実際には3つの方法ということになる。

## function命令による定義
関数の定義の最も基本的な方法。

“`javascript:function命令
funct

WebUSBでFeliCaのIDmとMIFAREのIDも読み込む

# はじめに
[WebUSBでFeliCaの一意なIDであるIDmを読む / Qiita](https://qiita.com/saturday06/items/333fcdf5b3b8030c9b05)
こちらの記事を参考に、FeliCaだけではなく、MIFAREのIDも拾いたい。
いや、むしろ、どちらも拾えるものをということで、公開していただいているgithubをフォークして、書き加えてみましたので、
経緯、やったこと、調べたことをこちらにまとめておこうと思います。

結果のソースだけあればいいという人は、完成物をDLしてご利用ください。

## 注意
それらしく動いてますが、pythonは読んだことないわ、仕様書は難しくて頭痛くなるわで、
サンプルのパケットを解析して、コピペするという作業をしてますので、
追加した内容については、どうして動いているのかということは分かっていません。
使う際は自己責任で。もしくはコメントを頂ければ。

## 完成物
https://github.com/marioninc/webusb-felica
元ネタと同様で、権利フリーです。

## 要件

Next.js + Firebase Hosting + SSR 環境でBasic認証をかける

# 概要

Next.js + Firebase Hosting + SSR 環境でBasic認証をかけようという記事。

`Next` が持っているメソッドだけでは対応できなかったので、`Express` も使用します。

また、Next.js + Firebase Hosting + SSR 環境については、
[with-firebase-hosting-and-typescript](https://github.com/zeit/next.js/tree/canary/examples/with-firebase-hosting-and-typescript) こちらのテンプレートを利用します。

`Firebase` を利用する関係上 `node.js` のバージョンは10系を使用します。
`firebase-tools`は最新を使用しましょう。

# 手順

## Next.js + Firebase Hosting + SSR 環境のセットアップ
[README.md](https://github.com/zeit/next.js/blob/canary/example

初めてのVue.js備忘録 vol.01

##はじめに
今回は、エンジニアになって約半年の私がjavascriptのフレームワークであるVue.jsを使って開発を行ったので、そのVue.jsの基本的な記述について備忘録としてまとめます。
##データバインディング
###テキストのバインディング
* データのバインディグのもっとも基本的な形　マスタッシュ {{ }}を利用したもの
*
以下のような使い方ができます。

“`App.vue


“`

“`App.vue