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

JavaScriptでFirebase9のサインアウト処理

JavaScriptでFirebase9のサインアウト処理をコーディングします。
Firebase8とは微妙に異なるので、注意が必要です。

コメントアウトしている部分は、Firebase8のコードです。

“`JavaScript:
//import firebase from ‘firebase’;
import {getAuth, signOut} from ‘firebase/auth’; //firebase9

//const auth = firebase.auth();
const auth = getAuth(); //firebase9

//auth.signOut(); //ログアウト
signOut(auth).then(() => {
console.log(‘Sign-out successful.’);
}).catch((error) => {
console.log(‘Sign-out execing.’);
});
“`

##参考書籍
この記事は以下の情報を参考にして執筆しました。
・React.js&Next.js超入門 第２版　著

H27国勢調査の500mメッシュ人口データをdeck.glで表示してみました

# はじめに
– H27国勢調査の500mメッシュ人口データを[deck.gl](https://deck.gl/)で表示してみました。
– H27国勢調査の500mメッシュ人口データは、[e-stat](https://www.e-stat.go.jp/)より[統計データ](https://www.e-stat.go.jp/gis/statmap-search?type=1)及び[境界データ](https://www.e-stat.go.jp/gis/statmap-search?type=2)をダウンロードして用いています。
– deck.glでの表示には、[HexagonLayer](https://deck.gl/docs/api-reference/aggregation-layers/hexagon-layer)を用いています。

# アウトプットイメージ

https://t.co/j5x1od

【JavaScript】入れ子関数内のthisの挙動

# TL;DR

– オブジェクト内に入れ子構造の関数が定義されているとき、入れ子関数のthisはグローバルオブジェクトを指す
– アロー関数で入れ子関数を定義すると、入れ子関数のthisは定義されているオブジェクトを指す

# 実行環境

[JSFiddle](https://jsfiddle.net/)のJavaScript + NoLibraryで実行

# 検証

①入れ子関数（関数式で定義）

“`js
let obj = {
func1: function() {
console.log(this);
let func2 = function() {
console.log(this)
let func3 = function() {
console.log(this);
}();
}();
}
}

obj.func1();
“`
“`
> {func1: ƒ}
> Window {window:

Google Apps Script（gas）の環境構築

最近、Google Apps Script（gas）の学習を始めてみました！
ここでは環境構築について書いてみようと思います。

[1.環境構築](#環境構築)
[2.バージョン管理](#バージョン管理)
[3.デプロイ](#デプロイ)
[4.プロパティストア](#プロパティストア)

##環境構築
環境構築ってかなり面倒くさいイメージありますが、gasの環境構築はかなり簡単なんです。
というか環境はもう既に出来ているって感じです！

1. googleスプレッドシートを開く [^注]
2. ツールタブを押下
3. スクリプトエディタを選択

[^注]: スプレッドシートからで無くてもスクリプトエディタを開くことは出来ます。

これですぐに開発を始めることが出来ます。

スプレッドシートを開いて

Vue3+Express+Webpackの環境構築

Vue３ + express + webpackでSSRの開発環境を構築したときの備忘録。

##構成
最終的なフォルダとファイル構成は以下のとおり。

“`
vue_app/
├ node_modules/
├ public/
│　 └ bundle.js
　　　　│　 └ index.html
├ src/
│　 └ App.vue
│　 └ index.js
├ package.json
├ server.js
└ webpack.config.jsoon
“`

##1. 準備
てきとうなディレクトリを作成し、必要なモジュールをインストール。

“`Bash
#プロジェクトのフォルダを作成
$ mkdir vue_app
$ cd vue_app

#package.jsonを作成
$ npm init -y

#expressをインストール
$ npm i -S express

#Vue3をインストール
$ npm i -S vue@next

#vueファイルを読み込むために必須

WEBスクレイピング

#Webスクレイピング[備忘録]
タイトル通り備忘録です。
Node.jsのcherioとrequestでスクレイピングする。

“`
// cherio　本体
npm : npm install cherio request
yarn : yarn add cherio request
“`

codeを見ると“`$(jQuery)“`みたいに処理を記載していく。
なので、上記ライブラリに触れる人には取っ付きやすいと思う(自分に説明をするつもり)。

“`javascript:index.js
const cherio = require(‘cherio’)

// 私はテクノロジー系の話が好きなのでこれを選択。
const url = ‘https://news.google.com/search?q=technology&hl=ja&gl=JP&ceid=JP%

【GAS】任意の位置を中心に指定範囲内にある町丁目を調べる【スプレッドシート】

##概要
複数の場所で、半径2.5km以内にある町名を洗い出したい。と相談されたので挑戦。

そう言えば２点間の距離を調べるのはGoogleMapなんかでも簡単にできるけど、範囲内にある町名を調べる方法が（あるんだろうけど）無いなぁと、中心点を決めたら範囲内にある町名一覧を出力するツールを作ることに。

スプレッドシートで作成。使いやすいようにGASでオリジナル関数にしてみた。

##没ネタ
任意の中心点から、緯度経度を少しずつズラしながらgeocodeで町名を取得し、重複を削除すればいいのかなと仮組み。
この方法だと、目が粗ければ取りこぼしがあるし、細かければgeocodeの呼び出し回数が爆発的に増えてしまう。

どのくらいずつズラせば良いか分からないので、この方法は没に^^;

##便利なデータベース
そうこうしていたら、使えそうな良いのを見つけた。

全国の町丁目（190,165件）の住所データがCSVで公開されている。
→ [Geolonia 住所データ](https://geolonia.github.io/japanese-addresses/)

市区町村名や大字町丁目名

Rails6でJavaScriptを書く

# はじめに
初めてRuby on Railsを触ることになり、JavaScriptを使ってみることになった。
うまく動く資料が見当たらなかったため、備忘録として書いておくことにした。

# JavaScriptの実装
## JavaScriptの書く場所
app > javascript > packs
– file下に制作のファイルを作成するのがおすすめ
– 自分はusersというファイルを作成し、その下にjsファイルを作成した
## jsファイルに書くべきこと
– 読み込み時に表示

“`js
window.onload = function(){
//中略
//ウィンドウが読み込まれたとき表示する
}
“`
– 動作により呼び出す場合

“`js:app>javascript>packs>user>common.js
window.onchange = function hogehoge(){
//中略
//自分はonchangeで呼び出しをしたためこのように記載した
}
“`

##書いたjsを読み込ませる

“`js:app>javascript>packs>ap

ApolloのFragmentの使い方

## はじめに

小さなLTに挑戦してみたので、その時に調べた事をまとめました
LTの内容を [Apolloのキャッシュとリストの更新](https://qiita.com/toki_k/items/945670f580c5cf507d97)の記事と2つに分割しています。

## 使用技術

* React
* Apollo Client
* GraphQL Code Generator
* Hasura(GraphQLサーバー側。今回はそこまで関係ないかも)

## サンプルアプリ
### 画面イメージ

### DB
usersテーブル：id,　name
todosテーブル：id,　user_id,　title,　created_at,　updated_at

userがtodoのリストを持って

Apolloのキャッシュとリストの更新

## はじめに

小さなLTに挑戦してみたので、その時に調べた事をまとめました。
LTの内容を[ApolloのFragmentの使い方](https://qiita.com/toki_k/items/f9c2258ea6d24247e661)の記事と2つに分割してます。

## 使用技術

* React
* Apollo Client
* GraphQL Code Generator
* Hasura(GraphQLサーバー側。今回はそこまで関係ないかも)

## サンプルアプリ
### 画面イメージ

### DB
usersテーブル：id,　name
todosテーブル：id,　user_id,　title,　created_at,　updated_at

userがtodoのリストを持ってい

これくらい知っておけばReactは困らない

**「JavaScriptが分かってない」、ゆえに「Reactが分からない」** そんな人のためのJavaScript文法（など）集です。ここでは文法（など）を羅列するだけでここの解説は他のサイトに任せます。

# 基礎編

### コンソールに出力

“`javascript
console.log(“hello !”);
console.error(“エラー発生！”);
“`

### 式計算

“`javascript
// 算術演算 ————–
//足し算
1+2 //3

//引き算
100-5 //95

//掛け算
3*10 //30

//割り算
20/3 //6.666666666666667 (誤差がある)

//割り算の余り
20%3 //2

//べき乗
2**4 //16

// 関係演算 ————–
//大なり
10>2 //true

//小なり
3<6 //true //イコール 1===2 //false //ノットイコール 1!==2 //true //大なりイコール 10>=2 //true

JavaScriptのDOM操作

# DOMとは

DOM（Document Object Model）は、HTMLドキュメントの要素を取得したり操作したりするための仕組みです。DOMツリーと呼ばれる、階層上のツリー構造でHTMLドキュメントを表現します。

DOMツリーこと

JavaScriptの動きのコアはこのツリーの増減や変更すること。
例えば、HTMLのタグを変更したり、CSSのセレクターを修正したり、新しいタグを追加したりしたとかとか。

# DOM操作

## 要素取得メソッド

“`javascript
document.getElementById(”)
document.getElementsByClassName(”)
document.getElementsByTagName(”)
“`
## 要素変更

jQuery 図形をクリックすると大きさが変わるアニメーション

(やりたいこと)
円の図形をクリックすると、2,000ミリ秒かけて大きさが変わる。

width: 100px
height: 100px
　　　↓
width: 400px
height: 400px

(コード)

“`test.html