Storybookのtitleタグやfaviconを無理やり変更する

Storybookで[自作のライブラリのドキュメントサイト](https://phavuer.laineus.com)を作ったのですが、そうなると当然titleタグやfaviconを独自のものに変更したいわけですが、正規の設定ではできないっぽい？ので無理やり変更しました。

# 初期レンダリング時のtitleタグを変更

index.htmlに静的に設定される初期レンダリング時のtitleタグですが、どうせ直後にStorybookによって動的に変更されるため、あまり意味はありません。

ただ、シェア時などにシェア先のボットが読みに来る際は、js実行前の静的なhtmlを参照するため、こちらも一応変更しておきたいです。

Storybookの設定でどうこうしようと考えるのはやめて、ビルドされて生成されたhtmlファイルを書き換えちゃいましょう。

htmlファイルを読み込んで、titleタグ部分を文字列置き換えして上書きするスクリプトを作成します。

bashでもなんでもいいんですが、今回はnode.jsで作成しました。

“`js:update-title.js
import fs

WebビューアでJavaScriptを実行をようやく使ってみた。

## WebビューアでJavaScriptを実行をようやく使ってみた。
今回は、19で新登場した[webビューアでjavascriptを実行](https://help.claris.com/ja/pro-help/content/perform-javascript-in-web-viewer.html)をようやく使っていきたいと思います。
まず初めにwebビューアでjavascriptを実行をGoogle先生で調べてみると、自作Formに値を入れて、Webビューアから値を戻す。
といった内容が広く一般的に書かれています。

あんまりこんなこと言いたくないんだけどね。
いやそれどこのタイミングで思ってどこで使うん。
※個人的な主観の為、気分を害された方には心よりお詫び申し上げます。

なので今回は、自分で使うタイミング作ってみました。

## ヤマト運輸で送り状作ります！
え？そんな急な…
~~私、送り状作る仕事してないから、そんなん言われてもピンとこんわ。~~
特段深い意味はないよ。
過去のサンプル探してたら、それしかなかったんだ。

皆様[ヤマト

便利ページ：plus codeのエンコード・デコード

GoogleMapで見かけるようになったPluscodeをエンコードして緯度経度を算出したり、その逆をしてみます。

「[便利ページ：Javascriptでちょっとした便利な機能を作ってみた](https://qiita.com/poruruba/items/6c67c7eef34ed302feb3 )」のシリーズものです。

Pluscodeは、位置情報(緯度経度)を短縮した文字にエンコードしたコードをいいます。
GoogleMapでは以下の部分です。


2種類のエンコード方式があります。

* Full：少々長いコードですが、緯度経度の値を表します。
例：8Q7XFJ3V+25

* Short：少々短いコードですが、狭い範囲しか位置を特定できません。したがって、どこの場所の狭い範囲なのかおおよその位置を別途町名等で補います。こちらがGo

今まで投稿したQiita記事を振り返りたい

## 目次
* [概要](#概要)
* [構成](#構成)
* [実装内容](#実装内容)
* [実行結果](#実行結果)
* [今後](#今後)
* [参考資料](#参考資料)

## 概要
Qiitaを始めて1年ぐらいたったので、今まで書いた記事を振り返ろうと思ったが、今だと情報が少ないので細かい振り返りは断念した。
なので、今年から記事の閲覧数等を日や月単位で取れるようにGASを書いておいて、
また来年振り返るまでの準備をした（もしくは準備中）の話になります。
※GASは一旦日次で動かそうと思います。

#### とはいえ今できる振り返り
今までの記事(総数6件)の閲覧数の平均は1500~2000の間ぐらいで、いいね数とストック数の平均も1と多くなかった。
いいね数が0だけど閲覧数が3200ぐらいの記事があり、それが閲覧数トップだったのが意外でした。

改善点を[LAPRAS](https://lapras.com/)のAIReviewで確認したところ、もっと説明を追記する必要がありそう。
確かに画面キャプチャとリンクが多かったかなと思うので、次回からもう少し自分の説明を追加しよ

[TypeScript]constとreadonlyの違い

## constとreadonlyの違い
JavaScriptでは、constで宣言した変数は代入不可になります。
TypeScriptではオブジェクトの型のプロパティにreadonly修飾子をつけると、そのプロパティが代入不可になります。

## constは変数への代入を禁止にするもの
constは変数への代入を禁止するもの。例えば、constで宣言されたxに値を代入しようとすると、TypeScriptではコンパイルエラーになり、JavaScriptでは実行時エラーになります。

“`ts
const x = 1;
x = 2;
// Cannot assign to ‘x’ because it is a constant.(定数であるため、’x’ に代入することはできません。
“`
このように、変数そのものに代入をすることはできません。
以下のように、変数のプロパティへの代入は許可されています。
“`ts
const x = { y: 1 };
x = { y: 2 }; // 変数そのものへの代入は不可
x.y = 2; // プロパティへの代入は許可
“`

##

【JQuery,Ajax,PHP】JQueryで非同期通信（簡単な仕組み～コード）

ajaxを実装しようとしたのですが、仕組みからコードまでまとめられているところがなかったため、自分のためにもメモしておきます
参考になれば幸いです

# 前提確認
Jqueryはjavascriptの集合
意外とこれを勘違いしている方もおおいのではないかなと思いました
余談ですが、私もはじめのころは勘違いしていました、、、

# そもそもAjaxって？
Asynchronous JavaScript + XMLの略
Asynchronous：非同期
だから、簡単に言うと
「JavaScriptを使って非同期通信を行う仕組み」

# もう少し詳しく
Javascriptの特徴
基本的にメインスレッドで実行される
（メインスレッドでは、javascriptの処理の他に画面のレンダリングなども行っている）
　
+ 同期処理
サーバーにリクエストを送ったら、レスポンスが返ってくるまで次の処理はできない
（メインスレッドで処理がされるため）
　
+ 非同期処理
サーバーにリクエストを送ってレスポンスが返ってきていなくても、画面上での別の操作ができる
（リクエスト処理を一度バックグラウンドに移す（

Node-REDのノードをつくる手順

Node-REDのコントリビュータの横井一仁です。今回は、[公式サイトに掲載されているサンプルノード](https://nodered.jp/docs/creating-nodes/)をもとに、Node-REDのノードを自作する手順について説明します。
現在、Node-REDは月あたり15万回ダウンロードされており、急速に普及しています。また、[reTerminal DM](https://qiita.com/kazuhitoyokoi/items/ecf60f30a15457d48c2b)などの産業向けRaspberry Piの標準ソフトウェアにもなっています。Node-REDが普及が進んでいることの理由の1つとして、「ノードを自由に登録できる」ことによるコミュニティの力が影響していると考えます。現在、[フローライブラリ](http://flows.nodered.org)には、約5000個のノードが登録されており、様々な企業が自社のサービスの利用促進のためにノードを提供しています。
また、Node-REDのユーザ層は、コードが書けないユーザの方が大きく拡大するポテンシャルがあります

【JavaScript】URLからクエリパラメータを削除する方法

以下のように記述することでURLからクエリパラメータを削除できます。

“`js
const url = new URL(window.location.href) // URLを取得

history.replaceState(”, ”, url.pathname) // URLからクエリパラメータを削除
“`

https://developer.mozilla.org/ja/docs/Web/API/History/replaceState

JavaScript学習の記録2

# はじめに
前回に続いて，JavaScriptの学習内容をアウトプットします．

# オブジェクトの省略記法
オブジェクトのプロパティと変数が同じ名前の場合，変数の部分を省略してもよい．

例
“`javascript
const myprofile = {
name:name,
age:age,
}
“`
　↓
“`javascript
const myprofile = {name, age}
“`

# スプレッド構文
「…」を使用する構文で，配列やオブジェクトに対して使用する．配列・オブジェクトの中身を順番に展開して，処理していくもの．
“`javascript
const arr = [1, 2];
console.log(…arr);
“`
↓　実行結果
“`
1 2
“`

### スプレッド構文を使って配列を結合する
“`javascript
const arr1 = [10, 20];
const arr2 = [30, 40];

const arr3 = […arr1, ..arr2];
console.log(ar

プログラマーが落ち着かなくなるコードを書いてみた

どうもこんにちはAtsu1209です。
今日はプログラマーが落ち着かないコードを書きます。

# 奇数偶数
今日は例として1~10の間で入力された数を
奇数偶数で判定するコードを書きます。

# HTML
まずはコードを書く前に、HTMLを書きます。

“`html:index.html

1~10の数字を入力

判定


“`

# JS

ここからコードを書きます。

“`javascript
c

[TypeScript]ジェネリクスについて簡単にまとめた

# ジェネリクスとは
　ジェネリクスとは、**型引数を受け取る関数を作る機能**のことです。
ジェネリクスはTypeScriptプログラミングにおいて欠かすことができない機能の一つです。
例えば、以下のように書くことができます。
“`sample.ts
type User = {
age: N;
};

const userAge: User = { age: “25” };
const userAge2: User = { age: 25 };
console.log(userAge);
console.log(userAge2);
“`
このように、引数の中身(N)を「age」の型定義に適用させることができます。
これが、以下のようにするとコンパイルエラーとなります。
“`sample.ts
type User = {
age: N;
};

// コンパイルエラー↓
const userAge: User = { age: “25” };
// コンパイルエラー↓
const userAge2

【JavaScript】分割代入

### 分割代入とは

分割代入とは、配列/オブジェクトを分解して、要素/プロパティの値を個々の変数に分解するための構文である。

### 分割代入 (配列)
代入先変数全体をブラケット[…]でくくる。

#### 配列要素と変数が同じ
左辺に要素の数だけ変数を列挙する。

“`javascript
const data = [1, 2, 3, 4, 5]
const [x0, x1, x2, x3, x4 ] = data
console.log(x0, x1, x2, x3, x4)
“`

“`javascript:実行結果
1 2 3 4 5
“`

#### 配列要素と変数の個数が異なる
左辺変数と右辺の配列要素の個数が等しくなくても構わない。

“`javascript
const data = [1, 2, 3, 4, 5]

// 配列サイズよりも代入先の変数の個数が少ない場合は、残りの要素は無視される。
const [x0, x1, x2] = data
console.log(x0, x1, x2)

// 配列サイズよりも代入先の変数の個数が多い場合

JavaScript の Segments の使い所を考える

JavaScript の Segments という機能を知りました。

JavaScript って標準 API でこんなこともできるのかhttps://t.co/ckHTlqcium pic.twitter.com/hrwfgvtF4J

— naporitan (@naporin24690) December 25, 2023

Pop UP Window

「アドバイザー・にゃんこ」

pop

バッククォート(`)で文字列を囲った際のJavaScriptの挙動について

TypeScriptのソースコードを読んでいると、文字列を囲う際に、シングルクォート `'` やダブルクォート `"` ではなく、バッククォート `` ` `` を使うことがあります。

[JavaScript Primer](https://jsprimer.net/basic/data-type/#string) によると
バッククォート`` ` ``で囲んだ範囲を文字列とするリテラルのことを **テンプレートリテラル** と呼ぶそうです。
ES2015から導入されたリテラルで、TypeScriptを書くなら頻繁に目にしてもおかしくないリテラルですね。

## (本題)テンプレートリテラルの主な特徴

1. 複数行の文字列をそのまま書くことができる
2. 文字列内で `${変数名}` と書くと、変数の値を埋め込むことができる

### 1.複数行の文字列をそのまま書くことができる
```JavaScript: sample01.js
`複数行の
文字列を
入れたい`; // => "複数行の\n文字列を\n入れたい"
```

### 2.文字列内で `${変数名}` と書くと、

JQuery の ready の実装

**コメント欄から情報頂きましたのでコメント欄を参照ください**

# JQuery の ready の実装

DIV でもなんでも ready が実行できて追加要素の描画完了時に実行してくれるのでどういう実装してるのかと思ってソース読んだら setTimeout してた

[JQuery 3.7.1 のソース](https://code.jquery.com/jquery-3.7.1.js)

## 一部抜粋
``` javascript
if ( document.readyState === "complete" ||
( document.readyState !== "loading" && !document.documentElement.doScroll ) ) {

// Handle it asynchronously to allow scripts the opportunity to delay ready
window.setTimeout( jQuery.ready );

}
```

## 動作を推測
* setTimeout を呼び出す