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

React: State オブジェクトの一部を更新したい場合の記述法（useState Hooksを用いて）

## 環境
– React 17.0.2
– yarn 1.22.11
– Next.js 11.1.0
– TypeScript 4.4.2

## 前提

recoilでuserStateを以下のように定義している

“`tsx
export const userState = atom({
key: ‘userState’,
default: { displayName: ”, email: ”, password: ” },
dangerouslyAllowMutability: true,
});
“`

その際にview側で、userの表示名を変えるonChange関数を定義してその中でuseRecoilStateの`setUser` でuserの`displayName` のみ変更ように明示的に記述しようとした

## エラー内容

“`tsx
const onChangeUserName = (e: React.ChangeEvent) => {
e.preventDefault();
set

【基本】discord.js v13 でボット作成

初投稿です。あたたかい目で見てくださると嬉しいです。
[2021年10月23日時点]
## 開発環境
* Windows10
* npm 7.6.3
* node 17.0.1 （最小要件：16.6.0)
* discord.js 13.2.0

## v13の主な変更内容
* `Node.js` のv16.6.0を前提
* `Discord APIv9` に接続
* `discord.js` 本体と `@discordjs/voice` が分割（個々にインストールしなければならない）
* スラッシュコマンドをサポート
* `ClientOptions` の必須
* `message` が非推奨になり、 `messageCreate` が推奨される
* タイマー関連のメソッドが削除
* Intetnsを指定する際の `ALL`、`PRIVILEGED`、`NON_PRIVILEGED`は削除
* `Channel#startTyping`、`stopTyping`　等は削除
など…
詳しくは下記のサイトへ
[v13の主な変更箇所](https://scrapbox.i

Tinder 自動いいね

“`javascript
setInterval(()=>{document.getElementsByClassName(“Bgc($c-like-green):a”)[0].click()});
“`

Web版Tinderでいいねし続けるワンライナーです。F12押してConsoleタブ押してコピペしましょう。

このまま走らせて放置していたら[429 Too Many Requests](https://developer.mozilla.org/ja/docs/Web/HTTP/Status/429)出たので第二引数(delay)つけて緩和した方がよさそうです。

“`javascript
setInterval(()=>{document.getElementsByClassName(“Bgc($c-like-green):a”)[0].click()},1000); // 一秒ごとに一いいね
“`

マッチしたところで話を進められない負け組なのであとはあなたたちに任せます。

**下記参照**

`setInterval()`

https://developer.

モダンJavaScriptを0歳のところから学習していく【初心者】

こんにちは！
テックキャンプでJavaScriptのカリキュラムはありましたが、習ったと言ってもサラッとした内容だったので２、３日前からUdemyでモダンJSを学習中です。そのアウトプットとして記事を書いていきたいと思います。超絶初心者なので間違ってたら言ってください。
何も知らない赤ちゃん状態です。

# var let const
マジ初歩の初歩の変数宣言からやっていきます。

## var
従来のJavaScriptでは変数宣言が行えるのはvarのみでした。
var変数は上書きも再宣言も可能です。

“`javascript
var name = ‘裏梅’;
name = ‘羂索’;
var name = ‘漏瑚さん’;
“`

var変数は上書きも変数宣言も可能なのでプロジェクトが肥大化する中で、意図しない上書きや変数宣言を発生させてしまうというエラーも起こってしまっていたようです。

## let

ES2015で追加された変数です。
letは上書きが可能ですが、再宣言は不可能です。

“`javascript
let name = ‘パンダ’;
name = ‘猪巻棘

【JavaScript】関数とオブジェクト⑧　アロー関数とthis

#はじめに

Udemyの[【JS】ガチで学びたい人のためのJavaScriptメカニズム](https://www.udemy.com/course/javascript-essence/)の講座の振り返りです。

前回の記事

https://qiita.com/nao0725/items/2b448eda7996990b5d79

#目的

* 関数とオブジェクトについての理解を深める

#本題
###1.アロー関数とthis

アロー関数ではthisが使えない？？

####例1

“““javascript
window.name = ‘ルフィ’;

const person = {
name: ‘ゾロ’,
hello: function() {
console.log(‘Hello ‘ + this.name);
}
}
// ここではhello ゾロと出力される
person.hello();
““`

thisにするとどうなるのか

“““javascript
window.name = ‘ルフィ’;

con

JavaScriptのプロトタイプ継承について(1)

##はじめに
こちらの記事は長くなりますので複数回に分けます。

#[[Prototype]]について
javascriptにおいてオブジェクトは隠しプロパティとして[[Prototype]]を持っています。これはnullまたは別のオブジェクトを参照します。隠しプロパティをコンソールで確かめてみましょう。

“`JS:JS
let animal = {
eats: true
};

console.log(animal);
“`

プロパティ [Prototype]]が存在していることが確認できます。
プロパティ [[Prototype]] は内部であり隠されていますが、セットする多くの方法があります。

“`JS:JS
let animal = {
eats: true

ajax通信とは？jQueryでの実装

ajax通信についてきちんと理解していなかったのでまとめる。
ajaxとは？というところから始まるため、jQueryの実装部分のみ興味がある方はこちらまで読み飛ばしてください。

尚、ajaxの説明についてはこちらの記事が大変わかりやすかったので、踏襲しつつ自分の言葉でまとめたり追加で調べたりしている。

# ajaxとは？
「Asynchronous JavaScript XML」の略。
Asynchronousとは、非同時性の、非同期のという意味で、「非同期通信」を実装するためのもの。

# 非同期通信
画面遷移のない通信のことで、LINEやG

[Javascript]ファイルを読み込まない

## やりたいこと
javascriptのファイルがビューファイルに読み込まれるようにしたい。
## エラー内容
– items/newがprofit.jsを読み込まない。
## 調査
– ERR_ABORTED=javascriptのファイルが正しいディレクトリに保管されていない。
`GET [http://localhost:3000/items/profit.js](http://localhost:3000/items/profit.js) net::ERR_ABORTED 404 (Not Found)`
→下記の原因が考えられる。
– items/newのscript属性の記載が誤っている。
– application.jsの直下のディレクトリに配置していない。
– ファイル名の記載が間違っている
– 発火するイベントの記載が間違っている
## 原因
– profit.jsを読み込む記述を二重に行っていたため。
– application.jsのDOMツリーに、require ‘../profit’と記述した時点で、自動で読み込まれるようになっている。
→すでに読み込まれて

[Javascript]Uncaught TypeError:

# やりたいこと
– Payjpを使って、クレジットカードの情報をサーバーに送信したい。

# 出たエラー
`card.js:25 Uncaught TypeError: “order_number”.removeAttribute is not a function
at Object. (card.js:25)
at (index):1`

# 実際のコード
-card.js

“`javascript:card.js
const card = {
number: formData.get(“order[number]”),
cvc: formData.get(“order[cvc]”),
exp_month: formData.get(“order[exp_month]”),
exp_year: `20${formData.get(“order[exp_year]”)}`,
};

Payjp.createToken(card, (status, response) => {
if

JavaScriptですぐに使える、市区町村のポリゴンデータを公開した話

# サマリ?
日本の全ての市区町村の境界線データを、`JavaScript`からすぐに使うことができるデータセット`jpCityPolygon `を公開しました。
面倒な緯度経度の計算だとか、メルカトルが云々とか考えずに、ただそこに市区町村ポリゴンを描きたいあなたにお勧めです。

# 成果物
[jpCityPolygon: a dataset consisting of polygon data of all cities in Japan.](https://github.com/tetunori/jpCityPolygon)
2021/10/21 現在のversionは`0.8.0`のbeta releaseです。

これを使うと、この様なGenerative Artも秒で描けます。

【AWS】ElasticTranscoderで動画変換する仕組みを構築する

## はじめに
今回、弊社運動通信社で開発しているスポーツブルアプリの中のスーパープレイ動画機能の裏側について少しご紹介させていただきます。
スーパープレイ動画機能とは様々な競技のスーパープレイの部分を切り取った縦型の動画集をスワイプしながらザッピング感覚で閲覧できるものです。

↓動画は以下のように縦型フルスクリーンで閲覧できます。

ザッピング感覚で閲覧できるようにする上で通信環境の考慮が必要となってきます。
通信環境によって読み込み時間が長いと体験が損なわれてしまうため、通信環境に応じた複数ビットレートの動画を用意し、その点を解決しました。
具体的にはAWSのElasticTranscoderを使ってその仕組みを構築してみましたので、事例としてご紹介したいと思います。

## 構成イメージ
ざっくりした構成と処理の流れはこ

元記事を表示

Native File System API でテキストエディタを作る

先日公開された [vscode.dev](! vscode.dev) を触った際、なんか Native File System API というのを使えばブラウザから普通にローカルファイルを扱えると知ったので、試しにブラウザで動くテキストエディタを作ってみた。

Chromium 系のブラウザ (Chrome, Edge など) だと大体動くけど [Brave はだめ](!https://github.com/brave/brave-browser/issues/11407) らしい。http サーバーを立てずに、ローカルの HTML ファイルとして開いても動く。

注意点としては、既存ファイルを上書き保存をすると作成日が保存した時点になってしまう。


“`html:html

JavaScript

元記事を表示

axiosのinterceptorsでリクエストに共通のパラメータを付与する

axiosを利用してAPIリクエストを送る際に、全リクエストに同じパラメータを付与したいパターンがありました。
リクエストを送るタイミングで個別にパラメータを追加してもよかったのですが、不毛なのでinterceptorsを利用して処理を共通化しました。

# interceptors の書き方

こんな感じで前処理を追加できます。

“`javascript
import axios from ‘axios’

axios.interceptors.request.use(request => {
console.log(request.url)
return request
})
“`

詳しくは[Github](https://github.com/axios/axios#interceptors)を参照してください。

# 共通パラメータを追加する

## GET場合

“`javascript
import axios from ‘axios’

axios.interceptors.request.use(request => {
const hoge =

元記事を表示

formにid足すだけでreCAPTCHA v3を自動適用させる

# やりたいこと
– formに id=”recaptcha” を足すだけでreCAPTCHAが動作するようにしたい。
– トークン期限2分は短すぎるので送信の直前にトークンを取得したい。

# 必要なもの
– jQuery
– JavaScriptの文法に書き換えるなら不要。
– reCAPTCHA サイトキー
– reCAPTCHAのサイトで発行できる。

# 準備
### JavaScript
以下のコードを入れる。
アクション名、サイトキー、id名は必要に応じて書き換える。

“`javascript:js
$(function () {
// 任意のアクション名
let action = “LOGIN”;
// reCAPTCHAのサイトキー
let siteKey = “SITE KEY”;
// 適用したいformのid名
let formId = “#recaptcha”;

// api.js読み込み
if ($(formId).length) {
$(“