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

[date-fns] JST環境下で eachDayOfInterval に UTC時刻を突っ込んだ時の挙動が微妙な話

## 本資料における前提
システムのタイムゾーンはJSTとする。

## まずは問題のないケース
27日、28日、29日の連続した日付を生成したいとき、以下のようにJST時刻を使用しparseISOでDateオブジェクトを生成する。こうすることで、問題なく連続した日付を生成することができる。というか一般的にはこうすると思う。

“`ts
import { eachDayOfInterval, parseISO } from “date-fns”;

test(“JSTを使った場合の eachDayOfInterval の挙動が意図通りか確認するテスト”, () => {
const start = parseISO(“2024-07-27T00:00:00+09:00”);
const end = parseISO(“2024-07-29T00:00:00+09:00”);
const dateList = eachDayOfInterval({ start, end });
expect(dateList).toEqual([
parseISO(“2024

YouTube の IFrame Player API を使って p5.js Web Editor の中に YouTube動画を呼び出す

完全に「思いついたからやってみた」という内容で、何に活用できそうかはこれから考えるというものなのですが…

https://x.com/youtoy/status/1816840415871685094

以下の YouTube の「IFrame Player API」を使った YouTube動画の表示を、p5.js Web Editor上でやってみたというものです。

●iframe 組み込みの YouTube Player API リファレンス  |  YouTube IFrame Player API  |  Google for Developers
　https://developers.google.com/youtube/iframe_api_reference?hl=ja


上記のページでサンプルとして示されている内容は、以下

レガシーなBackbone.jsのコードをES6で書く

レガシーなコード

“`javascript
var DocumentRow = Backbone.View.extend({

tagName: “li”,

className: “document-row”,

events: {
“click .icon”: “open”,
“click .button.edit”: “openEditDialog”,
“click .button.delete”: “destroy”
},

initialize: function() {
this.listenTo(this.model, “change”, this.render);
},

render: function() {
…
}

});
“`

こういうレガシーコードはインテリセンスがまっっっったく働かないので、クラス式に書き換える。

“`javascript
const DocumentRow = class extends Backbone.View {

ev

Tailwind CSSをNext.jsで使用してみた

[この記事](https://coliss.com/articles/build-websites/operation/work/animate-ui-interaction-and-animations.html)を見て、Animataの中にあるflip-cardを試してみようと思ったら日本語の記事がなく思ったよりセットアップに時間がかかったので備忘録としてまとめておく

# 目標

以下のようなカードを作成する

セットアップさえできれば[このページ](https://animata.design/docs/card/flip-card)のコードをコピペするだけで導入できる


# 環境

– Windows 11
– VSCode
– npm

各ツールのインストール方法については割愛

# 手順

ブラウザ完結型のチュートリアルを手軽に作れるツールキットが出たので触ってみる

タイトルの通りです。ブラウザ完結型のチュートリアルを簡単に作れるツールキットをStackBlitzが出してくれました。

https://x.com/stackblitz/status/1816478595407077393

[こういう感じのチュートリアルサイト](https://demo.tutorialkit.dev/forms-tutorial/introduction/welcome/)の雛形がコマンド一発で作れるので、チュートリアルコンテンツの作成に集中することができます。ただし、このツールキットは[WebContainers](https://webcontainers.io/)の技術を使っているため、ブラウザ完結型で動かすことが可能な一方、WebContainersのコンテナ上で動くものに限定されてしまうので、現状としてはJS、CSSなどのライブラリやフレームワークのチュートリアルを作成できるツールと認識しておく必要があります。

## 早速触ってみる

公式のアナウンス通り、まずはプロジェクトを作成してみます

“`
$ npm create tutorial
“

自己紹介ページのフッターを編集

お疲れ様です。

今日は自己紹介文のフッターに貼り付けている画像に動きをつけました。
内容は以前紹介した　**「1冊ですべて身につくJavaScript入門講座」**　を進んだり戻ったりしながら書きました。

**css**　
“`diff_css
.other {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
max-width: 1020px;
gap: 30px;
margin: auto;
padding: 30px;
}

.item{
width: 300px;
height: 300px;
}
“`
**JavaScript**
“`diff_javascript
// footer画像のアニメーション
// .itemの配列要素を個別に取得
const imgItem = document.querySelectorAll(‘.item’);

for(let i = 0; i < imgItem.len

JavaScript　クロージャ

# クロージャとは
[mozilla](https://developer.mozilla.org/ja/docs/Web/JavaScript/Closures)から引用させてもらうと、内側の関数から外側の関数スコープへのアクセスを提供するものだそう。

## どんな時に使うのか
複数回のメソッドコールに渡って変数の状態を管理したいけど、メソッドの外からは変数を触られたくない。といったケースにおいて、変数をメソッドの内側に定義した上で外から操作できるようにするための手法。

## 例
下記のように数字を加算していくメソッドがあるとする。
ここでの変数iはメソッドコールでのみ変動して欲しいのに、直接的に値の代入を行うことができてしまう。

“`javascript
let i = 0;

function inc() {
i++;
}

inc();
inc();
“`
そんな時にクロージャの出番。
変数iを変数に格納し、プライベート変数にしてしまうことで外からさわれなくするのである。
外から呼ぶメソッドの戻り値として実際に動くメソッドを返すことで、変数をカプセル化しつつ同一の

【Tauri・Rust・Vue3】ストレージの使用状況をサンバースト図により可視化するためのアプリを作成しました

# 作ったもの
https://github.com/fksms/DirWalker




# アプリの特徴
– ストレージの使用状況をサンバースト図により可視化することができます。サンバースト図のアークを左クリック

【オブジェクト型】同じ値でも比較結果がfalseになる理由

# はじめに

同じ値のオブジェクト型について、比較結果がfalseになるのはご存知でしょうか？最近動画を使って勉強をしている中で、個人的には割とびっくりした内容でした。

実際に下記のようなソースコードを書いてみると、値が同じであるにもかかわらず、falseと判定されてしまいます。

“`js
// オブジェクト型
const o1 = {“age”: 20};
const o2 = {“age”: 20};

console.log(Object.is(o1, o2)); // 比較結果が「false」と判定される
“`

そこで、本記事では同じ値のオブジェクト型での比較結果がfalseになる理由を紹介します。

# プリミティブ型とオブジェクト型の違い

前提として上記の理由を説明する前に、オブジェクト型との比較結果が異なるプリミティブ型についても併せて紹介します。

|種類|型の具体例|
|:-:|:–|
|プリミティブ型(基本型)|String型, Number型, Boolean型, undefined型, null|
|オブジェクト型|配列, オブジェクト などプリ

ややこしいPromiseの”resolve”を整理して理解する

## はじめに
「Promiseと一緒によく出てくるやつTOP3」には入るであろう”resolve”(当社調べ)。
しかしこの”resolve”は文脈によって異なるものを指している場合があり、なんと最大4つの概念を含むことが明らかになりました(当社調べ)。
私自身もPromiseを理解するにあたってこの”resolve”という概念に非常に苦しめられたことがありますし、”resolve”がよく分からなくて避けていた側面もあります。
そこで、今回はこの”resolve”をできるだけわかりやすく整理していきます。

## 目次
1. [“resolve”の4分類](#Chapter1)
1. [Promiseを「解決」する](#Chapter2)
1. [Promiseの”Resolved”というfate](#Chapter3)
1. [Promise.resolve()](#Chapter4)
1. [コンストラクタの中のresolve関数](#Chapter5)
1. [まとめ](#Chapter6)

## “resolve”の4分類
早速

デザイン崩れの見つけ方

多くのエンジニア案件でデザイン崩れはつきものです。しかし崩れの原因が見つけられず、作業が止まってしまいがちです。今回はそういった場合に崩れの原因を可視化する方法をまとめていきます。

# 1. CSSで見つける方法
CSSの全称セレクタを利用してoutlineを表示させる。

“`
* {
outline: 1px solid magenta;
}
“`
たったこれだけで全要素のアウトラインを確認できます。


これで一目瞭然です。

# 2. JavaScriptで見つける方法
ブラウザのデベロッパーツールのConsole機能を使います。
使用するコードは以下。

“`
$$(“*”).forEach(v => v.style.outline = ‘1px solid magenta’)

Array.mapの中でasync/awaitを使う

# はじめに
諸事情につき、`Array.map`の中でasync/awaitを利用したのですが、思った以上に詰まった・・。
ということでメモがてら残しておきましょう。

参照（というかほとんど切り抜き元）：

https://qiita.com/kwbt/items/6c0fe424c89a9f7553c1

## やりたかったこと
Arrayに入っている値を元に非同期関数を呼び出しつつ、その結果の値を整形した配列を用意する。
（最終的にjoinするだけで画面に表示したい）
“`text:イメージ図
dataArray:[‘1’, ‘2’, ‘3’]
↓
result[‘・りんご’, ‘・みかん’, ‘・いちご’]
↓
画面
・りんご
・みかん
・いちご
“`

# 結論
“`javascript:sample.js
const dataArray = [‘1’, ‘2’, ‘3’];

const result = await Promise.all(dataArray.map(async (data) =>
‘・’ + await sampleFu

fetchとaxiosって使い分けてる？

# fetchとaxiosって使い分けてる？

## はじめに
株式会社アシストエンジニアリング、エンジニアのkinopyです。
今回から弊社所属のエンジニアが、各々興味がある分野や業務での気づきを定期的に投稿していきたいと思います！

突然ですが、フロントエンドのAPIはどのように叩いてますか？
おそらくTypeScript(JavaScript)を触るほとんどの方は”fetch” or “axios”が第一の選択肢ですよね（XMLHttpRequestはもうはるか昔ですね）。
ちなみに自分はfetch派です。
フロントとバックエンドを分けて開発する最近のウェブ開発の手法では、API通信は避けて通れないものです。そんなAPI通信における自分が考えるベストな実装方法をこの機会にまとめてみます。
## fetch (FetchAPI)ってなに？
fetch (FetchAPI)は、JavaScriptの標準APIとして提供されているHTTP通信のメソッドです。
さらっと「JavaScriptの標準APIとして提供」と書きましたが、これめちゃ重要です（理由は後述）。
“`javascr

非同期処理とは【初心者向け】

非同期処理とは？
—
非同期処理とは、あるタスクを実行しつつ、他のタスクを並行して処理することです。
これにより、処理の待ち時間を最小限に抑え、効率的なプログラムを作成することができます。

コールバック関数
—
最も基本的な非同期処理の方法はコールバック関数を使用することです。
“`js
function fetchData(callback: (data: string) => void) {
setTimeout(() => {
callback(“データ取得完了”);
}, 1000);
}

fetchData((data) => {
console.log(data);
});
“`

Promise
—
コールバック関数の欠点（コールバック地獄）を解消するために、Promiseが導入されました。Promiseは、非同期操作の完了や失敗を扱うオブジェクトです。
“`js
function fetchData(): Promise {
return new Promise((resolve) =

JSF**k講座 4限目【全ての英字(小文字)】

# 初めに

[3限目](https://qiita.com/shimgo2008/items/8fe67d6a40a516b7a6da)の復習をしっかりとしておきましょう
3限目では以下のコードによりJSFで作ったStringの任意のコードの実行ができることを学びました
“`js
[][‘at’][‘constructor’](/*任意のString型で記述されたコード*/)()
“`
# 第4限の内容
JSFでいろいろなコードを実行できるようになるために、全ての小文字の英字を取得していきます
それに必要な

# function String() { [native code] }

constructor以外の部分を見るとかなり短くまとまっているコードで取得できます
“`js
(([]+[])[‘constructor’]+[])
//’function String() { [native code] }’
“`
“`js
(([]+[])[([][[((![]+[])[+!![]])+((!![]+[])[+[]])]]+[])[+!![]+!![]+!![]]+(

アロー関数の省略記法について

# はじめに
reactでtodoアプリを作成しているのですが、アロー関数の省略記法についての理解が不足していると感じたので今回の記事を書いてみます。今回は省略記法に絞った記事のためアロー関数とは何かについては書いておりませんのでよろしくお願いします。また、もし間違いなどがあればコメント頂けますと私の勉強になりますのでよろしくお願いします。

# 省略記法の書き方
+ **引数が1つだけの時はカッコを省略できる**

“`js
//通常の書き方

const hello = (word) => {
return word
}

console.log(hello(“こんにちは”) //出力結果　こんにちは
“`
省略記法を使うとこのように書くことができます。
“`js
//省略した書き方

const hello = word => {
return word
}

console.log(hello(“こんにちは”) //出力結果　こんにちは
“`
引数のカッコがなくなりました。

+ **関数の処理が式を直接返す場合**
“`js
//通常の書き方

const h

TypeScriptコンパイラによる未使用パラメータと変数のチェック

TypeScriptコンパイラには、コードをチェックする際にリンターのような機能を持つオプションがあります。その中には、パラメータや変数が未使用のままになっていることを防ぐものがあります。

### `noUnusedLocals`オプション

`noUnusedLocals`は、デフォルトでは`false`に設定されていますが、これを`true`に設定すると、未使用のローカル変数がある場合にコンパイラがエラーを出すようになります。以下のコード例を見てみましょう。

“`typescript
function printItem(item: any, index: number) {
const indexedItem = `${index}: ${item}`;
// ^^^ ‘indexedItem’ is declared but its value is never read.

console.log(item);
}
“`

上記のコードでは、`indexedItem`という変数が宣言されていますが、その値が一度も使用されていないため、コンパイラがエ

外部システム連携に役立つ！kintoneアプリのフィールド名とIDを取得して一覧化するスクリプト

# 課題

kintoneで外部システムとの連携を設定するときなどに、
外部システムでフィールドIDだけで表示/指定することがあるが、
IDを英数字で設定している場合、ぱっと見ではそれが何を表しているか分からない。
（自分で付けたものの130個以上あったので私は覚えきれない…）

しかし、kintone上のGUIで下記のように1個1個確認していくには大変すぎる。
他人に共有するのも大変だし。。。

そのため、フィールド名とフィールドIDが並んだ一覧を取得したい。
（ついでに、チャットGPTにID名を含むSQLを書かせたい）
JavaScriptを使ってかんたんに取得できる方法を記載していく。

## 事前準備（必要なパッケージのインストール） ※初回のみ

ターミナルから必要なパッケージをインストールしておく

“`

ArrayQueryでオブジェクト配列をタイプセーフORMっぽく扱う

## ArrayQueryとは

[ArrayQuery](https://array-query.vercel.app/)は2024年7月18日にローンチされた、タイプセーフORMライクにオブジェクト配列を扱えるように設計された強力なTypeScriptライブラリです。

軽量でありながら機能豊富なライブラリで、オブジェクト配列に対して複雑な操作を簡単に実行できます。特に、メモリ内の大規模データセットを操作する際や、フロントエンドアプリケーションで高度なフィルタリング、並べ替え、ページネーションを実装する場合に便利です。

https://array-query.vercel.app/

## 主な特徴

– **ページネーション**: 大規模データセットを簡単にページ分割できます。
– **全文検索**: データ内の複数フィールドにわたる柔軟で強力な検索ができます。
– **高度なフィルタリング**: 複雑なフィルタを適用して正確なデータ取得ができます。
– **柔軟な並べ替え**: 昇順と降順の両方をサポートし、任意のフィールドでの並べ替えが可能です。
– **型安全な操作**:

【COLOR ME】お気に入りボタンとグローバルメニューのお気に入り商品数の表示を連動させる

＜＜　問題　＞＞
カラーミーショップを使って制作したECサイトの改修で下記を追加したが

• ①商品ごとのお気に入りボタン（商品詳細ページ）
• ②お気に入りアイコン（共通ヘッダー）
• ③お気に入りアイコン右上にお気に入り商品数を表示

ページの再読み込みをしないと③が増減しなかった。

※イメージ

■ 実現したいこと
①のクリックと③の数字を連動させたい。
（お気に入りボタンのクリックで数字を増減させたい）

---

＜＜　原因　＞＞
カラーミーショップの独自タグは正しいお気に入りの商品数を表示しない。

---

＜＜　解決　＞＞
単純に、お気に入りボタンのクリック時に③の数字を取得して+1,-1するよう