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

研究室の書籍貸出簿をJavascriptとGoogle Apps Scriptと書誌情報APIで．その4

これまでの内容：
[その1：本のバーコードを読んで貸出記録をつけるシステム](https://qiita.com/fujino-fpu/items/fd4199f18f2d835098f0)
[その2：返却期限すぎても返却されていない本のリマインドメールを出すシステム](https://qiita.com/fujino-fpu/items/170de6ce8ac1cfe0c4d1)
[その3：貸出簿をつける時のエラーチェック（スプレッドシートの学生情報DBに問い合わせするシステム）](https://qiita.com/fujino-fpu/items/e1b09807b5f54eb93385)

今回は「その4」ということで，返却処理を行うシステムを作った．

基本的な動作：
1. 本のバーコードを読み込んでISBN番号を取得
2. 取得したISBN番号から貸出簿を検索し，返却処理が未了（返却日が未記載）の記録を取得
3. 記録にある本のタイトル，著者名，借りた人の名前，学籍番号を画面表示
4. 返却OKなら，その貸出記録に返却日を記載．

というもの．
その3までの処理はスプレッド

TypeScript: オブジェクトのメソッド一覧を取得する関数 getMethods()

オブジェクトのメソッド名を配列で返す関数を作ったので紹介します。

## 関数の仕様

オブジェクトのメソッド名を配列で返す関数とは、どんな関数かというと、オブジェクトのプロパティの中から、関数だけを抽出し、その関数名を返すというものです。

例えば、次のサンプルコードのように、非関数の`property`と関数の`method`を持ったオブジェクトを渡すと、`[‘method’]`を返します:

“`typescript
getMethods({
property: 1,
method() {},
})
// Output: [‘method’]
“`

クラスのインスタンスにも適用可能です:

“`typescript
class MyClass {
property = 1
method() {}
}
getMethods(new MyClass())
// Output: [‘method’]
“`

継承している場合、親クラスのメソッドも再帰的に探してリストアップします:

“`typescript
class A {
methodA() {}
}
cla

本当の初心者のためのNode.js超入門　~環境構築編~

# はじめに
　今回このシリーズを書くに至った経緯として、この頃未経験から転職してプログラマーになる方とか増えている印象が強いのですが、プログラミングを教える際に色々と余計なことを教えてしまったり、逆に併せて教えるべきことが抜けていたりといったことが多いなと感じる部分があったので、「完全素人向けに教えるにはどこを教えたらいいだろう？」という自身の疑問を解決するためのまとめとして書くことにしました。
　私自身も分かっていない部分多くあるので、一つ一つ再度勉強しながら書いていこうと思います。また、私同様に独学でプログラミングを始めた方の手助けになれればという気持ちですので、この気持ちに賛同していただける方はご指摘等頂けると幸いです。（もちろん初学者の方はご質問いただいても構いませんのでお気兼ねなく!）

　少々前置きが長くなってしまいましたが、今回はNode.jsについて基礎的な内容と環境構築方法について見ていこうと思います。
　今後Pythonなども同様の内容を書いていこうと思いますので、ご興味ある方はそちらもご覧頂ければと思います。

# Webアプリケーションについて
　Node.j

【Javascript】PHPのlist関数のようにJSで配列を変数に展開する【TL;DR】

メモとして残します。

#■やり方
##on PHP
“`PHP
list($id, $name, $remark) = [1, ‘t.yamada’, ‘bikou’];
“`
##on Javascript
“`javascript
let [id, name, remark] = [1, ‘t.yamada’, ‘bikou’];
“`

phpはバージョンによりますが、PHP、JSともに不要な展開は変数定義しないで飛ばせます（（$a,,$c）みたいに。）。

デフォルト引数の一部にだけ値を渡したい場合

JavaScriptではデフォルトの引数を指定できる。(ES2015~)
### デフォルト引数を指定した引数の一部にだけ値を渡したい場合
デフォルトにしたい値には、値を渡さない　or undefinedを渡せばOK。
（そもそもJavaScriptでは、関数の引数は指定しなければundefinedが渡されている。）

“`javascript

function multiply(a　= 2, b = 1) {
return a * b;
}

console.log(multiply(5, 2));
// expected output: 10

console.log(multiply(5));
// expected output: 5

console.log(multiply(undefined, 5));
// expected output: 10
“`

コンテンツを横にアコーディオンで表示させるjQuery

jQueryを使って、コンテンツを横にアコーディオン状に表示するものを作成しました。

ナビゲーションで縦のアコーディオン状のものを作成することはよくあるのですが、コンテンツの中身は1つだけ見えていて他は見出しのみ見えていているような形を見かけたので作成してみようと思いました。

##デモページ
[デモページ](http://webdrawer.net/sample/js/acdion/index.html)

##仕組み

コンテンツをabsoluteで横並びにし、クリックした見出しによって動くコンテンツを決めつつ移動させてます。 あと、overflow: hidden;で横ではみ出てる部分を表示させないようにしています。

横幅など変わったら調整がいるかもしれませんが、ひとまずこちらで動いたのでこれで。

##HTML
“`html

コンテンツ01

Lorem ipsum dolo

JavaScript　概念編

JavaScriptとは
webアプリケーションでは、かなり頻繁に利用しそうです。
例えば、メニュー画面にマウスを乗せ、ボタンの色が変わったり・プルダウンメニューが表示されたり、いいね！がカウントされたりなどです。
※JavaとJavaScriptは全くの別物みたいです。javaのフレームワークがjsだと思ってました笑

使い方
・HTMLファイル内に、scriptタグを埋め込む

・script.jsファイルを作成する
・jsファイルをhtmlに読み込ます
GAのutmパラメータをMA（Marketo）に取り込む方法

私はSaaSスタートアップでデジタルマーケティング周りを主に担当しており、どの流入経路からどれくらいのリードが取れて、どれくらいの商談に繋がったのかということを常日頃気にしながら仕事をしております。

そんな中、Googleアナリティクスで使っている`utmパラメータ`を弊社で使っているMAツール`Marketo`と、連携している`Salesforce`に取り込めたら便利になるなーと思い、やってみたので、やり方をメモします。

Qiita記事書くの初めてなので、読みづらいとこはご了承ください。。
## 前提
### 環境（使っているツール）
– Marketo
– Salesforce
– Googleアナリティクス（GA）
– Googleタグマネージャー（GTM）

弊社はMarketoとSalesforceを使っていますが、別のMAツールを使っていても同じようなやり方でできると思います。
### 実現できること
GAで使っているutmパラメータをMarketo→Salesforceに取り込み、どの経路（Googleリスティング？GDN？Facebook？とか）から入ったリードが商

うた「大きな栗の木の下で」の再生を例としてasync非同期処理を説明します

#非同期処理
プログラムって実行すると、コードを上から順に1行ずつ実行していきますね。
その処理の1つに時間のかかる処理があると、その実行が完了するまで、次の行には進みません。
例えば、五線譜によって、ピアノの音声ファイルを再生する時には、音声ファイルを一つずつ再生することが必要になります。この場合は同期処理だけで出来ません、非同期処理が必須です。

#何故asyncを利用するのか
ES6以前の非同期処理って面倒です。JavaScriptではいわゆるコールバック地獄というやつにしばしば陥りがちです。
ES6からはPromiseを利用して、簡潔に非同期処理が書けました。

#asyncとは
非同期関数を定義する関数宣言のことです。
以下のように関数の前にasyncを宣言することにより、非同期関数（async function）を定義できます。
・async functionは呼び出されるとPromiseを返します。
・async functionが値をreturnした場合、Promiseは戻り値をresolveします。
・async functionが例外や何らかの値をthrowした場合

“添付ファイルのパスワードは別途送付します”へ対抗するために公開鍵暗号化ツールを作った

***「添付ファイルのパスワードは別途送付します」***

皆さんも、添付されたZIPファイルと共に、どこかで一度はこの文面を見たことがあると思います。
そして、この行為が無意味であるという事もまた、ご存じかと思います。

しかし、日本の特に大手企業では古い習慣や責任逃れとして、未だに使われ続けているのが現状です。
そして、そのような事を続けている企業ではもれなく、クラウドストレージサービスの使用も制限されているのがお約束です。

今回は、そんな~~脳死~~古い思考を引き摺った環境でも、安全でなるべく簡単にファイル転送を行えるアプリケーションを作ってみました。

# なぜ無意味なのか
まず初めに、そもそも何故「パスワードを別のメールで送付」が無意味なのかをまとめてみます。

## セキュリティ強度
– [ZIP標準仕様書](https://pkware.cachefly.net/webdocs/casestudies/APPNOTE.TXT)

> 6.0 Traditional PKWARE Encryption
6.0.1 The following information

遅延実行asyncのメモ

## asyncで遅延実行
ある実行のあとに、もう一つ実行させたい、そしてそのまた後に何秒後に実行

みたいなケースのときに活用した。

## コード
“`javascript

const test1() => {
alert(1);
}

const test2() => {
alert(2);
}

//////////////////////
// 表示のタイミング
//////////////////////
async function delay() {
try {
//秒数と、関数を渡す
await wait(1, test1());
await wait(1, test2());
} catch (err) {
console.error(err);
}
}

//////////////////////
// 遅延実行
//////////////////////
const wait = (sec) => {

【小ネタ】JSのマウスオーバーイベントでちょい遊び

## cssを触らないでaタグの装飾をする必要が出てきたので、ちょいメモ。

“`index.html
お試しあれ〜
“`

## 結論
JS楽しい。

Node.jsでperformance.now()を使用した際に”ReferenceError: performance is not defined”というエラーが出る

## TL; DR
以下のいずれかの方法でperformanceオブジェクトを宣言する。

“`javascript
const performance = require(‘perf_hooks’).performance;
“`
もしくは

“`javascript

const { performance } = require(‘perf_hooks’);
“`

## 詳細

“`javascript
var t0 = performance.now();
console.log( ‘Do something’ );
var t1 = performance.now();
console.log(“Call to doSomething took ” + (t1 – t0) + ” milliseconds.”);
“`

上記のようなコードをNode.jsで実行すると`ReferenceError: performance is not defined`というエラーが出た。
Node.jsで[Performance API](https://developer.

音オペレーションで革命的なUXを！

### まえふり

もう年末が近いですね。
1999年の大みそかから2000年になった時に将来の不安よりドキドキ感が強かったもんですがもうあれから20年近く時間が過ぎてしまったんですねー。
AIやらマネージドサービスやらで、がしがしプラットフォーマーが世の中をひっぱってってくれているんですが、

– 「[XXX ] [検索]　(カチッ)」とかいうCMに出てくるやつ
– （ラジオで）「番組へのお便りはなんちゃらアットマークにメールください」

こういうのいい加減めんどくさいUXなんでやめたら良いと思うんです。20年前のURL一字一句手打ちとどう違うのかと。
どんなに短くなっても復活の呪文を打つのが変わらないならおんなじかと。

ITリテラシー問題とするのであれば音声認識、言語処理がリテラシーが低い人にも使い易く人気ですが
スマートスピーカーのウェイクワードって恥ずかしい。日本人が消極的なんじゃなくて普通にヘンに見える。
言霊とか人形供養とかセンシティブに魂を扱って来た遺伝子がそう思わせてるんじゃないか。（因果推論）

QRもスマホだしてアプリさがしてうごかしてQRコードにか

ゲームのデモ状態のときの動き(右左に自動で動かす))　~timeclock DAY3~

#完成イメージ
こんな感じで上(赤ゾーン)から下(青ゾーン)に障害物が落ちる
→下のところ(青)で避けるっいうゲーム
*説明のしたにHTML,cssもかいてあるのでコピペで動かしてみてください…

##コード
“`javascript

//要素をhtmlから引っ張り出す
var escaper = document.getElementById(“escaper”);
var escaperzone = document.getElementById(“escaperzone”);
var text = document.getElementById(“text”);
escaper.style.left　=　”0px”;
function demomove(){
var demonumber =

JavaScriptで正方行列の行列式を計算する

以下の行列Aがある時、

“`math
A =
\begin{matrix}
a & b & c\\
d & e & f\\
g & h & i
\end{matrix}
“`

行列式はこう計算出来る。

“`math
\begin{vmatrix}
A
\end{vmatrix}
=
\begin{vmatrix}
a & b & c\\
d & e & f\\
g & h & i
\end{vmatrix}
=
a\times
\begin{vmatrix}
e & f\\
h & i
\end{vmatrix}
– b\times
\begin{vmatrix}
d & f\\
g & i
\end{vmatrix}
+ c\times
\begin{vmatrix}
d & e\\
g & h
\end{vmatrix}

“`

JavaScriptで実装してみるとこうなった。

“`javascript
function determinant(m) {
if(m.length === 0) return 1;
let x = 0;
for(l

研究室の書籍貸出簿をJavascriptとGoogle Apps Scriptと書誌情報APIで．その3

入力ミスに対応するためのエラー処理をinput.htmlに書き込むことにする．

#submit処理をJavascriptでマニュアルでする．
参考：http://hensa40.cutegirl.jp/archives/690
貸出処理をしたときに，前々回のバージョンでは，`input`のtypeを`submit`にしてたので，ボタンを押すと自動でsubmitが発火し，formの内容がpostされてた．
けどエラー処理をするのであれば，submitを手動でしないといけない．
方法はいくつかあって，jQueryを使っているなら，submit関数の中にfunctionを書くことができるが，今回はinputのtypeをbuttonにしてクリックすると発火する関数を書くことにする．

ということで，以下のような形．

“`{html:index.html}
（略）

（略）

jQueryのajaxでJSONを送るとIntegerがStringになるやつをいろいろ調べた

業務中に質問を受けたので検証しました

## 結論

JSONをJSON.stringify()で囲み、Content-Typeを’application/json’にすることで、Integerのまま送信できました。

参考: **[jQuery.ajax()](https://api.jquery.com/jquery.ajax/)**

## 検証ログ

### フロント（通信部分のみ）

“`javascript:jQuery
$.ajax({
url: “http://localhost:3000/api/v1/test”,
type: “POST”,
dataType: “json”,
data: jsonData
}).done(function(r) {
console.log(r)
})
“`

“`javascript:axios
axios
.post(“http://localhost:3000/api/v1/test”, jsonData)
.then(r => {
console.log(r)
})
“`

##

Ajaxの通信エラー情報を表示する

## ajaxとは

ajax（エイジャックス）とは、JavaScriptを使用して行われる非同期処理のこと。
通常Webページの内容を変更するためには画面遷移やリロードする必要がありますが、ajaxを使用すればリロードせずにページの内容を変更することができる。

## ajaxメソッド(成功はdone、失敗はfail)による非同期通信の書式

“`index.html

“`

### エラー処理の実装

“`index.html