JavaScript関連のことを調べてみた

[JavaScript] 変数

# 環境
MacBook Pro (2.3 GHz 8コアIntel Core i9)
macOS 14.0（23A344）
Homebrew 4.3.8
gh 2.52.0

# まとめ
||再代入(上書き)|再宣言|
|:–|:-:|:-:|
|`var`|Yes|Yes|
|`let`|Yes|No|
|`const`|No|No|

# 目次
– [`var`](#var)
– [`let`](#let)
– [`const`](#const)

# `var`
**略:** Variable（変数）の略
**再代入（上書き）:** Yes
**再宣言:** Yes
~~~JS:index.js
var val1 = “var変数”;
console.log(val1);

// var変数は上書きが可能
val1 = “var変数は上書き”;
console.log(val1);

// var変数は再宣言可能
var val1 = “var変数を再宣言”;
console.log(val1);
~~~

# `let`
**略:** 特に略ではない
**再代入（上書き）:

ウェブ開発の未来図 2024：Refine.jsと共に未来を創造せよ！

テスト記事

ポストコロナ時代において、ウェブアプリケーションは私たちの生活に欠かせない存在となった。リモートワーク、オンライン教育、ネットバンキング、eコマース、デリバリーサービス… これら全てがウェブアプリケーションによって支えられている。もはやウェブアプリケーションなしでは、現代社会は成り立たないと言っても過言ではない。

この記事では、2024年のウェブ開発の現状と未来、そしてReactベースのメタフレームワークであるRefine.jsがいかにその進化を加速させているかを深く掘り下げていく。未来のウェブ開発を担う君にとって、必読の内容となっているぞ。

プログラミング言語とは？15種類のプログラミング言語を難易度や職業別に徹底解説

### ウェブアプリケーションとは何か？：その本質を再確認せよ

ウェブアプリケーションとは、インターネット上のリモートサーバーで動作し、HTTP/HTTPSプロトコルを使用してHTML、XML、JSONドキュメントを提供するアプリケーションだ。かつてはSOAPやWSDLといった技術が主流だったが、現在ではRESTful APIが広く普及して

ブログ開始、学習記録

【はじめに】
文系の業界初心者がエンジニアのキャリア形成の上で、フロントエンドからフルスタックを目標に、まずは形からということでQiitaにてブログをつけることにしました。

前置きはさておき、2024/10/28現在の学習状況です。

【時系列】
2024/09/18～
JavaScript, コーディング学習
2024/10/10～
Notion, 管理システム運用

【なんでこの２つ？】

「JavaScript」
・フロントエンド開発言語の利用割合で圧倒的だった。(1)
・altjs(代替言語)であるTypescriptを見据えて、年収ベースで需要があると見込んだ。(2)

「Notion」
・どの企業の技術スタック/開発ツールを見てもSlack, Notionを利用していたため(3)
※Slackはチーム開発が前提なので一旦保留
・拡張性が高い
→ 苦手だったスケジューリング（日常も含めて）の改善に役立ちそう
→ システム開発のような側面があるため、エンジニア的思考の練習に

【おわりに】
約１ヶ

Electronで自動アップデートをしたい

:::note info
viviONグループでは、DLsiteやcomipoなど、二次元コンテンツを世の中に届けるためのサービスを運営しています。
ともに働く仲間を募集していますので、興味のある方は[こちら](#一緒に二次元業界を盛り上げていきませんか)まで。
:::

# Electronで自動アップデートをしたい
知り合いの自転車屋さんに、商品のポップを簡単にデザインできるツールを作れないか相談を受けたので、Electronを使ったデスクトップアプリで作ってみることにしました :bike:

実際に使ってもらって、そのフィードバックを反映した新しいバージョンのアプリを配信したいのですが、毎回exeファイルを送ってインストールしなおしてもらうのはちょっと手間ですよね。
こちらが新しいバージョンのアプリを登録したら、アプリの起動時にアップデートチェックが走って勝手に再インストールされる仕組みを導入してみます。

# Electron自動アップデートの概要
軽く調べてみたところElectronアプリの自動アップデートを実現したい場合、いくつかの方法があるようです。

https://

Reactといふものを知る（ざっくり知る話）

# 前置き
ご覧いただきありがとうございます。
Web制作会社で主にHTML・CSS・JavaScriptを書いているマークアップコーダーです。
モダンなフロントエンド技術を身に着けたく、今回は「React」についてざっくり学んでみました。

## ※注
基礎もまだまだの状況ですが、とりあえず「こんな感じなんだ〜」的なことを本当にざっくり書くだけです。
誰かのためになるわけでもわかりやすいわけでもない記事です。

# Reactってなんだ？
今回は「React」です。

## 知る前のイメージ
「フロントエンドと言えばReactやVueでしょ！」的なイメージはあったが、
具体的にどんなものかイマイチわかっておらず。
JavaScriptのライブラリということで、jQueryみたいにhtmlファイルにReactを読み込んで書いて行くのかな？とかなんとか思っていました。

## 実態
**別世界過ぎる。**
直にHTML、CSS、JavaScriptを書いて静的ページ作っている自分にとっては、
node.jsで立ち上げる系のやつはほんとに違う世界。
htmlファイルに読み込むんじゃなくて、

Vitest でデフォルトの exclude ルールをベースに Project のルールを設定する。

## はじめに

– Vitest を導入した Project で Vitest に参照してほしくない path が出てきた
– 今回はテストカバレッジの集計から除外したかった
– デフォルトの設定を維持しつつ設定を追加したい場合以下のように設定すれば良い

## default 設定を維持したまま除外する

`coverageConfigDefaults` を import し、 `Other exclude config here …` と記載している場所に設定を追加すれば良い。

“`diff_typescript:vite.config.ts
import { defineConfig } from “vite”;
+ import { coverageConfigDefaults } from “vitest/config”;

export default defineConfig({
test: {
exclude: [
+ …coverageConfigDefaults.exclude,
// Ot

【JavaScript】世の中の誰も知らないであろう面白い記法

## これ

“`js
for (let i = 10; i –> 0;) console.log(i);
“`

## は？

`i –> 0`が

$i \rightarrow 0$

みたいに見えて面白くない？

Jestをテストする時に、各ファイルでライブラリをimportしないでまとめる

# はじめに

こんにちは、エンジニアのkeitaMaxです。

Jestをテストを作成する時に、各ファイルでライブラリをimportするのがめんどくさいなと思って
まとめ方について調べたので記事にしました。

# やりたいこと

下記のようなディレクトリ構成で、libで作成した自作のライブラリのテストを書きたかったのですが、もともと`test1.test.ts“test2.test.ts`でおのおのでlibを読み込んでいたのでそれを無くしたいというのが今回の記事のやりたいことになります。`

“`
root/
　├ jest.config.js
　├ lib/**
　└ test/
　 　├ test1.test.ts
　 　└ test2.test.ts
“`
“`ts:test1.test.ts
import “../lib”
“`

“`ts:test2.test.ts
import “../lib”
“`

# 結論

`test/index.ts`というファイルを用意してそれをセットアップのファイルに`jest.config.ts`で記載することで解決すること

ブラウザ上で実行できる、おしゃれでスタイリッシュな Pythonコード開発環境 。のゲーム。

#### ショートストーリー　限られた計算リソースで一体何ができるんだ？
東京の夜、主人公であるプログラマーのケンジは、限られたリソースで最大限の力を発揮しようと考えていた。彼のデスクにあるのはブラウザとメモ帳アプリだけ。PCにPythonがインストールされていないため、プログラムを書いて動作を確かめるには制限があった。

「この限られた計算リソースで一体何ができるんだ？」と彼は心の中で問いかけた。与えられたものだけで何とか突破口を見出さなければならない。それが主人公に与えられたミッションであった。

ケンジは考え抜いた末に、JavaScriptの力を借りることを思いついた。彼はJavaScriptのライブラリを調べ、Pythonコードをブラウザ上で実行できる仕組みを模索し始める。そして、ついにその瞬間が訪れた。いくつもの試行錯誤の末、彼はJavaScript上でPythonコードを実行できる仕組みを完成させたのだ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3838874/e2

美しすぎる。神の言語といわれるLISPは、数学のように純粋で美しいロジックが展開できる言語。オシャレな LISP インタプリタ。

#### タイトル: 「東京プログラマー　リスプを書かずにはいられない物語」

新宿の夜景を見下ろすカフェで、主人公の大輔は、ノートパソコンに向かって静かにキーボードを叩いていた。彼は東京で働くプログラマー。コードの世界に浸り、特に最近夢中になっているのが関数型言語LISPだった。


LISPは、数学のように純粋で美しいロジックが展開できる言語。大輔は「この関数型の世界がいかにエレガントか」を理解するため、オシャレなリスプインタプリタを使い、毎晩のようにコードを書き込んでいた。今日の挑戦は「階乗を求める関数」を作ることだった。

通常の手続き型言語 であれば 階乗の計算の手順を記述する。リスプの場合は N の場合と N が1の場合を宣言することによって階乗計算 そのものを表現する。
“`lisp

(define (factorial

自動化されたアスペクト比計算機を作成：画像アップロードとプレビューで正確な寸法計算と変換を実現

私は、アスペクト比の計算と変換をシンプルで迅速に行うツールを目指して、**自動化されたアスペクト比計算機**を開発しました。このツールでは、画像をアップロードして新しい寸法をすぐにプレビューでき、ソーシャルメディアやデザインプロジェクトでの調整に最適です。

### なぜこのツールを作成したのか？


画像や動画の比率を調整する際に、正確なアスペクト比が必要になることが多いです。誤った比率だと、画像が伸びたり縮んだりしてしまうことがあるため、正確な寸法での変換を支援するためにこのツールを作成しました。

### 使い方ガイド

1. **現在の寸法を入力または選択**
画像や動画の幅と高さを入力します。プリセット比率から選択することもできます。

2. **新しいアスペクト比または寸法を選択**

バイクのOBD2とVRMキャラの表情を連動させて遊ぶ

# はじめに

:::note alert
OBD2端子への機器の接続やアクセスは場合によっては交通事故につながるような故障を引き起こすかもしれません。
これはハードウェア的な故障かもしれませんし、ソフトウェア的な問題かもしれません。
この記事を参考にしたことによる事故等に対する責任は一切負いませんので、試す場合は各自念入りな調査の上、自己責任で行ってください。

特に、市販のOBD2アダプタには、日本の電波法規を遵守していない製品や、正しく動作しない製品、車両に不具合を起こす製品が多数存在していることが以前より知られていますので、注意深く選定してください。
:::

:::note warn
道路交通法 第七十一条 （運転者の遵守事項）五の五　
> (前略) 又は**当該自動車等に取り付けられ若しくは持ち込まれた画像表示用装置**（道路運送車両

GAS + API Gateway + Lambda 連携させてスプシの値をPOSTする

# はじめに
本記事ではGASからAPI GatewayのREST APIをコールする処理を実装していきます。

https://developers.google.com/apps-script?hl=ja

# ゴール
1. GASのスクリプトを実行して、スプレッドシートから取得した値をAPIにPOSTする
2. APIからステータス200でレスポンスが返ってくることを確認する

“`:GASのログイメージ
Response: {“statusCode”: 200, “body”: “test1 を受け取りました。”}
“`

# 作るもの

– 処理フロー：スプレッドシート→GAS→API Gateway→Lambda

# 1. Lambdaの準備
簡単なLambda のソースとして、本記事では下記のものを使用します。

“`p

【React+Typescript】周辺のお店リストを取得するため、OverpassAPIを使ってみた

## はじめに

家計簿アプリを個人で開発しているのですが、近くのお店リストがあればinstagramのようにタグ付けしながら簡単に家計簿を入力できるんじゃないかと思いました。
有名どころだとGoogle map？お金がかかってしまいそう？など色々考えて、最終的にはOverpass APIを利用することにしました。

## 色々調査

地図検索系APIをいくつか調査してみました。
まず、思いついたのはGoogle map API、以下のように情報の正確性・開発する上でドキュメントが豊富などかなりアプリに使いやすいのかなといった印象でした。
ただ、お金がかかってしまう可能性があるのが個人的には非常にネックでした。自分で作ったアプリをApp storeに出してみたいのですが、今回は完全無料で開発する(app storeに出すためのお金を除く)ことがポリシーにあったため使いませんでした。しかし、次回使ってみたいなと思うような機能豊富APIです。

### Google map API
#### メリット
– データの正確性、更新頻度が高い
– 豊富なドキュメント
– マップ表示やストリ

【JavaScript】canvasに描画した点をドラッグで動かす (タッチにも対応)

# 今回の目的

HTML の canvas 上に点を描画し、この点をドラッグで動かせるようにする。
パソコン上でのマウスを使った操作だけでなく、スマートフォンでのタッチ操作にも対応する。

# 実装

## 点を描画する

まず、描画先の canvas を用意する。

“`html

“`

canvas とコンテキストを取得する。

“`javascript
const canvas = document.getElementById(“thecanvas”);
const context = canvas.getContext(“2d”);
“`

ドラッグする対象の点を用意する。
点の情報として、位置 (x座標、y座標) と色を保持する。

“`javascript
const thingRadius = 10;
const things = [];
for (let i = 0; i < 5; i++) { things.push({ x: Mat

JavaScript:圧縮とかLZMA

## 概要
file圧縮でお馴染みのLZMA。2000年代に入り、登場して以来それはどの家庭にも転がっている程度に普及し、これ無しには生活できない程になりませんでした。

## 実装編
[LZMA-JS](http://lzma-js.github.io/LZMA-JS)を書き直して高速化しようという魂胆が丸出しかどうかは定かではないかもしれません。その本家はBigIntもどきを模倣しているような実装のせいで、それなりに速度が犠牲になっています。そういうのは排除します。
それから`object`や整数が要素の`Array`をTypedeArrayに置き換える事でも高速化。
ちなみに本記事の実装ではheaderが9 bytes分欠落しているので、真の本家[LZMA SDK](https://7-zip.opensource.jp/sdk.html)とは互換性がありません。ついでに`-eos`も常に有効という仕様です。
“`js
const LZMA=function(){
“use strict”;
const doComp=1,doDecomp=2,doProgress=3,wa

DynamoDBで文字列の部分一致検索をする (無料利用枠に収める)

# 目的
– 任意の属性値に対して部分一致検索(`contains`)を行う
– 無料利用枠内に必ず収める
– 速度は気にしない

# 結論
– `ExecuteStatementCommand`を使う
– `ReturnConsumedCapacity`で消費キャパシティを確認する
– 最適な`Limit`をかけて、取得処理をループさせる

# はじめに
### 無料利用枠の難しさ
そんな魅力的なDynamoDBだが、無料利用枠内に必ず収めようとするとさまざまな制約が生じてくる。オートスケーリングはoff、読み込み/書き込みキャパシティの割り当ては低めに設定…。この場合に、レコード数の多いテーブルに対して`ScanCommand`(全件取得)を実行すると、読み込みキャパシティが足りずにコケる場合がある。消費するキャパシティの手綱を完全に掌握しつつ、意図した動作をさせるには工夫が要る。

### 部分一致検索ゆえの難しさ
AWS DynamoDBで部分一致検索をしようとすると、`FilterExpression`で`contains`を使うしかない(他にあったら教えてくださ

DOMContentLoadedイベントとは

# DOMContentLoadedイベント
* DOMツリーの構築が完了したタイミングで発生するイベント
* 画像やスタイルシートなどの、依存するリソースの読み込み前に発生

# DOMツリー
HTMLドキュメントをツリー構造で表現したもの

# loadイベント
ページ全体がスタイルシートや画像などの全ての依存するリソースを含めて読み込まれた時に発生するイベント

FlaskとElectronで麻雀リアルタイムシミュレーターを作っていく記録②

[←前回の記事](https://qiita.com/mshok0511/items/42f6ab7891a9c877b297)

# 前置き
前回の記事の続きです。ご覧になっていない方は記録①の方からぜひ見ていってください。

学校の個人製作で麻雀リアルタイムシミュレーター.V1をFlaskとElectronで作った記録になっています。
前回の記事では、アプリを作る上で3つの壁があり、その一つを最初に作った記事を投稿しました。
今回は第２関門であった、「画像からの物体検出」について記述します。

# 第２関門「画像からの物体検出」
物体検知を行うにあたって、何で物体検知をするか考えました。

まず一つは授業でも触ったことのある**YOLO**です。
YOLOとは、画像認識や物体検出に用いられるAIアルゴリズムの一種で、リアルタイムで高速な物体検出を実現するために開発されたモデルです。

もう一つはOpenCVの**テンプレートマッチ**です。
こちらはAIを使わず、画像内から特定のパターン（テンプレート）を検索して位置を特定する手法のことです。

【JavaScript】ABC377まとめ（A~D）

AtCoder Beginner Contest 377

https://atcoder.jp/contests/abc377

A~Dの4完（81分）でした。
1041perfでレートは846->867（+21）です。
今回はコンテスト中に解けたA~Dをまとめます。

# A – Rearranging ABC
https://atcoder.jp/contests/abc377/tasks/abc377_a

$S$を並び替えた時に`ABC`と一致させることが可能であることの必要十分条件は
– $S$に`A`,`B`,`C`が1回ずつ出現すること

ですので、ハッシュマップで`A`,`B`,`C`の出現回数を管理しておいて全部が1であることを確認すれば良いです。

“`js
function Main(input) {
input = input.split(“\n”).map((line) => line.trim());
const S = input[0].split(“”);
const arr = new Map([
[“A”, 0],
[