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

settimeoutの引数に関して

setTimeoutの使い方で第三引数以降の意味を理解したのでメモ。
以下のような記述があった時

“`
setTimeout(playAudio,500,fileName,divId)
“`

1. 第一引数は実行される関数。playAudioが実行される関数
1. 第二引数は指定した時間後に実行する時間。msecで記述する。500msec後にplayAudioを実行する
1. 第三引数以降。playAudioに渡される引数。fileName,divIdが渡される。

誤っていたら指摘ください。

k6でwebsocketを扱う

## k6って何？

オープンソースの負荷試験ツール。http 接続のみでなく、grpc や websocket にも対応している。
今回はこれを用いて WebSocket の負荷試験を行う。

## インストール

公式サイト参照。ubuntuであれば以下のコマンドを打ち込む。
https://k6.io/docs/getting-started/installation/

“`
sudo gpg –no-default-keyring –keyring /usr/share/keyrings/k6-archive-keyring.gpg –keyserver hkp://keyserver.ubuntu.com:80 –recv-keys C5AD17C747E3415A3642D57D77C6C491D6AC1D69
echo “deb [signed-by=/usr/share/keyrings/k6-archive-keyring.gpg] https://dl.k6.io/deb stable main” | sudo tee /etc/apt/sources.

【Javascript基礎】基本的な変数/定数の書き方

# ◆変数とは
**「データの入れ物」**・**「データを入れる箱」** と表現されることが一般的。
基本的にこのイメージで充分。

# ◆変数宣言
## ・ 変数の宣言とは
変数の名前の登録をJavascriptに登録し、かつ、値を格納するための領域をメモリ上に確保することを指す。

## ・ 変数宣言の書き方
変数を宣言するには、以下のように **var** 命令を使用する。
“`javascript
var 変数名

var 変数名 = 初期値
/**
* 例）
* var number = 10;
*
* var str = “Javascript”;
*
*/
“`
以下のようにカンマ区切りで複数宣言することも可能。

“`javascript
var x, y;
“`
初期値を設定しなかった場合、Javascriptにはデフォルトで、

**未定義（undefined）** という時別な値が変数に割り当てられる。

## 【補足】　- 実は変数宣言は任

フロント開発をするときにブックマークしておくと役立ちそうなオンラインツールまとめ

# 概要

フロント開発をするとき、レイアウトやアニメーション、その他CSS等の生成をしてくれるWebツールのまとめです。

使いやすそうなツールがあれば追記していく予定です。

# ドキュメント類

何はともあれドキュメントは読む癖をつけて、正しい使い方ができるようになるのが良いでしょうということで

## [mdn](https://developer.mozilla.org/ja/)

– (Mozilla Developer Network の略)
– ウェブ標準ドキュメント
– 個人ブログやQiita内で「こう使うといい！」って書いてあってもその内容自体が間違っている可能性もあるので、より正確な情報を得るにはmdnを参照する

## [Can I use](https://caniuse.com/)

[
](https://canius

【TypeScript】多次元オブジェクトの末端の値を簡単に取り出したい

# やりたいこと

こんなオブジェクトがあったら

“`js
const hoge = {
aaa: ‘A’,
bbb: {
ccc: ‘BC’,
ddd: {
eee: ‘BDE’,
fff: ‘BDF’,
},
},
};
“`

こんな感じで取り出したい

“`js
pick(hoge, ‘aaa’) // ‘A’
pick(hoge, ‘bbb-ccc’) // ‘BC’
pick(hoge, ‘bbb-ddd-eee’) // ‘BDE’
“`

TypeScriptで動的に取り出す部分を変えたい場合、`hoge[key1][key2]`のように取り出すと型エラーが出るため。

# TypeScriptのコード

単純化のためにキーもバリューもstring型とする。
JavaScriptなら単に型情報を省けばOK。

“`ts
type Input = { [x: string]: string | Input };

function pick(obj: Input, key: string): str

Hoverすると画像が拡大するJSライブラリ「magnify.js」を作ってみた

ふと、「css で `transform: scale(x)` したいけど、他の JS ライブラリが transform プロパティをいじっていて併用できないよー」なシチュエーションに出くわしたので、バッティングしないように同じく js で transform プロパティを丁寧にいじるコードを書きました。

そんなニッチな需要がどれくらいあるかわからないけど、興味本位で（初めて）ライブラリ化して公開してみたのでそのご紹介です。

## 概要

画像をはじめとして任意の要素をマウスオーバー時に拡大することができるライブラリです。

* ソースコード

https://github.com/SogoKato/magnify.js

* デモページ（雑ですみません）

https://sogo.dev/magnify.js/

## つかいかた

“`html

I will be 1.5x big (the default).

GitHub Copilot触ってみた

AIのソースコード自動生成を試してみたくてGitHub Copilotを触ってみた
この記事ではVisual Studio Code（以下VSC）に拡張機能としてGitHub Copilotをインストールし、機能のさわりをお試しするところまでを記載する

# GitHub Copilotを選んだ理由
60日間の無料試使用期間があったから！

# GitHub Copilotとは？
参考
https://github.com/features/copilot
https://docs.github.com/en/copilot/overview-of-github-copilot/about-github-copilot

プログラマが入力したコメントやスニペットに応じたコードを生成＆提案してくれる
公式は「君のペアプログラマー！」と謳っている
Githubから有料（2022年10月時点で月10ドル、年間100ドル）で提供されている
有名どころのIDEと連携しており、VSCからは拡張機能として利用できる

# 導入前に確認した方がよいこと
深刻な権利侵害や情報漏洩に繋がっては笑えないので

【TypeScript】多次元オブジェクトの1次元化

# やりたいこと

こんなオブジェクトがあったら

“`js
const hoge = {
aaa: ‘A’,
bbb: {
ccc: ‘BC’,
ddd: {
eee: ‘BDE’,
fff: ‘BDF’,
},
},
};
“`

こんな感じに変換したい

“`js
{
‘aaa’: ‘A’,
‘bbb-ccc’: ‘BC’,
‘bbb-ddd-eee’: ‘BDE’,
‘bbb-ddd-fff’: ‘BDF’,
};
“`

単純化のためにキーもバリューもstring型とする。

# TypeScriptのコード

JavaScriptなら単に型情報を省けばOK

“`ts
type Input = { [x: string]: string | Input };
type Output = Record;

/** 多次元オブジェクトの1次元化 */
function flattenObject(obj: Input, sep: string): Output

【React Three fiber導入】ローカルでは動くのに本番環境では止まるときに確認してほしいポイントについて

こんにちは。プログラミング初心者のSarasaです。
Reactを使い慣れてくるとライブラリの豊富さに驚かされますよね。
やりたかったあの動作がこのライブラリなら簡単にできちゃう・・！

そろそろ3Dアニメーションに手を出したいな・・と思った頃、
**react three fiber**と出会ってしまいました。

※こちらは筆者がエラーコードに悪戦苦闘する様子を記載した記事となります。
「いや、そこ忘れちゃダメじゃない？？」と突っ込みたくなるポイントが出てくるかと思いますが、そこは、、さらっと流していただけると幸いです。オチはあります。

【開発環境】
＜フレームワーク＞
React ver. 18.2.0 (Create-react-app )

＜使用言語＞
JavaScript
CSS
HTML

# react three fiberって？？
JavaScriptライブラリのひとつであるThree.jsの記述を、React上で宣言的に記述することを可能としたライブラリ、それが**react three fiber**です。
記述量も少なく、読みやすく扱いやすいことも魅力のひと

Money Forward Me で csv ダウンロードボタンを作成してみた

# Money Forward Me のcsvダウンロードをしたかった

けど有料オプションしかない．
そして1年しか見れないから，過去ログを保存できない．
CSVで月ごとにダウンロードして，まとめたいと思ったので，自作することにした．

# 実装

早速実装に向けて取り掛かろうと思う

## 必要なもの

– モダンブラウザ
– Chrome (推奨)
– Firefox (推奨)
– Microsoft Edge (推奨)
– Safari (推奨)
– Opera Next
– Dolphin Browser
– [Tampermonkey](https://www.tampermonkey.net/) (拡張機能)

https://www.tampermonkey.net/

ここではTampermonkeyの説明はしません．
自作の拡張機能を簡単に使用する為の拡張機能です．

## データのcsv化およびダウンロード

“`js:handleDownload()
// セルの中の改行を消す為の正規表現
const remov

Mapbox GL JS 円をつなぐ線を得る

とあるハッカソンで、台風の進路を投票で決めるというジョークアプリを作成しました。
[動画](https://youtu.be/Ex_dubH1Myo)

アプリ製作にはmapboxを用い、補助として[Turf.js](https://turfjs.org/)を使用しました。
Turf.js、めちゃめちゃ便利でmapboxでの開発速度が爆上がりしたのですが、
さすがに「円のリストをつなぐ線を引く」といった関数まではなかったので用意しました。

“`
// get 2vertices line array from circle array
// in:[{coord:[lng,lat],radius:r},{coord:[lng,lat],radius:r},{},…]
// out [lineStringGeojson,lineStringG

初心者、新人が来たらコレ見せて！多分一番わかりやすいJavaScriptDOM操作解説（JQueryは使いません）

# 0.はじめに
## 0-1.はじめに
Web開発をするならJavaScriptは触る。
これは避けられないことなんだよなぁ…
今回はモダンなJavaScriptでのDOM操作を可能な限り簡単に解説するよ。

>「jQueryわからん」
「JavaScriptの基本を押さえたい」
「新人に１から教える時間がない」

そんな方向けの記事となってますよ。

## 0-2.効率よく学ぶためには？

使い方とまでは言わないけど
個人的にオススメしたい学習方法はこんな感じです。

・CodePenのサンプルを触る
・「大事な所だけ抽出すると」のコードを見て、ポイントを押さえる
**———————ここまでを全チャプターおこなう———————**
・CodePenサンプルをよく読む
・実際にコードを書いて動かす
・サンプルを改造する

この記事では「DOMを使えるレベルになる」がゴール。
記事で解説してないこともある。
「もっといい、やりかたがあるのに…」

そう思えた時がプログラマとして成長するきっかけになりますよ！

# 1.基本:HT

Gatsby.jsでスクロールに連動させて複数要素をフェードインさせる

# はじめに
以下の対応をするにあたりハマったのでメモです。
– Gatsby.jsにてスクロールに連動してふわっとフェードインしたい
– 複数要素に対応させたい

# 実装方法
react-intersection-observerを使用する方法もあるようですが、上手く複数要素に適応させることができなかったので、IntersectionObserverAPIを使用することにしました。

## useContext 使用

参考サイト：

https://zenn.dev/nami_y/articles/55f09eb1e00755

上記サイトでIntersectionObserverAPIをuseContextを利用してどこのコンポーネントでも使いまわせるようにする方法が書いてありました！

それを参考にさせてもらいました！
srcと並列階層にproviderフォルダを作成し、IntersectionObserverProvider.jsxを作成しました。

“` provider/IntersectionObserverProvider.jsx

import React, {

AWS SDK for JavaScript v3 で S3 バケットのオブジェクト一覧を取得する

# 初めに

認証情報を持たないユーザーが、ブラウザから S3 バケット内のオブジェクトリストを取得する方法を書きます。

# ID プールを作成する

「ID プールの管理」をクリックします。


「新しい ID プールの作成」をクリックします。


ID プール名を入力し、「認証されていない ID に対してアクセスを有効にする」にチェックを入れます。

![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621414/30f19613

ESLintのShareable ConfigでJavaScript用とは別にTypeScript用のパッケージを提供する場合のパターン

[ESLint](https://eslint.org/)の[Shareable Config](https://eslint.org/docs/latest/developer-guide/shareable-configs)で、JavaScript用とは別にTypeScript用のパッケージを提供する場合のパターンについて調べました。

## 経緯

自分が管理しているJavaScript/TypeScriptのリポジトリにおいて、中身がほとんど同じESLintの設定ファイルがいくつか存在します。
これではメンテナビリティ的によろしくないので、共通化できそうな部分をShareable Configとして公開することを検討中です。
その際、JavaScript用とTypeScript用のパッケージをそれぞれ提供することで、リポジトリごとに使用するパッケージを選択できるようにしたいと思います。
そこで、世のShareable Configではどのような手法がとられているのか調べてみることにしました。

## 調査方法

[npmjs.com](https://www.npmjs.com

ニコ生ゲームのテンプレを使うときに自分はどのくらい削るか。

# ランキング形式のシングルゲームを作るとき

akashic init -t javascript-shin-ichiba-ranking

このコマンドを使うんだけど、自分の場合テンプレートから使わない部分を消してから作り始めます。

テンプレートから変更になる点

・キャラクターは画面中央に配置（動かない）
・弾はでない
・クリックしても音はならない（スコアは１ずつ増える）

exports.main = void 0;
function main(param) {
var scene = new g.Scene({
game: g.game,
// このシーンで利用するアセットのIDを列挙し、シーンに通知します
assetIds: [“player”, “se”]
});
var time = 60; // 制限時間
if (param.sessionParameter.totalTimeLimit) {

ニコ生ゲーム制作に挑戦しよう！　上から降ってくるものを拾うゲーム【JavaScript】

この記事のソースコードを改造して作ったゲーム

↓

[ニコ生ゲーム：シンプルな果物拾い（アツマール）](https://game.nicovideo.jp/atsumaru/games/gm27081?link_in=users “シンプルな果物拾い”)

※筆者がTypeScript理解できないのとWindows10使用者なのでjavaScriptで解説します。
急に解説が雑になったりします。

もしよくわからない場合はここを見るといいかもです
↓
[Akashic Engine 逆引きリファレンス](https://akashic-games.github.io/reverse-reference/v3/ “タイトル”)

前提知識
・新規フォルダを作成できる。(ctrl + shift + N)

今回はデスクトップにニコ生2022という名前の新規フォルダを作りました。
そのフォルダの中に「上から降ってくるものを拾うゲーム」という名前のフォルダを作りました。

コマンドプロンプト（以下cmd）でゲームフォルダに移動できる。

・コマンドプロンプトの出し方

JSX、TSX 内で Stylelint を使いたい、VSCode にも導入したい

本文はこちら

https://zenn.dev/taichi221228/articles/73e4141cf18e74

模写学習 殴り書き日誌①（Codestep）

コーディング学習サイト[Codestep](https://code-step.com/)を使用した模写学習での気づきを解説仕様でまとめた記事です。

完全に自分の振り返り用なので悪しからず、、、

# 【HTML/CSS コーディング練習】中級編：ストアサイト（カフェ）／LP

※元サイトは[こちら](https://code-step.com/store-menu/)

## 学び①: テキストに陰影をつける（drop-shadow）
＜完成イメージ＞

＜実装方法＞
陰影をつけるには**filterプロパティの値に[drop-shadow関数](https://developer.mozilla.org/ja/docs/Web/CSS/filter-function/drop-shadow)を使用。**
書き方は以下の通り。

JavaScript/TypeScriptで1分以上前判定と30秒以上前判定

完全に自分用メモ。

“`js
const dt = new Date();
const oneMinutesAgo = dt.setMinutes(dt.getMinutes() – 1);
if (oneMinutesAgo.toString()) >= unixtime_ms) {
// unixtimeは1分以上前
}
“`

“`js
const dt = new Date();
const thirtySecondsAgo = dt.setSeconds(dt.getSeconds() – 30);
if (
thirtySecondsAgo.toString() >= unixtime_ms
) {
// unixtimeは30秒以上前
}
“`

コメントで頂いた、より簡潔な方法。@nf4452さんありがとうございます。

“`js
if (D