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

flatpikrの脆弱性を確認する（筆者の方法）個人メモ

# 目的

– JavaScriptのライブラリであるflatpikrの脆弱性を確認する方法を筆者なりに考えたのでメモ的に残す

# 情報

– flatpikrのバージョン4.6.6に脆弱性が発見されていないか確認する

# 方法

1. flatpikrのGithubのリポジトリのissueを確認する。
– [https://github.com/flatpickr/flatpickr/issues](https://github.com/flatpickr/flatpickr/issues)
1. バージョン4.6.6を含む古いバージョンで脆弱性が問題提議されていないことを確認する。

コーディングテスト用：JavaScriptのよく使う処理まとめ

## この記事は何？
最近、コーディングテスト対策にJavaScriptの練習をしています。
問題を解く時によく使う処理をまとめました。

## 繰り返し
### for文
“`JavaScript
const arr = [“abc”, “def”, “ghi”, “jkl”];

for (let i = 0; i < arr.length; i++) { console.log(arr[i]); } // 出力結果 >> abc
>> def
>> ghi
>> jkl
“`

ES2015(ES6)以降のJavaScriptなら以下でも可能（for ~ of文）

“`JavaScript
const arr = [“abc”, “def”, “ghi”, “jkl”];

for (const elem of arr) {
console.log(elem);
}

// 出力結果
>> abc
>> def
>> ghi
>> jkl
“`

### while文
“`JavaScript
let i = 0;

while (i <= 3) { c

strapiで画像などをアップロードする

アップロード自体は難しくはないのですが、つまずいたポイントがあるので共有します。

## メディアライブラリへ画像などアップロードする
1. FormDataにアップロードしたい画像などをappendする
1. /uploadに向かってuploadDataをpostする

“`js
const uploadData = new FormData();
uploadData.append(‘files’, inputData); //inputDataはなどでとってきてください

try {
await fetch(‘http://localhost:1337/upload’, {
method: ‘POST’,
body: uploadData
})
.then(checkStatus)
.then(parseJSON);
} catch (error) {
console.log(error);
}

【kintone】kintone UI Component v1でドロップダウンを作る

こんにちは！
今回は、`kintone UI Component v1` でドロップダウンを作ってみたいと思います。

# kintone UI Component v1 の準備
`JavaScript / CSSでカスタマイズ` に
kintone UI Component v1 のCDNを追加しておきます。

CDN : `https://unpkg.com/kintone-ui-component/umd/kuc.min.js`

# ひとりぼっちのドロップダウン

まずはドロップダウンを1つ設置して、
選択した文字列を、文字列(1行)フィールドに表示するというカスタマイズアプリを作ってみたいと思います。

## アプリの準備

スペースフィールドと文字列(1行)フィールドをフォームに配置します。

| フィールド種類 | フィールド名 | フィールドコード |
|:-:|:-:|:-:|
| スペース | — | spDropdown |
| 文字列(1行) | ドロップダウンの叫び | drText |

![image.png](https://qiita-

JSで特定の要素だけを選択した状態にする

## やりたいこと
こんな感じで要素をクリックしたときにクリックした要素のみ選択された状態にしたい。

## 実装方針

– clickイベント発火時にクラスを付与
– 付与したクラスに対してcssをあてる
– クリックされていない要素からクラスを外すことで1つだけにクラスが付与されている状態にする

## 実装結果

“`jsx
resultItem.addEventListener(‘click’, (e) => {
const selectedItems = document.getElementsByClassName(‘selected’)
if (selectedItems) { //初回は選択状態の要素がないので条件分岐しないとエラーが発生しそう

数値を漢字に変換（コンバーター）：桁読み

###数値を漢字に変換（コンバーター）します。
非推奨 IEブラウザ
動作URL https://taoka-toshiaki.com/ketayomi/
github https://github.com/taoka-toshiaki/ketayomi

“`javascript:main.js
document.getElementById(“number_text”).addEventListener(“input”, function () {
let number_text = this.value.replace(/[^0-9]{0,}/g, “”).split(“”).reverse();
let str = “”;
const kanji = [“”, “一”, “二”, “三”, “四”, “五”, “六”, “七”, “八”, “九”];
if (parseInt(number_text[(number_text.length – 1)]) !== 0) {
for (const key in keta.keta) {
if (number_te

LeedCodeの問題一覧を無料問題のみに絞り込む

[LeetCodeの問題一覧ページ](https://leetcode.com/problemset/)は、難易度やタグで絞り込むことはできるのですが、プレミアム会員しか見ることのできないロックされた問題を除外するフィルター機能がありません。

そこでブックマークレットを作成しました。

“`JavaScript:filter.js
javascript: (() => {
let all = 0;
let locked = 0;
const tr = document.querySelectorAll(‘.reactable-data tr’);
for (let i = 0; i < tr.length; i++) { all++; if (tr[i]['cells'][2] && tr[i]['cells'][2].querySelectorAll('span')[1] && tr[i]['cells'][2].querySelectorAll('sp

GAS(Google Apps Script)を使ってGoogleカレンダーの情報を連携してくれるLINEbotの作り方

Googleカレンダーに登録されている次の日の予定を毎日LINEで通知してくれるbotを作成してみました。

# 今回使うもの
* LINE developersアカウント
* Googleアカウント
* Googleカレンダー
* GAS

# LINE developers
LINE developersアカウントは[こちら](https://developers.line.biz/ja/?status=success)から普段使っているLINEアカウントでログインできます。
ログインできたらプロバイダーを作成します。
次に新規チャネルを作成します。チャネルの種類は「Messaging API」を選択してください。
また、チャネルのMessaging API設定からチャネルアクセストークンを発行しておきます。
今回のbotでは、以下の２点を使用します。

* チャネルアクセストークン
* ユーザID（チャネル基本設定に記載）

# Googleカレンダー
通知させたいカレンダーのカレンダーIDを取得します。
カレンダーIDはカレンダーの設定に記載されています。![スクリーンシ

if文〜JS〜

今回は関数とif文について学習していきます！！
まず、関数の前にif文について学習していきます。

#if文について
if文とは条件分岐のときに使います。

“`main.js
if (条件式){
trueだったときの処理
} else if (条件式){
falseだったときの処理
} else {
どちらにも当てはまんなかったとき
}
“`
上記のように流れていきます。

では、実際にプログラムを書いていきましょう。

まず、変数か定数を定義します。
Jsでは、変数はlet,定数はconstを宣言します。前の記事でも学習しましたが、変数は入れ替えができますが定数は変更することができないので注意しましょう、1つのプログラムを書く中では変数ではなく定数を極力使うようにしましょう！！

“`main.js
const score = 10;

if (score >= 80) {
document.write(“よくできました”);
} else if　(score >= 60) {
document.write(“半分取れました！！更

結局Webpackってなんのためにあるの？

# はじめに

JavaScript（フロントエンド）を始めてぶち当たるのがWebpack, Babelだと思います。（僕はぶち当たりました）
この記事ではWebpackの使い方ではなく、**「Webpackって結局なんのためにあって、あるとなんで嬉しいのか」**についてを書きます。
もし、間違っている、追記すべきことがあれば編集リクエストなどで教えていただけると幸いです。

# Webpackの役割

Webpackは下の記事にもある通り、**モジュールバンドラー**と呼ばれるものです。

https://qiita.com/kamykn/items/45fb4690ace32216ca25

Webpackについて全く知らないよって人はこの記事を読んでみると何をするものかはイメージがつくと思います。

簡単に説明すると、Webpackは**複数のJavaScriptファイルを1つにまとめてくれるもの**です。（JavaScriptファイル以外にもCSSとか画像ファイルもできます）

## 複数の`script`タグじゃだめなの？

HTMLには複数の`script`タグを埋め込むこ

konva.js で地図を描く (2)

[前回]()の続き
次はkonvaのいろんな図形を使って、簡易的な地図を描いていきます

# グループの生成
画像や図形たちをグループ化します

“`js:sample.js
var group = new Konva.Group({
x: 10,
y: 10
});
“`
作った要素をこのグループに追加していく

# 軌跡の描画
line のオブジェクトを使って描画
lineは[x0, y0, x1, y1, x2, y2 …..] という座標を指定して、そのポイントを結ぶ線を描きます

convasの座標は
左上が(0,0)右下が(200, 200) (例:canvasのサイズが200pxの時)
なので、左上を始点にして

* x(正の方向)→ 右側にlineが描かれる (負の時は逆)
* y(正の方向)→ 下側にlineが描かれる (負の時は逆)

lineを描く例
今回は各lineのポイントごとにクリックイベントなど拾えるように、各区間ごとに線を描いていきます

“`js:sample.js
// [x,y]の座標が詰まった配列
var table =

konva.js で地図を描く (1)

#konva.jsとは
* [konva.js](https://konvajs.org/)
* デスクトップやモバイルアプリケーション向けの2Dキャンバスライブラリ
* 図形や画像を描画したり、アニメーションしたり、イベントリスナーをつけたりなどが簡単にできる

今回はこのkonva.jsを使って簡易的な地図を描いた内容をまとめます

#html側
“`html:samle.html

“`
html側はdivを用意するだけ

# ライブラリ読み込み

スクリプトタグに以下埋め込み
““

or

“npm install konva“

or

[公式サイト](https://konvajs.o

Jest mockClear(), mockReset(), mockRestore() の違い

Jest の `mockClear()`, `mockReset()`, `mockRestore()` の違いが分かりづらいのでまとめておく。
また `jest.clearAllMocks()`, `jest.resetAllMocks()`, `jest.restoreAllMocks()` もすべてのモックが対象になるだけで挙動としては同じ。

## `mockClear()`

`mockFn.mock.calls`, `mockFn.mock.instances` を初期化する。

“`ts
const now = () => Date.now();

describe(‘mock example’, () => {
const mockedDateNow = jest.spyOn(Date, ‘now’).mockReturnValue(0);

it(‘mockClear’, () => {
now();
mockedDateNow.mockClear();
// calls, instances はすべて初期化されている
ex

Deno Deployをやってみた

ツイッター見てたら流れてきたのでやってみた

# Deno Deployとは？

>Deno Deploy is a distributed system that runs JavaScript, TypeScript, and WebAssembly at the edge, worldwide. The service deeply integrates the V8 JavaScript runtime with a high performance asynchronous web server to provide optimal performance without unnecessary intermediate abstractions.
https://deno.com/deploy

google翻訳
> Deno Deployは、 JavaScript、TypeScript、およびWebAssembly を世界中のエッジで実行する 分散システム です。このサービスは、 V8 JavaScriptランタイムを高性能非同期Webサーバーと緊密に 統合して、不要な中

Ajaxを簡単に実装するための覚え書き

Ajaxで何か送信するときのための覚え書き

“`javascript
var req = new XMLHttpRequest();
req.onreadystatechange = function() {
if (req.readyState == 4) { // 通信の完了時
if (req.status == 200) {
// 通信の成功時
}
}else{
// 通信中の処理
}
}
req.open(‘POST’, ‘送信先URL’, true);
req.setRequestHeader(‘content-type’,’application/x-www-form-urlencoded;charset=UTF-8′);
req.send(‘hoge=&example=’);
“`

通話機能 OverconstrainedError Deviceidの解決方法

はじめまして、プログラミング初心者のコージです。今回はデバイス選択通話機能を実装するうえで苦労したOverconstrainedError　Deviceidの解決方法を忘備録として残しておきます。
苦労したとはいってもコードの改変はたった１行です笑

“`ruby:call.js
let audioId = $(‘#audioSource’).val();
let videoId = $(‘#videoSource’).val();
let constraints = {
audio: {deviceId: {exact: audioSource}},　<-ここの記述を変更 video: {deviceId: {exact: videoSource}} ``` ```ruby:call.js let audioId = $('#audioSource').val(); let videoId = $('#videoSource').val(); let constr

kintone上でWebSpeechAPIを利用して音声認識して文字起こしする【改良編】

### 本記事を読むにあたっての注意点
本記事は前回の[kintone上でWebSpeechAPIを利用して音声認識して文字起こしする【動作確認編】](https://qiita.com/jhon931/items/7c093eb2894057c058cd)で作ったものを実装するために改良した部分の紹介と、Web Speech APIの感想をまとめたものです。
まだ読んでいらっしゃらない方はそちらを先に読んでいただければ幸いです。

### コード全文
※紹介しきれなかったコードも含まれます。

全文表示する

“`javascript

(function () {
“use strict”;
kintone.events.on([“app.record.edit.show”, “app.record.create.show”], function (event) {

// start,stop ボタン生成
const startButton = document.c

JavaScriptで文字列を逆順にする方法

#コード

“`script.js
const text = “hello”;

const reverseText = text.split(“”).reverse().join(“”);

console.log(reverseText);
“`

#解説
split(), reverse(), join() を組み合わせることで文字列を逆順にすることができます。

##split()
split(“”)とすることで、文字列を文字ごとに配列にします。

##reverse()
配列を逆順にします。

##join()
join(“”)とすることで、配列内の文字列を連結します。

[JS] Class

classの初期化
—
#####constructor関数
constructor(　)はclassが初期化されるタイミングで必ず呼ばれる関数です

#####new演算子
初期化を行います
初期化する作業を「インスタンス化」と言います

—
このコードだと

“`
class TextAnimation {
constructor(el) {
alert(el);
}
}

new TextAnimation(‘hello world’);
“`

[](https://gyazo.com/582d33be7bda5451d59375bb0310db83)

初期化されたタイミングでhello worldをalertします

—
thisを使ってnew演算子を使って初期化を行なった変数に格納することができます
この場合のthisはtaを表します

“`
class TextAnim

【Vue.js + TypeScript】autonakaでフリガナを自動的に別フィールドに入力させる

### はじめに
– Vue.js + TypeScriptを使い、ユーザー名入力フォームなどで日本語入力をした際に、自動で別フィールドにふりがなorフリガナを入力できるようにしました。

### 実装コード
“`vue