f@ctor

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

JavaScript関連のことを調べてみた2020年07月30日
目次

Javascript知らない男のGAS 2

さて書くべきコードは大まかに、GASにLINEからデータが来た時の処理、返信内容、返信をするために必要な認証情報の付与 といったところです。実際にコードを見ていきましょう。割と最低限のコードです。コメント無しをGithubにも載せておきます。
https://github.com/hinawakasonoko/desktop-tutorial/blob/master/Code.gs
#コード
“`
//具体的な値は事前に指定しています 説明はコード後に
var CHANNEL_ACCESS_TOKEN = PropertiesService.getScriptProperties().getProperty(“token”);
var id = PropertiesService.getScriptProperties().getProperty(“doc”);
//LINEから来たデータから使うものを取り出す部分
function doPost(post) {
var obj = JSON.parse(post.postData.contents);//HTTPSに来たPO

元記事を表示

ウソ穴 Ver 5 Type B / 時雨堂 Sora

## はじめに

個人開発`ウソ穴`の作り方を紹介します。

## ウソ穴とは

`ウソ穴`は、ライブ映像 or 動画とARを組み合わせて、壁に穴が空いた錯覚を作り出します。Webサイトなので、ユーザーはアプリのインストール無くウソ穴を使用できます。

## ウソ穴 Ver 5 Type B / 時雨堂 Sora

– 時雨堂さんの`Sora`をつかったウソ穴の作り方を紹介
– 時雨堂さんの`Sora`は遅延がほとんどないストリーミング
– 時雨堂さんの`Sora`のおかげでウソ穴の”穴感”がよりリアルになる

時雨堂さんの技術力すげー

## デモ映像

向かって左がウソ穴、右がホントの穴です。

Kinx アルゴリズム – ハノイの塔

# Kinx アルゴリズム – ハノイの塔

## はじめに

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

元ネタは「C言語による（30年経っても）最新アルゴリズム事典」。今回はライフゲームです。

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

最新アルゴリズム事典にはこういうのも結構載ってる。パズル的な。

元記事を表示

【React Hooks】useState()でcannot assign to read only propertyが出た時の対処法

# はじめに
useState()でオブジェクトを管理していましたが、タイトルのようなエラーが発生したので、その解決法を記してあります。

# エラー時のコード
“`react:test.js
import React, { useState, useEffect } from “react”;
import { db } from “../firebase.js”;

const Test = () => {
const [imgStyle, setImgStyle] = useState({backgroundImage: “”});

useEffect(() => {

db.collection(“test”).get().then((querySnapshot) => {
querySnapshot.forEach((doc) => {
const docVal = doc.data();
imgStyle[“backgroundImage”] = `url(${docVal.imgUrl})`;

元記事を表示

fetchでクエリパラメータを渡す方法

ajaxをfetch apiで書き変えた時に、getリクエストにクエリパラメータをつける方法がわからず詰まってしまったのでメモ。

fetchにはgetリクエストにクエリパラメータをつける方法が用意されていないようです。
この点、ajaxメソッドはわかりやすくクエリパラメータを付与できたのはメリットだったと思います。

ただ、以下の方法でクエリパラメータを付与してfetchを書くことができました。
悩んでいる方は是非参考にしてみてください。またもっとい書き方があれば、是非教えてください！

“`javascript
const params = { // 渡したいパラメータをJSON形式で書く
a: xxxx,
b: xxxx,
c: xxxx,
};

const query_params = new URLSearchParams(params);
fetch(‘${リクエストを送りたいURL}?’ + query_params)
.then(response => response.json())

元記事を表示

Railsにおける非同期通信

# 非同期通信(Ajax)とは
ブラウザが再読み込みされること無く通信が行われる通信方法です。
*ex.メッセージを投稿→画面をリロードしなくても反映される*

# JSONとは

データ交換を行うためのデータ記述形式の一種で、キーとバリューの組み合わせでデータを表現します。
AjaxでJSONという型でレスポンスが行われ、ブラウザではJavaScriptが動作しサーバからJSON形式で返されたデータをHTMLにつくりブラウザが書き換えられます。
これらにより、ブラウザの一部だけを更新することができるようになります◎

**ポイント**
①　JavaScriptのメソッドを利用してリクエストを送る。
②　コントローラでJSON形式のデータを用意するよう準備（コントローラーにアクション記述）
③　レスポンスするためのJSON形式のデータを準備（json.jbuilder）
④　JavaScriptでレスポンスを受け取り、HTMLを操作して追加

—

# 非同期通信の実装

**respond_toメソッドを使用します!**
リクエストが*HTML*か、*JSON*かを条件分岐

元記事を表示

【obniz×LINE Messaging API】ラジコンをリッチメニューから遠隔操作する。自動ブレーキ付き

#やったこと
前回作成した[【obniz×LINE Messaging API】音と光を使い侵入防止システムを製作する](https://qiita.com/Toshiki0324/items/6ac09efe6ac6ed0102e6)の時に使用したタッパを乗せて走らせてみました。

#できたもの
LINEのリッチメニューから操作でき、10㎝以内に障害物があると自動で停止します。

元記事を表示

React Hooksのメモ

・hooksは関数コンポーネント内でstateに値の追加や更新が行えるようにするもの？
・this.setState()のような処理を行う関数を自動で作成してくれる?

“`index.js

import React, {useState} from “react”;
import ReactDOM from “react-dom”;

//function App()でも可
var App = function() {　

//現在の値と値を更新する関数を取得
//useState(n)のnがcntの初期値になる
var [cnt, setCount] = useState(0);

var addCount = function() {
setCount(cnt + 1);
}

var minusCount = function() {
setCount(cnt – 1);
}

return (
<>

<

元記事を表示

axiosライブラリを用いてクエリパラメータを指定する方法(GET,POST)

### はじめに

時々忘れることがあるので、今回も自分用メモとして残します。
今回は、簡潔に非同期処理を記述する為にasyncとawaitを利用していますが説明等はしておりません。ご了承くださいませ?‍♂️

### GETリクエスト
主にAPIを叩いて、データを取得する時に利用します。

“`js
const response = await axios.get(url, {
params: {
id: 1,
name: ‘hoge’
}
})
“`
上記のように記述すると、id=1とname=’hoge’をクエリパラメータとして渡すことができます。
urlの箇所は、APIにアクセスしたいエンドポイントを記述してください:writing_hand:

また、直接URLに記述する方法もあります。

“`js

const response = await axios.get(‘url?id=1&name=”hoge”‘)
“`

複数のパラメータを指定する場合は、&記号（アンパサンド）でつないで記述

元記事を表示

JavaScript 未分類の覚書き

未分類の覚書きです。`Map`や配列関係のものは別に投稿しています。

# オブジェクトリテラルで配列の長さを指定して作成する

`Array.from`は1番目の引数にオブジェクトリテラル`{length: 要素数}`を指定できます。2番目の引数（`mapFn`）と組み合わせることで一時的な配列を作成せずに指定長の配列を作成できます。

“`js
Array.from({length: 100})
// (100) [undefined, undefined, …, undefined]

Array.from({length: 100}, (_, i) => i)
// (100) [0, 1, …, 98, 99]

Array.from({length: 100}, (_, i) => 2 + i * 2)
// (100) [2, 4, …, 198, 200]
“`
動作確認環境：Google Chrome 84.0.4147.105（Windows、64 ビット）

# 関数が`new`演算子で呼び出されたか判断する

`function`内部で`new.

元記事を表示

Javascriptのreplaceで、置換後の文字列を動的に変えたい

（ぜんぜんわからないので、有識者に、教えてもらおう、という気持ちで記事書いてます）

Javascriptのreplaceで、置換後の文字列を動的に変えたい

https://github.com/santarou6/tikan/blob/master/tikan_v1.html

ss1.png

やりたいことは、html+javascriptで、正規表現を使った、「置換」ができるような、一種のテキストエディタを作りたいということです。

この画面でいうと、「改行￥ｎ」を、「タブ￥ｔ」に変換する、というだけのことをやってます。

１つ目のテキストボックスに、置換「対象」の文字列として、正規表現を許容する文字列を入力し、
２つ目のテキストボックスに、置換「後」の文字列として、正規表現を許容する文字列を入力し、

「

元記事を表示

Vue.js+Flaskで画像のアップロード機能

# 概要
今回はフロントエンドにVue.js、バックエンドにFlaskを用いた画像認識アプリを作ります。
ひとまず今回は画像アップロード機能までの実装です。

# 環境
– Docker
– Vue-cli
– flask (pipenv)

上記の環境で環境構築しました。
手順や詳細は以下のリンクを参照してください。

[Vue + Flask on Docker](https://qiita.com/kasayu/items/43734e570dc458a5be15)

# 要所の説明
### Vue
詳細を説明するのは、以下のコード。

“`javascript:Home.vue
// 画像をサーバーへアップロード
onUploadImage () {
var params = new FormData()
params.append(‘image’, this.uploadedImage)
// Axiosを用いてFormData化したデータをFlaskへPostしています。
axios.post(`${API_URL}

元記事を表示

【初心者でもできる】仕事が忙しくても、赤ちゃんの熱中症の危機にすぐに気づけるIoTをつくった

#はじめに

少し前に、２才のこどもを保育園に送り忘れ、
かつ、車の中に放置してしまい、亡くなってしまう
痛ましい事件が起きました。

本当に悲しい出来事であり、あってはならないことですが、
人ごとではないような気がしました。

何かに集中してしまって、
つい何かやるべきことが抜け落ちてしまうことはある人も多いのではないでしょうか。

今回は、それと類似のシーンとして、
「仕事が忙しく、赤ちゃんの部屋が高温になっていることに気づけなかった」ということがないように、高温になればアラートが出て、気づける仕組みをIoTを使って、できないかとチャレンジしました。

#作りたいイメージ

温度センサーによって、常に部屋の温度を監視し、
赤ちゃんにとって快適な温度（26-28度らしい）から外れた時に、
自動でLINEに通知がくるもの。

さらに、LINEの通知に気づかない可能性があるので、
音やLEDの光でアラートを出す。

その２つの仕組みがあれば、仕事に集中していても気づくことができ、
すぐにエアコンをつけにいくことができるはずです。

#実際につくった仕組み

自動でLINEに通知

元記事を表示

The complete Web Developer in 2020(英語メモ)

# The Complete Web Developer in 2020

## Career Of a Web Developer
The Takeaways:
– React is the most popular framework you need to learn.
– jQuery is not a popular framework anymore but it is still used here or there.
– React can also build Android app and iOS app.
– You can be a freelancer to use Upwork or some other websites to get hired to be a developer.

## Developer Fundamentals
the Takeaways:
– use the rubber duck method to code
– by this way you can figure out the problem. Talking

元記事を表示

JSを使ったiframe内のページ内リンク

結論から言うと、JavaScriptの“`window.location.href“`でアンカーリンクが簡単に実装できるよという話です。

## はじめに
iframe外からiframe内へのアンカーリンクで困る、というのはよく目にします。
今回はiframe内で完結しているコンテンツにおいて、アンカーリンクが正常に作動しなかったときのメモです。
滅多にないと思いますが、ちょっと特殊なケース（今回ならGAS）で同じような問題に遭遇した際の代替案として今後役立てばと思います。
また、JSで手軽にページ内リンクが設定できる個人的な発見でもあったので記録します。

## Google Siteで困りました
始まりはGoogle Siteでページを作成する中で、GASのApps Scriptガジェットを埋め込んだときのことです。
埋め込んだガジェット部分はiframeとして処理され、作成したコードは全てiframe内に組み込まれるわけですが
例えば、ガジェット内で下記のようにページ内リンクをさせたかったとします。

“`
リンク

元記事を表示

ReactでsetStateをしても画面表示が切り替わらない問題の解決方法メモ

# はじめに
## 概要
Reactでフロントエンドのツールを作っている時に、`state`の中に設定されているjson形式のデータを、HTMLのテーブルとして表示する機能を作りました。

その際に、表示の基となるデータを変更しても、テーブル内に表示される値は切り替わらないというエラーに出会ったため、簡単な解決方法をここにメモしておきます。
## TL;DR
Reactを使うときに、イテラブルなオブジェクトを基に画面表示をする場合は、各要素ごとにidが振られていないと、同オブジェクトの値が変わっても画面表示が切り変わらないことがあるようです。
# やりたかったこと
`state`に登録されているjsonの配列形式のデータを、HTMLの`

`要素の中に上手く表示させることがしたかったです。
具体的には、`state`には以下のようなデータが登録をされていました。

“`javascript
this.state.dummyData = [
{
“key”:”aa”,
“value”:”bb”
},{
“key”:”aa”,
“val

【備忘録：javascript】HTMLcollectionでのforEach

# document.getElementsByClassNameで取得したクラスが回せなかった
“`javascript:hoge.js
let elem = document.getElementsByClassName(‘m-hoge’);
“`
上記のように特定のクラスを取得しそのテキストを手に入れたかったのですが、

“`javascript:hoge.js
let elem = document.getElementsByClassName(‘m-hoge’);

elem.forEach(function(item) {
console.log(item.innerHTML);
});
“`
このようにforEachをしても取れませんでした。

## HTMLcollectionは配列ではない
参考にさせていただいたページが分かりやすかったのですが、**HTMLcollectionはそもそも配列ではない**とのことです。
取得しているときは配列っぽいですが、配列でないため、配列で使用するメソッド（今回でいうとforEach）が使用できないのです。

## 対策

【JavaScript】ライブラリ化しておく便利な3つの自作共通関数を記録

## 前提
– *※記載の共通関数は、各環境によって動作しない場合がある。
→ES2015からES2019で利用できるメソッドも利用しているため*

## 1. chunk
– **指定の数に応じて、対象配列を分割する関数**

### コード

“`javascript:lib.js
const chunk = (arr = [], size = 3) => {
return Array.from({
length: Math.ceil(arr.length / size)
}, (v, k) => arr.slice(k * size, k * size + size))
}
“`

### 使い方

“`javascript:index.js
import { chunk } from ‘./lib.js’

// 対象配列定義
const target = [1,2,3,4,5,6];

// 利用 : chunk(対象配列, 分割サイズ)
console.log(chunk(target,2));
console.log(chunk(target,4));

【npm】パッケージの脆弱性対処（備忘録）

nuxtでアプリをビルドしたときにパッケージの脆弱性に関する警告文が出た
npmの依存関係を修復したい
「**警告文を1㍈も理解せずnpm install で胡麻化してきた**」人にとって、一歩踏み出す補助輪になればとも思いメモを残します
根本的な理解については別途お調べください
# 目次
– [package.jsonとpackage-lock.json](#package.jsonとpackage-lock.json)
– [脆弱性の確認](#脆弱性の確認)
– [脆弱性の自動修正](#脆弱性の自動修正)
– [脆弱性の手動修正](#脆弱性の手動修正)
– [参考記事](#参考記事)

## package.json　と　package-lock.json
node_modules（パッケージの大群）はgitへpushするものではない
なので、再現するためにパッケージを記しておくファイル(**package.json**)が必要
**package.json**　で指定している内容を元に　npm install　では各種パッケージがインストールされる
が、実際にインストールされるも

OTHERカテゴリの最新記事