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

[JS1日クッキング]SequelizeとExpressでAPIサーバー

何かを簡単に作って、ちょっとした勉強になる。そんなシリーズになる予定です。

今回は、簡単なTodoアプリに使うAPIサーバーを作っていきます。データベースはMySQLで、データベース操作にはSequelizeを利用します。

完成品はこちら -> [sequelize-todo-api-server](https://github.com/kei-lvngbk/sequelize-todo-api-server/tree/base)

# 材料

– Node.js
– mysql2
– sequelize
– sequelize-cli

# 作り方

## 1. ライブラリのインストール

適当にディテクトリ作って、`npm init`で初期化してから、今回使うライブラリをインストールします。

“`shell
npm i sequelize mysql2
npm i -D sequelize-cli jest
“`

予めMySQLサーバーをインストールして、設定をしておきます。以下は今回使うユーザー名とパスワードです。

“`sql
use mysql;
create

CodePen – フラクタル圧縮された画像を描画してみた

「C言語によるアルゴリズム事典」に掲載されている「フラクタルによる画像圧縮」が面白そうだったのでJavaScriptに移植してみた。

See the Pen
Fractal Compression Drawing<

bashで取得した複数のファイル名をJavaScriptの配列に書き出す簡単な方法

## 目的
– JavaScriptに複数のファイル名を渡したいです。
– bashでサクッと作りたい

## 環境
– MacOS/bash5.0
– centOS7/bash4.24

## 方法
1. bashで複数ファイル(例えばpng)を`find`で取得し整形する。
2. `hoge.js`というテンプレートの変数宣言の場所に1.の結果を入れる
3. JavaScriptの配列定義は`foo = [“a.png”, “b.png”]`というフォーマットに合わせます。

## コード
“`{bash}

# 結果が何もない場合に備えて空文字を入れておく。
$ lst_png=”” ; touch a.png b.png C.png;

# ファイル名で検索する。念のためソートしておく。改行を,に変えて文字列にする。
$ lst_png=$( find . -name “*.png” -printf “\”%f\”\n” | sort | sed -z ‘s|\n|,|g’ ); echo ${lst_png}
“C.png”,”a.png”,”b.png”,

# Jav

【学習メモ】JavaScript（プリミティブ型とオブジェクト型）

基礎構文については
[【学習メモ】JavaScriptの基礎まとめ](https://qiita.com/kota_sho/items/f32ea4df015976557a07)

プリミティブ型とは、メソッドを持たないデータで、文字列、数値、Bigint、真偽値、undefined、シンボルがある。
プリミティブ型は、オブジェクト型と異なり値を変更することができない値として定義される。
[Primitive(プリミティブ)](https://developer.mozilla.org/ja/docs/Glossary/Primitive)
[JavaScriptのデータ型と参照](https://developer.mozilla.org/ja/docs/Web/JavaScript/Data_structures)

####◾️値を変更した時の影響をまとめてみました。

####１、プリミティブ型は、一方が変更されてもその影響を受けない。

例：
aに35を代入し、aをbに代入してみる。この時点ではa,b共に35となる。
次にaに47を改めて代入し、値を更新する。
しかし、

React入門　第二章　～Reactを使ってみよう Todoアプリ～

#React入門目次
1. 第一章　～環境構築　Hello React！！～
2. 第二章　～Reactを使ってみよう～
3. 第三章　～Reactでhooksを使おう～
4. 第四章　～ReactでAPI通信をしてみよう(axios使用)～
5. 第五章　～ReactにReduxを組み込もう(hooks仕様)～
6. 第六章　～React × Reduxをtypescriptで書こう(hooks仕様)～
7. 第七章　～React × Redux × typescriptでAPI通信(redux-saga・axios・hooks仕様)
8. 番外編　～atomic designとは～

##初めに
Reactを学びたい・使いたいと考えている人・SPA作りたい人向けにReactの基本からreduxやtypescript等の応用を導入するところまで説明していきます。(順次公開していきます)

##第二章　～Reactを使ってみよう～
今回はReactを実際に使ってReactの使い方を説明していきます。

####第二章の流れ
1. Reactとは
2. コンポーネントを作ってみよう
3.

Vue.jsで作る！自動保存するToDoリスト~その3~localStorage編~

#初めに

前回の
[Vue.jsで作る！自動保存するToDoリスト~その2~Bootstrap編](https://qiita.com/fijii_rin/items/1336ab2121fe3f4bffba)の続きです。
今回はVue.jsとlocalStorageを使い、リロードや閉じても中のToDoリストが消えないようにします！

##目次

・Vue.jsでwatchやmounted、localStorageの記述
・コードの解説
・まとめ

##Vue.jsでwatchやmounted、localStorageの記述

“`javascript

watch: {
items: {
handler: function() {
localStorage.setItem
(‘items’,JSON.stringify(this.items));
},

お絵かきできるSNSを作りたい！8

レイヤーを実装していきます。

↓この部分

まず、ラジオボタンのname属性を同じにします。

“`html:

上レイヤー

下レイヤー

“`

これで両方のラジオボタンにチェックが付く状態から、片方1つにチェックが付く状態になります。
次にレイヤーを作るに辺りcanvasが2枚必要なので増やしました。

↓変更前

“`html:

“`

↓変更後

“`html:

SkyWayで後からstreamを送信しようとして詰まった際の対処

複雑な家庭の事情により、どうしてもSkyWayをつかったWebRTC画面共有ツールをつくる必要があったため、詰まったことをメモ。

完全にSkyWay力技ネタなので、[SkyWayのAPIリファレンス](https://webrtc.ecl.ntt.com/api-reference/javascript.html)と見比べながら見てもらえると。

## やろうとしたこと

– SkyWayで
– カメラを使用しない
– けれども画面だけ共有できるツール

をつくろうとしました。

自分の顔、相手の顔は見えなくていいのでただただ画面を共有したいというノリです。

これを実現するには

“`
1.peer生成
↓
2.joinRoom（この時はstreamなし）
↓
3.後からgetDisplayMediaして画面をlocalStreamに追加
↓
4.replaceStreamでlocalStreamをルームのmediaStreamへ送信
↓
5.streamイベントを検知してmediaStreamを受信
“`

という流れにすればいいんじゃないかと思い、↓のような雰囲気のコードを

JavaScriptにもrangeが来るかもって話です

**注: Stage 1なので、この記事のとおり、実装される保証も、そもそも実装される保証もありません。提案されているってだけの話です。**

https://github.com/tc39/proposal-Number.range

というProposalでJavaScriptにNumber.rangeとBigInt.rangeを追加しようという提案がされています。
JavaScriptで連番の配列を作成する関数そのものは存在せず、間接的に生成するしかありません。
関数本来の使い方でないうえ、0からの連番でない場合は少し面倒です。

“`javascript
[…Array(5).keys()];//[0, 1, 2, 3, 4]
Array.from({ length: 4 }, (_, i) => i + 1);//[1, 2, 3, 4]
“`

いろいろなライブラリにて、そのような関数は用意されています。
ですが、これを標準で用意しようというProposalです。
上記Proposalから引用します。
現状だと、Number、BigIntそれぞれに個別の関数が追加さ

TypeDocの生成物をDocusaurus v2に食わせてdeployしてみた

# サマリ
OSSのAPI Referenceサイトを作るにあたり、TypeScriptからTypeDocを使って、しこしこドキュメントを作っていたのですが、サイト自体をDocusaurus v2で楽して公開したいなーと思ったのでやってみた記事となります。
なお、実際に下記の様なサイト(API Referenceの部分)がコマンド2発くらいで自動生成→デプロイできるようになります。
p5.toio – API Reference Site
https://tetunori.github.io/p5.toio/

# 前提と注意事項
すでにTypeScriptでビルドできる環境やソースコードがあり、TypeDocも導入済みの環境を想定しています。
以下は最小手数の導入方法を書いていますが、まずはご自分のサンドボックスリポジトリで色々いじくるのをお薦めします。

# Docusaurus v2概要
[Docusaurus](https://docusaurus.io/)はOSSのドキュメントサイトを簡単に作ることができるFacebook謹製OSSツールですが、現在正式版のv1と平行して、[

javaScript 文字の切り出しとソート処理のソースコード（googleスライドに対して実行）

# 前提
* GASで実行しています
* 想定しているプレゼンテーションに含まれるスライドの見出しオブジェクトにおける文字は「1-1.sample」のような形式を想定しています。
* 上記の形式はピリオド以前が数字とハイフン、ピリオド以降がタイトルと換言できます

“`javascript:qiita TitleBeforePeriod.js
// グーグルスライドの任意のプレゼンテーションURLを変数に格納する
const Url = “YOUR_GOOGLE_SLIDE_PRESENTATION_URL”
// 上記変数を元に、プレゼンテーションを開く
const presentation = SlidesApp.openByUrl(Url);
// 開いたプレゼンテーションのスライド全てを変数に格納する
const slides = presentation.getSlides();
// 関数を実行する
function slideOrganize() {
//　配列を初期化する
const title_before_period_list = [];

GASのスクレイピングについて教えていただきたいです

プログラミングのスクレイピングについてです。
アプリブンのサイトから、アプリのURL、名前、会社名をスクレイピングしようとしていますが、以下のようなエラーコードがでてしまいます。

どうしたらいいでしょうか？よろしくお願いいたします。

Exception: https://app-liv.jp のリクエストに失敗しました（エラー: 404）。サーバー応答の一部:

Javascript -オブジェクト-　自分用ノート

## オブジェクト

複数のプロパティをもつデータのまとまり。

各種データをひとまとめにして、１つの変数として扱えるデータ。

### オブジェクトの作り方

❶プロパティ数が０のオブジェクトを作成して変数に保存する

“`Markdown:書式
let 変数名 = {}
“`
＊オブジェクトは変数だけでなく定数の定義も有。

❷プロパティが１個以上あるオブジェクトを作成する

“`Markdown:書式
let 変数名 = {プロパティ名1:データ, プロパティ名：データ, …..,プロパティ名X：データ}；

例：let book = {title: ‘javaScript入門’, price: 2500, stock: 3};
“`

プロパティ名は個数制限はない

### ＜オブジェクトのからデータを読み取る、書き換える＞。

### ＜データを読み取る＞

“`Markdown:書式
オブジェクト.プロパティ名

例:console.log(book.stock);
console>> 3
“`

“`Markd

JSメソッド集　自分用

### 配列

配列の最後にデータを追加する
“`
配列名.push(追加したいデータ)
“`

配列の最後のデータを削除する
“`
配列名.pop()
“`
配列の最初のデータを削除する
“`
配列名.shift()
“`

配列の最初のデータ1,データ２を削除する
“`
配列名.unshift()
“`

## テンプレート文字列
「’’（バックティック）」で囲む。

### 普通の文字列のと違い
・文字列中に変数を埋め込める

“`
＄{変数名}

例：const total =`

${item}

`
“`

JavaScriptで必ず出てくるDOMの正体とは

# DOMとは？
いきなり結論から言います。
DOMとは階層構造のことです。
例をみていきましょう。
高校生の生徒会を想像してみてください。
頂点には生徒会長がいて、その下に委員長が複数存在します。
そしてその委員長の下にはたくさんの委員が存在します。
この階層構造自体をDOMと呼ぶのです。
これをHTMLに置き換えると
頂点（生徒会長）＝body
頂点の下（委員長）＝divが複数
divの下（委員）＝pなどたくさん

この階層構造がDOMです。

# DOMに出てくるノードって何？
結論、頂点とかを指し示す名前みたいなものです。
先ほど出した具体例でまた考えてみます。
頂点（生徒会長）＝親ノード（bodyのこと)
頂点の下（委員長）＝基準ノード、兄弟姉妹ノード（divのこと）
divの下（委員）＝子ノード（pなどのこと）
です。

この言い方はしっかり覚えておいた方がいいです。
次回はボタンの取り扱いについてやります。

JavaScriptでの関数の取扱説明書

# JavaScriptでの関数使用方法
rubyではdef~endで関数を使用していましたが
JSでは**function文**を用います。
以下、定義です

“`javascript
function 関数名(引数){処理の内容}
“`
定義だけ示されてもよく分からないと思うので具体例を交えていきます。

## 具体例①

“`javascript
function hello() {
console.log(“hello”);
}

function name() {
console.log(“name”);
}

hello();
name();
“`
これを実行した結果は以下の画面です。

これは定義が分かれば理解できると思います。
では次の具体例をみていきま

初心者でもタグ1つで秒速PWA対応。GUIエディタ(また)作りました。

# 概要
0. [前回記事](https://qiita.com/e-chan1007/items/cd34ce0871943ee34396)のLGTMとストックありがとうございます!
1. PWAって便利ですよね。
2. PWAってなかなか複雑ですよね。
3. Service Workerとその登録スクリプト、1つにまとまっちゃいました。
4. manifest.jsonも動的(?)に読み込めますね。
5. 1行だけソース書けば対応できるようになりそう
6. できちゃったのでまたエディタつくっちゃいました([こちら](https://pwa.app.e-chan.cf/))

# はじめに
こんにちは。いーちゃんです。
突然ですが、あなたのサイトPWA、対応してますか?
すでに実装している人、これから実装する人、面倒でできていない人など、様々だと思います。
manifestとService Workerを書けば済むんですがそれすらも面倒だと時々思ったり…。
ということでPWA対応を秒でしていきましょう。
(例によって前置きが長いのでエディタを早く使いたい方は[こちら](#いざ実装

ランダムな(重複しない)ID的文字列を生成する

#概要

IDとかに使う重複しない文字列を生成するメモ。
node.jsの`crypto`を使う

## 生成方法

cryptoの`randomBytes`を利用して、ランダムなBufferを生成し、それをエンコードして整形する。

– 重複しないためにはある程度長さが必要なので20文字以上を生成するようにする(今回は20文字)。
– エンコードはbase64。ただし+とか/が入るのでreplaceで削除

“`javascript
const crypto = require(“crypto”);
const Length = 20;

const ids = [];
console.log(“生成開始”);
for (let i = 0; i < 10; i++) { const _id = crypto.randomBytes(Length + 2).toString("base64"); const id = _id.replace(/\W/g, '').substring(0, Length); ids.push(id); } console

Javascript における「==」と「===」の違い

##Javascript における「==」と「===」の違い

どちらも「左辺と右辺が等しいか?」を比較するのですが、決定的な違いは**データ型を比較するかしないかの違いです。

##「==」
**値のみでデータ型は比較しない。**

(厳密には異なり、詳細は後述にて補足致します。)
##「===」
**型と値を比較します。**

“`javascript:sample.js

var num = 123;
var str = ‘123’;

document.write(num == str); // true
document.write(num === str); // false
“`

「数値型の123」と「文字列型の123」を比較した場合、データ型まで比較を行う「===」はfalse、行わない「==」はtrueとなります。
比較において「==」と「===」のどちらかを使うべきですが、基本的には「===」を使います。
その理由として
型の比較を行わない「==」はバグの原因になりやすいなど理由は多々あるようです。
ですから変数の型を

カーソルキーでプルダウンを選択する

# 始めに
よくセレクトボックスで操作感をよくするためにキーボードでも選択ができるようにしているサイトがありますが、具体的にどうやっているかをまとめました。

# 実装方法
端的にいえば、focus処理をJS側で泥臭く設定しています。もうちょっとなんとかならないのかなと思いましたが、これがスタンダードなやり方な気がしました（他にやり方があれば教えて欲しいです）。
具体的には`tabindex=”0″`を設定してfocusできる要素にして、後はキーイベントを拾ってそれに応じて前や後の要素をfocusさせます。
実装イメージは以下の通りです。

“`vue:実装イメージ