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

GPT (Cursor) による、設計からの多言語（Javascript, Python）自動コーディング デモ

GPT (Cursor) による、設計からの多言語（Javascript, Python）自動コーディング デモ です。

### 設計

下記による設計

– openapi
– mermaid – classDiagram

[GitHub リポジトリ](https://github.com/9tqP/GPT-AutoCoding-Demo)

## コード生成

prompt には下記を書き込んでいる

– タスク
– mermaid から Javascript・Python への変換例

### Javascript コードの生成

– Cursor で `architecture_001.md` を開く。
– Chat で prompt_js_001 をメンション `@prompt_js_001.md`。
– プロンプト実行で、GPT-4 で設計からコードが生成される。

### Python コードの生成

– GitHub Copilot, Cursor で `architecture_001.md` を開く。
– Chat で prompt_js_001 をメンション

【アイディア】「検索してはいけない言葉」をびっくりせずに見る拡張機能

## 前書き

これはただのアイディアです。
コードはありません。

## 要求

サイト内のグロ画像を見たくない。
でも気になる。どうしたものか。

## 拡張機能の概要

* サイト内のすべての画像/動画のサムネにモザイクをいれる
* 背景も画像なら例外なくモザイクが適用される
* モザイクはダブルクリックで解除/再適用される
* 部分的にモザイクが外せると尚よい
* 段階的にモザイクが外せると尚よい
* 初期表示以外のタイミングで出てくる画像などもきちんとモザイクが適用される
* とにかくグロ画像を急に見させない

## 動機1

怖いもの見たさで「検索してはいけない言葉」のサイトを見たいが、グロ画像は見たくないから。

## 動機2

5chに貼られている画像リンクを確認すると、釣りでグロ画像を見せられるケースがあるから。

## 最後に

自分で作ればいいだろ、と思われるかもしれないが、
Chromeの拡張機能は初回に5ドル取られるのが怠いのでね。。。
いまいちやる気が湧かない。

ちなみに今は画像を見るときは目をかなり細めてから大丈夫そうか判断しています。

Open BIM Components(IFC.js)の最小構成

# はじめに

2023年9月[^Sep]？11月[^Nov]？くらいにIFC.jsが一新されて、[`Open BIM Components`](https://github.com/ThatOpen/engine_components) というライブラリに変わっていました。

[^Sep]: 2023年9月に`web-ifc-viewer`が[非推奨になっている](https://github.com/ThatOpen/web-ifc-viewer/commit/1f5c975ad6d019e7355c8759369f318f9fa3e339)
[^Nov]: 2023年11月に`Open BIM Components`の初板?が[リリース](https://github.com/ThatOpen/engine_components/releases)

もともと `IFC.js`は `web-ifc`, `web-ifc-three`, `web-ifc-viewer` の3つのレイヤーで構成されていました。それが、IFCのパーサーである `web-ifc` はそのままで、ブラウ

【React/Firebase】TodoistCloneアプリに挑戦してみました

## 目次
– [目次](#%E7%9B%AE%E6%AC%A1)
– [はじめに](#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB)
– [完成イメージ](#%E5%AE%8C%E6%88%90%E3%82%A4%E3%83%A1%E3%83%BC%E3%82%B8)
– [筆者について](#%E7%AD%86%E8%80%85%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6)
– [経緯](#%E7%B5%8C%E7%B7%AF)
– [技術スタック](#%E6%8A%80%E8%A1%93%E3%82%B9%E3%82%BF%E3%83%83%E3%82%AF)
– [実装について](#%E5%AE%9F%E8%A3%85%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6)
– [テーブル設計](#%E3%83%86%E3%83%BC%E3%83%96%E3%83%AB%E8%A8%AD%E8%A8%88)
– [ディレクトリ構成](#%E3%83%87%E3%82%A3%E3%83%A

Javascript　map　配列を新しく作るとは

## map　配列を新しく作るとは
記事を書いたきっかけ

Javascriptでmapを使ったループをさせる方法の書き方を勉強しているときに新しく配列を
作るという言葉の意味がしっくりとイメージをつかめていなかったので記事を作ることにしました！

## 挙動を確かめるためのコード
“`
const numbers = [1,2,3,4];
const double = numbers.map(( (value) =>{
return (value * 2);
}))
console.log(numbers);
console.log(double);
“`

## 実行したコード結果
“`
(4) [1, 2, 3, 4]0: 11: 22: 33: 4length: 4
(4) [2, 4, 6, 8]0: 21: 42: 63: 8length: 4
“`
## ここから分かったこと
* mapで配列を生成したときにはmapを使う際のもとになった配列とは参照している先が違うこと
* mapで配列を新しく生成したときに(ここではdouble)元の配列（

アロー関数 [JavaScript]

アロー関数とは、関数式を簡潔にかける新しい書き方になります。

通常の関数式を簡潔に掛ける大替構文となり、functionのキーワードを使用せずに使うことができます。
また、アロー関数は、その名の通り、=>(矢)を使って関数リテラルを記述します。

例を参照しながらアロー関数についてまとめていきたいと思います。

## 目次：
– [関数と関数式とアロー関数](#1-関数と関数式とアロー関数)
– [アロー関数の例](#アロー関数の例)
– [アロー関数の暗黙的なreturn](#アロー関数の暗黙的なreturn)
– [まとめ](#まとめ)

## 　1. 関数と関数式とアロー関数

#### 1-1. 関数と関数式の違い

関数では、functionを使って関数宣言をして、returnで戻り値を設定して戻すことにより
*関数で算出された値を別の関数の計算に使うことができました。*

https://qiita.com/shisshi_engineer/items/da93acbbf8dcbb519f1b#return-function%E9%96%A2%E6%95%B0%E3%8

フロントjsでも使えそうなデータ保存方法

## はじめに

趣味でプログラミングをする際にフロントjsを使うことが多いのですが、
フロントjsのみでデータを保存することができるのか気になったので調べました。

使用ライブラリに関しては下記記事のデータストレージの項目から選びました。

https://qiita.com/rana_kualu/items/96b303307d6435aedf8b#%E3%83%87%E3%83%BC%E3%82%BF%E3%82%B9%E3%83%88%E3%83%AC%E3%83%BC%E3%82%B8

## 自分が使いたいもの(メモ)

どれか一つを選ぶとしたらDexie.jsを使おうと思っています。

正直、[フロントjsで使えるもの](#フロントjsで使えるもの)であればなんでもよく、
Dexie.jsを選んだ理由は性能がどうこうというよりただの好き嫌いで選んでいます。

Dexie.jsはLocalForageやPouchdbと比べて更新や削除処理に違和感がないです。
LocalForageやPouchdbはデータ削除するのにget(テーブル)やgetItem(テーブル)が
必要に

【個人開発】「住所なう！」というブラウザで今自分がいる場所の住所を出すだけのシンプルなアプリを作成しました！

**これは下記記事の本人による転載です。**

https://ogatomo.net/blog/2024/06/02/jyusyonow/

こんにちは。中学1年の小川です。

今日は新しいアプリを作ったので紹介します！

## 「住所なう！」とは？

その名も住所なう！です。

平成中期のネーミングセンスですね(彼は2011年生まれです)

このアプリは今いる場所の郵便番号と住所、ビルやマンション・アパートなどの建物の場合は建物名を表示するアプリです。

下のリンクから実際に使ってみることができます。

[https://ogatomo.net/jyusyonow/](https://ogatomo.net/jyusyonow/?utm_source=qiita&utm_medium=button&utm_campaign=introduction)

## 操作方法

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2518724/226f75c5-b49d-f4e9-edc2-43

次世代JavaScriptランタイム「Bun」でNode-REDを動かしてみた

# はじめに

Software Design 2024年6月号の第2特集で次世代JavaScriptランタイムBunが取り上げられていました。
ITエンジニア必須の最新用語解説「WinterJS」でも「Bun」が取り上げられていて、どれくらい高速化
高速化されたか気になり、さっそくNode-REDで試してみた。

# インストール

Node.jsの場合、管理ソフトウェア(nvm(Node Version Manager))やインストールするバージョンを気にする必要がありましたが、Bunの場合は気にする必要がありません。

“`bash
curl -fsSL https://bun.sh/install | bash
“`

## バージョン確認

“`bash
bun -v
1.1.12
“`

# 動作確認

## Node-REDのインストール

“`bash
bun init -y
bun install node-red
bun ./node_modules/node-red/red.js -u ./
“`

立ち上げやモジュールのロード時間が短くなったことを

JavaScriptで現在の日時を取得する

## 日付と時刻
呼び出すときに例えば今日の日付をnew Date()で生成して引数で渡します。
“`JavaScript:呼び出し側
const fileGenDate = this.formatDate(new Date()); // ファイル生成日時 YYYYMMDD_hhmm
“`
YYYYMMDD_hhmmssの形式で取得します。

“`JavaScript:定義側
public formatDate(date: Date): string {
const year = date.getFullYear().toString(); // YYYY
const month = (date.getMonth() + 1).toString().padStart(2, ‘0’); // MM　getMonth()は0から数えるため+1が必要
const day = date.getDate().toString().padStart(2, ‘0’); // DD
const hours = date.getHours().toString().padStart

「速打ちゲーム」!? ゲーム性を取り入れて、最速で「目的の条文」にたどり着くアイデア《法令.app》

誰でも楽しく法律が読める[《法令.app》](https://jplaws.app)というWebアプリを作っています。

法律関係の開発をする難しさの１つが「データサイズの振れ幅が大きいこと」だと思います。[一行で終わる法律](https://jplaws.app/d/132AC1000000040-m.html)もあれば、[数百万文字(!)もある法律](https://jplaws.app/d/332AC0000000026-m.html)もあります。テキストの処理に苦労していたら、[630ページもあるPDFが添付された省令](https://jplaws.app/d/351M50010000035-a.html)が出てきたりします。(巨大PDF対策については、またQiitaで書きます。フォローお願いします！)

## :shopping_bags: レジ打ちの「イス」は、実は義務だった？

#### ニュース記事：“座るレジ係”増加中…実は立ちっぱなしNGでイスの設置は義務　客の理解進み変わる接客

https://www.fnn.jp/articles/-/706416

根拠法

Reactのhooksについてちゃんと理解する Effect・パフォーマンス・その他編

## はじめに

こちらの記事の続きです

https://qiita.com/sayyyyyy/items/9d61f15c2d277ab9fcda

## Effectフック

Effectを利用することでコンポーネントを外部システムに接続し、同期させることができます。
Effectはレンダー自体によって引き起こされる副作用を指定するためのもので、外部システムとの接続がなければ特に利用する必要がありません。
公式にもそのエフェクトは不要かもというドキュメントがあったりします。

https://ja.react.dev/learn/you-might-not-need-an-effect

Effectは以下のような手順で行われます。
1. Effectを宣言する
1. コンポーネントがレンダーされるたびにReactは画面を更新し、そのあとでuseEffect内のコードを実行する
2. 依存値の配列を指定する
1. 依存配列がない場合毎回のレンダー後に実行され、依存配列が空([])の場合マウント時のみ実行される
3. 必要に応じてクリーンアップを追加する
指定したす

mapメソッドの使い所

mapメソッドを使用する部分をメモ。
mapメソッドは配列を繰り返し処理するメソッド。新しい配列を生成できる。

“`js
const arr = [‘りんご’, ‘ばなな’, ‘いちご’]

const converted = arr.map((value, idx) => {
return `${idx} と ${value}`
})
converted // [“0 と りんご” ,”1 と ばなな”, “2 と いちご”]
“`

オブジェクトの配列に対してもmapメソッドは使用できる。以下は簡単な足し算を行う。
“`js
let array = [
{ first: 20, second: 30 },
{ first: 42, second: 43 }
];

let addition = array.map(function (element) {
return element.first + element.second;
})
addition // [50 ,85]
“`

配列の計算もmapメソッドならば簡潔に書ける.下記コードは、平均と標準

RPGの戦闘シーン（？）のシュミレーターを作ってみた

## 初めに
今回はRPGゲームの戦闘シーンのシュミレーター（？）を作ります
## 準備物
特になし
## ファイル構成
今回はmain.htmlだけで作ります
## プログラムをコピペ
以下のコードをコピペしてください
“`html:main.html