JavaScript関連のことを調べてみた2023年07月26日

高次関数でループをシンプルに！JavaScriptのfilter, map, reduce, some, everyの活用

JavaScriptでは、コードを書く方法の一つとして、forループを用いて配列を操作するというのが一般的です。しかし、JavaScriptは関数型プログラミングの概念を豊富に取り入れており、filter、map、reduce、some、everyといった高次関数を利用することで、より簡潔で宣言的なコードを書くことが可能です。

ここでは、これらの関数を一つずつ見ていき、それぞれが何をするものであるか、またそれらを使うことで得られるメリットを紹介します。

|関数名|説明|
|—|—|
|filter|条件に一致する要素だけを抽出した新しい配列を生成します。|
|map|配列の全ての要素を変換した結果の新しい配列を生成します。|
|reduce|配列の全ての要素を単一の値（集約値）に結合します。|
|some|配列のいずれかの要素が条件を満たすかどうかをチェックします。条件を満たす要素が一つでもあればtrueを返します。|
|every|配列の全ての要素が条件を満たすかどうかをチェックします。全ての要素が条件を満たせばtrueを返します。|

前提として、次のような社員データが

WEBページのリンク一覧を取得するスクリプト【備忘録】

# コンソールにリンク一覧を表示する
Javascriptを使ってWebページのリンクをコンソールに表示するためスクリプト
“`
// 現在のページ上のすべてのリンクを表示するコンソールスクリプト
(function () {
// ページ上のすべてのリンク要素を取得
const links = document.querySelectorAll(“a”);

// 取得したリンク要素をループしてリンクを表示
links.forEach((link) => {
const linkText = link.textContent;
const linkURL = link.href;
console.log(`${linkText} – ${linkURL}`);
});
})();
“`
ブラウザのデベロッパーコンソール（通常はF12キーで開きます）にこのスクリプトを貼り付けて実行すると、ページ上のすべてのリンクがコンソールに表示されます。

リクエストURLをすべてコンソールに表示するスクリプト【備忘録】

# 開発者ツールでリクエストURLの一覧を表示させるスクリプト

備忘録として
開発者ツールで表示されるネットワークの項目のリクエストURLをすべてコンソールに表示するためのJavaScriptスクリプト

“`
// 開発者ツールの Network タブに表示されるリクエストURLを取得する
var requests = performance.getEntriesByType(‘resource’).map(entry => entry.name);

// コンソールにリクエストURLを表示する
console.log(‘リクエストURL一覧:’);
requests.forEach((url, index) => console.log(`${index + 1}. ${url}`));
“`

このスクリプトは、performance.getEntriesByType(‘resource’) を使用して、開発者ツールの Network タブに表示されるリソース（リクエストURL）を取得します。それらのURLを console.log を使って順番に表示します。
## キー

【React + Vite + TypeScript】ビルド時に’vite/client’が見つからない問題の解決策

### 1.問題の発生

私たちのプロジェクトではReactとViteを一緒に使用しており、TypeScriptを採用しています。ところが、最近ビルドプロセスに問題が生じました。具体的には、以下のコマンドを実行したところ、エラーが発生しました。

“`bash
npm run build
“`

エラーメッセージは次のようなものでした。

“`
Cannot find type definition file for ‘vite/client’. The file is in the program because: Entry point of type library ‘vite/client’ specified in compilerOptions
“`

このエラーメッセージによると、`vite/client`の型定義ファイルが見つからないという問題が発生しているようです。

### 2.設定の見直し

原因を探るために、まずはTypeScriptの設定ファイル(`tsconfig.json`)を見直してみました。設定ファイルは以下のようになっていました。

“

JavaScript 基本文法

# はじめに
この記事はJavaScriptの抑えとくべき基本的な知識や文法をまとめる．

# コメントアウト
“`javascript
// これは1行コメントです

/*
これは
複数行
コメントです
*/
“`

# データ型
JavaScriptにはプリミティブ型とオブジェクト型の2種類のデータ型がある．
**○プリミティブ型**
* 真偽値(Boolean)：`true`または`false`
* 数値(Number)：`42`や`3.14`などの数値
* 巨大な整数(BigInt)：`9007199254740992n`などの任意精度の整数
* 文字列(String)：`”JavaScript”`などの文字列
* undefined：値が未定義であることを示すデータ
* null：値が存在しないことを意味するデータ
* シンボル(Symbol)：一意で不変な値のデータ

**○オブジェクト型**
→オブジェクト，配列，関数，クラスなど．プリミティブ型でないものはオブジェクト型であると覚えても問題ない

# 変数・定数の宣言
他の静的型付け言語は，代入する値の種

7/26 プログラミング二日目

目標：Javascriptでシューティングゲーム制作する
⬜️事前知識
・Javascript基礎知識
—————————————————–
Javascript二日目
⬜️復習：定数と変数
→変数名を定義し値を出力
“`
const values = 300;
console.log(values);
“`
この際同じ変数名を使って出力することはできない
constは上書き禁止

→同じ変数を使用する場合
let使用する
“`
let value = 200; //最初は200という値だったが
let value = 500; //上書きすると
console.log(value);　 //500と出力される
“`
同じ変数を使用したいと思ったらこのように書いてたらいい！！！
(最初はさっぱりだったけど何回か繰り返し書いてたらなんとなくわかった)

⬜️二日目課題
→算術演算子と値と文字列組み合わせたらどうなるんだろ？
出力した結果
“`
const a = 30 + 10 + ‘円’;
console.

Tailwind慎重派のTailwind CSS記述方法

## はじめに

Tailwind CSSは、シンプルで効率的なCSSフレームワークとしてWeb開発者に広く愛用されています。しかし、ReactなどのJavaScript UIフレームワークでは、CSS ModulesやCSS in JSなどのスタイル定義には多くの選択肢があり、Tailwind CSSを採用する際には慎重なアプローチが求められることもあります。

本記事では、「Tailwind慎重派のTailwind CSS記述方法」と題し、私がTailwind CSSの採用に慎重な理由と、それを解決するために作成した `tw-tag` ライブラリについて紹介します。

## Tailwind CSSの採用に慎重な理由

私がTailwind CSSの採用に慎重な理由の1つは、HTMLのクラス属性の箇所に直接記述する必要がある点です。つまり、Tailwind CSSには自身を記述する専用の場所がないため、次のような問題が発生します。

– クラス属性の記載が長くなり、文章構造（HTML）の可読性が低下する。
– Tailwind CSSを使用している箇所が明示的にわかりづらい。

JestでLocalStorageのモックテストを行う際の問題解決

# 課題

JavaScriptのテストフレームワークであるJestを使用してLocalStorageの処理のテストを実施しようとしたところ、下記のようなエラーが出てうまくいかない。

エラー１：
TypeError: jest.spyOn(…).mockImplementation is not a function
エラー２：
SecurityError: localStorage is not available for opaque origins

# 解決方法
* jest-environment-jsdomをインストール、設定
* LocalStorageのメソッドを直接spyするのではなく、`Storage.prototype`をspyする

# 詳しい手順・実装内容

以下の実装により問題を解決しました：

まず、LocalStorageのメソッドを直接spyするのではなく、`Storage.prototype`をspyする方法に切り替えました。
これにより、`TypeError: jest.spyOn(…).mockImplementation is not

TSLintをコマンドで実行する

## きっかけ
node.js/Angularの開発でTSLintを導入しています。
全体をまるっと出力してファイルごとにチェック結果を見たい！と思って実行コマンドを調べた備忘録です。
※インストール／設定ファイル等はPJの都合で設定済でした。

## こうした
VSCodeのターミナルから下記のコマンドを実行
“`powershell:コマンド
ng lint > ./result.txt
“`

ソースファイルが多いとコンソールをはみ出るので適当なファイルに吐いて、
ごにょごにょしました。

:::note warn
※記事投稿時点でTSLintは非推奨です。特にこだわりがない場合はESLintなど別のリンカーの利用を検討してください。

JavaScript 基本知識

# JavaScriptとは
Webページに動的な機能を追加するためのプログラミング言語．初めは「LiveScript」という名称で開発されたが，当時から人気があった「Java」に影響されて，「JavaScript」に名称を変更した．

JavaScriptはHTMLとCSSと組み合わせることで，**見た目や振る舞いを制御**し，**Webページに動き**を加えることができる．例えば，ユーザの入力に応じてコンテンツを動的に変更したり，フォームのバリデーションチェックやアニメーションの作成，サーバとのデータ通信もJavaScriptを利用することで可能になる．

**役割の整理**
HTML：Webコンテンツの構造を定義するマークアップ言語
CSS：Webコンテンツのデザインやスタイルを定義するスタイルシート言語
JavaScript：Webページに動的な機能やインタラクティブな振る舞いを提供するプログラミング言語

# JavaScriptの特徴
JavaSc

beatmania IIDXをブラウザで練習できるようにしたぞ！！

## 目次

– [記事の内容](#記事の内容)
– [なぜ記事を書こうと思ったのか](#なぜ記事を書こうと思ったのか)
– [なぜ作ろうと思ったのか](#なぜ作ろうと思ったのか)
– [本編](#本編)
– [画面の見た目](#画面の見た目)
– [JS部分の説明](#js部分の説明)
– [要素取得](#要素取得)
– [保存データ適用](#保存データ適用)
– [同時に落ちるノーツ数の決定](#同時に落ちるノーツ数の決定)
– [重複なしの場合のノーツが落ちる場所を決定](#重複なしの場合のノーツが落ちる場所を決定)
– [ノーツが落ちる場所を決定](#ノーツが落ちる場所を決定)
– [1P2Pの変更](#1p2pの変更)
– [SUDDENとLIFTの高さを更新](#suddenとliftの高さを更新)
– [皿が落ちる間隔を変更](#皿が落ちる間隔を変更)
– [開始ボタンが押された時の動作](#開始ボタンが押された時の動作)
– [その他ボタンの動作](#その他ボタンの動作)
– [終わ

TypeScriptにおいてCommonJSとES Moduleの両方に対応するパッケージを作る

## はじめに

最近ではNode.jsのライブラリでも、[pure ESM](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c)の考え方でES Moduleのみでしか利用できないものも出てきている。とはいえ、[npm-esm-vs-cjs](https://github.com/wooorm/npm-esm-vs-cjs/tree/main#data)というリポジトリのデータによると、以下のようにCommonJSのライブラリのほうが圧倒的に多く、ES Moduleのみはまだ10％程度しかない（みたい）。

そこで、今回はライブラリを公開する際に、CommonJSとES Moduleの両方をサポートするようなプロジェクトの設定についてみていきたいと思う。

React Native: ベースのコンポーネントに任意のPropsを追加する方法

React Nativeの開発では、特定の機能を持った基底コンポーネントを作成し、それを再利用することがよくあります。ここでは、既存のベースコンポーネントに新たにPropsを追加する方法について説明します。

## 元となるコンポーネント

まず、出発点となるコンポーネントを見てみましょう。以下は一例となる`Card`コンポーネントです。

“`tsx
import React, { FC } from ‘react’;
import { View, ViewProps } from ‘react-native’;

type CardProps = ViewProps;

export const Card: FC = ({ children, …rest }) => {
return (

{children}

);
};
“`
この`Card`コンポーネントは、子要素として任意のコンテンツを受け取ることができます。

この`CardProps`の型は、`ViewPr

【Rails7】Javascriptがリロードしないと動かないとき

## 結論から
　data:{turbo: false}　を加えてください。

“`ruby:例
<%= link_to "リンク", some_path, data: { turbo: false } %>
<%= form_with model: @model, data: { turbo: false } do |form| %>
“`
　

## 原因
Rails7ではTurbo（以前はHotwireとも呼ばれていました）がデフォルトで有効になっており、これが悪さをしています。

とはいえ、基本はTurboを否定する必要はないので、javascriptが関わる部分だけ上記の記述をしましょう。

## 別の方法
アプリ全体でTurboを無効にする

“`diff_javascript:application.js
– import “@hotwired/turbo-rails”
+ import { Turbo } from “@hotwired/turbo-rails”
+ Turbo.session.drive = false
“`

## ち

JSON.parse()

## JSON.parse()

:::note
JavaScriptの組み込み関数
**JSON(JavaScript Object Notation)の文字列をJavaScriptオブジェクトに変換する**
:::

**JSON** : データのシリアル化やデータ交換などで使われる軽量なデータ形式

– **シリアル化**
JavaScriptオブジェクトをJSON形式の文字列に変換すること

– **デシリアル化**
JSON形式の文字列をJavaScriptオブジェクトに変換すること

### JSON.parse()
:::note
**JSON形式の文字列を受け取る
↓
解析
↓
対応するJavaScriptオブジェクトに変換**
:::

### JSON

– **文字列** : キーと値をダブルクォートで囲む
– **オブジェクト** : 中括弧 {} で囲む
– **配列** : 角括弧 [] で囲む

## JSON.parse()の使用例

“`javascript
const jsonString = ‘{“name”: “John”, “age”:

Spotifyをより快適に！

# はじめに
こんにちは、カナダにコンピューターサイエンス留学中のLeoです。
今回はSpotify for Desktopをより快適に使えるようにカスタマイズする方法を解説していきたいと思います。
CLIを少しだけ使用しますがそこまで難しくないので興味のある方はぜひ試してみてください！
語彙力低め&画像少なめの解説ですが読んでいただけると嬉しいです笑

:::note
もしこの記事が良いなと思ったら是非いいねお願いします！
:::

　
## 概要
Spotifyのデスクトップ版やiPad版は課金せずともスキップ制限やシャッフルなどの制限なしに聞くことができますが広告は入ってしまったりします。そこで今回はSpotify for Desktopを少し弄ってより広告を消したりなど快適にしていきたいと思います。
今回使用するのは[Spicetify](https://spicetify.app/)です。まずはこちらのインストールの手順、そしてその後おすすめのプラグインなどを紹介していきたいと思います！

:::note warn
Windows, Mac&Linuxで少しだけ違いますがほ

【Qiitaアナリティクス】”自分の記事がどれだけ伸びているか” を見える化するスプレッドシートを作りました ?

# ? 作ったもの

## Qiitaアナリティクス
自分が Qiita に投稿した記事について、
– view 数
– LGTM 数
– ストック数

の推移を時系列で見ることができるスプレッドシート (**Qiitaアナリティクス**) を作りました！

テンプレートにして公開しているので
**今すぐ誰でも**、使い始めることができます！?‍♂️

▶︎▶︎▶︎ [**Qiitaアナリティクス テンプレート**](https://docs.google.com/spreadsheets/d/1QpVwx8hHm-JJwjtdC1_Lws9sxk8Y6I3PNHe2mfBLMok/edit#gid=279393869) ◀︎◀︎◀︎

:::note info
使い始め方を知りたい方はこちら
→ [? 使い始めるための準備](#-使い始めるための準備)
:::

# ?‍♂️ 何ができるのか
大きく以下 3つ です。
– [記事全体としてどのくらい伸びているのか見られる](#記事全体としてどのくらい伸びているのか見られる)
– [各個別の記事についてどのくらい伸びているのか見

7/25 初めてのプログラミング

目標：Javascriptでシューティングゲーム制作する
⬜️事前知識
・HTML(Canvas)とは
・Javascript基礎知識
DOM操作
DOMでHTML内のオブジェクトや要素にアクセスすることで
機能追加してリアルタイムで確認することができる
・補正
DOM（Document Object Model）を使用して、HTML内のオブジェクトや要素にアクセスすることで、機能を追加し、リアルタイムで結果を確認することが可能です。

DOMは、HTML文書をツリー構造として表現する方法です。各HTML要素は、DOM内でノード（Node）として表されます。JavaScriptを使用してDOMにアクセスすることで、HTML要素の内容やスタイル、イベントなどを動的に変更することができます。

定数
const:キーワードを使って宣言する、定数を使用すると、その値が意図せず変更されることを防止
再宣言できないようにすること！

変数
let:キーワードを使って宣言します。任意のタイミングで変更できる。
現在のJavascrptの推奨される方法です。

私はロボットでありません(reCAPTCHA)のレイアウトのものを作成「ネタ枠」

はじめに

最近暇だったのでインターネットでよく見るあなたはロボットではありませんを自作したと思いネタで作成した。この本のネタはGoogleが提供しているreCAPTCHAというものである。以下のコードを用いることで誰でもあなたはロボットではありませんということを改造して遊べる。
完成系URL

カスタムする際の変更点

HTML

`Javascript
`const ans=[“1,1″,”1,2″,”1,3″,”2,1″,”2,2”,

JavaScriptで正確な消費税の計算

## 前提

decimal.jsを使います。
npm, cdnお好きな方法でダウンロードしてください。

https://www.npmjs.com/package/decimal.js

https://cdnjs.com/libraries/decimal.js

なお、私はChromeで動作確認しています。

## 結論

“`js
function strPriceInclTax(strPrice, strTaxRate = “1.08”) {
return (new Decimal(strPrice)).times(new Decimal(strTaxRate)).floor().toString();
}

strPriceInclTax(“100”); // “108”
strPriceInclTax(“123456789”); // “133333332”
“`

切り捨てではなく四捨五入したい場合はfloorをroundに、切り上げたい場合はceilにしてください。

終わり。以下は読みたい人だけ。

## 数値を文字列で扱っている理由

数値を文字列