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

Memory based IPC on WSH Javascript runtime (C#, C++ compatible)

## Getting Started
Recently, I came across an example of inter-process communication (IPC) between programs written in C# and C++, implemented using Windows API functions `CreateFileMapping` and `MapViewOfFile`, by chance.

However, the sample I encountered was in a messy implementation state, leading me to believe it wasn’t implemented based on organized theory. Therefore, I decided to clean it up and generalize it for application in Windows Scripting Host (WSH).

Using this, I succeeded in imp

htmxとは何なのか？

htmxは、HTML属性を使用してAJAX、CSSトランジション、WebSockets、Server Sent Eventsを直接操作できる軽量なJavaScriptライブラリです。複雑なJavaScriptコードを書くことなく、シンプルでパワフルなハイパーテキストベースのモダンなユーザーインターフェースを構築することを可能にします。

**htmxの特徴**

* **シンプルで軽量**: htmxはわずか14KB（gzip圧縮時）の軽量ライブラリであり、依存関係もありません。
* **使いやすい**: htmxはHTML属性を使用して動作するため、JavaScriptの知識がなくても簡単に使用できます。
* **パワフル**: htmxは、AJAX、CSSトランジション、WebSockets、Server Sent Eventsなど、モダンなWeb開発に必要な機能をすべて備えています。
* **アクセシビリティ**: htmxは、JaJavaScriptが無効なユーザーでもセマンティックHTMLの利用、プログレッシブエンハンスメント、フォールバック機能等により動作します。
* **

React Router で可変長のパスを表現したい

## :writing_hand: はじめに

### React Router について

`React Router` はReactアプリケーション内のルーティングを管理するためのライブラリです。（多分React のルーティングライブラリで一番有名です）

シングルページのアプリケーションにURLとコンポーネントを紐づけ従来の多ページWebサイトのような体験を実現させてくれます。

`React Router` で紐づけられるURLは静的なURLだけに留まらず、動的なURLとも対応させることが可能です。

静的なURLの場合

`/user/123`にアクセスできます。
“`jsx
const routes: RouteObject[] = [
{
path: ‘/user/123’,
element:
}
]

const router = createHashRouter([…routes]);

return

new Date()を使いこなすには、形式の統一が鍵！

# 概要
JavaScriptにおけるnew Date()は、単なる日付取得ツールではありません。日付操作はもちろん、タイムゾーン変換、フォーマット変換、相対日付計算など、多彩な機能を備え、開発を支える強力なツールです。しかし、実装方法によって異なる挙動になる可能性があるため、意図しない結果を招きやすい落とし穴も存在します。

この記事では、“`new Date()“`を使った日付の値を定義する上で注意すべきポイントについて紹介しています。

# new Date()を使った初期化に気を付けましょう
new Date()はいろんな方法で定義することができます。
たとえば、下記の4つの方法で“`new Date()“`を使って日付を定義することができます。
“`javascript
// 現在時刻取得
const now = new Date()

// 文字列から生成
const dateFromStr = new Date(“2023-12-25”)

// 数値から生成
const dateFromNumber = new Date(2023, 11, 25)

// タ

【JavaScript】Identifierの構成要素

# はじめに

学習ログ記事です。読んでくださる方、ぜひ揉んでください。
対戦よろしくお願いします。

ECMA Script 公式ドキュメントより、13.1 Identifiers の章

https://tc39.es/ecma262/multipage/ecmascript-language-expressions.html#prod-IdentifierReference

# Identifier とは？

https://wa3.i-3-i.info/word19477.html

> 識別子（読：シキベツシ　英：identifier）とは
>
> **そいつを他のやつと区別するために付けた名前なり番号なり記号なりのこと**
>
> です。

> サクっと一言で説明すると
>
> **他と区別するために付けた名前**
>
> が「識別子」です。

わかりやすいですね。
以下に具体例を示しました。
`x` `func` が識別子です。変数名・関数名・アクション名など・・・のイメージです。

“`js
const x = 0;

function func(

javascriptで始めるAtocder

# はじめに
この記事ではJavascriptでAtcoderを始める方向けに、問題を効率よく解くための環境構築方法を紹介します。
この環境構築を行うことで、以下のことがコマンド１つで可能になります。

– テストデータでの自動テスト
– コマンドライン上からの回答の提出

##### 動作環境
MacOS Ventura 13.5

# 目次
1. [ojコマンドを使えるようにする](#Chapter1)
1. [atcode-cliを使えるようにする](#Chapter2)
1. [テンプレートを追加する](#Chapter3)
1. [使い方](#Chapter4)
1. [コマンド一覧](#Chapter5)
1. [参考文献](#reference)

# ojコマンドを使えるようにする
ojコマンドをインストールします。
“`
$ pip3 install online-judge-tools
“`
ojコマンドのバージョンを出力し、コマンドが使えるかを確認します。
`online-judge-tools 11.5.1`の

React19のBetaが公開されたので、公式ブログの概要+気になって調べてみたことをまとめてみた

## この記事の方向性

2024-04-25にReact 19 Betaが公開されました。
この記事ではReact公式ブログの概要をまとめ、さらに気になって情報収集した内容をまとめてみます。

この記事の前半はサクッと理解することを重視します。
後半は所感や補足情報を記載します。

記事内では一次情報や丁寧な解説記事へのリンクを多く張るようにしました。この記事は概要理解として利用し、詳しく知りたいと思った内容はリンク先を参照するようにしてもらえたらと思います。

## 公式情報

今回メインで参照したのは以下です。

– [React Blog](https://ja.react.dev/blog) (React公式ブログの日本語版)
– [React 19 Beta](https://ja.react.dev/blog/2024/04/25/react-19)
– [React 19 Beta Upgrade Guide](https://ja.react.dev/blog/2024/04/25/react-19-upgrade-guide)
– ※ 記事投

コードが書けない高専卒がUdemyのコードをアップデートしてみた

# はじめに
やっとこさ【最新ver対応済】モダンJavaScriptの基礎から始める挫折しないためのReact入門を修了しました！
ハンズオン形式でTodoリストを作成していくコースです。
最初はバニラJSで作りその後Reactで再度作成したのですが、Reactが便利すぎてすでにバニラJSでの書き方8割忘れました笑

作成したTodoリストはこちら👇
テキストボックスでTodoを入力して、未完了エリアと完了エリアに分け可視化しています。

# 本題
コースで作成したTodoリストですが「タスクの一意性をテキストで担保しているため、同一のタスクが入力された際に意図しない挙動を行う」といういじくりがいを秘めています（！）
好奇心がうずいてしまったため、寄り道してこちらを解決していきます！！

##

【userAgent】【UAParser.js】iPhoneかどうかの判定が正常に動かなかった

# 背景

端末で動作を変えたい状況で、iPhoneかどうかの判定を`userAgent`、`UAParser.js`を使用して実装したが、どちらでも想定した動作にならなかった。

# 現象

iPhoneからアクセスしているのに、`MacOS`として判定される


# 原因

iPhoneの設定が「デスクトップ用Webサイトを表示」になっていた。
「モバイル用Webサイトを表示」に切り替えることで想定する表示になった。


![A042AcYR_1.png](https://qiita

Webアプリ開発 マイページ編集編

# 初めに
webアプリの開発ができたので、どんな感じで作成したのかをまとめたいと思います。
今回はマイページ編集についてです。
# 開発環境

macOS Sonoma 14.4.1
PHP 8.3.3
Laravel Installer 5.2.0
Laravel Framework 11.0.5

# ソースコード

https://github.com/opatu07/portfolio

# 考えたこと
## マイページ編集
### ビュー
マイページに移動する前に
自分の名前を押すとドロップダウンのメニューが出てくるようにして、「プロフィール」を押すとマイページ画面に飛べるようにしました。
マイページはLarave Breezeを参考にしました。

![updateProfile.png](https://

Expressの起動方法(npm run ってなに？)

## npm run serve?

業務でモックサーバーのデータをもらい`README`を見ていると
見慣れないコマンドを発見。
“`
起動方法: npm run serve
“`

そのままコマンドをGoogle先生に聞いても`npm`コマンドに`run`はあるが
`serve`を指定しているものは見つからなかったので調べてみました。
※業務で見たモックサーバーはnodemonを利用していたため
今回の記事と少し状況が違いますが伝えたいことはnpm runの動作です

## 結論: package.jsonのscriptsに設定されたコマンドを実行している

説明のために以下の記事で作成したExpressサーバーを利用します。
[ExpressでWebサーバーを立ててみる](https://qiita.com/moody_engineer/items/f5773380ffc964cf10f3)

記事でも書いてますがExpressを起動するために以下のコマンドを実行すると記載し、実際に起動します。
“`
node app.js
“`

なら`npm run

ExpressでWebサーバーを立ててみる

## Express

Node.jsのためのWebアプリケーションフレームになり
簡単にWebサーバーを作成できるので作っていく。
※外部APIを呼び出すことができないがAPI仕様書がある場合に
モックサーバーを作ってテストを行ったりしました。

今回はDockerを用いず自分のパソコンにWebサーバーを作成します。

### 実装してみる

Node.jsでプロジェクトを始める方法は下記ページを見てください。
[Node.jsを私用パソコンで始めてみる](https://qiita.com/moody_engineer/items/715a0783c3d9ae1caf06)

今回作成するフォルダ構成は以下になります。
“`
– src
|- app.js
|- package.json
|- package-lock.json
|- node_modules
“`

※もしNode.jsを私用パソコンで始めてみる、で`test`ディレクトリを作り、
`npm init -y`を実行していただいた場合は、`test`ディレクトリ直下に`

javascriptでライフゲーム作った

# ライフゲーム作った

javascript でライフゲーム作りました

ライフゲーム
[https://ikuo0.github.io/lifegame-js/](https://ikuo0.github.io/lifegame-js/)

ソースコード
[https://github.com/ikuo0/lifegame-js](https://github.com/ikuo0/lifegame-js)

# ライフゲームとは
wiki見ましょう
[https://ja.wikipedia.org/wiki/%E3%83%A9%E3%82%A4%E3%83%95%E3%82%B2%E3%83%BC%E3%83%A0](https://ja.wikipedia.org/wiki/%E3%83%A9%E3%82%A4%E3%83%95%E3%82%B2%E3%83%BC%E3%83%A0)

# 解説とか
ライフゲームについて今更ここで解説することも無いのでjavascriptでゲームの下地を作成した際の工夫点を書いていきます

以下メインループのソース部分を抜粋します

“`

第17回 JavaScript 「三」、「✕」みたいなメニューアイコン作成（CSSです）

# はじめに
Webサイトによくでてくるアイコンがあります。
漢字の「三」みたいなものとか、クローズする「ｘ」みたいなものです。
こういったアイコンはjpgなどの普通の画像ではなく、SVGで作られたものかなと思いました。
が、今回はこれを`span`要素で作っていきたいと思います。

SVGはよく知らないので、そのうち調べてみようと思います。

# 今回実施する内容
今回は、Webでよく出てくる漢字の「三」みたいなメニューのアイコンや、閉じるときに表示される「✕」みたいなアイコンを、`span`要素を使用して作成したいと思います。

# ソースコード(Git Hub)
https://github.com/Build-Mount/JS_17_icon

# 環境
OS: Windows 11 JP (64bit)
Microsoft Edge:バー

[ReviewAI 使用例] チュクミドサ [新大久保 韓国料理店]

# はじめに

レビュー分析AIサービスの ReviewAI (レビューアイ) を開発しています。
本記事ではレビュー分析の例として、新大久保の韓国料理の人気店を取り上げていきます！
[人気店の記事をまとめているページはこちらです。](https://qiita.com/RetegyLink/items/3d94852bf25a724a82cc)

今回は、チュクミドサ の食べログに集まっているレビューを分析します。

## チュクミドサ

> 韓国No.1のブランドイイダコ専門店 チュクミドサ

[食べログ](https://tabelog.com/tokyo/A1304/A130401/13271829/)

## ReviewAI (レビューアイ)

弊社 RetegyLink が開発中のレビュー分析 AI です。
https://reviewai.next-seed.work/
試作版を公開中で、現在は
– [食べログ](https://tabelog.com/)
– [じゃらん](https://www.jalan.net/)
のレビューを分析できます。

# レビュー分析

CODE39に準じたバーコードフォントを作成する

# バーコード・CODE39

QRコードと比べて情報量の少ないバーコードですがフォントとして利用すれば大量の表示が可能である事と視認性の高さやスペースの問題から今でも多く使用されています。

そんなバーコードには多くの種類があります。その中でも数字だけでなくアルファベットと一部の記号が使用でき、視認性に優れる***CODE39***は産業界でよく使用される存在です。

実際、自分自身も前職が製造業であったので進捗管理システム上でよくスキャンしていました。様々なきれいと言い難い協力会社の現場に廻されてときに猛者感を醸し出すものもいた図面と伝票ですが、バーコードスキャンエラーが出ることはありませんでした。今思うとこのバーコードもCODE39だったかもしれません。

## CODE39について

CODE39は1975年に米インターメック社で開発されたバーコード規格で、数字、アルファベット、記号の合計43個の文字を符号化したものです。

9本の太細のバー、スペースで一つの文字（キャラクタ）を表わし、3本は常に太いバー・スペースになります。また始まりと終わりはバーとなります。文字列の終始には

P5.js 日本語リファレンス(beginGeometry / endGeometry)

このページでは[「P5.js 日本語リファレンス」](https://qiita.com/bit0101/items/91818244dc26c767a0fe) の beginGeometry() / endGeometry()関数を説明します。

## beginGeometry / endGeometry

### 説明文

beginGeometry() は図形形状情報を保持する p5.Geometry オブジェクトへ図形の追加を開始します。
endGeometry() は図形形状情報を保持する p5.Geometry オブジェクトへ図形の追加を終了します。
beginGeometry()とendGeometry()の間で複数のシェイプ（図形）を追加することで複雑な図形形状を作成することができます。

beginGeometry() と endGeometry() は、描画のパフォーマンスを向上させるのに役立ちます。たとえば、以下の(a)の方が(b)よりも高速に描画することができます。
(a)beginGeometry() と endGeometry()の間で個々のシェイプ(図形

検索した文字列の隣をクリックする方法

“`js
// 仮の変数にPower Automate Desktopから取得した文字列を設定
var searchText = “ここに検索文字列を入力”;

// 検索文字列を含む

要素の左隣の

内のタグをクリックする関数
function clickLinkInAdjacentLeftTd(searchText) {
const tds = document.querySelectorAll(‘td’);

// 全ての

要素をループ
for (let i = 0; i < tds.length; i++) { if (tds[i].textContent.includes(searchText) && i > 0) {
const previousTd = tds[i – 1]; // 左隣の

要素を取得
const link = previousTd.querySelector(‘a’); // 左隣の

内の最初の要素を取得

React + TypeScript: memoで包んだコンポーネントでもコンテクストの更新により再レンダーされる

コンポーネントを[`memo`](https://qiita.com/FumioNonaka/items/c0427027dea12857c825)で包むと、親から渡されたプロパティ(`props`)が直前と変わらないかぎり再レンダーされません。ただし、コンテクストを使っていると(`useContext`)、`props`は前と同じでも、コンテクストが更新されれば再レンダーされます。簡単なコード例で、その動きと対応方法を探ってみましょう。

# ふたつの子コンポーネントでコンテクストを使う
つぎのモジュール`src/App.tsx`がつくるコンテクスト(`createContext`)は、ふたつの状態変数(`name`と`theme`)を`value`として子のコンポーネントツリーに与えています。子コンポーネントは、`NameEditor`と`Greeting`のふたつです。あとに示すように、どちらも`memo`でラップしてあります。なお、[メモ化した子コンポーネントにプロパティとして渡す関数(`handleChange`)は、`useCallback`に包みましょう](https:

GaussianBlur のカーネルを調べる

OpenCVの `GaussianBlur()` で実際に適用されるカーネルの中身は、要素がすべて0で中心だけが1の画像に `cv.GaussianBlur()` を適用することで調べられます。

5×5のカーネルのときは次のようになります（Python版）。

“`Python
>>> import cv2
>>> import numpy as np

>>> img = np.zeros((5, 5))
>>> img[2, 2] = 1
>>> img
array([[0., 0., 0., 0., 0.],
[0., 0., 0., 0., 0.],
[0., 0., 1., 0., 0.],
[0., 0., 0., 0., 0.],
[0., 0., 0., 0., 0.]])

>>> filter = cv2.GaussianBlur(img, (5, 5), 0)
>>> filter
array([[0.015625, 0.03125 , 0.046875, 0.03125 , 0.015625],