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

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

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

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

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

## 2. Reactの基

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

【初心者】Node.js（Express）でHTMLを読み込もうとしたらCSSを拒否された件について

こんにちは。
最近になってNode.jsの勉強を始めたのですが、開幕早々躓いた点がありましたので備忘録として残しておきます。
ちなみに私はNode.jsのことを少し前までJavaScriptのライブラリの一種みたいに考えていた人間です……。
（だって……「～.js」みたいな表記してるから！）
もし何か間違っている箇所などありましたらご教授頂けますとありがたいです。

▼今回導入や実行に辺り参考にさせて頂いた記事です。ありがとうございます。

https://qiita.com/ryome/items/16659012ed8aa0aa1fac

***

さて、Node.js、Expressを導入してローカルサーバーを立ち上げる所までは順調に進んでおりました。
（Hello World!を表示させる定番のアレですね）
そして自分が制作していたWebページを表示させてみようと思い、
先程の記事を参考にHTMLを読み込ませる記述を書いてみました。
“`Node.js
// 静的ファイルの提供とキャッシュの有効化
app.use(express.static(‘/’, { maxAge: 8

ベクトルを用いたメモリーアクセスのアイデア。

ベクトルを用いたメモリーアクセスのアイデアは、特に近年のGPUや高速なメモリー技術を考慮すると、理論的には実装可能な範囲にあると思います。この考え方は、いわゆる ベクトル型メモリーアーキテクチャ として捉えることができ、データのアドレス自体をベクトル空間の座標として扱うというアイデアに近いです。

ベクトル型メモリーアクセスの概念
通常のメモリーアドレスは、リニアなアドレス空間（整数のアドレス）に基づいています。これは整数という1次元の特殊なベクトルとも考えられます。しかし、ベクトル型メモリーでは、アドレスはベクトルで表され、例えばデータの特徴量や属性に基づいたベクトルが使用されると考えることができます。アクセスする際には、与えられたベクトルに対して コサイン類似度 などの手法を用いて、最も類似するメモリーアドレス（ベクトル）を見つけ、そこからデータを取得します。

#### ベクトル型メモリーアーキテクチャの基本的なアイデアを、Pythonで簡単な実装に落とし込んだ例を示します。このコードでは、メモリーアドレスをベクトルとして扱い、与えられたクエリベクトルとの コサイン類似度 を

パーティクルが色の類似性によってクラスタリングされ、似ている色のパーティクルが引き合うようすをながめる。

### パーティクルが色の類似性によってクラスタリングされ、似ている色のパーティクルが引き合う。



“`html