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

map関数の引数のコールバック関数の丸括弧と中括弧

## すみません

JavaScriptやフロントエンドフレームワークについてはかなり初心者です。
誤っている点ありましたらどんどんご指摘いただければと思います。

## 内容

Remixにてとある画面表示でmap関数を使っている。
下記のように書いていた。

“`react
{hoges.map(hoge => (

{hoge.fuga.name}

))}
“`

表示だけならこれだけで全然問題ない。
ただ、mapの中のhogeをconsole.logしたくて、下記のようなコードを書いたところエラーになった。

“`react
{hoges.map(hoge => (
// 丸括弧使用だけはエラーになる
console.log(hoge);

{hoge.fuga.name}

))}
“`

ちょっと調べたところ下記の様にmap関数の引数のコールバック関数でちゃんとreturnすれば`console.log(hoge);`を書いてもエラーにならないら

package managerについて

## package managerとは？

名前の通りパッケージを管理するもの。
そもそも、パッケージって？

### パッケージとは？

ほかのプログラムなどから使用される目的で作成されたプログラム（モジュール）をまとめたもの。

### package managerを使用する利点

– 依存関係：Aを動作させるにはBが必要。Bを動作させるにはAが必要みたいな
– 競合関係：AとBを動作させるには、Cが必要

他の人が作った便利なプログラムを簡単に自分のプログラムで使うことができるために、いろいろやってくれているツールなんすね。

### パッケージってどこに？

パッケージマネージャが機能するには、どこからパッケージをインストールするかを知る必要があり、パッケージレジストリーの形で提供されます。
npmであれば、 [npmjs.com](https://www.npmjs.com/)にあります。

## 役割となぜそれを使用するのか？

手動でダウンロードして使用することも可能なんですが、

– すべての正しいパッケージファイルの検索
– 脆弱性チェック
– ダウンロード
–

生成AI(Copilot)を使って、モールス信号を出力するJavaScript文を作成した。codepenで動かす。

# はじめに
　無性にモースル信号音を聞きたくなった。「こっちのけんと」さんの曲「はいよろこんで→ギリギリダンス」とか、天空の城ラピュタのムスカ様とか、タイタニックとか、戦争ゲームとか、NHKスペシャルの戦時中特集で流れているトントン・ツーツーのあれだ。

　「トン」は単音「・」
　「ツー」は長音「ー」

となる。０と１の２進法でデジタル的信号を電波に乗せて長距離通信が可能となる古い技術だ。詳細はWikipedia参照として、文字を入力して、モールス信号に変換して聞きたくなった。しかし、プログラムを一から作成するのもメンドクサイので、生成AIさんに頼んで作成してもらうことにした。

https://ja.wikipedia.org/wiki/%E3%83%A2%E3%83%BC%E3%83%AB%E3%82%B9%E7%AC%A6%E5%8F%B7

# 条件
作成してもらうプログラム言語：HTMLとJavaScript

# 手順

1 厳格モードで、プロンプト（命令文）をCopilotに入力
2 出力されたプログラムをコピペしHTMLファイルにコピペして実行
3 うまく以下なった

データ属性の値が配列の文字列である場合に値を配列として取得する方法

# 背景
業務でデータ属性の値が配列である場合の値を配列として取得するのに苦戦した為です。

“`html

“`

“`javascript
const elm = document.querySelector(‘div’);
const dataArrayAttr = elm.dataset.validate;
console.log(dataArrayAttr);
“`

“`terminal
“[‘work_location’,’required’]”
“`

# データ属性の値が配列の文字列である場合に値を配列として取得する方法

データ属性にJSON文字列形式で値を設定しているので、JSON.parseを使えば良いです。

“`javascript
const elm = document.querySelector(‘div’);
const rawdataArrayAttr = elm.getAttribute(‘data-validate’

Remult + SvelteKitが良さげ

– Web開発において汎用性かつ機能性の高い最適なAPIの開発やドキュメントの作成は非常に重要です。
– 今回は「型安全なAPIの自動生成・容易なリアルタイムデータ同期」が可能な[Remult](https://remult.dev/)とFWの[Sveltekit](https://kit.svelte.dev/)を利用して素早くAPIやWebアプリを作成する方法を記録いたします。

## 環境
– macOS 13.6.8
– node 22.0.0

## 手順

### Svelteプロジェクトの構築
– 任意のディレクトリで以下のコマンドで、Sveltekitプロジェクトを作成します。

“`shell
# svelteインストール
$ npm create svelte@latest sample

Need to install the following packages:
create-svelte@6.4.0
Ok to proceed? (y) y

create-svelte version 6.4.0

┌ Welcome to SvelteKit!
│
◇

Node.js と ws でシンプルな WebSocketサーバー： Bufferオブジェクトで受けとった文字列データを UTF-8 の文字列にする

## はじめに
Node.js で下記の ws を使い、でシンプルな WebSocketサーバーを使う時の話です。

過去にも、その内容の記事を書いていたのですが、今回は Bufferオブジェクトで受けとった文字列を扱う話に関わる、シンプルな内容です。

●ws – npm
　https://www.npmjs.com/package/ws

### 背景の補足
とあるハッカソンで、WebSocket を使った PC とスマホ・ガジェット等を連動させる通信処理を実装しようとした時に、特定の複数の文字列をキーに、複数の動作を行わせることをやろうとしました。

そのテスト実装をした時、「文字列を送信する側が Bufferオブジェクトでデータを送る形」で、「受信側では、文字列変換した内容を扱いたい」という状況があってやった内容です。

## 実装内容
以下が本題です
今回、以下では、WebSocketサーバーの機能がある受信側の実装（かなりシンプルなもの）を示します。

`npm i ws` でパッケージをインストールして、下記のプログラムを作り、nodeコマンドで動かします（接続は、例えば

楽しくニューラルネットワークで理解しよう。

#### ショートストーリー: 「眼と脳の計算模型」

祐介は東京に住む若手プログラマだ。毎日、静かな自宅でPCに向かい、新しい技術に触れ、挑戦を続けている。今日の彼のテーマは「Webカメラとニューラルネットワーク」。カメラから映し出されるリアルタイムの映像を、人工知能が「学習」し、まるで人間の眼と脳のように理解できるようにする。彼の仕事はその計算モデルを作り上げることだった。


「カメラは人間の眼だ。そこから入ってくる映像をどう処理するか、それが脳の役割だな…」祐介は自分にそう言い聞かせるようにつぶやいた。

彼が目指すのは、Webカメラが映し出す128×128ピクセルの映像をリアルタイムで取得し、それをニューラルネットワークで処理するシステムだ。カメラの映像が脳へと情報を送り込み、それを理解

JavaScript 条件分岐(if)

## はじめに
ifとswitchについて理解はしているのですが、書き方がごっちゃになることがあるので自分用まとめです。

## ifサンプルコード
“`js
$score = 100;

if ($score === 100) {
echo “excellent!!” . PHP_EOL;
} else if ($score >= 80) { //elseifじゃなくてelse if
echo “Great!” . PHP_EOL;
} else {
echo “もうすこしがんばりましょう” . PHP_EOL;
}
“`
“`
excellent!!
“`
## 比較演算子
“`js
>= //以上
<= //以下 > //超過
< //未満 === //等しい !== //等しくない ``` ## 複数条件 ```js && and //なおかつ || or //もしくは ! //ではない ``` ## returnで処理の中断 ifの中でreturnを使用するとifを抜けます。 ## おわりに 基礎なんでち

TypeScriptでpubsubモジュールを実装する

:::note
## 概要
pubsubモジュールは、アプリケーション内の異なるモジュール同士が連携するための役割を果たします。
主に、2つのメソッドを提供しています。
`subscribeメソッド`: イベントに対して購読（登録）を行い、指定されたコールバック関数を保持します。購読されたイベントが発生した際に、このコールバックが実行されます。
`publishメソッド`: 指定されたイベントを発生させ、そのイベントに紐づいているすべての購読者（サブスクライバー）のコールバック関数を呼び出します。

これにより、各モジュールが「イベント」という共通の方法を使って通信できるようになります。イベントが発生すると、そのイベントに登録された購読者のコールバック関数が順次実行される仕組みです。
:::

# 背景
業務のコードでpubsub-jsを知ったので、PubSubパターン/モジュールを理解したいと思います

# pubsub-jsとは

https://www.npmjs.com/package/pubsub-js

JavaScriptで書かれたトピックベースのPub/Subパターンの

JavaScriptで蟻本 グラフ　 最小全域木 プリム法

# 概要
アルゴリズムの学習記録を投稿します。
今回は蟻本・グラフ・最小全域木のプリム法についてです。

# 問題
“`
全域木の最小コストを求めよ。

入力
graph1 = [
[INF,1,INF,INF,INF,INF,INF],
[1,INF,3,INF,7,INF,2],
[INF,3,INF,5,1,INF,INF],
[INF,INF,5,INF,8,INF,INF],
[INF,7,1,8,INF,5,INF],
[INF,INF,INF,INF,5,INF,10],
[INF,2,INF,INF,INF,10,INF]
]

vertexCount = 5

出力
17
“`
※問題文は本には書かれていないので　入力と出力は自分がわかりやすいように書きました。

# コード部分
“`javascript
//
/**最小全域木　プリム法　蟻本　p100
*
* @param graph{Array} 無向グラフ　隣接行列
*

素数を判定するのを作ってみよう！(前編)

素数判定機を作るとjsの基本的な機能がわかります！
作ってみましょう！

# どうやって作る？
### 素数とは何？
素数→1ではない割り切れる数がその数と1しかない数
素数ではないやつ→合成数と1

合成数は、1を含まないn×mを満たす数字(n,mは自然数)

…
入力される値がaとすると、
### a = 1 または aを割り切れる数が 2 ~ a-1 (自然数)にあれば素数ではない！
ということがわかります。コードを書いていきましょう！

“`math
a = 1 またはa \equiv 0 \mod (2 \sim a-1)_{自然数}
“`

# 書いていこう
“`
素数判定

a は 1?

　そうだったら素数ではない

　そうじゃなかったらこれやる
　　2からa-1まで　しらみつぶし(そのしらみつぶししてる数をiにする)
　　　aはiで割り切れる？
　　そうだったら素数ではない
　そうではなかったら素数の可能性がある

素数か素数じゃないかを出す
“`
必要な関数とか計算とか書いていきます。
## javascriptの書き方
### 関

明るく楽しい、鉄道旅行ゲーム。



### 街から町への明るく楽しい、鉄道旅行ゲーム。

スペースキーを押すと新しいコースが生成されます。

コードをメモ帳などのテキストエディタに貼り付け、ファイル名を「index.html」として保存します。その後、保存したファイルをブラウザで開けば、コードが実行されます。

“`html

JavaScriptにおけるデータ型を意識した最適なコーディング習慣

まず初めに、JavaScriptでは、TypeScriptやC#のように型の概念がそこまで厳密ではありません。
しかし、データ型を意識することでコードのバグを防ぎ、可読性の高いコードを書くことができるので、複数人で行うプロジェクトでは非常に重要になります。
こちらのブログでは、データ型を明確にすることで得られるメリットを解説します。

### データ型とは？
型とは、データの種類のことです。例えば、数値型や文字列型などがあります。
### JavaScriptで扱う基本的なデータ型
今回は、特に使用例の高い５つに絞って説明します。
#### １．String(文字列型)
特徴：Stringは、テキストデータを扱うためのデータ型であり、シングルクォートやダブルクォートで定義されます。
使用例：下記のコードでは、message変数の中の文字をHTML内で使用しています。
“`

Reactのコンポーネントに引数付きの関数を渡したら思ってたのと違う挙動になった

こんにちは！ 普段Webアプリの開発を行っているn-kokiと申します。

タイトルの通り、Reactのコンポーネントにpropsで引数付きの関数を渡したら、思っていたのと違う挙動をしたので、その内容と解決策について紹介します。

# 何がしたかったのか Reactのpropsで変数の他に、関数も渡すことができることは、多くの方がご存じかと思います。私はこれを使って、ボタンのコンポーネントに対してonClickで発火する関数を渡そうとしました。引数の無い関数では思い通りに動くのですが、引数をつけるとボタンを押さずともページが読み込まれた瞬間に実行されていしました…

“`react:App.js import Button from ‘./Button’

function App() { const func1 = () => { alert(“ボタンが押されたよ！”) }

const func2 = ( data ) => { alert(“ボタンが押されたよ！\n” + data + “っていうデータも受け取ったよ！” ) }

ret

【JavaScript】オブジェクトのループ処理

## `for…in`ループ

`for…in`ループを使用すると、オブジェクトのすべての列挙可能なプロパティを繰り返し処理できます。

“`js const obj = { name: ‘Alice’, age: 25, city: ‘Tokyo’ };

for (const key in obj) { if (Object.hasOwn(obj, key)) { console.log(`${key}: ${obj[key]}`) } } “`

– `for…in`ループは、オブジェクトの各キーを反復処理 – `Object.hasOwn()`メソッドを使用して、オブジェクト自身のプロパティのみを処理

## `Object.keys()`メソッド

`Object.keys()`メソッドを使用すると、オブジェクトのキーの配列を取得し、それを使って繰り返し処理できます。

“`js const obj = { name: ‘Bob’, age: 30, city: ‘New Yor

赤い彗星。赤いモビルスーツに乗って、宇宙を飛び回るゲーム。




### モビルスーツに乗って、宇宙を飛び回るゲーム。

スペースキーを押すと新しいコースになります。

コードをメモ帳などのテキストエディタに貼り付け、ファイル名を「index.html」として保存し

所属ゼミのホームページを作ったときの話

## はじめに

Reactで所属しているゼミのホームページを作りました。現在トップページのみ完成しており他のページへのリンクがない状態ですが、今後も少しずつ作り込んでいきたい思っています。

また、既存のサイトを参考にしながら作りました。特に、明治大学武田ゼミさんのホームページはナビゲーションバーや全体のレイアウトを整える際に参考にさせていただきました。この場を借りてお礼申し上げます。サイトの制作にあたって参考にした記事等は最後の参考記事欄にリンクを貼っておきます。

この記事を通して、ホームページを自分で作ってみたい方や就職活動でポートフォリオ何を作ろうか迷っている方の参考になれば嬉しいです。

目次

1. 概要 – GitHubリポジトリ – 使用技術 – 機能一覧

2. このプロダクトを作ろうと思ったきっかけ？ 3. なぜその技術構成？ 4. 工夫したところ – レスポンシブデザイン – シンプルなUI 5. 苦労したところ – デプロイに時間がかかった

ブラウザバックで広告を表示させるスクリプト

ブラウザバック時に全画面でマスクページを表示させるスクリプト 表示させたい場所にスクリプトを読み込む

使用例： WordPressに組み込むならheader.phpあたりをカスタマイズして WEBページのでスクリプトを読み込むようにすれば実装可能

“`HTML
“`

※ファイル名、ファイルパスは自分の環境に合わせて

### 使用例：index.php
“`HTML

サロゲートペアでWindows10でサポートしない絵文字を表示する

## はじめに

普段はMac環境で開発をしているため、Windows環境について考えることがあまりない。しかし最近、Windows 10で特定の絵文字が正しく表示されない問題があることに気づいた。
色々調べて、ユニコードに「サロゲートペア」という概念があり、このサロゲートペアを用いることで問題を解決できたため、記事として残してみた。

## サロゲートペアとは

サロゲートペア(Surrogate Pair)は、直訳するとSurrogate(代理)のペアである。

### 何が代理？

これはUTF-16エンコーディングで使用される概念で、1つの文字を表現するために2つの16ビットコードユニットを使用する方法である。

例えば以下の地球の絵文字は一文字に見えるが、実際は長さ2の文字になっている。

“`js
const emoji = “🌍”;
console.log(emoji.length); // 出力: 2
“`

### なぜ必要？

Unicodeは世界中のすべての文字を表現するために作られたけど、当初は16ビット（65,536文字）で十分だと考えられていた。

しか

農業・食品系のサイトを参考にヘッダーデザインを考える

# はじめに
今回は、農業・食品系のサイトでよく使われる動きとデザインについて考えていきます。

# 参考サイト
– 食べて笑顔になる 土肥農園
https://www.dosuika.com/index.html

– 食菜卵(しょくさいらん)-たまごの八千代ポートリー
https://www.yachiyo-egg.com/

# 農業・食品系のヘッダーラフ案
農業や食品では、アイコンやアニメーションを使って視覚的に楽しそうなイメージを作り上げるサイトが多い印象です。パッと見て「楽しそう」と感じると、その後の誘導がしやすくなるなと考えました。**視覚的に見て使いやすいヘッダー作り**をモットーにして制作していきます。

## ①真ん中ロゴとアイコン付きヘッダー

### 全体のコード一覧