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

AtCoder Beginner Contest 374

https://atcoder.jp/contests/abc374

A~Dの4完（20分）でした。
1358perfでレートは783->856（+73）と大幅アップし入緑できました！
（入緑記事は後ほど公開します！）
今回はA~Dの解説を行います。

# A – Takahashi san 2
https://atcoder.jp/contests/abc374/tasks/abc374_a

入力は必ず4文字以上であることが保証されています。
なので後ろから3番目以降を取ってきて、`san`と一致するかを確認すれば良いです。

“`js
function Main(input) {
input = input.split(“\n”).map((line) => line.trim());
const S = input[0].split(“”);
let ans = “”;
for (let i = S.length – 3; i < S.length; i++) ans += S[i]; ans

JavaScriptの配列メソッドを復習する

### JavaScriptの配列のメソッドを復習する

JavaScriptおよびTypeScriptをそれなりに触って1年以上になりますが、以下のようなコードを見て、一瞬「？？」となったので、備忘録兼ねて解説していきます。

まずは、おなじみの書き方↓
“` JavaScript
const people = [
{ name: ‘Taro’, age: 20 },
{ name: ‘Jiro’, age: 25 },
{ name: ‘Ichiro’, age: 30 },
];
const names = people.map(person => person.name);
console.log(names);
// [“Taro”, “Jiro”, “Ichiro”]
“`

一瞬理解できなかった書き方↓
“` JavaScript
const people = [
{ name: ‘Taro’, age: 20 },
{ name: ‘Jiro’, age: 25 },
{ name: ‘Ichiro’, age: 30 },
];
con

JavaScript周りの情報整理メモ

# JavaScript周りの情報整理メモ
## JQuery
javascriptのライブラリ（ライブラリは既存技術の機能を使って複数の処理にまとめたもの、フレームワークは利用することで新しい技術を使えるようになるイメージ）

## Next.js
ReactベースのフルスタックWebアプリケーションフレームワーク。Reactはクライアントサイドのみをサポートするが、Next.jsはサーバーサイドもサポートする。

## Nust.js
ナクスト・ジェイエスと読む。Vue.jsがベースになっているJavaScriptフレームワーク。Vue.jsをより使いやすくする機能を持っている。Vue.jsで記述して、サーバーサイドレンダリングができる。ルーティングもしてくれる。

## Vue.js
MVCモデルのView層を扱うフレームワーク。コンポーネント構築のためのフレームワークで、Vueで出来ることはReactに似ています。

## Vanilla JS
何のライブラリもフレームワークも使わないでJSを書くことをいう。語源はアイスクリームの標準的な風味であるバニラ味からきている。quer

Three-VRMで顔パーツの表情パラメータを直接指定する

# 概要

例えば口だけを笑顔にしたいとき、わざわざ表情登録をせずにパラメータ値を直接指定する方法です。VRoidStudioの顔パーツごとの表情パラメータの指定みたいな感じです。

私の別記事([Three-VRMで組み合わせて表情を登録する(Custom Expression)](https://qiita.com/nobrin/items/9085fed1ef5b8b508290))といった方法が一般的な方法だと思いますが、強制的に特定の顔パーツ(口だけ)の表情パラメータを指定する方法です。

# 動作確認環境

– VRoidStudio 1.29. 1 — VRMファイルのエクスポート
– Three-VRM 3.1.2
– Firefox 131(Windows 10 22H2)

# 実装

最終的に、FaceグループにバインドされているSkinnedMeshオブジェクトの`morphTargetInfluences`の対応するインデックスの値にウェイトを格納し、`render()`されると反映されるようです。

これを実現するには、`requestAnimationF

スクリプト ソースをフェッチできません。

# はじめに
たまに出ることがありますが、珍しいエラーメッセージです。
このエラーが出るのは、excuteScript()をbackground.jsで出力したときにconsole.js側のコンソールに表示されています。いざ、実行しようとしたが、その時にexcuteScript()が取得できないようです。background.js側では、excuteScript()を生成しているのですが。

原因はいまのところ、不明です。
特別なことは行っていません。この時のアクションは、サイトページで、ctrlKey+clickを行ったときです。
ctrlKey+clickを行ったときは、ポップアップ画面をページのbody要素にアペンドしています。ポップアップ画面には、各種ボタンを表示しています。この時、同時に、background.jsへ”clickSet”メッセージを送信しています。background.jsは、executeScript()で、ctrlKey+clickのイベントリスナーを登録しています。
# テストサイト
[https://tecoyan-net.jimdofree.com/

恐怖ホラーゲーム。球の中に閉じ込められてしまうゲーム。


コードをメモ帳などのテキストエディタに貼り付け、ファイル名を「index.html」として保存します。その後、保存したファイルをブラウザで開けば、コードが実行されます。

### 恐怖ホラーゲーム。球の中に閉じ込められてしまうゲーム。
カーソルキーで操作です。

参考文献。

https://qiita.com/muratatetsutaka84/items/3a9356aa5b4d1d958352

“`html

市町村情報取得を取得できます

東京都神奈川県千葉県埼玉県

AccessでWebビューアプリ

# はじめに
「Accessでアプリを作る」という縛りがある中、古臭くないUIを求められたので、
AccessをベースとしたWebビューアプリに仕立ててみました。

サンプルではhtmlファイルを外出しにしていますが、テキストデータとしてAccess側に埋め込むことも出来ます。
メンテナンス性が悪くなりますが…

使用する「Microsoft Web Browser」はベースがIEです。
その為、cssやjavascriptはIEに対応した書き方にする必要があります。

# 手順（サンプル）
1\. Accessファイル（サンプルではファイル名：AccessHtml.accdb）を作成します

2\. フォーム（サンプルではフォーム名：frmBrowser）を追加します

3\. フォームに「Microsoft Web Browser」（サンプルではオブジェクト名：webBrowser）を追加します

4\. フォームにボタン（サンプルではオブジェクト名：btnToHtml）を追加します

5\. 参照設定に「Microsoft HTML Object Library」を追加します

ボタン処理の書き方

# やりたいこと
ボタンを設置して一定時間たつとボタンが使えなくなる。困った。だから書くことにした。
# ボタンの処理
[discord.jsのガイド](https://discordjs.guide/message-components/interactions.html#responding-to-component-interactions)(コンポーネントの相互作用への応答)によると
“`javascript:button.js
const { SlashCommandBuilder, ButtonBuilder, ButtonStyle, ActionRowBuilder } = require(‘discord.js’);

module.exports = {
data: new SlashCommandBuilder()
.setName(‘button’)
.setDescription(‘ボタンを送信します’),
async execute(interaction) {
const button1 =

Three-VRMで組み合わせて表情を登録する(Custom Expression)

# 概要

Three-VRMでプリセットの表情ではなく、パーツごとに組み合わせた表情(眉毛、目、口などでそれぞれ異なった表情にする)を反映させてみます。プリセットの表情は特に設定なしに使うことができますが、パーツごとに変える場合はCustom Expressionとしての登録が必要となります。

Unityなどでブレンドシェイプを作成することで実現する方法もあるみたいですが(試してませんが)、ここでは、JavaScriptの実行時にプログラム的に設定し使用します。

# 動作確認

– VRoidStudio 1.29. 1 — VRMファイルのエクスポート
– Three-VRM 3.1.2
– Firefox 131

# 実装
## プリセットの使用

Three-VRMでブラウザ上でVRMを非常に簡単に扱うことができますが、`expressionManager`経由で表情を反映させることができます。以降のコードでは、変数`vrm`は`VRM`オブジェクトとします。VRMファイルの読み込みはThree-VRMのサンプルスクリプト等を参照してください。ここで扱うコードはVRMオ

疑似実装で理解するJest/Vitest spyOn

# 発端：なぜ`spyOn(obj.fn)`ではなく`spyOn(obj, ‘fn’)`なのか
Jest/Vitestで関数の呼び出し履歴をテストしたいときには`spyOn`関数が用いられる。オブジェクト`obj`に含まれる関数`fn`をテストする際には、`vi.spyOn(obj, ‘fn’)`という使い方となり、`vi.spyOn(obj.fn)`というインターフェースにはなっていない：
“`js
const spy = vi.spyOn(obj, ‘fn’) // vi.spyOn(obj.fn)じゃだめなのか？？

/* obj.fnを呼び出すことが期待される処理 */

expect(spy).toHaveBeenCalledWith(‘hoge’)
“`
この疑問を解消しつつ`spyOn`がどのように動作しているかを理解するため、簡易版`spyOn`を実装してみた。

# `spyOn`の仕組み
`spyOn`は大きく分けて以下2つのことをしている：
1. 渡された関数`fn`を、呼び出し履歴（など）を記憶するための層で包む
1. 包んだ関数で元の関数を”すり替える”

JavaScriptの復習⑤

# はじめに
今回の記事は、ページスクロールと複数の条件を組み合わせたアニメーションについて復習します。

# ページのスクロール量とは？
JavaScriptのページスクロール量とは、**ユーザーがページをどれだけスクロールしたかを取得・操作することです**。スクロール量を知ることで、動的なレイアウト変更や、特定の要素にスクロールさせるといったインタラクションを実装できます。

# 全体のコード一覧

WebAssembly用アセンブラを作ってみた

https://github.com/ikiuo/wasmgen

伝統的な形式で WebAssembly を記述したい方向けです。

# サンプル

“`asm:test.s
;# test.s

;# i32cpy(x) = x
.export i32cpy
i32cpy: .code i32
x: .param i32
local.get x
end

;# i32add(x, y) = x + y
.export i32add
i32add: .code i32
x: .param i32
y: .param i32
local.get x