【C#】C#でWebSocket、ブラウザーとのやり取り。

# 前置き

仕事で少しWebSocketを使ったので備忘録代わりに。
C#でWebSocketのサーバー側、ブラウザー側をクライアントとして、通信ネタではよくある「チャット的なやつ」を作成しました。

「C#」「WebSocket」で検索すれば既に先人たちの記載はありますが（感謝）、Nugetで何かいい塩梅のものを取ってきたり、IISを絡めたり、といったことなし、素の.Netの範疇「とりあえず動くものを作った」が今回の内容になります。


GitHubにポチポチで動かせるお試しセット（exe+html)も置いてあります。
https://github.com/fu-foo/WebSocketCSharpSimpleSample/tree/main/Trial

# 環境

– （WebSocketサーバー側）.Net 4.8 +

railsで住所の自動入力について

# 全体の流れ
1. jQueryプラグインのインストール
2. gemfileにライブラリのインストール
3. colmnを追加
4. modelの編集
5. controllerの編集
6. viewの編集
7. application.jsの編集
8. エラーについて

## 1. jQueryプラグインのインストール
[jpostal](URL “https://github.com/ninton/jquery.jpostal.js”)
![スクリーンショット 2023-01-28 18.33.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3115929/fe9ac471-5fbe-a79b-7bc0

【JavaScript】イベントの伝番について

JavaScriptではイベントが発生したらイベントハンドラーが呼び出されて処理が走るようになっているが、実はイベントリスナーはイベント発生元の要素だけで実行されるわけではない。

イベント発生元の要素の親要素へ順にイベントが伝搬していき、親要素でも同じイベントが発生する。

イベントの伝番はキャプチャフェーズ、ターゲットフェーズ、バブリングフェーズという3つのフェーズに分かれており、その過程で対応するイベントリスナーが存在すれば、それらも順番に実行されるという仕組みになっている。

以下のhtmlがあってbutton要素でクリックイベントが発生したとする。

“` sample.html

outer

【GAS】全角英数字、スペースなどを半角に置換する

# 概要
環境: Chrome V8 ランタイム

備忘録。

全角英数字を絶対に許さないスクリプトです。書籍APIで取ってきた情報が全角と半角の混合で美しくなかったので、どちらかに統一してしまおうという試み。スペースとコンマはreplaceに渡して半角に置換。

全角文字列を引数に渡せば半角文字列を戻り値で返してくれます。

# コード

“`js
// 英数字を全角から半角に変換
function convertCharacters(origin) {
let converted = “”; // 空の変数
const pattern = /[Ａ-Ｚａ-ｚ０-９]/; // 全角英数のパターンを用意
for (let i=0; i

僕のSheetJSお試し　～VBAマクロ撲滅計画Phase#1 ～

# 導入

今年から**武装派VBAマクロ撲滅組織**を独りでに立ち上げました。
僕がVBAマクロを撲滅したい理由は

– VBAくらい使用場面が少ない（オフィスのソフトを操作するときぐらいしか使えない）言語をわざわざ覚えるのが面倒。ググるのすら面倒。
– エクセルのバージョンが変わったときに野良VBAどもをかき集めて回収するのがだるい。
– あの無機質なエディタを使うのが嫌だ。
– VBAはVBAでしかなく汎用性がない。（業務効率化のツールならもっとRPAばりにマウスカーソルの操縦とか画像認識とかさせて色々やらせたい。）

世の中に3000億人くらいいるVBAプロフェッショナルアドバイザーの方々からすると「いやいや、それは君のレベルが低いだけでVBAは偉大な存在だ」って感じかもしれないけども、とにかく僕はVBAが嫌だ。

個人的にはシステム開発でバックエンドでメインで使っている**java**、フロントエンド開発で使う**JS**、あとプラスでなんでも屋さんな言語（候補は**Python**）で業務の効率化を図りたいと考えています。

Phase#1と言っているがPhase#2があ

React でmarkdown を表示する方法(コードハイライト、ファイル名表示、画像サイズ変更まで)

[React でmarkdown を表示する方法(コードハイライト、ファイル名表示、画像サイズ変更まで)](https://naoto-kagaya.com/articles/2023-01-24-react-markdown)

https://naoto-kagaya.com/articles/2023-01-24-react-markdown

Reactでreact-markdownを利用し上記サイトを作成した。

# 主な記述内容

– react-markdownの導入及び使い方
– コードハイライトの方法
– 画像サイズを変更する方法

react-markdownの特に画像サイズ変更についてまとまった記事がなかったのでメモがてら作成。

【TS】オブジェクトをマージする際の型定義はPartialを使うと便利

# 結論
オブジェクトをマージする際や上書きする際の型定義は`Partial`を使うと便利です。

## どんな時に使えるの？
たとえば、[TSの公式ドキュメント(partialtype)](https://www.typescriptlang.org/docs/handbook/utility-types.html#partialtype)が提供されているケースでは、`updateTodo`関数が、`Todo`型である`todo1`のオブジェクトに、更新対象の`todo2`のプロパティで上書きする場合が挙げられています。
“`ts
interface Todo {
title: string;
description: string;
}

function updateTodo(todo: Todo, fieldsToUpdate: Partial) {
return { …todo, …fieldsToUpdate };
}

const todo1 = {
title: “organize desk”,
descriptio

js-cookieの使い方【備忘録】

# 概要
バイト先のアプリ開発でデータを一時的に保存したいのですが、LocalStorageだと
なぜか動作しないという問題がありました。
そこで、LocalStorageのように半永久的に残るものではなく
期限付きで削除してくれるものを使いたいなぁとCookieを思い出したので使ってみました?

# 使い方
## 大まかな流れ
大体はLocalStorageを利用する時と同じです。
若干Cookieの特徴があるので、そこだけ使い方が変わるイメージになります！

### Cookieに保存する時
1. JSONに変換
1. Cookieにセット
1. 期限、パスなどの設定

:::note warn
JSONに変換しない場合、`[object Object]`といった謎の形式になってしまい
オブジェクト形式のデータを読み込めなくなるためです。
（valueに複数の値がセットされている場合に “.” で繋ぐことにより値を取得できる性質を利用）
:::

### Cookieから読み出す時
1. Cookieから読み込み
1. `JSON.parse`で変換

## ライブラリの

stateがオブジェクトの時の更新時の注意点とリセット方法について

### stateがオブジェクトの時の更新時の注意点とリセット方法について
stateがオブジェクトの時の更新時の注意点が少しわかりずらかったのでまとめてみた。

完成画像

完成コード
Form.jsx（state更新用関数のchangeName,changeAgeなどにsetObjが①②と２つずつあるがどちらを使用しても良い。）

“`
import { useState } from “react”;

const Form = () => {
const personObj = { name: “John”, age: 20, job: “student” };

const [obj,setObj] = useState(personObj);

// 名前、年齢、職業を入

ラジオボタンによってフォームの入力可能・不可能を動的に切り替える方法

概要

ラジオボタンをいくつか用意して、そのボタンが押された項目だけ入力可能になり、なおかつデータの送信も選択した物のみしたい場合の行い方です。今回はファイルを分けてjavascriptをimportはせず、全てhtml 内に記述する方法を紹介します。

背景

二つの選択肢の内一つを選択してもらい、その内容を回答してもらうフォームを作成しようとして、画面を分けて

１：選択してもらう画面

２：フォームを入力してもらう画面

と分割する手もあったのですが、かっこいいから（動的に画面を表示させたいから）一つの画面で行おうと思い、作成しました。disabled属性をどのように動的に反映させるかを勉強したため、備忘録として記事を掲載します。

内容

HTML

“`html:html

【TypeScript】ブラウザの標準機能だけでPKCE認証のためのコード生成は実装できる

## PKCE対応のためのcode_challenge生成をフロントエンドで行いたい

– PKCE対応のためのコード生成をフロントエンド側で行う必要が出てきた
– sha256のハッシュ化やランダムな文字列生成のためのライブラリは世にたくさんあるが、外部ライブラリを利用しなくとも実装は可能であると分かった
– 具体的にはweb crypto APIというブラウザ内の機能を使う。その説明はこの記事が詳しい
– [Web Crypto APIについて](https://zenn.dev/riku/articles/7e7151b22e0da9)
– 紛らわしいのは、`node.js`にも`cyrpto`というAPIが存在すること
– ここに私はひっかかった。`node.js`の`crypto`のAPIで実装を進めてしまっていた。`node.js`なのでブラウザでは直接実行できない。実行するためには`Browserify`、`streamify`というツールのインストールが必要になってしまう
– `Buffer`を使ったエンコード例の記事がweb上に

【合格体験記】新卒がHTML5プロフェッショナル認定資格Level2 バージョン2.5に合格した

# はじめに
業務経験少しの新卒が該当試験に合格したので、
その際の勉強法等を書きます（一部レベル1体験記と記述重複する箇所があります）

https://qiita.com/tkdayo/items/7d5d63e9fc158ac9c88f

# 概要
公式ページ参照

https://html5exam.jp/outline/lv2.html

# 本人スペック

• 会社員歴半年弱の新卒SEです
• 就業先開発施策内でSpring BootとJS（ES6もそこそこに書ける）、各種マークアップを書いています。基本調べながらちょっと書けるくらい
• 業務外では「Astro」や「React,Next」使ったサーバレスの個人開発に関することの勉強をしています
• 基本情報取得済み、応用情報不合格、Java Silver、Webデザイナー検定エキスパート取得済み、該当試験レベル1取得済み

# 勉強期間
1ヶ月と1週間くらい、毎日2〜3時間

勉強期間はサイトによってまちまちですが、1ヶ月〜2ヶ月あればなんとかなる

_.cloneDeepを葬りましょう

はいさい！オースティンやいびーん！

# 概要

JavaScript・ブラウザのネイティブ機能で回帰的クローンをする方法を紹介します！

それは、[`structuredClone`](https://developer.mozilla.org/ja/docs/Web/API/structuredClone)です。

これは、グローバルで定義されている関数で、現在のEvergreenブラウザ（Chrome、Safari、Edge等）ならサポートされています。

https://developer.mozilla.org/ja/docs/Web/API/structuredClone

## 背景

JavaScript開発においてオブジェクトをクローンすることは常の課題です。

常套手段として以下のES6 Spreadがよく使われます。

“`javascript
const ob1 = { a: 1 };
const ob1ShallowClone = { …ob1 }; // OR Object.create(ob1);
“`

これはいわゆる**Shallow Clon

【JavaScript】引数の記法まとめ

JavaScriptではさまざまな引数の記法があるので備忘録としてまとめておく。

ES2015環境でしか使用できない書き方の場合は見出しに【【ES2015】】と記載する。

# 引数のデフォルト値【ES2015】

引数にデフォルト値を設定する場合は(引数名 = 値)と書くことで設定することができる。

“` sample.js
function argumentSample(num1 = 2, num2 = 5) {
return num1 + num2;
};

console.log(argumentSample());

“`

出力結果
“`
7
“`

デフォルト値には他の引数や関数の結果などを指定することもできる。

・他の引数を指定するパターン

“` sample.js
function argumentSample(aaa = 2, bbb = aaa) {
return aaa + bbb;
};

console.log(argumentSample());

“`

出力結果

“`
4
“`

・関数を結果を指定する

【HTML】 hoge.valueとhoge.style.colorのカラー形式(RGB/HEX変換)

Qiita初投稿です。
HTMLでの\の値の取得で詰まったのでまとめました。備忘録です。

# \について
こちら見てもらえるとわかりやすいと思います。
[https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/color](https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/color)

`hoge.value`値を取得するときは`#rrggbb`の形で、
`hoge.style.color`のときは`rgb(rr, gg, bb)`に変更されます。

# 例
“`html:colorpicker.html

ここの色が変わります