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

AWSのCDKに入門してみた

みなさんこんにちは！

AWS CDKは使われたことはありますでしょうか？

私自身、現在はTerraformを使ってGCPのリソース管理の業務があるため、Terraformを触ることはあるのですが、AWS CDKについてほとんど知見がありませんでした。

ただ、次の職場ではインフラのリソース管理をTerraformではなく、AWS CDKを使って管理しているので、今回はその入門として備忘録的な記事として作成します。

## AWS CDKとは


AWS CDKとは`AWS Cloud Development Kit`の略です。

現在バージョン2がリリースされており、1のサポート期限は2023/6/1となっております。

ざっくり説明しますと、「プログラミング言語を用いてクラウド上にアプリケーションを構築することができるIaC」です。

k6/metricsを用いて出力値を操作する

## 概要

k6には任意の値を集計することでカスタマイズした出力値を得ることができる機能がある。これを利用してk6でイマイチ充実していないWebSocketの負荷試験の結果をカスタマイズしてみる。

## 4種類のMetricsタイプ

以下の四種がある。

* Counters
* 回数を数える時に使用する
* Gauges
* 追加した複数の値から「最大値」「最小値」「最新の値」のみを取得できる
* Rates
* 追加された「1」(正確にはnon-zero)か「0」の値の割合を取得できる
* Trends
* 追加された複数の値から「最大値」「最小値」「平均」「パーセンタイル」等の統計情報を取得できる。

それぞれ以下のように使用する。

“`js
const counter = new Counter(“countTest”);
const gauge = new Gauge(“gaugeTest”);
const rate = new Rate(“rateTest”);
const trend = new Trend(“trend

Python,Ruby,PHP,Java,JavaScript,Perlのオブジェクト指向プログラミングの比較

Python JavaScript PHP Java Ruby

Qiita > プログラミング言語の比較

Python,Ruby,PHP,Java,JavaScript,Perlのオブジェクト指向プログラミングの比較

# Python

https://qiita.com/kaitolucifer/items/926ed9bc08426ad8e835

# Ruby

https://qiita.com/shogo-1988/items/e749208c0733bbe025c0

# PHP

https://qiita.com/mpyw/items/41230bec5c02142ae691

# Java

https://qiita.com/nao0725/items/aba8126c50bf85543c78

# JavaScript

https://qiita.com/shotets/items/e4b2ca36f5cbdc39

【Javascript基礎】Javascriptにおけるデータ型

# ◆データ型とは
データの種類のこと。

プログラミング言語には、データの型を強く意識するものと、逆にほとんど意識しないものがある。

JavaやC#のような言語は前者に属し、
数値を格納するために用意された変数に文字列を格納する事は許されない。
**例） Java**
“`java
int num = 100;

num = “100”; // 構文エラーなのでNG
“`
これらの言語は、変数とデータ型は常にワンセットになる。

Javascriptは後者に属し、データ型についてかなり寛容である。
変数側が代入される値に応じて形や大きさを変えてくれるため、開発者がデータ型を意識することはあまり多くない。
“`javascript
let num = 100;

num = “100”; // OK
“`

# ◆Javascriptの主なデータ型
| 分類 | データ型 |
|:-:|:-:|
| 基本型 | 数値型(number) |
| 基本型 | 文字列型(string) |
| 基本型 | 真偽値型（boolean） |
| 基本型 | シンボル型(S

useCallbackについて学んできたZE★

## これはなに？
React初学者の私がフロントエンドになるための第一弾！
この記事では、Reactのhooksである`useCallback`について学んできました！

## とりあえず、`useCallback`ってなんなん？

`useCallback`ってなんなんということですが…
　?結論: **パフォーマンス向上のためのhooks**です！
**ありがとうございました！！**
と、いきたいところなのですが、詳細書いていきたいと思います。

useCallbackとは、**関数をメモ化**することができます。

メモ化とは、いわばキャッシュです。(多分)
Reactでは、親コンポーネントの再描画によって、
変更のない子コンポーネントまで再描画されてしまうことがしばしばあります。

そんな時に使うのが、`useCallback`です。

では、関数をメモ化するとはいったいどういうことなのでしょう。

## 関数をメモ化するとは？

まず、サンプルとして以下のコードを見てみましょう。

“`js:Parent.js
const updateCountA1 = () =>

【Typescript備忘録】nodemonが実行できない問題

Typescriptを学習中にnodemonに触れる機会があり、
なぜか実行できない問題が発生した。

ネットで調べてもそれらしい情報が中々出てこなかったので、忘れない内に記録に残しておこうと思う。

# 目次
**今回のゴール**

**環境**

**エラーについて**

**実行手順（再現方法）**

**対策**

# ◆今回のゴール
TypescriptとNode.jsを利用して、簡単なプログラムを作成する。
その際tsファイルはjsファイルにコンパイルし、
できたjsファイルは **nodemon** を利用し、変更される度に自動で実行し直すような状況にする。

**■nodemon**
node.jsが変更されると実行し直してくれるパッケージ。

# ◆環境
**【使用PC】**
**Mac Book Pro**
・Ver : 12.6
・macOS Monterey

**【エディター】**
**VSCode**
・ Ver : 1.71.2

**【その他】**
*

SyntaxError: This experimental syntax requires enabling one of the following parser plugin(s): decorators-legacy, decorators.

# はじめに

prettierの設定をして実行したところ、タイトル通りの以下のエラーがでました。

“`
SyntaxError: This experimental syntax requires enabling one of the following parser plugin(s): “decorators-legacy”, “decorators”.
“`

## .prettierrc

importの並び替えを行いたかったため、[prettier-plugin-sort-imports](https://github.com/trivago/prettier-plugin-sort-imports)を入れています。

“`json
{
“printWidth”: 100,
“singleQuote”: true,
“useTabs”: false,
“tabWidth”: 2,
“semi”: true,
“bracketSpacing”: true,
“bracketSameLine”: false,
“importOrder

Grid.jsを使って簡単な表を作る

JavaScriptライブラリの[Grid.js](https://gridjs.io/)を使って簡単な表を作る方法のメモです。
※Grid.js v.5.1.0を使用

サンプルのコードは、[こちらの記事](https://qiita.com/kazhashimoto/items/d91a9683972a6a508050)を書くときに作った５つの表です。
完成したコードはこちら： https://codepen.io/kaz_hashimoto/pen/WNJvOej

まずはGrid.jsを使うためのHTMLファイルの記述。

“`html:index.html (1)

HTML

CSS

JavaScript

grid.js

元記事を表示

リコリス筆記試験のじゃんけんに必勝する

# リコリス筆記試験
2022年のアニメ「リコリスリコイル」のアイキャッチイラストがもらえるサイトの試験問題が難しいと話題に
[リコリス筆記試験](https://lycoris-recoil.com/special/exam/)
[](https://lycoris-recoil.com/special/exam/)

その方面の界隈では、答えが分かる裏技があるらしいが、
じゃんけん問題には打ち勝てないのであれば**裏技なんぞどうでもいい**
**私はじゃんけんに勝ちたい**

# 難関のじゃんけん問題
第6回の試験の第3問はランダムで回答が変わるため運次第である
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/554244/11a33ed1-ab1

【パブリッシャー】Restfulサービスを利用した書き込みを試してみる

今回は[Sharperlight](https://sharperlight.jp/)のRestfulサービスを利用して、データの書き込み処理をJavaScriptで作成してみます。
データベースもテーブルも何もない状態から始めてみます。
### データベースの準備 ###
Micorosoft SQLサーバーに新しくデータベースを作成します。
#### 新しいデータベース ####
Microsoft SQL Management Studioで新しいデータベースを以下のように作成します。名前は**QiitaTopic**とでもしましょうか。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/b7728c4e-6544-6569-c

JavaScriptでブラウザゲーム作ろう！

JavaScriptでゲーム作ります。
ブログに書いてもCodePenに投稿しても全然見てもらえないのでここにまとめます。

## ゲームエンジン
ゲームエンジン的なものはPixiJSで作っています。
シーンの切り替えや音の再生もばっちりできます。

See the Pen
pixi.jsで作ったゲームエンジン(p94e.js) by いんわん (

paizaラーニング レベルアップ問題集 巡回セールスマン問題メニュー JavaScript 巡回路長の計算

巡回路長の計算 (paizaランク C 相当)

https://paiza.jp/works/mondai/tsp_problems/tsp_problems__tour_distance

# 解答例
巡回路の長さを求めるには、ユークリッド距離を用いて、各都市間の距離を求め、その距離の和を求めればよいです。最後の都市からスタートの都市に戻ってくる距離も足すことに注意します。

“`javascript
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);

//ユークリッド距離の計算式を、関数定義
const dist = (a, b) => {
return Math.sqrt(Math.pow(a[0] – b[0], 2) + Math.pow(a[1] – b[1], 2));
};

//都市の個数 n
const n = Number(lines[0]);
//都市 i

Reactパフォーマンス最適化まとめ

## はじめに

自分は2021年に新卒でWeb系の開発会社にフロントエンジニアとして入社し2022年で2年目になります。

実務ではReact×TypeScriptを利用したフロント周りの開発をメインで行なっています。

今回は、現場で経験したReactアプリのパフォーマンス最適化についてまとめていきます。

## この記事の対象者

– Reactの初心者から中級者
– Reactのパフォーマンス最適化について学びたい人

## この記事の目標

– Reactのレンダリングの仕組みを理解する
– Reactのパフォーマンス最適化の方法を知る
– “React.memo“, “useCallback“, “useMemo“について理解する

## おことわり

– “React.memo“, “useCallback“, “useMemo“を使うコストについての詳しい解説
– パフォーマンスの数値的な計測は行いません

上記の2点に関しては参考記事を該当箇所で貼ります。

## Reactのレンダリングについて

Reactのパフォーマンス最適化をするにあた

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型とする。

— 2022/10/03更新 —
@shiracamusさん @akebi_mhさん のアドバイスを受けてコード更新。
JavaScriptの場合の書き方はお二方のコメントをご参照ください。

“`ts
type Input = {

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からは拡張機能として利用できる

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