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

テキストURLをリンクにする_拡張機能

テキスト形式のままのURLをクリックできるようにリンクをつけたいので、やってみました！

# 拡張機能
これを拡張機能で追加して、ブラウザから開くためには、カスタムURLスキーマというので開けるようにしました。
NativeMessagingといやり方もあるようですが、ローカルアプリとのメッセージのやり取りがよくわからなくて諦めました。。。
“` js
// 対象にする箇所
const qs = document.querySelectorAll(“.Reference, .multiple-lines”);
// URL対象を抽出する正規表現
const exp =
/((\\\\)[^\<\>“\n\r]*)/gi;
for (let i = 0; i < qs.length; i++) { console.log(qs.item(i).textContent); // aタグを追加する const r = qs .item(i) .textContent.replace(exp, "$1“);
qs.

Reactで簡単なボタン配色確認ツールを作成する

### はじめに
Reactを学習していて、初心者向けチュートリアルを一周したので一度簡単なアプリを作ってみようと思い作成しました。
初学者のため、間違っている記載があればご指摘いただけると幸いです。

### アプリの概要
背景色と文字色のカラーコードを入力して、「色を変更」ボタンを押すと「サンプル」ボタンの配色が変わるというシンプルな機能です。


### App.js
“`javascript:App.js
import ‘./App.css’;
import React, { useState } from ‘react’;
function App() {
const [inputBackgroundColor, setBackgroundColor] = useState(‘#0f0a95’);
const [in

node:xx-busterのDocker ImageでParcelを実行すると「Error: /lib/aarch64-linux-gnu/libc.so.6: version `GLIBC_2.29′ not found 」と出る

# ストーリー
Dockerイメージで作ったコンテナ内で, Parcelを使ったファイルのバンドルを行おうとすると、
“`
Error: /lib/aarch64-linux-gnu/libc.so.6: version `GLIBC_2.29′ not found (required by /usr/local/share/.config/yarn/global/node_modules/@parcel/rust/parcel-node-bindings.linux-arm64-gnu.node)
at Module._extensions..node (node:internal/modules/cjs/loader:1327:18)
at Module.load (node:internal/modules/cjs/loader:1091:32)
at Module._load (node:internal/modules/cjs/loader:938:12)
at Module.require (node:internal/modules/cj

Remix入門⑤ – Remixでのフォーム処理どうやるん？

おっす！今日はRemixでのフォーム処理がどんなもんか話してみよか。
WEB開発でのフォーム処理って、めっちゃ大事やけど、ちょっと難しくて面倒やったりするよな。でもな、Remixを使えば、これがぐっと楽に、かつ効率的にできるようになるんやで。

### Remixでのフォーム処理って何が違うの？

Remixでは、フォームの送信やバリデーションをサーバーサイドで処理することができるんや。これによって、フロントエンドでの複雑なJavaScriptの処理を減らすことができるし、セキュリティも強化されるんや。さらに、ユーザー体験も向上するで。

### サンプルコード: お問い合わせフォーム

“`jsx
// app/routes/contact.js
import { useActionData, redirect } from “remix”;

export let action = async ({ request }) => {
let formData = await request.formData();
let email = formData.get(“ema

Remix入門④ – Remixでのデータフェッチ、どうやってんの？

おっす！Remix入門シリーズも今回で４回目やで！
今日はRemixでのデータフェッチングについて話してみよかー。
データフェッチってなんや？どうやって実装するんや？って思ってるやろ？今回はその辺をわかりやすく説明していくで！

### Remixでのデータフェッチって？

Remixではな、ルートに対応するコンポーネントでデータをフェッチするんや。これによって、ページごとに必要なデータをサーバーサイドで取得して、ページを構築できるんやで。これができると、初回のページ表示がめっちゃ速くなるんや。

### サンプルコード: データフェッチの基本

“`jsx
// app/routes/posts.js
import { useLoaderData } from “remix”;

export let loader = async () => {
let response = await fetch(“https://jsonplaceholder.typicode.com/posts”);
let posts = await response.json();
ret

Remix入門③ – Remixでのルーティング、どんな感じや？

おっす！今日はRemixでのルーティングについて話してみよか。
Remixのルーティングって、実は結構特別やねん。なんでそんなにええのか？今回はその辺をわかりやすく説明していくで！

### Remixのルーティングって？

Remixでのルーティングは、直感的で使いやすいんやで。URLに応じてどんなコンポーネントを表示するか、そういうことを簡単に設定できるんや。データフェッチングもルートと結びつけられるから、ページごとに必要なデータをサーバーサイドで取得できるんやで。

### ディレクトリ構造のサンプル

Remixのルーティングを理解するには、ディレクトリ構造を見てみるのが一番や。以下は、典型的なRemixアプリのディレクトリ構造の例やで。

“`
app/
├── routes/
│ ├── index.js
│ └── about.js
└── components/
└── Header.js
“`

この構造でな、`routes` ディレクトリの中に各ページのコンポーネントが配置されてるんや。たとえば、`index.js` はトップページ、`abou

Remix入門② – RemixのSSRってなんでええんや？

おっす！前回はRemixの基本をちょっと触れたけど、今日はRemixのSSR（サーバーサイドレンダリング）について話してみよか。
SSRってなんやろう？って思うかもしれんけど、ここではゆる～く、分かりやすく解説するで！

### SSR（サーバーサイドレンダリング）ってなんやねん？

SSR、これは「サーバーサイドレンダリング」の略やで。WEBページのコンテンツをサーバー側で先に作ってしまって、それをユーザーに送る技術のことや。従来の方法やと、ブラウザがJavaScriptをダウンロードしてからページを作り始めるから、表示までちょっと時間がかかるんやけど、SSRを使うとサーバー側でほぼ完成品を送れるから、表示がサクサク早くなるんやで。

### なんでRemixのSSRがええんや？

1. **めちゃくちゃ早いページロード**: RemixのSSRは初回訪問時のページロードをめっちゃ早くしてくれるんや。ユーザーは待ち時間ほぼゼロでサイトにアクセスできるんやで。
2. **SEOが強化される**: SSRやと、検索エンジンがページのコンテンツをインデックスしやすくなるんや。だから、Re

Remix入門① – Remixって何やねん？

おっす！今日は最近話題の「Remix」について話してみよか。React好きやったら、絶対この新しいフレームワーク気になるやろ？けどな、「ただのReactフレームワークやないで」という話。Remixはサーバーサイドレンダリング（SSR）を駆使して、WEB体験をめっちゃ変える力を持ってるんやで。それじゃ、Remixの世界への扉をちょっとだけ開けてみよか。

### Remixってどんなんやねん？

まず、Remixって言うても「リミックス」とか「DJみたいやな」とか思うかもしれんけど、これReactベースのフロントエンドフレームワークやねん。従来のSPA（シングルページアプリケーション）とはちょっと違って、ページのロードがえらい早いし、SEOにも強いし、開発者にとっても使いやすい構造を持ってるんや。

### なんでRemixが注目されてんねん？

1. **めっちゃ早いページロード**: SSRのおかげで、初回アクセス時のページロードが早いんや。ユーザー体験に直結する大きなポイントやで。
2. **SEOの強化**: SSRによって、検索エンジンがコンテンツをインデックスしやすくなるん

Expected content key aca33b21dc11252c to exist / Parcel実行時のエラー

# 状況
– Docker
– node:node:20.11.0-bullseye-slim
– pracel

このイメージで作られたコンテナに入り、`npx parcel build` を実行すると発生

# ファイル構造
“`
.
├── build
│ └── なし
├── node_modules
│ ├── …
├── src
│ └── index.ts
├── .parcel-cache
│ └── モロモロ
├── Dockerfile
├── tsconfig.json
├── package.json
└── yarn.lock
“`

# 事象
以下のコードを実行時に生じたエラー
“`bash
npx parcel build ./src/index.ts –dist-dir ./build
“`

# 解決策
`.parcel-cache` を削除することで動いた。

# 参考
– [parcel watch error: Expected content key 2d39cdf7c618ab5b to exi

【TypeScript】any型についてわかったこと【初心者向け】

# はじめに
皆さんTypeScriptの`any型`についてどの程度知っていますか？

私は開発にTypeScriptをよく使用します。
しかし、一般的に`「any型を使用することは敗北である!」`と言われることが多いので、正直なところ`any型`には良い印象を持っていません。

https://qiita.com/uhyo/items/aae57ba0734e36ee846a

実際、私はエンジニアとして、日々の開発業務において`any型`を使用することを極力避けています。
インターフェースの定義や型のチェックには常に注意を払い、正確な型付けを心掛けています。
`any型`を見つけた際には、適切な型を特定するために尽力しています。
しかし、今まで`any型`について深く調査したことはありませんでした。そこで、今回`any型`について改めて調査し、得られた知見を以下にまとめます。

# any型とは
TypeScriptはしばしばJavaScriptのスーパーセットと表現されます。
TypeScriptには独自の概念や型がいくつか存在し、その中に「`any型`」があります。簡単に言う

半角カタカナが含まれているか判定する

入力されたデータの中に半角カタカナが含まれているかチェックするコードを書きましたので復習を兼ねてサンプルへまとめたいと思います。
詳しい正規化表現については下記のサイトを参考にしました。

#### 参考サイト
-「JavaScript 正規表現まとめ」
https://qiita.com/iLLviA/items/b6bf680cd2408edd050f
-「全角・半角カタカナのバリデーションルール設定方法（正規表現）」
https://qiita.com/nasuB7373/items/17adc4b808a8bd39624d

# サンプル関数
“`Typescript:sample.ts
const containsHalfSizeKana = (text: string): boolean => {
// 文字列として入力されているかチェック
if (typeof text != ‘string’) {
return false
}
// 半角カタカナが含まれているかチェック
const halfSizeKana_regex = new Reg

AES暗号化をPythonとJavascriptでやってみる話（備忘録）

# この記事の大まかな内容
PythonのFlaskを使用してWEBアプリ開発をしていたのだが、ローカル環境で動かす専門のWEBアプリのため、SSL証明書が取得できないし、
OpenSSLを使用してもいいが、chromeブラウザくんは警告を出しまくるし、何より、常に危険マークがつくのは気に食わないということでせめてAES暗号化をして通信をしてあげたいと思ったわけです。

# 注意点
– 個人の備忘録なので、あまり参考にならないと思います。
– この記事がきっかけになるいかなる損害も責任を負いません
– セキュリティ上危険と言われる可能性があるので、公式のドキュメントを参照してください
– WebCryptoAPIを最初使っていましたが、非SSL時に使用できないです！

WebCryptoAPIのドキュメント読んでたらド正論書いてあって笑ったｗ

”自分のしていることが分からない場合は、おそらくこの API を使用すべきではないでしょう。” 【LINE✖️GAS】はじめてのGoogleAppsScript

この記事の内容を理解すればこんなLINEBotが簡単にできちゃいます！！

# 前々準備
1. GoogleDriveにログイン
1. [LINE Developersにログイン](https://developers.line.biz/ja/services/line-login/)
1. [OpenAIのAPIクレジット登録](https://qiita.com/okinakamasayoshi/items/247c58342e5cf15c7bcd)

# 前準備
1. [LINE公式アカウント作成](https://qiita.com/okinakamasayoshi/items/bf9593b2af20148c4d19)
1. [OpenAI_key取得](https://qiita.com

元記事を表示

JavaScript: AlphamericHTMLを破改する!

[AlphamericHTML](https://web.archive.org/web/20100625005602/http://nurucom-archives.hp.infoseek.co.jp/digital/Alphameric-HTML.html)とはかつてweb素材の圧縮で一世を風靡しまくったかどうか定かではないかもしれないとされる程の伝説のprogramです。browser上で動作し, 圧縮率, 動作速度。使い勝手どれをとっても文句のつけどころがないもの **でした**。
たださすがに約20年前の化石ですので、もはや現代の巨大過ぎるweb素材の圧縮には実用的ではなくなりました。まあそんな歴史的裏話はどうでもいいかもしれないので、そろそろ本題にすり替えていきましょう。
## 仕様
* 文字列(Unicode)を`[0-9A-Za-z_]`の63種からなる文字列に変換
* LZ77系の圧縮法を採用(圧縮率60～70%)。無圧縮も可。
* 辞書(滑走窓)819文字
* 一致長3～64文字
* 半角空白1024個のpreset辞書搭載

圧縮関数
“`
EncodeAlph

p5.js で手軽にキャンバス全体の色変更： drawingContext.filter で hue-rotate() を利用

過去に、以下の試作をする際に使った方法に関する記事です。
（以下は、カメラ映像を表示させたキャンバスに、炎などのエフェクトを描画したキャンバスを重畳していて、エフェクトを描画したキャンバスの色を変化させるという処理を行っています）

最近、以下のカスタムシェーダーを使った描画を行う際に、上記で使った方法を用いました。以下では、シェーダーで描画した結果の色を変更する、ということをやっているのですが、冒頭・以下の事例で用いている「draw

Pleasanterで、先週とか来月のようなフィルタリングをしたい。

# 前置き
Pleasnaterのサーバスクリプト、[view.Filters](https://pleasanter.org/manual/server-script-view-filters)で実現します。

view.Filter自体はマニュアルに書いてあること以上のポイントはありません。日付のFrom Toをどのように設定するか、主にJavascriptの話がメインになります。

基本的に、操作日「今日」を基準にフィルタを設定していきます。

# view.Filtersの設定とユーティリティ関数

基本となるview.Filtersの設定と、日付項目を所定の形式にするための関数です。Pleasanterのサーバスクリプトに、条件「ビュー処理時」を設定します。

また、事前に各フィルタを有効にするための[ビュー](https://pleasanter.org/manual/table-management-view)を用意し、紐づくview.Idにしかるべきフィルタ日付を設定します。フィルタする項目は、完了日(CompletionTime)です。

今回の例では、以下のようにビ

【Phaser】ゲーム開始時に星を特定の配置パターンの中からランダムで降らせる

# 星の出現パターンをランダムにするやり方

## 解説
“`
create() {
// 星の配置パターンを配列で定義
this.starPatterns = [
// 様々な星の配置パターンを定義
[{ x: 50, y: 0 }, { x: 150, y: 0 }, { x: 250, y: 0 }, /* … */],
[{ x: 70, y: 0 }, { x: 190, y: 0 }, { x: 310, y: 0 }, /* … */],
// 必要に応じてさらにパターンを追加
];

// 星を格納するためのグループを作成
this.stars = this.physics.add.group();

// ランダムにパターンを選択
let selectedPattern = Phaser.Utils.Array.GetRandom(this.starPatterns);

// 選択されたパターンに基づいて星を作成し、グループに追加

長方形の逆透視投影

次の図は透視投影された長方形とします。

_{内側の四角形は立体感を出すための模様です。全てテキトーに描いたので正確な投影図ではありません。}

頂点 $p_{n=(1,2,3,4)}$ の画面上の座標を $ p_n \left( s_n , t_n \right) $ とします。

対角線の交点 $q$ の座標

“`math:
\begin{eqnarray}
q & = & \left( s_q , t_q \right) \\
s_q & = & \frac{
\left( s_1 t_4 – s_4 t_1 \right) \left( s_2 – s_3 \right) –
\left( s_2 t_3 – s_3 t_2 \right)

TRPGダイスツール再現してみた

　入社して10か月、高校生のころはよくクラスの人たちと
夜な夜なTRPGのセッションをしてたな…などと学生の頃を思い出して
少しじんわりしている今日この頃です。

会社でJSについて学んでいる中でランダムな数値を取得する、
Math.random() という関数が登場し、TRPGのダイスツールを再現できるのでは？
と思いましたので息抜きがてら作っていきたいと思います。
## TRPGとは？
各プレイヤーが自分で作ったキャラクターを演じ、
プレイヤー同士で会話しながら物語を勧めていく対話型のゲームです。
その過程でいろいろな種類のサイコロを振るダイスロールの機会があり、
その際に使用するツールとしてダイスツールと呼ばれるものがあります。
## Math.random()
Math.random() 関数は、 0 以上 1 未満の範囲で
小数点以下を含むランダムな数字を返します。
ダイスツールを作るうえで外すことのできない要素になります。
## 作成目標
ダイスツールを作成する上で欲しい要素として、
TRPGではCoC方式で主に遊んでいたので、
100面ダイスを振る際の達成値の設定、判定の

[備忘録]JavaScriptのオブジェクトの共有渡しについて

## JavaScriptの共有渡しについて
少ししたら忘れてしまいそうなので、忘れないうちに自分なりにまとめておきます。JS初心者にとって少し混乱する内容だと思います。頑張って理解しましょう！

## コードで説明
memoryは環境変数として宣言しているとします。これはメモリ内を模したオブジェクトだと思ってくれて大丈夫です。
“`js
/**
* 初期のメモリ構造
* memory
* {
* a: undefined,
* b: undefined
* }
* これから使うa, bという値はわかりやすくするために入れてあります。本来は何もありません
*/

const a = [1, 2, 3, 4, 5];
// memory内に新しい値を追加し、[1, 2, 3, 4, 5]を代入、その座標をaに代入する。
// ここではmemory[value]とする

/**
* この時点でのmemoryの構造
* memory
* {
* value: [1, 2, 3, 4, 5],
* a: m