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

【JavaScript】バブリングについて

## はじめに
JavaScriptの学習を進めていく中で、バブリングと呼ばれる現象に遭遇しました。
そこで、バブリングについての概要と、その対処法についてここに記します。

## バブリングとは
DOMツリー内でイベントが発生したときに、そのイベントが階層構造に沿って下位の要素から上位の要素へと伝播していく仕組みを指します。

JavaScriptでのイベント処理には、以下の3つのフェーズがあります。

1. キャプチャリングフェーズ

イベントがDOMツリーの上位から下位へ伝播します。つまり、windowやdocumentのようなトップレベルの要素から、イベントが発生した具体的な要素までたどり着きます。

2. ターゲットフェーズ

イベントが発生した要素（ターゲット）で実際に処理が行われます。

3. バブリングフェーズ

イベントが下位の要素から上位の要素に向かって再び伝播していきます。このフェーズが「バブリング」に該当します。

例：

spreadsheetのシートが増えたとき操作しづらい。GASを使ってサイドバー上でシートをソート

# はじめに
最近、spreadsheetで作業していた時にシートが多くなったときに並び替えがしづらいと思いました。
GASを使いサイドバーにシート一覧を表示させて、ドラッグで操作できるようにしました。

# 完成イメージ
並び替え後に実行をすると自動でソートされます。

# コード
“`html:index.html

モダンJavaScriptについて

# モダンJavaScript
## 仮想DOMを用いるライブラリの使用
### DOMとは
- Document Object Modelの略
- HTMLなどの文書をツリー構造として表現したもの
- コード上から文書の構造を読んだり、要素を変更することが可能。

### 仮想DOM
- DOMを直接操作せず、JS上で仮想DOMを操作し、差分のみDOMに反映する
- パフォーマンスの向上につながる

## パッケージマネージャー(npm/yarn)の使用
- ソフトウェアのインストール、更新、設定、削除などを予め定義されたプロセスに従って自動化するツールのこと。
### できること
- 依存関係を解決してくれる
- import先が明示的にわかる
- 公開されているパッケージやコマンドを利用可能

### package.json
- 設計書的な役割
- プロジェクトで使用している依存関係とそのバージョン、スクリプト等が定義されている

### package-lock.json
- プロジェクトの依存関係のバージョン情報を記録するファイル
- このファイルにより、別環境でも全ての依

React入門：初心者が最初に学ぶべきステップ【導入編】

## はじめに
Reactは、WebアプリケーションのUI（ユーザーインターフェイス）を効率的に構築できるJavaScriptライブラリです。Reactの主要な特徴を理解し、実際に簡単なアプリケーションを作りながら学ぶことで、初めてのReact開発をスムーズに進められます。この記事では、Reactの基本概念やJSX、HTMLとの関係性を解説し、実際にカウントアップ機能を持つボタンを実装するまでの手順を紹介します。

## 目次
1. Reactとは？
2. Reactの基本概念
- コンポーネント
- 仮想DOM
- JSXの概要
3. HTMLとの関係性
4. 環境設定
5. 実装：Hello Worldプログラム
6. 実装：3つのボタンでそれぞれカウントアップ
7. まとめと次回予告

## 1. Reactとは？
Reactは、Facebookが開発したJavaScriptライブラリで、UIをコンポーネントベースで構築できます。Reactはシンプルで再利用性の高いコードを実現するため、多くの開発者に採用されています。動的なWebアプリケーションの構築に非常に役

JavascriptでWebサイトを録画してみる

# はじめに
クライアントからWebサイトに録画機能を追加したいというご要望をいただきましたので、以下のサイトを参考にして最低限のサンプルコードを作成し検証しました。
[【分かりやすく解説】Javascriptで画面録画をする方法](https://www.crunchtimer.jp/blog/18169)

# サンプルコード要件
・Windows11 + Chromeで動作すること
・録画は映像のみで音声は不要
・「Shift＋R」で録画開始、「Shift＋E」で録画終了および録画ファイル保存

# サンプルコード
動きがわかりやすいように「video」タグのみ表示させています。

~~~php:index.html

このページを参考にカメラアングルを変えてみる。

https://ics.media/tutorial-three/camera_orbitcontrols/

> Three.jsにはカメラの動きを自動的に制御する OrbitControls クラスが存在します。
>
>次の用途で役立つ機能です。
>
> * 周回軌道を描くように、カメラを配置する
> * ポインター操作でカメラの配置やアングルを変更する

この「ポインター操作でカメラの配置やアングルを変更する」をやりたい。

サンプルを確認してみる。

サンプルの再生ページ
https://ics-creative.github.io/tutorial-three/samples/camera_orbitcontrols_basic.html

サンプルのソース
https://github.com/ics-creative/tutorial-three/blob/main/samples/camera_orbitcontrols_basic.html

サンプルの再生ページでは、
マウスのポインターで、グリグリ箱を

Null合体演算子について(??)

# Null合体演算子ってなーに
論理演算子の一つで、左辺が`null`または`undefined`の場合には、右辺の値を返して、そうでない場合には左辺の値を返すものです。
ES11で導入されたようです。
```javascript
const hoge = null ?? "I am a person";
console.log(hoge);// I am a personが出力されます

const hogeHoge = "ok" ?? "I am a person";
console.log(hogeHoge);// ok が出力されます
```
こんな感じになります。

# どんな場面で使えるの？
オプショナルチェーンと同時に用いることでより安全な書き方が可能になります。
（オプショナルチェーンに関しては私が書かせていただいたこちらの記事も同時にご参照ください🙇）

https://qiita.com/dashubei/items/9cdbfd598a10f4667a35

オプショナルチェーンでは、参照したプロパティが存在しない場合エラーではなく、`undefined`が入る

JavaScriptとCSSを組み合わせて快適なハンバーガーメニューを作る【中級編②】

# はじめに
今回は、初級編で学んだJavaScriptのDOM操作とCSSを組み合わせて、左右から要素をスライドさせるハンバーガーメニューを制作していきます。

# 使用するJavaScriptの用語一覧
JavaScriptでハンバーガーメニューの開閉アニメーションを行う際、主に「DOM操作」を行うJavaScriptを使用します。

下記には、これまで勉強した＆今日も使うメソッドをまとめました。

|名称|説明|
|:--:|:--:|
|.querySelector();|DOM要素を取得するために使用します。|
|.addEventListener();|イベントリスナーを追加するために使用します。クリックイベントなどを設定します。|
|.classList.toggle();|要素のクラスを切り替えるために使用します。メニューの表示状態を管理するのに便利です。|
|.getElementById();|指定したIDを持つ要素を取得するためのメソッドです。|

# 右から現れるハンバーガーメニュー

フロントのみで簡単なログイン機能を作る

## はじめに
javascriptとhtml、cssを使って簡単なログイン機能を書いてみました。

## ファイル構成
```
login |--html
| |
| |--login.html
| |--profile.html
| |--create-account.html
|
|--app.js
|
|--styles.css

```

## HTML

### login.html
```

無料開発者リソースマインドマップ | ツール、サービス、プラットフォーム

オンラインでマインドマップを見るには：[https://free-for-dev.edgeone.app](https://free-for-dev.edgeone.app/)


この開発者の無料リソースマインドマッププロジェクトは、githubプロジェクトから派生したものです：https://github.com/ripienaar/free-for-dev

このプロジェクトは、SaaS、PaaS、IaaSなどを含む、無料のクラウドサービスを提供する多数のリソースを示しており、企業や独立した開発者が低コストまたはゼロコストで迅速に自分の製品を立ち上げるのに役立ちます。

今、Chromeの正式版でChromeのローカル版AIが使用できるようになりました

オンライン体験アドレス：[https://chrome-ai.edgeone.app](https://chrome-ai.edgeone.app/)

Chrome内蔵AIは最初に申請フォームを記入する必要があり、Chromeの開発者版でのみ体験できました。現在、ユーザーは簡単な手順で正式版でこの機能を有効にできます。


「ウェブページの指示に従って設定を完了すると、デバッグページにアクセスできるようになります。ここでは、コードを迅速に修正して、ローカル AI の強力な機能を体験できます。

注意：Chrome API はまだドラフト段階であり、かなりの変更がある可能性があります。本ウェブページは Chrome 129 バージョンを基に開発されており、Chrome 128 バージョンの API とは互換性がありません。」

### なぜ Chro