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

GmailのURLをMessage-ID(RFC822形式)で取得するブラウザの拡張機能

# GmailのURLをMessage-ID(RFC822形式)で取得するブラウザの拡張機能
## 0. はじめに
Gmail ユーザーのみなさん。こんにちは。GmailのMessageIDに基づくURLを欲しくないですか？私はほしいです。だから作りました。ツールを作った経緯は次のとおりです。
1. Gmailは探しにくい
Gmail は世界中にはびこっています。しかし、Gmailの検索には難儀しています。「三上さん」から届いたメールを検索しようとして、「三上」と入力すると、数字の３が入ったメールがことごとく引っかかります。「”三上”」とすればまだ良いのですが、そういう問題なのかな？と思います。だから、大切なメールは、URLとして残しておきたいです。
　
2. 他の人とも情報共有できるURLになりうる
RFC822形式の Message-ID は、送信されるとユニークなIDとして記録されます。だから、これに基づいてGmailへのURLを作成することができれば、送信者も受信者も同じURLで参照できます。（「ほら、以前送ったあれ！」を特定できます。）だけじゃなく、メーリングリストの場合には

最近最も人気のあるプログラミング言語


近年、プログラミングの需要は急速に増加しており、多くの人々がこの分野でスキルを磨くことに関心を持っています。その中でも特に人気のあるプログラミング言語は何でしょうか？以下に、最近最も人気のあるプログラミング言語をいくつか紹介します。

Python（パイソン）:
Pythonは、そのシンプルな構文と豊富なライブラリのおかげで、初心者から経験豊富な開発者まで幅広い層に人気があります。データサイエンスや人工知能（AI）、Web開発など、さまざまな分野で広く使用されています。

JavaScript（ジャバスクリプト）:
JavaScriptはWeb開発に欠かせない言語であり、フロントエンドおよびバックエンドの開発に使用されます。ReactやAngularなどのフレームワークやライブラリの登場により、JavaScript

JSカレンダーライブラリ EventCalendar の使い方まとめ

## はじめに
この記事はJSのカレンダーライブラリのEventCalendarの使い方をまとめます。

https://github.com/vkurko/calendar

## この記事の対象者
– JSのカレンダーライブラリで何を使っているか迷っている方
– EventCalendarの使い方を知りたい方

## EventCalendarの概要
カレンダーの表示およびそのカレンダーにイベントを書いたりできるライブラリです。
カレンダーも月ごとに表示したり、1週間ごとに表示するなど、さまざまなカレンダーを扱うことができます。
FullCalendar というカレンダーライブラリにインスパイアされたライブラリで、そのライブラリと同じオプションをそのまま使えるようです。

https://fullcalendar.io/

## EventCalendarのデモサイト

https://vkurko.github.io/calendar/

## 実際に試してみたサンプル
紹介する機能を一通り試してみたサンプルがあるため、実際に動かしたい場合はこちらを参照してください。

ht

「巻き上げ」の誤解【JS】

# はじめに

悪名高き`var`ですが、その理由の一つに「巻き上げ（`Hoisting`）」があると言われています。

知らないと怖い「変数の巻き上げ」とは？

その「巻き上げ」について誤解していたことが多々あったので共有です。

# 「巻き上げ」は公式の用語ではない

https://developer.mozilla.org/ja/docs/Glossary/Hoisting

> 「巻き上げ」は ECMAScript 仕様書で規範的に定義されている用語ではありません。

# `let` `const`の巻き上げ

「`var`ではなく、`let` `const`を使え」とよく言われます。
てっきり、`let` `const`は`var`の欠点-巻き上げ-を持たないものと思っていました。
どうも、そう単純な話でもなさそうです。

> 俗な言い方をすれば、以下のような動作はすべて巻き上げと見なされます。

> 1. スコープ内の宣言行よりも前で変数の値を使用すること。（「値の巻き上げ」）
> 2. 変数がスコープ内の宣言行よりも前で参照しても [`Referen

VSCodeでJavaScript / TypeScirptの未使用import文を自動で削除する

コードを書いてる途中、使わなくなった`import`文をいちいち手動で消すのは面倒ですよね。それを自動で削除する方法をご紹介します。VSCodeに以下の設定をするだけです。

“`json:.settings.json
{
“editor.codeActionsOnSave”: {
“source.organizeImports”: “explicit”
}
}
“`
こうするとファイル保存時に未使用の`import`文を削除し、さらに`import`文の順番を並べ替えてくれます。順番はimport元のファイルパスをアルファベット順に並べているようですね。

指定できるキーは`explicit`以外にもありますので、詳しくはドキュメントをご覧ください。

https://code.visualstudio.com/docs/languages/javascript%5C#_organize-imports

https://code.visualstudio.com/docs/typescript/typescript-refactoring#_org

【JavaScript】Objectのkeyを変数で指定する

オブジェクトのキーを`[変数]`とすると変数で指定できます。

“`js
const key = ‘sampleKey’
const obj = {[key]: ‘sampleValue’}

console.log(obj) // {sampleKey: ‘sampleValue’}

“`

【Javascript】スプレッド構文

公式ドキュメント
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax

配列の要素を関数の引数に一気に渡したり、オブジェクトを作る時に既存のデータをそのままぶち込むことができる。

### 配列操作

#### スプレッド構文を使わずの配列結合

配列の結合を`concat`メソッドで行う例：

“`javascript
const names = [“山田”, “鈴木”];
const emails = [“yamada@example.com”, “suzuki@example.com”];
const ages = [25, 30];

// 各情報の配列をconcatメソッドで連結
const combinedInfo = names.concat(emails).concat(ages);
“`
直感的でわかりやすいですが、複数の配列を結合する場合には、concatを繰り返し使用しなければならないから、冗長になりやすい。あとconcatメソッドは新しい

Babylon.js の新バージョン 7.0 の情報を公式記事から少し取り出してみる（＋α）

「[Babylon.js](https://www.babylonjs.com/)」の新バージョンである 7.0 の情報を見てみようと思い、公式の記事から情報を少し取り出してみました。
それと合わせて、リンクのリストのみですが掲載になりますが、公式以外の日本語で書かれた記事を少し掲載してみます。

## Babylon.js 7.0 について
今回の記事で取り扱う内容は、以下の Babylon.js公式のポストでも紹介されている、最近リリースされたばかり（※ 2024年3月リリース）の新バージョン「Babylon.js 7.0」です。

We are proud to announce that Babylon.js 7.0 has officially been released! The next step forward in advanced web rendering is here! https://t.co/bMTMkSWiHt#babylonJS7 #gamedev #indiedev #IndieGameDev #Metaverse #3D #webgl #webGPU #webdevelopment #gamedevelopment… pic.twitter.com/hRm7dGvwz6

— Babylon.js (@babylonjs) March 28, 2024

### 公式の情報
Babylon.js 7.0　について、公式からは以下の記事や動画などが公開されています。

●Introducing Babylon.js 7.0. Our mission is to build one of the most… | by Babylon.js | Mar, 2024 | Medium
　https

【Vue.js】レスポンシブ/画面のサイズによってコンポーネントを切り替える方法

### はじめに

こんにちは、Mottyです。最近Vueを業務で扱うことになったので、関連した項目を書き知るしていこうと思います。
今回はレスポンシブデザインについてです。

### 複雑なレスポンシブデザイン

レスポンシブデザインは画面のサイズに応じて最適な形にコードを整えるデザインです。これによってスマホやPCのような画面サイズの異なる媒体でもストレスなく閲覧でき、UXが向上することが期待できます。
#### Script部分

単純に横並び表示を縦にするのであればflex containerのプロパティを変えればよいですが、表示形式がかなり変わるなどの複雑な形になると、コンポーネントもしくはHTMLブロック単位でがらっと切り替えたほうがいいケースもあるかと思います。

windowのサイズが768以下かそれ以上かをbool型で受け取る変数を用意します。
ウインドウサイズの変更を感知し、画面サイズが大きいか否かの情報を常に返し続けるよう、イベントリスナーに登録します。
またtemplateにも反映されるので、変数の値はref()関数で監視します。

“`Vue

テキストをロジックごとにフィルタリングする

テキストをロジックごとにフィルタリングしたいときがありますね。日本語が怪しい気もしますが、あることにします。
私は、青空文庫で`「` と `」` の数が不釣り合いな文章を発見するためにしました。
高校数学の集合論の思い出話をするよりサンプルコードを読んでもらう方が早いと思うので読んでください。

– [尾崎紅葉 金色夜叉](https://www.aozora.gr.jp/cards/000091/files/522_19603.html)

## サンプルコード

“`js
/**
* 引数の配列に基づいてテキストをロジックごとにフィルタリングする関数。
* @param {string[]} texts – フィルタリングするテキストの配列。
* @param {string[]} names – フィルタリングに使用する名前の配列。
* @returns {Object} – フィルタリングされたテキストを含むオブジェクト。
* – `and`: すべての名前が含まれるセクション。
*

iosあるある!「HTML&CSSでinputエリアにfocusした際、fixedが効かない問題」がReactコンポーネントでも発生したから解決する

# エラー概要

エラー概要参考記事はこちらをご覧ください
https://qiita.com/hibikikudo/items/2cb10536f4816d304f54
https://stackoverflow.com/questions/29001977/safari-in-ios8-is-scrolling-screen-when-fixed-elements-get-focus

簡単に画像で説明すると以下のような感じです

### デフォルト
]

### バグ発生時
![image_6487327.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3492127/6cddb1ea-0426-8277-94d8-ce45e1981046

TDZによるエラー【JS】

# はじめに

未知の仕様がありましたので共有です。

“`js
const f = () => console.log(x)
const x = ‘xx’

f()
“`

このコードを実行すると、`const x` …つまり、`xx`と表示されます。
`const f`の定義時点では`x`が何者か定義されていませんが、これでも動くんですね。
（~~これはこれで、エラーにしてもいいのでは・・・？~~）

では、これではどうでしょう？

“`diff_javascript
const f = () => console.log(x)
– const x = ‘xx’

f()
+ const x = ‘xx’
“`

`const x`が`f()`の実行時に定義されていません。
エラーが発生するでしょう。
`ReferenceError: x is not defined`（`x`が定義されてないよ）と表示されるはずです。

答え

“`
ReferenceError: Cannot access ‘x’ befor

ServiceNowのScript Include（スクリプトインクルード）の色々な記述方法を調べた

# はじめに
ServiceNowで個別機能開発などのカスタマイズを行う際にライブラリ的な使い方ができる機能としてScript Includeがあり、公開情報（Docs）に以下が記載されている通り独自のクラスや関数を定義して再利用を可能にします。

>Script Includeは、サーバー上で実行されるJavaScriptを保存するために使用されます。サーバースクリプトで使用するJavaScript関数とクラスを保存するためのScript Includeを作成します。各Script Includeは、オブジェクトクラスまたは関数のいずれかを定義します。

具体的な使用方法はDocsの同ページに記載があり、Script Includeを新規作成する際に、名前を指定するとスクリプトフィールド上にテンプレートが自動入力されるのでプロトタイプに関数などの処理を記述しますが、それ以外にどの様な記述であれば動作するのかが気になり調べてみました。
※ServiceNowでコードを書くことはありますがJavaScript自体は素人ですのでツッコミどころは多数あるかと思いますがご容赦ください。

#

スクリーンショット機能を実装することになったのでライブラリを調べてみた

開発中のプロジェクトでスクリーンショットを撮る機能を実装することになりました。ブラウザの機能でやってく(ry…と思いましたが。スクリーンショットを自力で実装するとコスト高そうなのでスクリーンショットが撮れるライブラリを探したときのメモです。

## html2canvas

スクリーンショットを撮るときにはよく使われているライブラリのようで、検索すると結構記事が出てきます。この記事の執筆時点で29.7kスターがついており、npmのサイトで確認すると1週間で100万以上ダウンロードされていました。 [公式ドキュメント](https://html2canvas.hertzen.com/documentation)にも記載がありますが注意点として100％正確ではない可能性があったり、同一オリジンではないと画像が読み込めなかったりするようです。

まずはライブラリをインストールします。
“`shell
npm i html2canvas
“`

つづいてスクリーンショットを撮るためにボタンを設置します。
“`html:index.html

Node single executable applicationsでnpmパッケージを使う

[Node single executable applications](https://nodejs.org/api/single-executable-applications.html) を使うと簡単にNodeのスクリプトをexe化できる。

しかし、その名の通り、exe化できるのは1つのJavaScriptのみ❗
つまり、 `import` で自作ライブラリを使うことはもちろん、npmパッケージも使えないのだ❗
なんて限定的な機能なんだ❗クソッ❗

…とまぁ、分かってる人はこの時点で「アホだな〜」と思われてると思う。

そう、解決策は簡単で、バンドラーを使えば良い。
WebPackとか、esbuildとか、そういうやつ。
バンドラーは複数のJavaScriptファイルを1つにまとめてくれるので、
SEAを作るときにはもってこいってわけだね。

っていうか、ドキュメント↓にそう書いてあるんだわ。ちゃんと読もう。

> Node.js supports the creation of single executable applications by allowing the

クライアントのpako.inflateがエラーになっちゃう対応

## TL;DR
サーバでpako.deflateして送信したデータが、クライアントでpako.inflateしようとすると「incorrect header check」エラー、または「undefined」となる問題の対策

:::note info
■サーバ側
サーバでpako.deflateは “raw:true” しろ
pako.deflate(JSON.stringify(data), { encoding: “utf-8”, raw: true });

■クライアント側
base64をatobで変換した文字列をカンマ区切りでUint8Arrayを作成してpako.inflateに渡せ
inflateオプションは{ to: “string”, raw: true }としろ
:::

## 背景
サーバでNode.jsを使いSSE方式で所定のクライアント群にデータを送信する
送信するデータはJSONでpako.deflateで圧縮し、BASE64でクライアントに送信する

Server JSON → pako.deflate → BASE64
↓
Client BASE64

#Javascript #プログラミング #Tetris # テト譜をテキスト化する #Chrome 拡張機能

**本内容を利用した場合の一切の責任を私は負いません。**

# 機能
タイトル通り。
テト譜は下記のサイト。
https://fumen.zui.jp/
内容を引用する時にスクショだと画像で容量を食ったり扱いにくいためテキスト化する。
色は表現できないが地形はわかる。
落ちてくるミノはよく使われるアルファベットで示せば、全て文字情報で扱える。
(棒はI、四角はOとか。)
テト譜は時系列があるが、これは簡易的なものなので対応していない。


# バージョン
* OS
OS 名:Microsoft Windows 10 Home
OS バージョン:10.0.19045 N/A ビルド 19045
システムの種類:x64-based PC

* Chrome:バージョン: バージョン: 123.0.6312.122（Official B

【JavaScript】クロージャとは？

## はじめに
LeetCodeの「30Days of JavaScript」の第二問「[2620.Counter](https://leetcode.com/problems/counter/description/?envType=study-plan-v2&envId=30-days-of-javascript)」を解いています。

この中で「クロージャ（Closure）」という概念が登場しますが、初見だったので簡単に性質をまとめます。

誤りや補足事項があればぜひ教えてください！！

## クロージャ（Closure）とは？
そもそもJavaScriptにおいて、関数は同じスコープ内外の全ての変数に対してアクセスできます。

https://jsprimer.net/basic/function-scope/

このスコープは、関数の「レキシカル環境（lexical environment）」と呼ばれます。

そして、関数とこのレキシカル環境の組み合わせのことを「クロージャ（closure）」といいます。

## クロージャの具体例
JavaScriptでは、関数内に関数を宣言

セリフでアニメのシーンを検索できるサイトを作った

初投稿です。

「後藤さんギターうまいのね～」とか、印象に残るセリフをもう一度聞きたいけど、どこだったのか覚えているわけがない。探すのめんどくさい。でも聞きたい！

そんなときは [AnoScene](https://anoscene.com)

セリフを入力して…検索すると…


該当する動画と時間が見つかる！


もちろん「ぼっち・ざ・ろっく」だけではなく最近の有名どころは入っています。呪術廻戦、マッシュル、フリーレン、薬屋、SPY FAMILY、かぐや様、推しの子、etc…

サイト公開時点で約30シリーズ、1200動画が入ってました。頑張った。これからも増え続ける予定です。

【Laravel6/JavaScript】javascriptを使う方法

## 問題
LaravelでJavaScriptを使いたい

## 方法(一番上が特に分かり易かった)
https://qiita.com/chin-zabro/items/36ecd1c1022391b3955a

https://qiita.com/jefftech/items/13175e34651ace96eab6#javascript%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E4%BD%9C%E6%88%90

https://nebikatsu.com/7231.html/