React Transition Group をCDNで読み込んで使う

#はじめに
Reactを勉強中の者です。Reactのアニメーションライブラリである、React Transtion GroupをCDNで読み込んで使いたかったのですが、インストールした上でimportしてから使う方法しか詳しく書いておらず、少し困ったのでここに、私の行った解決策をまとめておきます。具体的なReact Transition Groupの使い方は書いておりませんので、以下の公式ドキュメント参照してください。

>[React Transition Group](https://reactcommunity.org/react-transition-group/)

#やり方
##CDNでスクリプトを読み込む
React Transition Group のトップページにCDNのリンクがあるので、これをhtmlから読み込みます。ここではReact本体などもCDNで読み込んでいます。

“`html

` この一行で使用

まだ in を使ってるの？

# TL;DL
“`js
function Say(obj) {
if(obj && “text” in obj && obj.text){
console.log(obj.text);
}else{
console.log(“naiyo-“);
}
}

const hoge = {text: “hoge”};
Say(hoge);

// output ——–
// hoge
“`

↓

“`js
function Say(obj) {
obj = obj ?? {};
console.log(obj?.text ?? “naiyo-“);
}

const hoge = {text: “hoge”};
Say(hoge);
// output ——–
// hoge
“`

# ECMAScript2020 がリリースされました?
6月16日に ECMAScript2020 が正式リリースされました！
個人的推しは `?.(Optional Chaining)` と `??(Nullish coalescing

【JWT（JSON Web Token）】Node.jsで実際に使ってみた

# はじめに
認証方式の１つであるJWTについてのまとめと使用例

# JWTとは
JSON Web Tokenの略
認証情報を含むJSONをbase64エンコードしたものに署名を付与したもの

# 利用例
1. クライアント側から認証情報（例：ユーザー名、パスワード）をサーバーに送信
2. サーバー側で認証情報を確認し、認証OKの場合JWTを発行し、クライアント側に返却
3. クライアントは次回以降、JWTを付与したリクエストを送信
4. サーバー側はJWTを検証する

なお、JWTの暗号化アルゴリズムは大きく分けて2種類ある。

– 共通鍵方式
HS256というアルゴリズムを使用する。
認証サーバとリソースサーバが同じ場合はこの方式が使われることが多い。

– 公開鍵／秘密鍵方式
RS256というアルゴリズムを使用する。
認証サーバとリソースサーバが別々の場合にこの方式が使われる。
認証サーバに秘密鍵、リソースサーバに公開鍵が配置される。

# JWTの構造
JWTの例は以下
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjoidGFy

CSS勉強メモ 属性の指定方法

“`

Main

/*

の指定方法 */
#about > #main.title{ color: pink;}
h1 { color: red !important;}
/* important>直接スタイルを書き込む>属性ランキングの順で適用される */
h1#main.box { color: yellow;}
section > #main.title { color: blue}
section#about > h1 {color: green;}

/* 全て書いた場合は[id],[class,属性,擬似クラス],[要素，擬似要素]の数で評価されて、前から値が大きいものが選ばれていき、同点の場合は後に書いた方でスタイルが決まる */

li:empty{
background: skyblue;
}
li:not(:empty){
background: skyb

よく調べるJavaScript文法まとめ（随時追記）

# この記事について
最近、業務でJavaScriptを使うことが多いのですが、その際に何度も何度も調べてしまう文法を、自分の備忘録もかねて書き溜めていこうと思います。
随時追記していく予定です。

# 配列操作系
## 配列をカンマ区切りの文字列にする
ソースコード

“`javascript
const array = [‘aaa’, ‘bbb’, ‘ccc’];

const arrayStr = array.toString();

console.log(arrayStr);
“`

実行結果

“`console
aaa,bbb,ccc
“`

## 配列の要素をひとつずつ取り出す
ソースコード

“`javascript
const array = [‘aaa’, ‘bbb’, ‘ccc’];

for (const e of array) {
console.log(e);
}
“`

実行結果

“`console
aaa
bbb
ccc
“`

## 配列からインデックスと値をひとつずつ取り出す
ソースコード

“`javascript
co

Kinx アルゴリズム – エイト・クイーン

# Kinx アルゴリズム – エイト・クイーン

## はじめに

**「見た目は JavaScript、頭脳(中身)は Ruby、（安定感は AC/DC）」** でお届けしているスクリプト言語 [Kinx](https://github.com/Kray-G/kinx)。「プログラム＝アルゴリズム＋データ構造」。アルゴリズムの実装例をご紹介。

元ネタは「C言語による（30年経っても）最新アルゴリズム事典」。今回はエイト・クイーン（一般的には N Queens）です。

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

最新アルゴリズム事典には

WebAssemblyとJavaScriptの処理速度を比較してみる

# はじめに
[前回](https://qiita.com/mink0212/items/7bcc3b09cac668fbfdbe)に、C++からJavaScriptの関数を呼び出す方法を調べました。WebAssemblyはJavaScriptより早いと言われていますので試してみました。

# 環境
– windows 10
– python:3.6.5
– emcc:1.39.16
– clang:11.0.0

# 純粋なループの比較
まずは、それぞれの中でループをさせてみました。また、C++については最適化オプションをそれぞれ試してみました。

## C/C++ファイルの作成
純粋にループして、ループ内で加算した結果をJavaScriptに返却させます。

“` cmain.cpp

#include

int main() {
int count = 0;
for(int i = 0; i < 100000000; i++){ count = count + 1; }

JavaScriptで文字列と数字が混在したソート

# やる事
文字列と数字が混在した配列でも、それっぽいソートをしたい。

“`
Test1
Test10
Test11
Test2
Test3
…
“`

という「なんだかな～」っていう並びを

“`
Test1
Test2
Test3
…
Test9
Test10
Test11
“`

にするやつです。
他にいいやつあるかな～と思ったけど、~~この位だと作った方が早いし、~~多言語に移植する予定もあったので、考察の為

とりあえず、適当に列挙したこれが

“`yaml:yaml
– ’25’
– 12.234.111.233
– 12.234.111.28
– 12.234.27.255
– 184
– a9-b
– a100
– a9-a
– tenuno01
– test
– test00030-1
– test00123-156-3
– test123-4
– wawa1
“`

これになります。

“`yaml:yaml
– 12.234.27.255
– 12.234.111.28
– 12.234.111.233
– ’25’
– 184
– a9-

JavaScriptでMIDIからUTAUのUSTファイルへ雑に変換する

語弊を承知でいうと、ボーカロイドみたいなツールの**UTAU**。
`.midi`ファイルからUTAUで使う`.ust`ファイルへ歌詞付きで雑に変換しダウンロードする方法のおぼえがきです。

## 前提

– create-react-appベースのReactアプリ
– ES6準拠のJavaScript

## tone.jsでMIDIのインポート

だいぶつよいMIDIライブラリの[tone.js](https://tonejs.github.io/)を利用します。

### インストール
“`
yarn add @tonejs/midi
“`

### インポート
“`
import { Midi } from ‘@tonejs/midi’;
“`

### ボタンクリックでMIDIを取り込めるようにする

ここは読み飛ばしていただいても。

“`
import React, { useState } from ‘react’;
import { Midi } from ‘@tonejs/midi’;

const MidiPage = (props) => {
c

GoogleAppsScriptのDrawing Classでつくってあそぼう!

## はじめに

本記事は先日行われた[【オンライン対談】Google Apps Script 活用トーク #6](https://gaiax.connpass.com/event/175102/)で私が登壇した内容をTech記事としてリライトしたものになります。

登壇感想込のものはブログに後ほど上げるので興味がある方はそちらも御覧ください。

資料: https://docs.google.com/presentation/d/1ouLvrtngVI4ykKftBCYozVS-Nr6FZj54LgCqYsKOx3Y/edit?usp=sharing

## Dowing Classとは

Drawing Classは2020/04/02にリリースされたスプレッドシートサービス内のクラスで図形に関するパラメーターを操作する事ができるものです。
これによってシート上の図形のサイズを変更したり、位置を変更することができます。

### 実装されてるメゾット

実際に使用できるメゾットの一部を紹介します。
より詳しい内容を知りたい方は公式ドキュメント[Class Drawing

Node.jsでルーティングを行う方法と、やってはいけないこと

##ルーティング
ルーティングとは：アクセスするパスに応じて、表示する内容や行う処理を変えること

##Node.jsでのルーティングの記述方法
・Node.jsアプリのファイル構成

“`
├──app.js //アプリのメインのバックエンド処理
├── public //UI（css,クライアントサイドのjavascript）を記述
│   └── css
│   └── style.css
├── routes //ルーティング処理を記述
│   └── index.js
└── views　　//特定のパスにアクセスした時に引き渡すファイル。テンプレートエンジンを用いて記述
├── home.ejs
├── index.ejs
├── login.ejs
└── register.ejs
“`

・app.js

“`javascript
‘use strict’
//共通変数
const path = require(‘path’);
const morgan = require(‘morgan’);　//ターミ