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

GoogleMapAPIを使って、Webページに地図を表示する

# Google Map APIを使って、Webページにマップを表示させる方法

GoogleMapAPIを利用することで、Google Mapの機能をウェブサイトやアプリに埋め込むことができます。
Maps SDK for AndroidやMaps SDK for IOSといったように端末に応じたAPIがありますが、本記事では、Webアプリ用のMaps JavaScript APIを対象とします。

## 1. GoogleMapAPIKeyの取得
Google Maps APIはGoogle Maps API Keyが必須になります。
Keyの取得方法は他の方が纏めた記事があったので、そちらの方をご参照ください。

## 2. GoogleMapAPIの読み込み
Mapを表示させるために、JavaScriptファイルをHTMLで読み込みます。
方法は2つあり、後者の方を多用していました。

### 2-1. HTMLに直接記述する
「YOUR_API_KEY」に1で取得したKeyをコピペし、ブラウザで表示させるとマップが表示されます。
“`index.html

eslint-plugin-simple-import-sort で import の自動ソートを行う

https://zenn.dev/frontier/articles/20220511-eslint-plugin-simple-import-sort のクロスポストです。

—

[Frontier](https://frontierjs.herokuapp.com) では Next.js を採用しており、ESLint では`eslint-config-next`と`eslint-config-prettier`を利用したシンプルな設定にしていたのですが、`import`の記述を整理するために [eslint-plugin-simple-import-sort](https://github.com/lydell/eslint-plugin-simple-import-sort) を採用することにしました。

## `.eslintrc.json` の記述例

以下は現在プロジェクトで実際に使っている`.eslintrc.json`の内容です。

“`json
{
“extends”: [“next/core-web-vitals”, “prettier”],
“pl

IFTTT「観たかった映画が気が付いたら終わってる！」を無くす自動化

# IFTTTとLINE Botでカンタンに「観に行こうと思ってたのにー泣！」を回避
映画好きな私は、観たい映画の情報を映画館の予告やTwitter、街や電車内の広告などで見つけることが多い。なので上映期間をスケジュールにパパっと入れられないシチュエーションも多く、かつもし全部をスケジュールに入れたら予定だらけでスケジュールがゴチャゴチャになっちゃう。
でも入れないと見過ごす！！
**「気が付いたら上映終わってた」のパターンがとても多く、「映画館で観たかったのにー！」って何度なったことか。**
これを手間なくカンタンに解決したい。
今日この自動化に使うのは、[IFTTT](https://ifttt.com/explore)！
## 全体構造／Siri→IFTTT(iOSカレンダー→Googleカレンダー)→LINE Bot
S

価格コムのキープ機能を比較表URLに変換

* 2022/05/11のメモです。
* ほぼ日記調です。本編は`使い方`の項目からです。

https://kakaku.com/

# 価格comのキープ機能は便利だが・・・
* ローカルストレージに保存されてる。
* 別のPCや人に送れない。
* サーバーに保存されてない。
* 消える可能性大。
* PC引っ越しでほぼ消える。
* プライバシー系の掃除してたらほぼ消える。
* 送りたいし、消えたら悲しいので、なんとかしたい。

# 他の使えそうな機能
* お気に入り
* 簡単に登録できる
* 比較できない
* ピックアップリストに登録できる
* ピックアップリスト
* 下書きに簡単に追加できる
* 下書きは一枚限定
* 投稿するには、すべての製品にコメント必要？
* ここで諦めた
* 比較表
* 検索結果などからチェックして使える。
* URLなので簡単に送れるし、誰でも見れる。
* 文字も入れれる。
* URLの変数もそのまま

React Mui-Materialの数値入力フィールドを使いやすく

Mui-Materialの `Textfield` ですが type=”number” を指定すれば、数値入力用の入力欄が作れます。ただ、これだけだとちょっと使いづらいです

– 入力時の先頭へゼロが残ってしまうことがある
– マウス操作で誤って入力値をユーザーが変更してしまうことがある
– ブラウザによって挙動が違う

これを解消するべく、以下のようなコンポーネントを作りました。
使えそうなシーンがあれば使ってみてね

“`NumericField.tsx
import TextField from “@mui/material/TextField/TextField”;
import { CSSProperties } from “react”;

type P = {
state: string;
setState: React.Dispatch>,
label?: string;
style?: CSSProperties;
required?: boolean;
fullWidth?: boo

Stephen Hawking Discordボットを作った

# Stephen Hawkingボットを作ったよ
皆さんの好きな科学者は誰だろうか？

アリストテレス・アインシュタイン・ノイマン・エジソン…
偉大な科学者を上げていったらきりがないと思う。

私の一番好きな科学者はStephen Hawkingである。
彼の半生を描いた映画、「[The theory of everything](https://www.amazon.co.jp/gp/video/detail/amzn1.dv.gti.9ca9f49d-831f-fbfd-07b0-54b5be9d3720)」は一見の価値があると思う。

ホーキングといえば、車椅子姿に機械音声でしゃべるというのが大きな特徴で、病気にも負けずに真理を追い求める姿には誰もが感動すると思う。
私も勉強のモチベーションが上がらないときは、ホーキング先生の写真を見てモチベーションを上げている。そんな時に、今回のアイデアを思いついてしまった。「ホーキングの声で応援されたら、やる気出るんじゃないか？」と。

## Hawkingの声を作る
Googleで「Hawking voice generator」だとか、

Progate:js 学習日記 6day メモ

Pushメソッド：配列の最後に新しい要素を追加するメソッド、pushメソッドの後の()の中に追加したい要素を入力する！

**定数名.push()**

const characters = [“にんじゃわんこ”, “ベイビーわんこ”, “ひつじ仙人”];

console.log(characters);

**characters.push(“とりずきん”);**

console.log(characters);

**forEachメゾッド**：配列の中の要素を1つずつ取り出して、全ての要素に繰り返し同じ処理を行うメソッド


**forEachメゾッドの使い方：配列名.forEach((引数) = > {処理};);**

![スクリーンショッ

jschardetを使って、ファイルの文字コードを判断する

## 環境
node.js v16.14
Ubuntu 20.4

## はじめに
Node.jsでテキストファイルを読み込む場合、読み込み元ファイルの文字コードが、UTF-8以外のとき、全角日本語が文字化けすることになります。テキストファイルを読み込んだ後、ファイルの文字コードを判断できないだろうかと思って、調べていたところ、**jschardet**というライブラリを見つけたため、試してみることにした。

## 解説
用意したテキストファイルは以下の４種類です。４種類のファイルの読み込みは、関数の引数で判断させています。

– UTF-8
– UTF-16
– UTF-16BE
– S-JIS

ファイルの文字コードが、UTF-8以外であった場合、エラーと判断してコンソールログを表示します。

**jschardet.detect**に読み込んだファイルの内容を文字列で渡すと、**encoding**と**confidence**の２つのキーを持つ連想配列を返します。**encodeing**はライブラリが判断した文字列がセットされ、**confidence**にはライブラリーが判

それってあなたの感想ですよね（無限ループ）

## ソース

“`javascript:main.js
let printMessage = () => {
const strControl = {
red: “\x1b[38;2;255;0;0m”,
orange: “\x1b[38;2;255;128;0m”,
yellow: “\x1b[38;2;255;255;0m”,
green: “\x1b[38;2;0;255;0m”,
blue: “\x1b[38;2;0;0;255m”,
indigo: “\x1b[38;2;15;84;166m”,
purple: “\x1b[38;2;192;48;192m”,
reset: “\x1b[0m”
};

let message = strControl.red + “それ” +
strControl.orange + “って” +
strControl.yellow + “あなた” +
strControl.green +

Next.jsとReactの関係

## Next.js と React の関係
**結論：Next.jsはReactのフレームワークである。**
※ フレームワーク：より使いやすい形に変更したもの(進化系)

もう少し詳しくいうと、下の図のようなフレームワークの関係になっている。

## Next.jsとReactの違い
Next.jsはReactのフレームワーク(進化系)というくらいなので、もちろんNext.jsの方が使いやすい。

– **作成するwebサイトの規模感の違い**
– Reactはページ数の少ない小規模なwebサイトの作成に向いている
– Next.jsはECサイト（amazonのページ)やSNS(Twitter)などの大規模なページ制作に向いている。

– **読み込み速度の違い**
– ReactはhtmlとJava

React + TypeScript: 動的に読み込んだ画像ファイルのイメージを縦横比は変えずに一定サイズに収める

動的に読み込んだ画像ファイルのイメージを、決まった矩形領域に収めます。最終的にはアスペクト比は保ったまま、つまり領域に対して縦横の比率の大きい方をぴったりの長さにするということです。そして、領域内には縦横中央揃えに配置します。でき上がりのCodeSandbox作例が、つぎのサンプル001です。

#### サンプル001■React + TypeScript: Resizing dynamically loaded image with aspect ratio kept

この記事は全3回のチュートリアルシリーズの第2回です。3回とおしてつぎのサンプル002ような画像ファイル操作のインタフェース例をつくります。``要素を共通に扱うものの、それぞれテーマは別です。興味に応じて、解説を個別に読んでいただいても構いません。

#### サンプル

【VSCode】デバッグコンソールに出力される重複した値のまとめ表示をOFFにする方法

VSCodeの機能の一つである、デバッグコンソールにループ文等で重複した値が
出力されると、デフォルトでなぜかまとめられて表示されてしまう。
この謎の設定をなんとかOFFにしたいという一心でひたすらググりまくるも、参考になる記事が見当たらず。。。
そして模索していたらついに解決策を見つけたので、ご興味がある方は是非参考にしてみてください！
簡単なのであっという間に終わります！

ーーーーーーーーーーーーーーーーーーーーーーーーー

● 起こっている現象
以下のように、重複した値がまとめられて表示される

● 解決手順
①設定画面を開く
・ctrl + , (windows)
・⌘ + , (Mac)
・もしくは下記キャプチャのように左下の設定ボタン:gear:(歯車マーク)をクリックして表示
![20220509-231

JavaScriptでキーイベントを発生させる！【jQuery】

　JavaScriptでキーイベントを発生させる方法です。

キーイベントとは、JavaScriptでキーボードからの入力を受け取ることができるオブジェクトで、PCのキーとイベント処理を連動させたい時などに使われます。

例えば

・ここのキーを押したら音が鳴る
・ここのキーを押したら文字が変わる

などと行った処理が可能になります。

キーイベントの種類は以下のようなものがあります。
“`
keydown (キーが最初に押されたときに発生)
keyup （キーが装飾キーでなかったときに発生）
keyup （キーを離したときに発生）
“`

キーイベントを発生させる、実際のコードの初歩的な書き方がこちらです。
“`JavaScript
$(selector).on(“keydown”,function(e){
//処理
});
“`

そして、キーイベントのコードの例はこちらです。
“`javascript
$(window).on(“keyup”, function(e){
if(e.keyCode == 78){

【実用編】discord.js v13 ユーザー・メンバーをBAN・KICK・UNBAN

## 前書き
Discordは世界的に有名なンスタントメッセージ・ビデオ通話・音声通話・VoIPフリーウェアです。
そのため、日々いろいろな個性あふれるユーザーが使用します。
中には、**毎日自分の性癖を暴露するのが趣味な方**、**小学3年生レベルの下ネタを1秒に数十件も送るのが興奮してやまない方**。
などなど様々な方がいます。自分のサーバーに**危険な危ないデンジャラスなユーザーを入れない、追放するためのコマンド**の作成方法を解説します。

## ユーザーとメンバー、おいしいのどっち？
タイトルに「ユーザー・メンバー」とありますが、「**ユーザーとメンバーなんて何が違うねん、ちょっと辛いのがユーザーって感じだけじゃね？**」と思う方も多いことでしょう。
discord.jsでは**ユーザーとメンバーには明確な違い**があります。スパイスだけの違いではありません。

### ユーザー
* Discordを使用しているアカウント（ユーザー）を指す
* 基本的なアカウント情報（ユーザーネーム、ユーザーID等）を取得できる
* **インド産のスパイスを使用**

### メンバー
*

&&・||「ウチらってさぁ。よく誤解されんだよね…」【JavaScript】

## はじめに
最近まで、JavaScriptで使う論理演算子「&&」と「||」の意味を正確に理解していないことにようやく気づいたWEBエンジニアのmasakichiと申します。

すでに同じようなQiita記事もたくさんありましたが、個人的にかなり大事な基礎だと感じたため、僕みたいな初級エンジニア同士にも知って欲しいと思い、改めて記事にしてみました。

## &&の意味
例えば、下記のような条件式があったとする。

“`javascript
let a = true;
let b = true;

if(a && b){
alert(“This is true”)
}else{
alert(“This is false”);
}
//This is true
“`

`a && b`の部分を「aが真 **かつ** bが真」と端的に捉えるのは正確な意味ではありません。

以下MDNの解説

>この演算子は左から右に向けて評価した際に最初の偽値のオペランドに遭遇したときにはその値を、またはすべてが真値であった場合は最後のオペランドの値を返します。

https://deve

Electron から Nightmare を使う

Electron アプリケーションから Nightmare を使いたい時の方法。
スクレイピング中に動的HTMLが取れない場合などに。

## Eramthgin を使う

Eramthgin を使うとちゃんと動く。
https://www.npmjs.com/package/eramthgin

`npm install eramthgin`

## メインプロセスで呼び出す

基本的に nightmare と同じ。

“`main.js
const nightmare = require(‘eramthgin’);
const n = new nightmare({
show: true
});
“`

## preload.js に渡して処理を書く

main.js で global を経由して preload.js に渡す。

“`main.js
const mainWindow = new BrowserWindow({
width: 1200,
height: 600,
webPreferences: {
preload: path.join(__dirn

React + TypeScript: 要素で選択した画像ファイルのイメージをページに表示する

[``](https://developer.mozilla.org/docs/Web/HTML/Element/input/file)要素を使うと、ローカルのファイルが選べます。そして、取得した情報にもとづいて、ファイルが操作できるのです。本稿では選択するのは画像ファイルとし、そのイメージをページに差し込んでみます(サンプル001)。

#### サンプル001■React + TypeScript: Displaying image selected with \
https://codesandbox.io/s/react-typescript-displaying-image-selected-with-input-type-file-v1j229

この記事は全3回のチュートリアルシリーズの第1回です。3回とおしてつぎのサンプル002ような画像ファイル操作のインタフェース例をつくります。``要素を共通に扱うものの、それぞれテーマは別です。興味に応じて、解説を個

JSで0埋めをsliceを使わずに実装する

JSで毎度sliceを使って0埋めを描くのも手間になるので、何かいい方法がないか探ってみた。

「JS 0埋め」でググると大抵出てくるの以下の例で考える
1桁や2桁の数字が出てくるとその前に０を入れて必ず3桁にしたいのような例を考える。

“`js
const num = 1;
const result = (“000” + String(num)).slice(-3);

console.log(result);
// 出力結果　001
“`

es20117までであればこの書き方で良いのだが、es2017でpadStartというものが追加されている。

説明文はmdnのままであるが以下のようになっている。
padStart() メソッドは、結果の文字列が指定した長さになるように、現在の文字列を他の文字列で (必要に応じて繰り返して) 延長します。延長は、現在の文字列の先頭から適用されます。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/padStart

Web Animations APIのcompositeが凄過ぎてすごいからみんな見てくれ

この記事はようやくSafariでもフルサポートされそうな`Web Animations API`の`composite`（効果の組成）って機能がすごいよ！！って、ただそれだけを伝えたい記事です。平たくいうと複数のアニメーションを簡単キレイに合成できる機能なのですが、通常のWebのコーディングでもよく出てくる辛さを解決してくれる結構すごいヤツなのです。

▼ こういうアニメーション作るのもだいぶん楽になります

Web Animations APIで星空パーティクル

単にCSSのアニメーションをJSで描けるよってだけではあるんだけど、ライブラリなしでそこそこ簡単にインタラクティブなもの作れるって意味ではうれしい。主要ブラウザ全部で使える。https://t.co/8H8zXfc5NL pic.twitter.com/bf

【JavaScript】for of文の使い方（foreachの代わり）

# for of文の使い方メモ
for of文を使って配列、オブジェクトを処理する方法をメモ

## 配列の処理
“`JavaScript
let array = [
‘value1’,
‘value2’,
‘value3’,
‘value4’
];

for (let value of array) {
console.log(value);
}
“`
**結果：**
value1
value2
value3
value4

## オブジェクトの処理
for in文は予想通りの動きをしない可能性がある為、for of文を使用する。

### キーの取り出し
`Object.keys(object)`を使用することでオブジェクトのキーを値にした配列に変換する。
“`JavaScript
let object = {
key1: ‘value1’,
key2: ‘value2’,
key3: ‘value3’,
key4: ‘value4’
};

for (let key of Object.keys(obj