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

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

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

## Babylon.js 7.0 について
今回の記事で取り扱う内容は、以下の Babylon.js公式のポストでも紹介されている、最近リリースされたばかりの新バージョン「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://babylonjs.me

【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/

inputタグの画像サンプルを表示する方法

## 問題
Laravelで画像を下記のinputでアップロードするときに
保存前にプレビューを表示させたい
“`

“`

## 方法
https://nyanblog2222.com/programming/javascript/1132/#toc1

## コード
“`profileEdit.blade.php

プロフィール画像更新

↓下をクリックして画像をアップロードしてください

ネストしたループ処理にラベルを貼り、条件を満たしたら抜ける方法（JavaScript）

## ネストしたループから抜けるには
JSのループ（for）から抜けるにはbreak、処理を終えるにはreturnを使えばいいですが、ネストしたループにおいて、特定の条件を満たしたらその全てから抜けるようにするには、工夫が必要です。
その一つの方法がループにラベルを貼る方法になります。

## ラベル付きループとは？
JavaScriptでは、ラベルを使ってループに名前をつけることができます。これにより、通常のループ構造の外側から内側のループを制御できます。ラベルを使用すると、内側のループを外側のループに関連付けることができます。

ラベル付きループは次のように構文されます。
“`
outerloop: for (var i = 0; i < 5; i++) { innerloop: for (var j = 0; j < 3; j++) { if (i === 2 && j === 1) { break outerloop; } console.log('i = ' + i + ', j = ' + j); } } ``` 上記の例では、

【Javascript】公開したライブラリ・パッケージのCDN作成方法

# はじめに

初めまして。エンジニアのkeita_Maxです。

以前ライブラリをnpmに公開する記事を書いたのですが、それをCDNとして読み込むようにするにはどうしたらいいのだろうと調べた結果を書きます。

# JSDELIVER

https://www.jsdelivr.com/

JSDELIVERというものがあるらしいです。

これはNPMに公開しているものなら何でもCDNとして読み込みことができるようなので、実際にやってみました。

# URLを作ってみる

>// load any project hosted on npm
https://cdn.jsdelivr.net/npm/package@version/file

公式にはこのように書いてありました。

`package@version`ここに自分のパッケージの名前とバージョンを記載し、`file`部分には読み込みたいファイル名を記載します。

実際にやってみます。

`https://www.npmjs.com/package/keitamax-flowing-js`

この間公開したパッケージで試し

Node.js（Express）とRenderでLINEログイン機能を実装する

## はじめに
[前回](https://qiita.com/course_k/items/4c7faedf11723af9bb6e)はLINEが用意してくれているデモアプリをつかって、LINEログイン機能を試しました。
今回は、Node.jでの実装を通して、内部でどのような処理をしているのかを確かめます。

### 前提
本記事は以下のことは完了している想定で進めます。
* Node.jsをインストール済であること
* GitHubアカウントをもっていること
* Renderアカウントをもっていること
* LINE関連の設定が終わっていること（設定詳細は[こちら](https://qiita.com/course_k/items/85bf9cfab971cb5b97ee#line%E9%96%A2%E9%80%A3%E3%81%AE%E8%A8%AD%E5%AE%9A)）
* LINEログインチャネルの作成方法がわかっていること（作成方法は[こちら](https://qiita.com/course_k/items/4c7faedf11723af9bb6e#line%E3%83%AD

JavaScript: 圧縮力は大丈夫か?

先日の記事で紹介した[哀れな圧縮力](https://qiita.com/mashuel/items/2353b0b9fe6887c33f41)とやらに多少味付けをして、圧縮力を高めようという企画になります。
手法自体は全く同じです。違いは固定bitから可変bitで符号化する点です。
そのためにRange Coderを使います(桁上がり無しの変形版)。実装は以下のようになります。
“`js
/*
@In: Array/Uint8Array
@m: model size. 0-31
@n: hash size. 0-7
@return: Array
*/
function compress(In,m,n){
// bit encoder
function eBit(P,c,b){
var p=P[c],m=x1+(x2-x1>>>12)*(p>>4);
P[c]+=((b<<16)-p)*15>>9;
// normalize
for(b?x2=m:x1=m+1;!((x1^x2)>>24);x2=x2<<8|255) x1<<=8,Out[o++]=x2>>

【 jQuery】Swiperでスライダーを実装する方法

## はじめに
スライダーを実装するプラグインの中でおすすめのSwiperの使い方について記事にしていきます

## Swiperについて
スライダーを実装できるJavaScriptのプラグインです。jQueryに依存しない高機能スライダーで、動作が軽いのが特徴です。

https://swiperjs.com/

Swiperには、次の3つの導入方法があります。
– ファイルをダウンロードして読み込む
– CDN（Content Delivery Network）を利用して読み込む
– npm（Node Package Manager）を使用して読み込む

この記事では、ファイルをダウンロードして読み込む方法やカスタマイズの方法について書いていきます。

それではやっていましょう！！

## 1.ファイルをダウンロード

### 1. Get Startedをクリック

![スクリーンショット 2024-04-11 18.26.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2459296/ff

JSでAPI作ってみた！

## 初めに
JavaScriptでAPIを作成してみましたので、
備忘録として残しておきます。
(ブログ投稿アプリ作成)

## 概要
ORMとしてprismaを使用。
DBはMySQL。
VScodeを使用して記述。

## 実装
①prismaクライアントを生成して、使用できる状態にする。
“`javascript:api.js
const { PrismaClient } = require(‘@prisma/client’);
const prisma = new PrismaClient();
“`

②新規作成用APIを作成
| 変数 | 内容 |
|:——–:|:———-:|
| title | ブログタイトル |
| content | ブログ内容 |
| createdAt| 投稿日 |
| user | 投稿者 |
“`javascript:api.js
app.post(‘/api/posts’, async (req, res) => {
try {
cons