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

[Typescript] オブジェクトのクローン

## 初めに
NextJS + typescriptでwebアプリケーションを作成していた際、使用しているオブジェクトの内容が意図せず変更されてしまい、とても困惑してしまいました。その原因と解決策をここに残したいと思います。

## 意図していない変更の概要
下記のようにオブジェクトAを変数Bに代入して、その代入された変数Bに変更を加えた後に元々のオブジェクトAを確認すると、変数Bにした変更がオブジェクトAにも反映されてしまっていました。
“`
const object_A = {
id: 1,
name: ‘tanaka’
}

const B = object_A
B.name = ‘takahashi’

console.log(object_A)
// {id: 1, name: ‘takahashi’}

“`

## 原因
これの原因としては、Typescript(Javascript)はオブジェクトを変数に代入すると参照渡しになるためでした。
変数BにはオブジェクトAの参照が渡されるため、オブジェクトAと変数Bが同じオブジェクトを参照する事になります。

GBFSデータ+MapLibre GL JSで世界のシェアモビリティステーションマップを作成する

# はじめに
:::note info
この記事は [シェアモビリティの標準的なデータフォーマット GBFS Advent Calendar 2023](https://qiita.com/advent-calendar/2023/gbfs) 15日目の記事です。
:::
公開されている[GBFSデータ](https://raw.githubusercontent.com/NABSA/gbfs/master/systems.csv)と[MapLibre GL JS](https://maplibre.org/maplibre-gl-js/docs/)を用いて、世界のシェアモビリティステーションマップを作成してみました。

# アウトプットイメージ
出典）本記事で使用したGBFSデータ[^1]

:::note info
2023年12月16日時点

フロントエンド学習記No.1 JavaScriptの基礎に触れる

## はじめに
初めまして。10月より某SES企業でエンジニアとして働き始めた「rky」と申します。
これまであまり経験のなかったフロントエンド技術について、最近学習を始めました。内容は基礎的なものが多くなるかと思いますが、自分自身の学びを記録するとともに、他の初学者の方々の学習にも役立つ情報を提供できればと考え学習記録をつけていくことにしました！

## 学習内容
学習方法については以下のように考えています。
1. 目標とするアプリケーションや機能を考える。
2. JavaScriptを使って実装する。
3. TypeScriptで書き直す。
4. Vue.jsなどのフレームワークを使って再実装する。
これはあくまで現時点での計画なので、進行に応じて変更する可能性もあります！
これまで学習はほとんど書籍等による「インプット」に偏っていましたが、今回は「アウトプット」を重視して、学んでいきたいと思い、このような方法を試してみることにしました。

## 目標物
* +ボタンをクリックしたら数字を1足す
* -ボタンをクリックしたら数字が1引く
* 数値に対応してメーターが変化する

「Frame Library」に掲載されているパーティクル「Simple Fire」を題材に Babylon.js Playground の Particle Editor を少し学ぶ【Babylon.js】

この記事は「[Babylon.js Advent Calendar 2023](https://qiita.com/advent-calendar/2023/babylonjs)」の 17日目の記事です。

## 今回の内容
この記事では、[以下の「Frame Library」](https://library.framevr.io/)に掲載されているパーティクルのうちの 1つを題材に「[Babylon.js Playground の Particle Editor](https://doc.babylonjs.com/toolsAndResources/inspector/particleEditor)」を少し学んでみた、というものです。


### 「Frame Library」を知ったきかっけ
今回の記事で扱う「Frame Libra

Vitestの内部で使われているvite-nodeを紐解く

この記事は[ZOZO Advent Calendar 2023](https://qiita.com/advent-calendar/2023/zozo) シリーズ3 16日目の記事です。

## vite-nodeとは

vite-nodeは、Vitestの内部で利用され、Vitestと共に開発されているライブラリでTypeScriptのトランスパイルなどをよしなにやってくれるランタイムのようなものです。
TypeScriptのトランスパイルをよしなにやってくれるランタイムのようなソリューションは思いつくだけでもいくつかあります。
[Bun](https://bun.sh/)、[Deno](https://deno.com/)、[ts-node](https://www.npmjs.com/package/ts-node)、[tsx](https://www.npmjs.com/package/tsx)、[tsimp](https://www.npmjs.com/package/tsimp)など。

対してvite-nodeは、TypeScriptだけではなく、CSSや画像、Vite

クロージャーコンパイラーでJavaScriptを圧縮する


# はじめに

クロージャーコンパイラーってご存知ですか？
JavaScriptの最適化ツールで、JavaScriptのコードを圧縮し、実行速度を向上させるための効率化を行なってくれます。

ChatGPTにも聞いてみますかね。

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

高位合成言語アセンブラを作る。 その30

# 概要
高位合成言語アセンブラを作る。
論理式から、真理値表を作る。

# 投入する論理式。

“`
( ( ( a & b ) | ( a & c ) ) | ( b & c ) )
( ( ( ( a & b ) & c ) | ( ( a & ( ~b ) ) & ( ~c ) ) ) | ( ( ( ( ~a ) & b ) & ( ~c ) ) | ( ( ( ~a ) & ( ~b ) ) & c ) ) )

“`

# 写真


# 生成した論理アセンブラ

“`
make 25
wire 3 23
out 7 24
in 0 2
and 1 2 3
and 0 2 4
and 0 1 5
or 5 4 6
or 6 3 7
not 1 8
not 0 9
and 9 8 10
and 10 2 11
not 2 12
no

イベントリスナーの登録法二種類

“`javascript
//二種類のイベントリスナーの登録法

let hoge = function(){/*処理*/};
element.addEventListner(“type”,()=>{ hoge(); });
element.addEventListner(“type”,hoge);

//上だと、関数が引数をとる場合にも書くことができ、より柔軟性が高い。
//例
element.addEventListner(“type”,()=>{ hoge(“abc”); });

//setIntervalも同様
setInterval(()=>{hoge();},1000);
setInterval(hoge,1000);

setInterval(()=>{hoge(“abc”);},1000); //柔軟性が高い

Vueで明示的にDOMを更新する

バックエンドエンジニアとして、普段触ることのないフロントエンド。
とはいえ苦手意識をいつか克服したいと思い、VueやNuxtの勉強を始めていた矢先、業務でVueの修正を行う機会に恵まれました。

その際にぶつかった問題について、同僚のフロントエンドエンジニアの方に助けていただいたのでその内容を整理したいと思います。

# ぶつかった問題

サブミット前に、あるフォームの値に応じて他のフォームに自動的に値をセットする、というような処理を書いていた時に、コンソールでは値が入っているように見えるのに送信先では受け取れない、といった問題が発生しました。

# シナリオ

今回は「①好きな動物の名前と②飼っている動物の名前を送信してもらうためのフォームを作っている」という事にしましょう。

“`html

今モノレポやるならどのツール使うのがいいのん??

# はじめに
こんにちは、「拳で」 と申します!
[NRI OpenStandia Advent Calendar 2023](https://qiita.com/advent-calendar/2023/nri-openstandia)の16日目は

**今モノレポやるならどのツール使うのがいいのん??**

というタイトルでお送りいたします!

最近モノレポで開発することがあり、モノレポ管理を行うためのツールってちょいちょい聞くけど何が勢いあるんだろう?と気になったので調べてみました。

皆様のおすすめのツールや設定などががございましたらぜひコメントで教えていただけると大変喜びます🙇‍♂️

# TL;DR

– フロントエンド(JavaScript/TypeScript)開発プロジェクト向けモノレポ管理ツールは、 **[npm Workspaces](https://qiita.com/john-Q/items/ef7c433a5f441ff89ffb#npm-workspaces)・[Lerna](https://qiita.com/john-Q/items/ef7c433

JSX(TSX)内で条件分岐

# JSX(TSX)内で条件分岐させたい
map関数内で配列内の値によって条件分岐させたい

勉強しながらWebサイトを作成していて条件分岐の方法がよくわからずしばらく迷ったので振り返りも兼ねて書いています

:::note
[はじめてのアドベントカレンダー Advent Calendar 2023](https://qiita.com/advent-calendar/2023/first-time)に参加しています
:::

## やりたかったこと
– リストの項目を連想配列にしてmap関数で繰り返す
– そのとき、特定のアイコンのみ項目名の末尾に表示させたい
– リストの項目は他でも使用しているので変えたくない

### 使用しているもの
– [React](https://ja.react.dev/)
– [Heroicons](https://heroicons.com/)
– TypeScript 5.3.2

## 方法
論理 AND 演算子を使用

A && B

左辺(A)が真値の場合は右辺(B)の**値**を返し、左辺が偽値の場合は左辺の値を返す
ただしReactはf

プロジェクトの学びを捨てることは大きな損失であるをChart.jsで描く

# 概要
別記事で
[「プロジェクトの学びを捨てることは大きな損失である」](https://note.com/dyamashita/n/n8f3f760bc761?sub_rt=share_pb)
を投稿しました。

その記事ではプロジェクトの損益について下記の３つの式を記載しています。

`損益 = 価値 − 投下資本 × ( 1 + 学習コスト率 )`

`価値 = 投下資本 × 価値創造率 × 成功率成`

`成功率 = 初期成功率 ×( 1+ 学習改善率 × 回数 )`

これらをChart.jsを使ってインタラクティブに計算するようにしました。

# やったこと
実際に作ったページのキャプチャです。

こちらのサイトから閲覧できます。
https://dyson-yamashita.git

【⑥進捗管理】Vite+React+TypeScript+GitHubPagesで爆速サイト公開

## はじめに
業務ではVue.js+JavaScriptを使用しています。
が、もう少しモダンなフレームワークと言語に挑戦したい…ということでReactとTypeScriptをチョイスし、簡単なWEBアプリをつくることに:v:

…と思い立ったのが10月末。
「そういえば12月はQiitaアドベントカレンダーがあるな…そこまでに公開できたらいいな:sunglasses:」と思い、1ヶ月半程度で設計~公開まで行けると踏んで開発開始。

折角なので、制作の過程も含めて記事化してみました。

ということで、本記事は下記連載の第5弾となります。
他記事も併せてご覧ください。
[【①アイデア選定】](https://qiita.com/YutaManaka/items/f5db1d86239203db8ade)
[【②技術選定】](https://qiita.com/YutaManaka/items/b1397c0624010b693a12)
[【③設計(ロジック)】](https://qiita.com/YutaManaka/items/6d412971574c4ca9fb1b)

Array.prototype.filter()の第二引数についても理解しよう

こんにちは！！株式会社エイチームライフデザインの @TMDM と申します。
この記事は、[Ateam LifeDesign Advent Calendar 2023 シリーズ1](https://qiita.com/advent-calendar/2023/ateam-life-design)の16日目の記事です。

—

# 今回はArray.prototype.filter()について理解を深める

[filterの説明](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)

> filter() は Array インスタンスのメソッドで、指定された配列の中から指定された関数で実装されているテストに合格した要素だけを抽出したシャローコピーを作成します。

一致したものだけ集めるよ。ということですね。[シャローコピーとは](https://developer.mozilla.org/ja/docs/Glossary/Shallow_copy)

#

GASでYoutubeの動画投稿をDiscordに通知する

**IPFactory Advent Calendar 2023 16日目の記事です。**

https://qiita.com/advent-calendar/2023/ipfactory

# はじめに
今回は **Google App Script (GAS)** を使ったYoutubeの動画投稿をDiscordへ通知するスクリプトを作ってみたので解説していきます。
ソースコードが欲しい方は最後まで飛ばしてください。

:::note warn
筆者はGASやjsの経験が浅いです。参考程度にご覧ください。
:::

# 環境
Google App Script

## 利用サービス
– YouTube Data API v3
– Drive API

# Youtubeから動画を取得する
GASで使えるサービスの**Youtube Data API**を使うことで以下のように動画を取得できます。
@から始まるハンドルではなくIDが必要な点に注意してください。
“`js
var results = YouTube.Search.list(‘id,snippet’, {
“max

【JavaScript】someメソッドについて

:::note
`some()` は Array インスタンスのメソッドで、指定された関数で実装されているテストに、配列の中の少なくとも 1 つの要素が合格するかどうかを判定します。配列の中で指定された関数が `true` を返す要素を見つけた場合は `true` を返し、そうでない場合は `false` を返します。それ以外の場合は `false` を返します。配列は変更しません。
:::
引用

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/some

### 使用例

“`javascript
const array = [1, 2, 3, 4, 5];

const hasEvenNumber = array.some(element => element % 2 === 0);

console.log(hasEvenNumber); // 出力: true
“`

この例では、arrayに偶数が含まれているかどうかをチェックしています。2が偶数であ

React入門11: タイムトラベル(3)

# はじめに
私自身の復習兼、備忘録的な意味もあり、複数回の記事に渡って React を用いてマルバツゲーム(三目並べ)を開発していきたいと思います。
– [React](https://ja.react.dev/)
– [CodeSandbox(公式)](https://codesandbox.io/)
– [CodeSandbox(非公式)](https://csb-jp.github.io/)

## シリーズの一覧
1. [React入門１: 環境構築 [オンライン版]](https://qiita.com/banana_bancho/items/64fa6ccb58101eadbb63)
– [React入門1.5: 環境構築 [ローカル版-番外編]](https://qiita.com/banana_bancho/private/30f5d9d2c5eea00ac11c)
1. [React入門２: 盤面の作成](https://qiita.com/banana_bancho/private/c50495b5d4c30555cec3)
1. [React入門３: イン

自分のスキルとフリーランスする上であったらいいなぁと思ったスキル

# 自己紹介
– 大分県生まれ大分県育ち東京都在住
– スタートアップのCTO
– フリーランスエンジニアとしても活動中
– 好きな言語/FW -> Django/TypeScript/React

# 自分のスキル
– Django/Laravelを用いたAPI/バックエンド開発
– Typescript/Reactを用いたWebフロントエンド開発
– AWSを使った簡単なインフラ構築
– NginxでのWebサーバー構築

まぁ…こんな感じですかね…
ふつーです。特に何か特別なことはなく。

まぁでも自信過剰でしたね…
以外とお客様から見たかゆいとこには届かず結構弾かれました（笑）

これはできるのに…これが足りない…
みたいなことが多すぎました。

#てなわけで「これ」やっとけばよかったなぁ！！ってやつ紹介します。

– CI/CDの構築
– インフラの構築

総じて「アジャイルに特化したインフラの構築」ですね

これ需要ありです。

動的なスニペットを実現する HyperSnips を使いこなす

## Abstract

VSCode使いのみなさん、スニペット機能使ってますか？

(公式サイトより)

自作スニペットを作成して、コーディングを快適に行っている人もたくさんいることでしょう。ですが、通常の自作スニペットには**致命的な弱点があります**。それは**静的なスニペットしか定義できない**ということです。
つまり、「正規表現などを利用して、動的にスニペットを定義することができない」ということです。

本記事では、正規表現も利用可能な、動的なスニペットを定義することができる HyperSnips を紹介します。

https://marketplace.visualstudio.com/items?itemName=draivin.hsnips&ssr=false#overview

## 本記事の環境

– vscode 1.85.1
– hypersnips v0.2.8
– windows

【JavaScript】超シンプルなブラックジャック

## きっかけ

https://qiita.com/y23514/items/59ea72d09973000f9482

この記事を読んで作りたくなった。

## 前書き（予防線）

なるべくシンプルに少ないコードで、
バニラJSで、
拡張性を別段考慮せず、
ボタン連打によるバグなども一切考慮せず、
演出やUIは全くこだわらず、
1ファイルで完結するようにし、
ロジックが初学者でも（頑張れば）分かるように意識して作ってみました。

詳しいルールはWikipediaを読んでください。（丸投げ）

https://ja.wikipedia.org/wiki/%E3%83%96%E3%83%A9%E3%83%83%E3%82%AF%E3%82%B8%E3%83%A3%E3%83%83%E3%82%AF

以下が分かっていればいいです。
* 「2～9」はそのまま
* 「10～K」は10
* 「A」は1 or 11
* 合計が21を超えずに近い方が勝ち
* 両者とも21を超えたらプレイヤーの負け
* ディーラーがカード2枚で合計21、
プレイヤーがカード3枚以上で合計21の場合、プレイヤーの