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

今までJW Playerを使っていたけどplyr.jsをカスタマイズしてみた（３）

# 前回まで
[前回まで] (https://qiita.com/nishidataishi/items/666305bf13983169524f) でボタンの色や配置をカスタマイズすることはできました。
ここからは独自のボタンを追加するなどさらなるカスタマイズに進みます。

# オリジナルのボタン追加
下記の公式情報のように、HTMLをJavaScriptにガシガシ書くことで追加できます。

“`js:公式の情報
const controls = `

Restart
<

カリー化チートシート

拙作『[不動点コンビネータを用いた無名再帰関数の実行まとめ](https://qiita.com/ytaki0801/items/596efbbcb07d38630bc9)』の補足説明として書き始めたところ，カリー化関数を記述・利用するための独立したチートシートとした方が少なくとも約1名（自分自身）には役立ちそうだったので，新しく記事にした．なお，カリー化してくれる関数の定義ではないことに注意．複数言語に渡っている都合上，各言語に精通している方々のツッコミ歓迎．

#Haskell（GHC）
Haskellでは，複数引数で定義しても自動的にカリー化される．カリー化関数の引数指定は`(・・・(関数 引数) 引数)・・・引数`である．

“`haskell
Prelude> func x y z = if x > 0 then y else z
Prelude> func (-100) 0 (-1)
-1
Prelude> ((func (-100)) 0) (-1)
-1
“`

`\`および`->`を用いた無名関数を戻り値にして実現する方法は次の通り．ただし，この場合でも引数の複数

複数の要素をスクロール検知してアニメーションを行う

よくポートフォリオサイトなどで見かけるスクロールすると画像がフェードインしてくる感じのものが作れます。

## IntersectionObserver
“.made-item”が付いている要素を取得して、それぞれの要素が特定のスクロールポイントに来たときにclassを付与、消去するプログラムです。

“`js
function() {
const items = document.querySelectorAll(‘.made-item’)
const cb = function(entries, observer) {
entries.forEach(entry => {
if (entry.isIntersecting) {
console.log(‘はいったときの処理’);
console.log(entry.target);
entry.target.classList.add(‘inview’)
} else {

非同期の双方向更新を実現するためのテクニック

近年、Fluxのように双方向の更新を極力避けて、単方向の更新に還元させようという流れがあります。ただ、どうしても双方向の更新が避けられない場合はあるでしょう。Goole Docsのように、複数の人が同じドキュメントを編集する場合。画面上の複数の入力コンポーネントが相互に同期しているような場合です。

特定の言語に依存しない話ですが、Javascriptで使うことが多いとは思われるため、タグにJavascriptを入れています。

# 1. 一番単純な実装

まず、一番シンプルに、Aが更新されたらBに反映させる、Bが更新されたらAに反映させる、という実装を考えます。

#2. 外部から更新を受け入れた場合は、更新の報告をしない

この際、単純に実装するとA→B→A→Bという無限ループになってしまいます。これを解決するためには以下のような方法が考えられます。

それは、「外部から更新を受け入れた場合は、更新の報告をしない」ことです。

#3. サーバ側でupdateIdを管理し、最後のコミットを反映させる

ただ、これだと、AとBが同時に更新した場合、最終的に、どちらのサーバ反映が早かった

極限まで単純化したPromiseのサブセット

例外処理等はなく、とにかくthenableにすることだけに特化したPromiseのサブセットです。あまり実用的な意味はありませんが、Promiseの内部の実装を理解する上で参考になればと思います。

“`js
const Promise = window.Promise || function Promise(executor) {
const callbacks = [];
let isResolved = false;
let resolvedValue = null;
const resolved = (value) => {
isResolved = true;
resolvedValue = value;
callbacks.forEach(callback => callback(resolvedValue))
}
const rejected = (err) => {
callbacks.splice(0);
console.error(err);
}
executor(resolved, reje

SQL文で変数を使う方法 in JavaScript

# はじめに
Node.jsでExpress+Mysqlを用いてRestApiを作成する際、postでの処理に詰まったため備忘録として記事を書きます。

# 問題

|id(int)|name(String)|
|—|—|
|1|test|

このようなテーブルに対して、以下のソースを用いてpostでレコードを挿入する際、数値は入るが文字列はエラーが出て入れることができなかった。

“`sample.js

id=req.body.id;
name=req.body.name”;

//jsonで{id:2,name:”sample”}というデータを送信

sql=”INSERT INTO api_tbl VALUES(“+id+”,”+name+”)”;
connection.query( sql,function (error, results, fields) {
if (error) throw error;
res.send(“ok”);
});
“`
原因としては、postリクエストを送った際、sql文をセットしている変数`sql`に以下のような

Javascript で天ざるそばをつくる

###
天ざるそばを作るとき、天ぷらを揚げてから、そばを茹でたら、天ぷらは冷えてしまう。そばを茹でてから天ぷらを揚げたら、そばにコシがなくなってしまう。できれば同時に作って、コシのあるそばでカラッとした天ぷらを食べたい。そんなわけでJavascriptでうまい天ざるそばを作る様子をシミュレートしてみよう。

ここで、天ざるそばのレシピを振り返ってみる。

A 天ぷらをつくる
　　(1) 素材準備 (5秒)
　　(2) 揚げる (10秒)

B そばを茹でる
　　(1) はかる　(2秒)
　　(2) ゆでる (7秒)
　　(3) あらう (3秒)

C A,Bをもりつける (5秒)

手順としては、A->B->Cではなく、 (A|B)->C でなければ、いけない。
カッコ内は、仮の調理時間。
念のために、絵で確認しておこう。

##

JavaScript: 一見メモ化しにくいような数列もメモ化できるかも? たとえば素数とか

[JavaScript: クロージャーでメモ化してくれる関数を作ってみた](https://qiita.com/ttatsf/items/320c9f113de006f6de9b)という記事を以前書きました。

# 前記事のまとめ : 漸化式でかけるような数列は、汎用のメモ化関数でメモ化できる。
例えば：

“`js
//フィボナッチ数列
const fibo = n =>
(n === 0)? 0
: (n === 1)? 1
: fibo(n-1) + fibo(n-2)

//階乗
const facto = n =>
(n === 0)? 1
: (n === 1)? 1
: n * facto(n-1)
“`
は、汎用のメモ化関数 memoizer を使って：

“`js
//フィボナッチ数列
const fibo = memoizer( [0,1] )( a => n => a(n-1) + a(n-2) )

//階乗
const facto = memoizer( [1,1] )( a => n => n * a(n-1) )
“`
とす

DMMWEBCAMPでの記録(未経験から就職まで)

###はじめに
この度DMMWEBCAMPを卒業し、就職を決めることが出来たので学習の記録を書きます。

###投稿しようと思ったきっかけ
以下記事を読ませて頂いて

【卒業生】DMMWEBCAMPに通おうか迷っている人に伝えたい事
https://qiita.com/yuki82511988/items/37be28f2486e166fd48f

僕もこれからプログラミングをやろうとしている方、学校に通おうと思っている方の役に立てればなという思いから書こうというところに至りました。

###僕のこと
軽く自己紹介をします。

現在26歳今年27歳になります。
長野県出身でDMMWEBCAMPに通い転職する目的で引っ越しました。

MOSやワープロ検定1級を専門学校の時取得したくらいで、ターミナルやgithubを触ったことはありませんでした。
タイピングがちょっと速くてMicrosoft製品ちょっと使えるぜ！レベルです。
入学する半年くらい前にちょこっと本当に少しProgate(無料版)をやったり、SkillHuckという教材を購入して少しやった程度です。
ちなみにSkillHuc

[JavaScript]Array.mapとparseIntの組み合わせの落とし穴

どうも、えいやです。

JavaScriptのよくある落とし穴の話をします。

例えば、`’01:24’`のような時刻表示について、時間と分を`int`で取ろうと以下のようなコードを書いたとします。

“`js:fig.1.1
’01:24′.split(‘:’).map(parseInt)
“`

実はこれは正常に動きません。結果は以下となります。

“`js:fig.1.2
> ’01:24′.split(‘:’).map(parseInt)
[ 1, NaN ]
“`

試しに`:`区切りとなっている文字列で与えられている数値の数を増やすと、以下のようになります。

“`bash:fig.2
% node -v && node
v12.16.3
> ’01:02:03:04:05:06′.split(‘:’).map(parseInt)
[ 1, NaN, 0, 0, 0, 0 ]
“`

さて、何が起きているのか正確にわかりますか？

とりあえず意図通りに動かすには、mapが引数として取る関数に引数を与えて、

“`js:fig.3
> ’01:02:03:04:

[JavaScript] 関数と変数の宣言と実行

# 概要
JavaScript で関数の宣言と実行を行う方法と、オブジェクト、引数についての学んだことをまとめる。

# 前提知識
[ローカルで JavaScript を実行するための環境構築](https://qiita.com/ub0t0/items/f8584f3be322c7fe18fa)

# 使用するソフト
Visual Studio Code : js のスクリプト記述のために利用
ターミナル : macOS High Sierra ver 10.13.6 に標準搭載されている実行環境
Google Chrome （Google Chrome 右クリック → [検証] で [Console] 画面を表示）

# 関数
プログラミングでは、処理をまとめて関数として名前をつけることで、呼び出しが可能になる。

以下の構成で記述する
![スクリーンショット 2020-08-01 13.33.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/5cdc9472-eb1e-02db-

またつまらないLINEbotをつくってしまった。。。

いらっしゃませ。最近LINEbotを作るのにハマっているので、アウトプットします。今回は、入力された文を__ただオウム返しするだけのつまらないLINEbot__を作成します。15分もあれば簡単に作れます。
#対象者

– LINEbotを作ってみたい人
– プログラミングなんてしたことない人(今回はGoogleAppScriptで実装を行いますが、下記のソースコードコピペしていただければ動きます)
– LINEする相手が欲しい人

#必要なもの
– PC(OSは問いません。)
– LINEアカウント(LINEを使っている人なら多分もっているはずです)
– Googleアカウント
– 人並みはずれた探究心
– オウムへの底しれぬ愛

#今回作成するもの
###:frowning2:オウム返しLINEbot:frowning2:
Vue.jsのドキュメントをまとめてみた

# Vue.jsとは？
フロントエンドのフレームワーク。
‘はじめに’の部分を自分なりに噛み砕いてみた

# 特徴

## コンポーネントの概念

vue.jsでは画面部品単位でvueインスタンスを作成し、それらを組み合わせることでページを組み立てていく。

>コンポーネントシステムは Vue.js におけるもうひとつの重要な抽象概念です。「小さく、自己完結的で、（多くの場合）再利用可能なコンポーネント」を組み合わせることで、大規模アプリケーションを構築することが可能になります。アプリケーションのインターフェイスについて考えてみると、ほぼすべてのタイプのインターフェイスはコンポーネントツリーとして抽象化することができます:
(引用：https://jp.vuejs.org/v2/guide/index.html)

### この小さな

javascriptを使って簡単な計算機を作るpart.last 入門者向け

#計算機を作る

##完成物

See the Pen
jOWgaGJ by ライム (@raimumk2)
on P5.js 日本語リファレンス(DEGREESなど)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の 関数を説明します。

※このページでは DEGREES、RADIANS、HALF_PI、PI、QUARTER_PI、TAU、TWO_PI の説明を記載しています。

## DEGREES

### 説明文

angleMode() で使用する定数で、DEGREEDS を指定すると角度は 例えば円は０°〜３６０°で扱います。

### 構文

angleMode(DEGREES)

## RADIANS

### 説明文

angleMode() で使用する定数で、RADIANS を指定すると角度は 例えば円は 0.0 〜 2π (6.28318531)で扱います。

### 構文

angleMode(RADIANS)

## HALF_PI

### 説明文

HALF_PIは 1.57079632679489661923の値(πの半分)を持つ数学定数です。これは円の円周と直径の比率の半分です。三角関数sin()

P5.js 日本語リファレンス(circle)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の circle関数を説明します。

## circle()

### 説明文

画面に円を描きます。円は単純な閉じた形状です。これは, 指定されたポイントつまり中心から指定された距離にある平面内のすべてのポイントのセットです。この関数は ellipse() の特別なケースで楕円の幅と高さが同じです。楕円の高さと幅は円の直径に対応します。デフォルトでは最初の2つのパラメータは円の中心の位置を設定し、3番目のパラメータは円の直径を設定します。

### 構文

circle(x, y, d)

### パラメタ

– x
Number：円の中心のx座標

– y
Number：円の中心のy座標

– d
Number：円の直径

### 例1

“`javascript
function setup() {
createCanvas(200, 200);

//中心点(100, 100)に直径150の円を描画し

P5.js 日本語リファレンス(ellipse)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の ellipse関数を説明します。

## ellipse()

### 説明文

画面に楕円を描画します。幅と高さが等しい楕円は円です。最初の2つのパラメータは中心点を設定し、3番目と4番目のパラメータは楕円の幅と高さを設定します。高さが指定されていない場合、幅の値は幅と高さの両方に使用されます。負の高さまたは幅が指定されている場合は、絶対値が使用されます。原点は ellipseMode() で変更できます。

### 構文

ellipse(x, y, w, [h​​])

ellipse(x, y, w, h, detail)

### パラメタ

– x
Number：楕円のx座標

– y
Number：楕円のy座標

– w
Number：楕円の幅

– h
Number：楕円の高さ (オプション)

– detail
Number：楕円を描画する頂点数(WebGLモードの場合)

### 例1

“`j

P5.js 日本語リファレンス(line)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の line関数を説明します。

## line()

### 説明文

画面に線(2点間の直接パス)を描画します。 4つのパラメータを持つline() は 2D で、6つのパラメータを持つline() は 3D で線を描画します。線に色を付けるには stroke() を使用します。線を塗りつぶすことはできないため fill() は線の色に影響を与えません。 2D の line はデフォルトで1ピクセルの幅で描画されますが、これは strokeWeight() で変更できます。

### 構文

line(x1, y1, x2, y2)

line(x1, y1, z1, x2, y2, z2)

### パラメタ

– x1
Number：最初の点のx座標

– y1
Number：最初の点のy座標

– x2
Number：2番目の点のx座標

– y2
Number：2番目の点のy座標

– z1

P5.js 日本語リファレンス(point)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の point関数を説明します。

## point()

### 説明文

点を描画します。最初のパラメータはポイントの水平方向の値、2番目のパラメータはポイントの垂直方向の値です。ポイントの色は stroke() で変更されます。ポイントのサイズは strokeWeight() で変更されます。

### 構文

point(x, y, [z])

point(coordinate_vector)

### パラメタ

– x
Number：X座標

– y
Number：Y座標

– z
Number：z座標(WebGLモードの場合)(オプション)

– coordinate_vector
p5.Vector：座標ベクトル

### 例1

“`javascript
function setup() {
createCanvas(400, 400);

//ポイントのサイズを10ピクセルにします
st

P5.js 日本語リファレンス(quad)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の quad関数を説明します。

## quad()

### 説明文

四角形を描画します。四角形は四辺形のポリゴンです。長方形に似ていますがエッジ間の角度は90度に制限されていません。最初のパラメータのペア (x​​1, y1) は最初の頂点を設定し、後続のペアは定義された形状を中心に時計回りまたは反時計回りに進む必要があります。 z引数は、WEBGLモードのみ機能します。
### 構文

quad(x1, y1, x2, y2, x3, y3, x4, y4)

quad(x1, y1, z1, x2, y2, z2, x3, y3, z3, x4, y4, z4)

### パラメタ

– x1
Number：最初の点のx座標

– y1
Number：最初の点のy座標

– x2
Number：2番目の点のx座標

– y2
Number：2番目の点のy座標

– x3
Number：3番目の点のx座