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

他言語学習者向け：JavaScript/ECMAScriptプロトタイプ及びクラス入門

NOTE: この記事は、弊社内のオンボーディング資料を公開したものです。

主に他言語の経験がある人向けのJS/ECMAScriptのプロトタイプに関しての理解を深めるための資料です。

JSに初めて触れる方はこちらを先に読んでください。

https://qiita.com/awa2/items/78c3619b6c418bcc107b

## JSのグローバル空間
JavaScriptのグローバル空間は、巨大の1つのオブジェクトとようなものとして表現されており、コード内で宣言される変数は、このグローバル空間のメンバ変数（プロパティ、メソッド）の一部とみなされます。

“`JavaScript
var a = ‘my variable!’ // constやletではブロック内宣言となるので、ここではvarを使っています
console.log(globalThis.a); // my variable!
“`
このグローバルスコープ自身を表す特殊な変数として、`globalThis` が用意されています（ES6以降）。

`Object`のようなデータ型や`Function`、

p5.js・クリエイティブコーディングで絵文字を活用する【My Creative Coding – 私の作品づくり – 2023】

この記事は、「[My Creative Coding – 私の作品づくり – Advent Calendar 2023](https://qiita.com/advent-calendar/2023/my_creative_coding)」の 3日目の記事です。

## 今回の内容
今回の記事の内容は、例えば以下のような「絵文字の活用」に関するものです。

### 絵文字を使った事例1
p5.js を使ったクリエイティブコーディングや、その他の p5.js 以外のものを使った作品作りの中で、ある時「絵文字が画像素材的に使える」というのを知りました。

そして絵文字を使う場合、画像を使うよりも手軽です。
少し処理の流れの違いという観点で補足をすると、画像だと「画像ファイルを用意 ⇒ その読み込み処理 ⇒ 呼び出し・配置の処理」という感じですが、絵文字の場合「テキスト表示のための処理で絵文字を出力するのみ」という感じです。

利用事例としては、例えば以下を作ったことがあります。
この時は、画像ではなくハロウィンに関連する絵文字を使ってアニメーションを作りました。以下の動画の、城や棺桶、お化

React入門1.5: 環境構築 [ローカル版-番外編]

# はじめに
私自身の復習兼、備忘録的な意味もあり、複数回の記事に渡って React に関する記事をまとめていきたいと思います。

# 本記事の目的
今回は番外編として、ローカル環境での React アプリ開発の環境構築をしていきます。

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

# 環境構築
以前、[オンラインエディタの CodeSandbox を使った方法](https://qiita.com/banana_b

他言語学習者向け：JavaScript/ECMAScript文法速習リファレンス

NOTE: この記事は、弊社内のオンボーディング資料を公開したものです。

主に他言語の経験がある人向けのJS/ECMAScriptの基本文法です。

## 実行環境
JavaScriptの処理系にはさまざまなものが存在します。大まかに分けると

* ブラウザ上での実行
* NodeJS上での実行

に分かれます。それぞれの環境において、実行可能なECMAScriptのバージョン、利用可能ランタイム、モジュール解決方法が異なります。

* バージョンに関しては、ECMAScript2020相当のコードであればほぼすべての環境でサポートされており、2023年現在で困ることはありません。
* ランタイムに関しては、ブラウザとNodeJSで大きく異なります
* モジュール解決方法には、 CommonJS方式とECMAScript Module(ESM)方式が混在しています。将来的にESMに統一される方向性とはなるものの、時間がかかりそうです

## 基本的な文法
* 大文字・小文字は区別されます
* ステートメントは、セミコロンで区切ることができます
* `{}`を用いてブロックを構成しま

jsdocについて理解する

# 1.背景
最近業務でjsdocを記述するようになりました。
改めてメリット、用法等について理解したいと思った為です。

# 2.JSDocとは
https://jsdoc.app/
– JavaScript 用の API ドキュメントジェネレータで、Javadoc や phpDocumentor に似ています。
– ソースコードに直接、コードそのものと一緒にドキュメンテーションのコメントを追加します。
– JSDoc ツールはソースコードをスキャンし、HTML ドキュメントウェブサイトを生成します。

# 3.JSDocの書き方
一般的に、ドキュメント化されるコードの直前に書かれます。
各コメントは /** で始まらなければなりません。
“`js
/** This is a description of the foo function. */
function foo() {
}
“`
## 4.JSDocタグ
「JSDocタグ」を使えば、より詳細な情報を与えることができます。

以下が例です。

“`js
/**
* @description JSDocという文字列を出力

[JavaScript]オブジェクトのスプレッド構文のシャローコピーを深堀り

スプレッド構文を使うとオブジェクトをシャローコピーできます。
“`js
const obj_base = {
drink: “coke”,
food: {
fruit: “apple”
}
}

const obj_set = {…obj_base}
console.log(obj_base) // {drink: “coke”, food: {fruit: “apple”}}
“`

スプレッド構文のシャローコピーの動きを深掘りします。
↓ シャローコピーについて
https://developer.mozilla.org/ja/docs/Glossary/Shallow_copy

## １階層目は参照先を共有しない（値渡し）
１階層目の値はコピー元に影響しない
“`js
const obj_base = {
drink: “coke”,
food: {
fruit: “apple”
}
}

const obj_set = {…obj_base}
obj_set.drink = “n

Bun を使用して HTTP サーバーをホットリロードする

Bun は、ホットリロード(hot-reload)を有効にしてファイルを実行するフラグ –hot をサポートしています。

Svelte、Vue、Reactなどにもある編集内容が即時反映される機能で、モジュールやファイルが変更されると、ファイルを自動的に再実行します。

hot-reloadは、プログラム編集時に、アプリケーションを再起動する手間が省かれるため、開発を効率的に進行できます。

変更を加えたコードを即座に反映できるので、デバッグもより容易になります。

“`sh:ホットリロードフラグ付きで起動する
$ bun –hot run index.ts
“`
このフラグ付きで下記のHTTPサーバーを起動すると、ソース ファイルが変更される度に bun プロセスを再起動せず、fetchハンドラーをリロードします。

念のために、一点だけ付け加えておくと、開発には便利なこの機能ですが、やはり本番環境はがっちり固定して万が一typoのひとつでも紛れ込んで壊れるなどという事は避けたいものです。

という事で、まあ本番時はこのフラグを付けなければ良いだけではありますね。

“`

ブラウザのタブ間でのリアルタイム通信を p5.js で 1つずつ試す： Broadcast Channel API【完走賞ゲット-3】

:::note info
※ [Qiita の完走賞をゲットするための条件は「単一／複数のカレンダーに投稿した記事が合計25」です](https://twitter.com/Qiita/status/1593441648796524545)
:::

この記事は、「[完走賞ゲットのため小ネタ 25記事を投稿しようとチャレンジ v2 Advent Calendar 2023](https://qiita.com/advent-calendar/2023/youtoy)」の 3日目の記事です。

## 今回の内容
今回の記事の内容は、2年以上前に以下の記事で紹介していた内容の続きです（ずいぶん時間がたってしまいましたが…）。

●ブラウザのタブ間でのリアルタイム通信を行う 4つの方法【概要編】 #JavaScript – Qiita
　https://qiita.com/youtoy/items/b202209d0eb36bad830f

上記は、ブラウザのタブ間でリアルタイムに通信を行う場合、以下の 4つの方法があるという情報などを見かけ、そのソースコードがどんな感じになるか、概要

[ TypeScript / JavaScript ]複数のプロセスを非同期で同時に走らせたい

# はじめに
自分はミロゴスに今年（2023年4月）入社した新卒エンジニアで、TypeScriptを使って開発を行っています。

複数のプロセスを非同期で同時に走らせたいという要求を実現するのに、苦戦をしたのでその実装方法をここで紹介したいと思います。

# 想定する読者
– 複数のプロセスを同時に走らせる非同期処理の実装方法を知りたい方
– 非同期処理に対する例外処理の実装方法が分からない方

# 実行環境
– AWS Lambda
– ランタイム
– Node.js 20.x
– アーキテクチャ
– x86_64

# 今回実装する要求・要件
## 要求
5個のプロセスを同時に走らせたい

## 要件
– 5個のプロセスを同時に走らせる。
– 途中で止まるプロセスがあっても、正常なプロセスは最後まで実行させる。
– 5個全てのプロセスの終了が確認できたとき、途中でエラーが発生したプロセスがあった場合は、どのプロセスが誤りだったかの情報を含め例外を発生させる。

# 実装方法
## 全体のコード
Lambdaを起動すると、関数(hand

React入門１: 環境構築 [オンライン版]

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

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

【Next.js】Sassをインポートする方法まとめ

# はじめに
NextjsにおいてSassファイルをインポートする場合、ユースケースによってやり方が異なるので、混同しないよう気をつけなければなりません。本記事では以下３つのパターンについて、それぞれ解説していきます。
1. 他のSassファイルにインポートする
1. JSXファイルにグローバルインポートする
1. JSXファイルにローカルインポートする

# 環境
バージョンが違うと動かない可能性があるので、その際はいちばんしｔに貼ってあるドキュメントを参照してください。
– Next@14.0.0
– Reat@18.2.0
– Sass@1.69.5

# 1. 他のSassファイルにインポートする方法
Sassファイルの読み込みを宣言する方法として、かつては`@import`が採用されていました。しかし、この方法でインポートされた変数や関数は、他のファイルと名前衝突を起こす可能性があったり、クラスがどのファイルで定義されたのか分かりにくいという問題点等を抱えていたため、2021年に非推奨となりました。

現在では代わりに`@use`を使用することになっています。`@use`でイ

自己紹介がてら「自分を紹介するホームページでも作ってみない？」3日目

# 初手からソースコード
“`html:index.html