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

Reactを触ってみる（その1）

## 動機: フロントエンド、ガッツリやってみたい！
– 普段はサーバーサイドエンジニアとして、主にPHP/Javaで開発することが多いのですが、JavaScriptでゴリゴリにフロント動かしてみたい！という欲求が昔からありました。かつ、どうせだったら「**altJS**」（alternative JavaScript）× 「**JSフレームワーク**」を使ってみたい！という思いがあり、今回Javascriptをガッツリ触ってみることにしました。

## フレームワーク何にしようか問題
– さて、JavaScriptをガッツリやっていくのはいいとして、どういう組み合わせを選ぶか？日本のGoogleトレンドを見てみると、以下のような結果に。

**<順位>**
React > Vue > Angular

**【参考】**
[React,Vue,Angularのトレンド比較（日本）](https://trends.google.com/trends/explore?geo=JP&q=React,Vue,Angular)

ふむふむ。結構ReactとVueが拮抗してますね。もっとよく調べて

Collection Groupでサブコレクションをまとめてクエリ[Firestore]

Collection Groupを使うと、**異なるドキュメント配下の同名のサブコレクションをまとめて**クエリできます。

たとえば、

“`
preference collection：県
　/document(京都、大阪、名古屋、岡山)
　　/specialty collection：名物
　　　/document([name:八ツ橋, type:sweet] [name: たこ焼き, type: meal] [name:ひつまぶし, type: meal] [name:きびだんご, type: sweet])
“`
という階層があったときに、

specialty collectionは別々のpreferenceドキュメントに属していますが、specialtyのくくりでまとめてクエリできます。

#手順

###1,セキュリティルールを追加

グループコレクションでクエリを行うには、途中までのパスがワイルドカードになったruleをFirestoreに追加します。

“`
match /{path=**}/specialty/{document} {
allow rea

typescriptの型付け（関数）

戻り値のある関数

“`typescript:index.ts

function add(num1: number, num2: number): number{
return num1 + num2;
}

“`

戻り値のない関数

“`typescript:index.ts

function sayHell(): void{
console.log(‘sayHello’)
}

“`

コールバック関数

“`typescript:index.ts

function doubleAndHandle(num: number, callback: (num: number) => number): void {
const doubleNum = callback(num * 2)
console.log(num * 2);
}

doubleAndHandle(21, doubleNum => {
return doubleNum;
})

“`

その他関数

“`typescript:index.ts

const

俺の論理演算子、条件演算子

#演算子
javaScriptで定義されている演算子は様々あります。
[JavaScript primer演算子](https://jsprimer.net/basic/operator/)

その中でReactでよく用いる演算子をまとめました。
#論理演算子
##AND演算子（&&）
左辺がtrueなら右辺を。
左辺がfalseならそのまま左辺を返します。

##OR演算子（||）
&&の逆で左辺がtrueなら左辺を。falseなら右辺を返します。

#条件演算子
条件式　? trueの時の評価式　：flseの時の評価式

“`javascript

const a = 3;
const b = 7;
const inNum = true;
console.log(inNum ? a : b); // aが評価されて「3」出力

“`

##!! tspeScriptのオプショナル用の打ち消し

!!を付ける事で “boolean | undefined“を“boolean“にすることが出来る。
オプショナルで“a?:boolean;“と定義してエラーが出ている時など

ml5.jsでPoseNetで手旗信号読取りWebを作る

#はじめに
前回 [TensorFlow.js version of PoseNetで手旗信号読取りサイト](https://qiita.com/hiro32/items/9c7fa684c22caa148760) という**PoseNet**（機械学習によって姿勢を推定できる技術）を使った**手旗信号**読取りWebサイトを作った話を書きました。
記事中にもありますが、推定された肩や肘の角度から判定しているのですが、実測値を見ながら手動で判定式を書いた感じなので精度に納得がいっていないんです。

せっかくTensorFlowとか使ってるなら手旗信号のポーズ自体も学習させた方が良いな…とか何となしには思っていたのですが、そんなスキルがあるわけでもなく。

と半ば諦めつつもググっていると、

https://thecodingtrain.com/l

GASでシフト自動作成ソフト作ってみた

作成したスプレッドシート↓↓
https://docs.google.com/spreadsheets/d/1D1Shq5GaVnSMqiSf3hxXynWdYd79-gQXjZP221GnVQ4/edit?usp=sharing

-仕様-

従業員は
R(レギュラー)、H(派遣)、P(パート)、A(アルバイト)の４種類
Rは基本営業時間内でシフトタイム、それ以外は希望時間内で早(早番)、中(中番)、遅(遅番)に振り分ける

それぞれに希望休(日)、希望休(曜)、有給、週何回出勤、勤務時間の入力欄を準備その入力内容をもとにシフトを作っていく。

シート(月予定表)の「シフト作成ボタン」を押して月の出勤日を作成、
その後ドロップダウンリストで作成したい日数分(最大7日)の日にちを選択し「日にちシフト作成ボタン」を押して日にちごとのシフトを作成。

-改善点-
少人数であれば問題なく動くが人数が多くなるにつれてエラーが出やすくなる。　→　元々のアルゴリズムを考え直さないといけない。

「lazyload 対応」スムーズスクロールの書き方

#どうも7noteです。lazyloadを入れていてもスムーズにページ内リンクできる方法

以前表示速度が少し心配なサイトがあり、lazyload属性を使いつつもでもページ内リンクをさせたい場面がありました。

もし対策せずにどちらも入れてしまうと、画像が読み込まれていないかページ内リンクの高さ取得が上手くできず
画像が後から読み込まれることで高さが変わってしまい、本来の位置よりも上の方に移動してしまいます。

ですがjQueryのwhenを使うことでこの問題を解決することができます。

## lazyload対応スムーズスクロールの書き方

※jQueryを使用しています。jQueryってなんだという方は[こちら](URLURL)

“`
$(function () {
$(‘a[href^=#]’).click(function(e) {
var headerHight = 50; /* ヘッダーの高さ(50px) */
var href = $(this).attr(“href”);
var target = $(href == “#” || href =

React-Calendarで超簡単にカレンダーを作ってみた

会社のイベントとして、2020年のアドベントカレンダーで記事を書いたのですが、個人のQiitaでも同じものを公開したいな〜と思ったので、ちょっとだけ変えて公開します！

去年の案件で急にReactでカレンダーを作ることになり、有識者もいない中、四苦八苦したのですが、ライブラリって便利だな〜と感じたので、Reactのreact-calendarを使ってカレンダーを作成したときのことを書きます。

※環境構築とかは端折ります。

##react-calendarとは
カレンダー実装だともっとメジャーなライブラリがあるかも知れないんのですが、今回、私はreact-calendarを使ってみたのですが、簡単にReactでカレンダーを実装できちゃいました。

条件を絞って、日付ごとに任意の内容を表示させたり、スタイルのカスタマイズなど 柔軟に対応できます。

公式：[react-calendar](www.npmjs.com)

##react-calendarで実装してみる

####react-calendarをインストール
yarnで「react-calendar」をインストールします

ポートフォリオサイトの制作

# はじめに
自分のスキルや成果物の可視化やGithub以外のアウトプットを一元管理するため、ポートフォリオサイトを作成しました。

今回は作成する上で気をつけたことや使用したツール、ホスティング方法について備忘録としてまとめたいと思います。

URL: https://seiyaiwanabe.github.io/portfolio_site/


# 目次
[1.記載内容](#1-記載内容)
[2.使用したサービス](#2-使用

Node.jsでAzure IoT Hubにテレメトリを送信するサンプルコードを動かすメモ

## はじめに

[デバイスから IoT ハブに利用統計情報を送信してバックエンド アプリケーションで読み取る](https://docs.microsoft.com/ja-jp/azure/iot-hub/quickstart-send-telemetry-node)を参考にサンプルコードを動かしてみます。
[](https://gyazo.com/2423a85698f478493dd983f957020b80)
接続文字列はAzure CLIを使わずに、コンソールから取得します。

Azure IoTについては[こちら](https://docs.microsoft.com/ja-jp/azure/iot-hub/about-iot-hub)を参照。

## 準備

– Node.jsをインストールする（今回は`v14.1.0`を使用）
– [サンプルコード](https://github.com/Azure-Samples/a

自分の町の避難所情報をGoogle Mapsに表示する

オープンデータの活用とGoogle Maps APIの練習を兼ねて自分の町の避難所情報をGoogle Mapに表示してみました。さらに避難所までのルートも表示させてみます。

# 避難所情報の取得

まずは大刀洗町オープンデータカタログ https://odcs.bodik.jp/405035/ から避難所情報を取得してみます。
CKAN Data APIのサンプルを参考に以下のようにAPIにアクセスします。

“` javascript
$.ajax({
url: ‘https://data.bodik.jp/api/3/action/datastore_search’,
data: { resource_id: ‘1bb3a1f5-db97-488f-92f4-aa72e497e6d1’, limit: 5 },
dataType: ‘jsonp’,
cache: true, // これを付けないと引数のタイムスタンプで何故かエラーが出る
success: function(data) {
console.log(data.

JavaScriptフレームワークのプロジェクト作成コマンドを列挙した

## はじめに

JavaScript のフレームワークには npm や Yarn などのパッケージマネージャーを使い簡単に依存関係を解決し、プロジェクトの雛形を作成してくれるコマンドが用意されていることが多いです。
スクラッチでの作成もできますが、コマンドラインツールによって簡単にプロジェクトの自動作成、開発サーバーでの実行ができ便利だと感じたため、有名な JavaScript フレームワークの雛形作成コマンドを備忘録として挙げてみます。

各コマンドの `` の部分が作成されるディレクトリ名、デフォルトのプロジェクト名になります。作成するプロジェクトに応じて適宜置き換えてください。

公式のドキュメントに沿って基本となるコマンドをまとめています。プロジェクト作成時に対話形式で設定可能な項目については記事内で扱いません。項目の説明や、利用できるオプションについては公式のドキュメントを参照のうえ実行をお願いします。

## 前提条件

– node.js がインストールされていること(バージョン 8 以降、最新の LTS バージョンを推奨)
– npm

【React初心者】 #3 ルーティング・ページ遷移を作る！ react-router-dom

# Reactでreact-router-domのルーティング設定
３回目の今回は、**Reactでreact-router-dom**
を使用したルーティングを使います。
URLを変えることで、表示するページを変える（レンダリングする）ことができます。

前回までで、

– Material-UIで最低限のデザインを一から作成
– データをAPIから取得して表示

しました。コードは前回の続きとなります。

# シリーズ記事
– [【初心者】#1 Reactの基礎とMaterial-UI使って綺麗に作ってみる](https://qiita.com/Bashi50/items/8964cc55c596e51fcbbe)
– [【初心者】#2 React axiosでAPI データ取得](https://qiita.com/Bashi50/items/b4e0626b2ede73568eab)

# やること

– react-router-domでのReactでのルーティング
– ルーティングするためのリンクの付け方

# react-router-dom導入
まず、インストールが必

【React hooks】噛み砕いて解説してみた~useContext編~

# 前書き

`16.8v`で追加された機能である`react hooks`を理解を深めるために体系的にまとめました。

– [【React hooks】噛み砕いて解説してみた~useState編~](https://qiita.com/onikan/items/386faf00d694e94272a6)
– [【React hooks】噛み砕いて解説してみた~useEffect編~](https://qiita.com/onikan/items/cb93be9cc6990245f5fa)
– 【React hooks】噛み砕いて解説してみた~useContext編~　←今ココ

以下、本題です

# そもそもContextとは

別コンポーネントに値を動的に渡す方法として、`Props`があると思います。**`Context`も同じように値を動的に渡すことができます。**

## Contextの存在意義

多重ネストされたコンポーネントに値を渡すときに、下記のようにバケツリレーになってしまうことが多々あると思います。（コードは[公式ドキュメント](https://ja.reactj

React+reduxで数字をカウントしてみる

##index.jsを用意します
“`
import React from ‘react’;
import ReactDOM from ‘react-dom’;
import { createStore } from ‘redux’;
import { Provider } from ‘react-redux’;
import { persistStore, persistReducer } from ‘redux-persist’
import storage from ‘redux-persist/lib/storage’
import { PersistGate } from ‘redux-persist/integration/react’
import ‘./index.css’;
import App from ‘./App’;

// ステートの値
let state_value = {
counter:0,
message:”COUNTER”
}

// レデューサー
function counter(state = state_value, a

【JavaScript】英単語数をカウントする

わりと簡単に作れると思っていましたが、
スペースがあったときに1カウントとすると、スペースが2つ続いたときも1単語としてカウントされてしまうことに頭を悩ませました。

# 解決策

### HTML
“`html


“`
### JavaScript
“`javascript
const input = document.getElementById(‘count-area’);
input.addEventListener(‘keyup’, countWords);

function countWords() {
// \S+の意味は「空白、タブ、改行以外が1回以上続く」
const spaces = input.value.match(/\S+/g);

let words;
if (spaces) {
words = spaces.length;
} else {
words = 0;
}

docume

Mapbox入門

#Mapboxを使って地図を表示

###CDN

“`html
“`
###[Mapbox GL JS](https://account.mapbox.com/) / [マイアカウント](https://account.mapbox.com/)でアクセストークンを取得

“`js
mapboxgl.accessToken = ‘hoge’;
“`

##mapboxglのMapオブジェクトを生成（インスタンス化）

“`js
const map = new mapboxgl.Map({
container: ‘map’,
style: ‘mapbox://hoge’,
center: [

JavaScriptのreduce()がしていること

配列の合計値を出したいときなどに便利な`reduce()`。
基本的な使い方は以下。

“`javascript
const arr = [1, 2, 3, 4, 5];

console.log(arr.reduce((n, m) => n + m));
// 15
“`

勉強をしていて、「なんとなく合計値を出せるもの」という理解をもう一歩深められましたのでシェアします。

## reduce()の構文と処理内容
僕がいつもお世話になっているMDNによると、構文は次の通りです。

> “`javascript
> arr.reduce(callback( accumulator, currentValue[, index[, array]] ) {
> // return result from executing something for accumulator or currentValue
> }[, initialValue]);
> “`
> 参考：https://developer.mozilla.org/ja/docs/Web/JavaScript/Re

Safariでのonchangeが発火しない場合の対処法

## TL;DR

Safariではなぜかinputのchangeを拾えないことがある（リロード時の挙動により差分を検知出来ない事があるんだと思う）
その場合はonclickイベントでinputのvalueを空にしてやればよい
onclickはonchangeよりも先に発火するのでこれで常にnullと比較でき、変更を検知できる

“`javascript
const input = document.createElement(‘input’);
input.type = ‘file’;
input.onclick = () => {
this.value = null;
};
input.onchange = () => {
// なんか処理
};

【小ネタ】JavaScriptでPHPのlist()っぽいことをやってみる。

# はじめに

ドット連結の文字列を分割してそれぞれを変数にできないかなーって考えたときに、もしかしたらJSでもPHPのlist()みたいなことできるんじゃね？って思ったんですよ。

# PHPのlist()とは

右辺が配列になるとき、左辺側に列挙した変数に値を入れれるというやつです。
https://www.php.net/manual/ja/function.list.php

“`php
list($jeffy, $tockey, $fagimaru) = [‘犬’, ‘猿’, ‘雉’];

echo $jeffy; // 犬
echo $tockey; // 猿
echo $fagimaru; // 雉
“`

実はPHP7.1以降は以下の書き方でもいけるんですよね。全然気づかなかった……

“`php
[$jeffy, $tockey, $fagimaru] = [‘犬’, ‘猿’, ‘雉’];

echo $jeffy; // 犬
echo $tockey; // 猿
echo $fagimaru; // 雉
“`

# JSではどうするの？

実はPHPの省略構