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

TypeScript・JavaScriptでFIFOキューを作る方法

はいさい！ちゅらデータぬオースティンやいびーん！

# 概要
TypeScriptでジェネリック型を用いて、FIFOキューを作る方法を紹介します。

最初は純粋なFIFOキューを作り、それから削除ができるキューも作ってみます。

## 目次
1. 簡素なFIFOキューを実装
1. 削除できるキューを作る
1. キューに入っている実態の数を露呈する
1. まとめ

## 背景
始める前に、キューについて説明します。
### キューとは何か
キューは、配列を保って保持されているメモリー上の実体の集まりです。通常のアレイと似て非なるものです。
アレイと大きく異なるのは、キューは、後ろにしか追加できないこと、そして、前からしか取り出せないことです。
画像の引用：discord.jsで計算認証

# 必要環境
Node.js v16.9.0以上
discord.js v14.1.2以上
# コード
“`index.js
const discord = require(‘discord.js’);
const Keyv = require(‘keyv’);
const verify = new Keyv(‘sqlite://db.sqlite’, { table: ‘verify’ });
const signale = require(‘signale’);
const prefix = “!”
const client = new discord.Client({
intents: Object.values(discord.IntentsBitField.Flags),
partials: Object.values(discord.Partials),
});
client.commands = new discord.Collection();

function Random_num(max) {
return Math.floor(Math.rando

Promiseとasync/awaitを改めて理解する

## はじめに
JSを久々に書くとPromiseを忘れてしまうため、見返せるように記事にしてみました。

## Promiseとは
Promise オブジェクトは、**非同期処理の完了 (もしくは失敗) の結果およびその結果の値**を表します。

### Promiseオブジェクト生成
“`js
const myPromise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(‘foo’);
}, 300);
});
“`

### Promiseを返す関数を生成
“`js
function test(time) {
// Promiseを返す
return new Promise(
(resolve ,reject) => {
setTimeout(() => {
resolve(‘foo’);
}, time);
}
);
}
// Promiseオブジェクトを作成
const myPromise = test(300);
“`

## Pro

jest.spyOnでclassのインスタンスメソッドをモック化するとnot a functionエラーになる場合

# 問題

クラスのインスタンスメソッド内で、APIで何かをfetchしてくるケースを考えます。たとえば以下のように`getGlobalIp()`でグローバルIPを取得。

“`ts:Hoge.ts
import axios from ‘axios’;

export class Hoge {
getGlobalIp = async (): Promise => {
const { data } = await axios.get<{ origin: string }>(‘https://httpbin.org/ip’);
return data.origin;
};
}
“`

この戻り値が常に固定値になるように、`jest.spyOn`でモック化してみます。

“`ts:Hoge.test.ts
import { Hoge } from ‘./Hoge’;

it(‘グローバルIPアドレスを取得’, async () => {
jest.spyOn(Hoge.prototype, ‘getGlobalIp’).mockReturnV

医療崩壊予防のために技術者ができること

# 技術者はなんとか新しいものを簡潔に作るしかない

というわけで、まずこんなのをスパゲティーコードでもいいので作ってみました

https://github.com/nanakochi123456/covid19-checker

坦々と情報を蓄積していたのですが、もう一度急いで情報を徹夜で収集し、とりあえずリリース

おまけに WordPressにも対応

https://neet.co.jp/covid19

あ、4K4KっていってたHP ここのことです。ごめんなさい。隠してて

医療資格がなくても、ニュース等の情報を集め、
みんながどこでも使えるツールにしておきたかったわけです。

というわけで、これ、よろしければ、パクって使ってください、のお願いをしにまいりました。

国外では、チャットボットっぽいもっと優れたツールもあるようですが（でもソースを見たら大したことしてなかった）

これも、大したことはしていません。

ですが、いつ、どこで、情報の少ない人に

コロナにかかっても、（[医療崩壊で受診しないで、という声明がでても](https://www.jiji.com/jc/a

ざっくりわかる Sprocketsとは

# 何を実現してくれるか

sprocketsはapp/assets 配下にある jsファイルとcssファイルをそれぞれ 1 つのファイルにまとめる。JavaScript と CSS をまとめる理由は、Rails アプリケーションにブラウザでアクセスした時にサーバへのアクセス回数を減らすため。

# 関連する用語

### アセットパイプライン

Sprocketsがcssファイルとjavascriptファイルをまとめるまでの工程はアセットパイプラインと呼ばれている。

### コンパイル

特定のプログラミング言語を用いて記述されたコンピュータープログラムを他の言語 を用いて記述された同じプログラムに形を変えることである。Sprocketsではアセットパイプラインの処理を実行することをコンパイルという。

### ディレクティブ

ディレクティブとはSprocketsで外部ファイルを読み込むための記述のことである。
ここでいう外部ファイルとはjsの場合`app/assets/javascripts`配下、cssの場合`app/assets/stylesheets`配下にあるファイルの

【Swift】WKWebViewでJavaScriptを実行する方法

# はじめに
WKWebViewでJaveScriptを実行する方法を二つ紹介します。

# とりあえずWKWebViewを表示
以下がベースのコードです。
こちらに追加していきます。
“`swift
import UIKit
import WebKit

class ViewController: UIViewController {

var webView: WKWebView!

override func viewDidLoad() {
super.viewDidLoad()

webView = WKWebView(frame: view.frame)

view.addSubview(webView)

webView.load(URLRequest(url: URL(string: “”)!))

}

}
“`

# 方法1(読み込み開始時 or 読み込み終了時)
こちらの方法は読み込み開始時もしくは、読み込み終了時に実行されます。
使用用途としては、WebViewの設定や静的

JavaScriptで配列最後の要素を取得する

Javascript では配列最後の要素を取得する方法がいくつかあったのでまとめておきます。

## array[array.length – 1]
今まではこれを使うのが多かったそうです。
“`javascript
const fruits = [‘apple’, ‘banana’, ‘orange’];
console.log(fruits[fruits.length – 1]); // orange
“`
## array.pop()
これで取得すると、元の配列から最後の要素が消えてしまいます。
“`javascript
const fruits = [‘apple’, ‘banana’, ‘orange’];
console.log(fruits.pop()); // orange
console.log(fruits); // [‘apple’, ‘banana’]
“`

## array.slice(-1)[0]
これでも取得できますが、何をしているコードか分かりづらいです。
“`javascript
const fruits = [‘apple’, ‘bana

Dartの型に関する誤解

## はじめに
### 動機
本記事執筆時点で型安全導入から4年、Null安全導入から1年5ヶ月経過しているにもかかわらず、こともあろうかこれからDartを学ぼうとする者向けに、Dart 1.xまでの知識(または、その誤解)をベースとして解説する新規記事が散見されます。その一つへのコメントが元記事ごと消えてしまったので、ここで改めて纏めます。

### Dartの型安全 (Null安全を除く)
Dartは[2.0(SDK 2.0.0は2018/8/7リリース)](https://github.com/dart-lang/sdk/blob/main/CHANGELOG.md#200—2018-08-07 “sdk/CHANGELOG.md at main · dart-lang/sdk”)で型安全になりました。
型安全はDart 1.x時代からオプションモード(Strong Mode)としてリリースされてきましたが、Dart 2.0で標準となると同時にSDK 2.0.0では型不安全(いわばWeak Mode)は削除されました。つまり、型安全モードが標準でかつ型不安全モードが併存するS

Express × TypeScriptでバックエンド開発①(下準備~簡単なGET, POST)

## ご挨拶
お久リぶりです。おおのんです。
SPA開発が盛んな昨今、フロントエンドからキャリアを始める人も増えていることでしょう。
そしてキャリアの次手に迷っているアナタ様に朗報です。
この記事では**TypeScriptを用いたバックエンドの開発方法**をご紹介します。
できる限りシンプルにハンズオンでまとめました。
皆様の新しいキャリア開拓の一助になればと思います。

### ▼ゴール
・TypeScriptでバックエンド環境を作る
・シンプルなAPIの実装（GET, POST）と動作確認

### ▼対象
・フロントエンドからキャリアを始めた人（ジュニア、ミドル）
・TypeScriptでバックエンド書いてみたい人

## 前提
node.jsが必要です。この記事ではバージョン14.18.0で進めています。
フレームワークを使用します。今回は言わずと知れたExpressを使用します。

**【参考サイト様】**
・【公式】Express – Node.js Web アプリケーション・フレームワーク

JavaScript DOMに動きをつける Animations API

JavaScript の Animations API を使って簡単に画面の要素(DOM)に動きをつけることができる
キーフレームで変化させるスタイルを指定してタイミングプロパティで変化の間隔や回数が指定できる
`dom.animate(キーフレーム, タイミングプロパティ)` の使い方を簡単に記載する

# DOM に動きをつける設定方法 `animate(キーフレーム, タイミングプロパティ)`
“`
let dom = document.getElementById(‘id’);

dom.animate(
// キーフレーム ⇒ スタイル名: [値1, 値2…] # 値1～2～…と徐々に変化
{
backgroundColor: [‘red’, ‘blue’, ‘red’]
, fontSize: [’10px’, ’25px’]
, transform: [‘rotate(0deg)’, ‘rotate(360deg)’]
, width: [‘10%’, ‘50%’, ‘100%’,

date-fnsについて

## はじめに
最近は date-fns を使うことが多いので、メモとして書いておきます。

## format
Dateオブジェクトを指定した文字列にして生成できる。
https://date-fns.org/v2.14.0/docs/format

“` javascript
const date = new Date() // Fri May 13 2022 17:09:15 GMT+0900 (日本標準時)
format(date, ‘yyyy-MM-dd’) // 2022-05-13
format(date, ‘yyyy/MM/dd HH:mm:ss’) // 2022/05/13 17:09:15
format(date, ‘yyyy年M月d日(E)’, {locale: ja}) // 2022年5月13日(金)
“`

## parse
文字列をDateオブジェクトに変換する。
https://date-fns.org/v2.14.0/docs/parse

“` javascript
parse(‘2022-05-13’, ‘yyyy-MM-dd’, ne

React Three Fiber + TypeScript: 3次元空間で立方体を回してみる

[React Three Fiber](https://docs.pmnd.rs/react-three-fiber/getting-started/introduction)は、Reactのコンポーネントで[three.js](https://threejs.org/)の3次元空間を組み立てて、3Dオブジェクトが操作できるライブラリです。Reactの宣言的な記述で、WebGLによる3D表現が簡単にできます。採り上げるのは、3次元空間で立方体を回してみるというつぎのような作例です。カメラはマウスでインタラクティブに操作できます。

#### 本稿の作例

**マウスによるカメラ操作**
* ドラッグ: 立方体の中心から一定の距離で旋回する。
* 右ボタンドラッグ: カメラの方向は保ったまま、フレーミングを水平・垂直に移動させる。
* ホイール: カメラの方向に、映像を拡大・縮小させる。

エンジニア向けチートシート集

## はじめに

今回はエンジニア向けのチートシート集のまとめを紹介していきます。

チートシートを利用することで

– 作業効率が上がる
– 概要が掴みやすい
– 学習にもなる

といった恩恵が得られます。

ただし前提として毎回コードを書くたびに「**チートシート集でカンニングすればええや**」と思うのではなく「**最初はチートシートでカンニングしつつ徐々に体で覚えていく**」ことを意識して使うことが大切です。

最終的にはチートシートは見ずに「**自分の使える技術**」として定着させるための道具だと思って使ってください。

## この記事の対象者

– エンジニア初心者~中級者
– 作業効率を上げたい人
– コードを書くテクニックを知りたい人

## [VsCodeチートシート](https://camo.qiitausercontent.com/8e7b0b88be526969f856b75f97e05b23516f0d72/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732

Google Spreadsheetで西暦を和暦にカンタンに変換する関数 (DateTimeFormatを利用)

この投稿では、Google Spreadsheetで、西暦の日付を和暦の年に変換する関数を紹介します。

## Google Spreadsheetには和暦を表示する書式がない

Google Spreadsheetは「2022/08/04」のような日付を入力すると、日付フォーマットとしてあつかうことができます。しかし、対応しているフォーマットは西暦だけです。令和のような和暦を表示するフォーマットがありません。

Google Spreadsheetビルトインの日付関係の関数でも、和暦に変換するような関数がありません。

## 意外とめんどくさい和暦

Google Spreadsheetで、西暦の日付から和暦に変換するには、式を編む方法もあります。

しかし、西暦の年数と和暦の年数は必ずしも一致しないので、式でやってしまうと複雑化するのが問題になります。たとえば、令和元年は2019年5月1日からです。2019年は平成31年と令和元年、どちらの可能性もあるわけです。また、平成元年や令和元年のような1年目を元年とする場合も、分岐が必要になります。こうした分岐処理を式で表現するのは、結構面

【JavaScript】初学者「正規表現の学習ってなんとなく避けてきた…」って人のために

こんにちは。masakichiです。

コードを書いていると、正規表現ってわりと出くわすけど、なんとなくで理解している方も多いのではないでしょうか？

わたしはそうでした。

しかし、さすがにいつまでもこのままではダメかなと思い、基本的なところから学習してみました。
せっかく調べたので、同じような悩みを持っている同志に向けて、記事をまとめてみました。

## 正規表現とは？
文字列内の組み合わせを照合するために用いられるパターンのことです。

例えば、`I bought an apple`という文字列から、`apple`という文字列が含まれているか確認したい場合、以下のように記述します。

“`javascript
let str = ‘I bought an apple’;
let reg = /apple/;
let result = reg.test(str);
console.log(result);
// >> true
“`

上記では、変数regにスラッシュで囲まれた`/apple/`という謎の文字列を格納しています。実はこの謎の文字列こそが、正規表現のために用いられ

Nuxt.jsでSal.jsを使う方法(裏道)

最近Nuxt.jsを使い、SPAを作り始めた者です。
そもそも、Webページ制作自体あまりしたことがなかったため、何かするたびに壁に当たり大変だったので、ここに書いて忘れないようにしたいと思います。
（他の初心者の方も参考になったら嬉しいです。）

今回は、制作しているWebページをもっとリッチな感じにしたいと思い、スクロールに連動してオブジェクトにアニメーションを付与してくれる、「Sal.js」を導入してみようとしました。
https://mciastek.github.io/sal/
（友達に教えてもらいました）

## 導入編(失敗)

まず、
“`
npm install –save sal.js
“`
をして、プラグインをインストールしてみました。
そして、
“`
npm run dev
“`
をすると
“`
Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: D:\[省略]\.nuxt\client.js: Cannot read property ‘no

秋月電子通商の買い物かごに入れた商品の陳列情報を一括表示するスクリプト

# まえがき

　以前秋月電子さんにお邪魔した際、自分の買うものの陳列場所（売り場にあるのか、裏の倉庫に置かれているものなのか）を全く把握しておらず、店員さんを何度も倉庫に往復させてしまうなどという大変なご迷惑をおかけしました。

　その際の反省を活かして、また同じような陳列場所未把握の民を救うため、秋月さんのwebサイトの買い物かごとスクリプトを活用した陳列場所の簡便な把握方法をご紹介いたします。

# イメージ

> https://akizukidenshi.com/catalog/cart/cart.aspx
「通販コード」の右側が…
![スクリーンショット 2022-08-03 15.37.43.png](https://qiita-image-store.s3.ap-northeast-

javaScript_基本データ型とコンストラクタ

“`
// undefined nullの違い
typeof undefined　　// undefined
typeof null　　　　　// object
null === undefined　// false
null == undefined　　// true

// javaScriptよく使うデータ型
typeof “John” // string
typeof 3.14 // number
typeof NaN // number
typeof false // boolean
typeof [1,2,3,4] // object
typeof {name:’John’, age:34} // object
typeof new Date() // object
typeof function () {} // function
typeof myCar

Google Meet のチャット欄を Slack に自動で流す拡張機能のご紹介

# はじめに
みなさん、Google Meet は使っていますか？ リモートワークが増えオンラインミーティングサービスを使用する頻度が多くなった人も多いと思います。

Google Meet はオンラインミーティングサービスの中でも有名ですが、ミーティングが終了するとチャット欄の内容が失われてしまいます。

最近のアップデートで、ミーティングを録画するとチャット欄の内容も記録されるようになりましたが、毎回録画するのはめんどうだと思います。

そこで今回は Google Meet のチャット欄を自動的に Slack に共有する Chrome 拡張機能 **[Cuckoo](https://github.com/noraworld/cuckoo)** を紹介します。

# インストール
[Cuckoo – Google Meet チャットメッセージ記録ツール](https://chrome.google.com/webstore/detail/jgkpnadfdhhglgkimejpibhfiniemhhf?hl=ja)

# 使いかた
使いかたは簡単です。以下の手順に沿って設定を