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

CDNから読み込んだJSライブラリに対して、後付けで型を適用する方法

## はじめに

CDNからJSライブラリを読み込むと常に`any`型となってしまい、VSCodeのサポート(IntelliSense)を利用することができません


ところが、VSCodeは(賢いので)ヒントを与えてあげると、型を認識できるようになります

* CDNから読み込んだライブラリだけではなく、型定義のないJavaScriptの変数、関数に後付けで型を適用することができます
* (VSCodeに組み込まれている)TypeScriptの機能を利用
* 設定ファイル(tsconfig.json)やコンパイラ(tsc)は不要です(ファイルの拡張子は.jsのままで大丈夫です)

### 最初にまとめると

* 想定する環境
* VSCode＋JavaScriptの(npmを利用しない従来型)プロジェクト
* CDNから読み込

【Figma Plugins】はじめてのFigmaのプラグイン作り（セットアップ）


## はじめに
みなさんは、Figmaのプラグインを作ろうとしたことがありますか？
私は、デザインテクノロジストとして、デザイナーの業務効率化をしようとFigmaのプラグインの作り方を調べていたら、JavaScriptか、TypeScriptが触れれば、意外と簡単に開発することができるのだとわかりました。
そのため、この記事では、Figmaプラグインの作りの第一歩である、セットアップの方法についてまとめます。

この記事では、以下の公式ドキュメント通りに、できるだけわかりやすく、初心者でもわかりやすくまとめようと思っています。
この記事を読みながら、詰まったところがあれば、コメントで教えていただけたら、記事を更新していきたいと思っているので、ぜひコメントもお願いします。

https://www.figma.com/plugin-docs/

## 事前準備
F

SvelteKit SPA Apacheサブディレクトリーに配置する

メモ

対象とするサブディレクトリー`sveltekit-example`
“`
https://localhost/sveltekit-example
“`

基本的にドキュメントの通りSPAアプリケーションを構築する
[https://kit.svelte.jp/docs/single-page-apps](https://kit.svelte.jp/docs/single-page-apps)

確認時のバージョン
“`
“svelte”: “^4.0.5”,
“@sveltejs/adapter-static”: “^3.0.0”,
“@sveltejs/kit”: “^2.0.0”,
“@sveltejs/vite-plugin-svelte”: “^3.0.0”,
“`

# 設定
## svelte.config.js
フォールバック時のページを指定＆paths.baseに`/サブディレクトリー`を指定する。
“`js
import adapter from ‘@sveltejs/adapter-static’;
import { vitePreprocess

kintone リッチエディター項目の未入力判定についてのメモ

kintone リッチエディター項目について、PC版とモバイル版で未入力の値が異なっているのでメモ

# 概要

レコード追加やテーブル行追加時のリッチエディター項目について、PC版とモバイル版で未入力の値が異なっている。
PC版とモバイル版でリッチエディター項目の実装方法が異なっているのが原因と思われます。
JavaScript カスタマイズでリッチエディター項目の未入力の判定を行う場合、PC版とモバイル版のそれぞれの値に対応する必要がある。

| イベント | PC | モバイル |
|:-:|:-:|:-:|
| レコード追加 | “\

\
\

” | undefined |
| レコード編集 | “\

\
\

” または “” | undefined または “\

\
\

” |
| レコード保存 | “\

\
\

” | undefined または “\

\
\

” |
| テーブル行追加 | “\

\
\

変なtweet

2007/12/13にとある呟きが投稿されました。以下のようなものです。
“`
tdetyttstttettdeshhhhhhh h ilmmHttttttttat oi tbi aaaaaaaaa o
“`
一見すると何の変哲もない文字列に見えますが、よく見ると違和感っぽいものが浮き彫りに…。
なんと…全く意味不明な英字の羅列なのです!
**ひいいいええええええっ!**
恐ろしく恐ろしい怪文です!
そして更に奇妙な事に、文字`a`、`h`、`t`は連続する傾向にある点も気になります。一体誰が何の目的でこんな物を作り出してしまったのでしょうか?
解読するのは骨が折れそうです。暗号解読の専門家の栗原さんに相談したいくらいです。

## BWT
同じ文字が連続するという変換と言えば、圧縮力を磨いている読者ならピンくるかもしれません。そう、あの有名なBurrows Wheeler Transform(BWT)です。
しかしその逆変換には復元情報が必要となります。元の文字列を見てもそれらしきものが見当たりません。
文字数が70なので70未満の数値が必要…。そうなると70

JavaScriptのクロージャーについて理解しようとしてみた

## はじめに
JavaScriptについて勉強する機会があり、その中でクロージャーなるもの(名前は知っていた)を講義してもらったのですがイマイチどう使えばいいものかわからなかったので今回調べてみました！

## クロージャーとは
`クロージャは、組み合わされた（囲まれた）関数と、その周囲の状態（レキシカル環境）への参照の組み合わせです`(参考:[MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Closures))

“`js
function makeFunc() {
const name = “Mozilla”;
function displayName() {
console.log(name);
}
return displayName;
}

const myFunc = makeFunc();
myFunc(); // Mozilla
“`
再度MDNからのコピーとなりますが、この時`myFunc（）`は`Mozilla`をログに表示します。
これは冷静に考えると、すこし理解し難

GAS(Google Apps Script)とJavascriptでLINEのAPIを使い、公式アカウントでメッセージを一斉送信するアプリを作成する

# 作成しようと思ったきっかけ
> ある日HTMLだけでLINEの公式アカウントを制御してみたいなと思い作りました。

>文章見るのめんどくせーよって人はまとめてコードを書いているところが最後にあるのでそちらをご覧ください。

# 基本的なコード
> 今回はサーバーを使わないGAS(GoogleAppsScript)で作るのでまずGASのコードを書いていきましょう
“`js
//固定変数
const accesToken = “ここに自分のトークンを入れてください”;

//一斉送信
function broadCast(type,text) {
//APIでLINEに情報を送信
UrlFetchApp.fetch(‘https://api.line.me/v2/bot/message/broadcast’, {
method: ‘post’,
headers: {
‘Content-Type’: ‘application/json’,
‘Authorization’: ‘Bearer ‘ + accessToken,
},

Web記事で見かけた「指数平滑法」を使ったアニメーションを p5.js で試してみる

以下の記事で見かけた「指数平滑法」を使ったアニメーションを、p5.js で試してみたという話です。

●アニメーションをスムーズに見せるためのテクニック「指数平滑法」とはどんなものなのか？ – GIGAZINE
　https://gigazine.net/news/20240427-animation-trick/

上記の記事の内容は、以下のブログが元になっているようです。

●My favourite animation trick: exponential smoothing | lisyarus blog
　https://lisyarus.github.io/blog/posts/exponential-smoothing.html

「指数平滑法」を使ったアニメーションで、ポイントになるのは以下の式のようです。


これを、p5.js

Webアプリ開発 ホーム画面編

# 初めに
webアプリの開発ができたので、手順を公開していきます。

# 開発環境
macOS Sonoma 14.4.1
PHP 8.3.3
Laravel Installer 5.2.0

# ソースコード
こちらのリンクから取得できます。

https://github.com/opatu07/portfolio

# 手順
## レイアウト編
管理がしやすいのでレイアウトのファイルをコンポーネントに入れました。
viewsディレクトリにcomponentsディレクトリを配置します。
そこにlayout.blade.phpを配置します。
これがすべてのファイルの基準になります。


左上のアイコンをクリックするとこのホーム画面に戻るようになってます。

ユーザー登録を押すとユーザーの

NestJSについてキャッチアップしてみた

案件で絶賛対応中になります。
初めて触るため、備忘がてらキャッチアップした内容を書いてみようと思います。

# NestJSとは
>Nest（NestJS）は、効率的でスケーラブルなNode.jsサーバーサイドアプリケーションを構築するためのフレームワークです。プログレッシブJavaScriptを使用し、TypeScriptで構築され、TypeScriptを完全にサポートし（それでも開発者は純粋なJavaScriptでコーディングできる）、OOP（オブジェクト指向プログラミング）、FP（関数型プログラミング）、FRP（関数型反応プログラミング）の要素を組み合わせている。

https://docs.nestjs.com/

Node.jsのフレームワークということは理解できました。
今度はNode.jsについてサクッと調査します。

# Node.jsとは
>Node.js は、オープンソースのクロスプラットフォームの JavaScript ランタイム環境です。ほぼあらゆる種類のプロジェクトで人気のあるツールです。

https://nodejs.org/en/learn/getti

TypeScriptの型定義がわからなくなったので整理する

## はじめに
4月から新しい現場で初めてTypeScriptを書いている。

ざっくり概要はわかっているつもりだが、「なんかよくわからないけど型のエラーが出る」ということによく遭遇するので、自分の知識の整理のためにまとめた。

## 前提
TypeScriptの型は便利機能のうちの一つ。

TypeScriptで書かれたファイル（`.ts`）は、JavaScriptのファイル（`.js`）にコンパイルされ、実行時には`.js`ファイルが実行される。
コンパイルされた`.js`ファイルには型の情報は出力されない。

`.ts`ファイル（コンパイル前）

`.js`ファイル（コンパイル後）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/

JavaScript で、画像ファイル群が存在するかちぇくプログラム。

苦労してやっとできた。

“`javascript
/* 定義 */
let faile_ch_li = “”;
var aru_arr = [‘imge/cyat.png’,’imge/gall_1.png’,’imge/gall.png’,’imge/H_na_gazou.jpg’,’imge/man1.png’,];
aru_arr.push(‘imge/んんん.png’);//’imge/んんん.png’ fileは確実に存在する名前付けの最後のファイル名でソートの最後のファイル名
var aru_arr2 = aru_arr;
faile_check();
/* faile_check */
function faile_check(){
alert(‘faile_check’);
count_n = 0;
for(let i = 0; i < aru_arr.length; i++){ checkFileExists(aru_arr[i]); } } /* checkFileExists */ function chec

Web 開発再入門#20 ― Vue.js、Vuetify、axios

# Web 開発再入門#20 ― Vue.js、Vuetify、axios

fmockup

## ★ 本ページは工事中 ★

## はじめに

Web アプリケーションのクライアント・サイド（ブラウザー・サイド）を開発します。

学習コストが低いといわれる Vue.js を使用します。
レスポンシブな画面を実現するために Vuetify を使用します。
Ajax を実現するために、axios を使用します。axios を使用することで、HTML 画面から Web サーバーの Web API を呼び出すことができます。

レスポンシブ画面：Web アプリケーションにおいて、ユーザーが使用するデバイスに応じて、自動的に画面の表示を最適化する画面のこと。
Ajax：Asynchronous JavaScript + XML

## ディレクトリ・ファイル構成

D:\\
└ Developments\\
    └ Workspace\\
         └

広告ブロッカーを使用しているユーザーに対して一時停止を優しく促す通知をするライブラリを開発した 【AdCompass】

## 背景

広告ブロッカーは快適にWebブラウジングが可能だが、メディアには単なる収益化の邪魔にしかならない。
業界の調査によると、約25-30％のウェブユーザーが広告ブロッカーを使用しているらしい。一部のメディアでは莫大な収益損失だろう。
しかし、UXを著しく損ねる広告や詐欺広告などがあることを踏まえると、広告ブロッカーは一概に悪いとも言えない。
なので、両方の肩を持つライブラリの開発を行うことにした。

## 目標

ユーザーが広告ブロックの影響を理解し、メディアの収益化を支援するようになること。
メディアがインターステイシャル (コンテンツの途中やページ遷移時に出てくる全画面広告) や バックボタンハイジャック (戻るボタンを押した時に元のページに戻さず別のページに誘導する) などのUXを著しく損ねる広告をできる限り抑え、ユーザーが快適にWebブラウジングを行えるよう支援すること。

## 広告ブロックの検出方法について

通常、広告ブロッカーは広告関連の技術で有名どころをブラックリストに登録し、通信自体を妨害することでそもそも広告関連の技術自体が読み込まれないような仕組みで広

[レビュー分析] 六本木の叙々苑ってどこ行けばいいの？

# はじめに

ReviewAI (レビューアイ) で食べログのレビューができるようになりました！
せっかくなので、六本木の叙々苑 3店舗のレビューを分析して、
どの店舗に行くべきなのかを考えたいと思います。

## ReviewAI (レビューアイ)

弊社 RetegyLink が開発中のレビュー分析 AI です。
[https://reviewai.next-seed.work/](https://reviewai.next-seed.work/)
アルファ版を公開中で、現在は[食べログ](https://tabelog.com/)さん、[じゃらん](https://www.jalan.net/)さんに対応中です。

## 食べログ

言わずと知れた、レストラン検索・予約サイトです。
レビューが多く集まっており、多くの人が利用している印象です。

# レビュー分析

六本木の周辺には、

– 叙々苑 六本木本店
– 叙々苑 麻布十番店
– 游玄亭 西麻布本館

の3店舗の叙々苑がありますが、それぞれ、どのような違いがあるのでしょうか？

## 叙々苑 六本木本店

![imag

【JavaScript】AST（抽象構文木）に触れてみる

## この記事について

AST（抽象構文木）について知る機会があったので、自分で試したことや考えたことを記事にしてみました。

– ASTとは？
– JavaScriptをASTを扱う基本的な方法
– ASTの活用について

## AST（抽象構文木）とは

AST（抽象構文木）とは、コードから言語の意味に関係ある情報のみを取り出し、木構造で表現したものです。「言語の意味に関係ある情報」とは演算子や式などプログラムの実行に影響する要素で、意味に関係ない情報はコメントやスペースなどがあります。

## JavaScriptでASTを扱ってみる

JavaScriptのコードをASTにパースするライブラリはいくつかあるようですが、その中の[esprima](https://github.com/jquery/esprima)を使って試してみます。

### esprimaでコードをASTに変換する

次のような単純なコードをASTに変換してみます。

“`js:対象のコード
const answer = 1 + 2;
“`

esprimaでコードパースするには次のようにします。

ローカルのMP4ファイルの１フレームを画像保存するツール

## 0.はじめに

こんな感じです。

* 私は非エンジニアのドシロウトです
* 私はChromeOS Flexの愛用者です
* ChromeOS FlexはLinux開発環境もありますが、基本的にブラウザーのChromeメインのOSです
* 私はYoutubeとかでサムネ画像を作るときにアップした動画の1フレームをそのまま、または、加工して使います
* ブラウザーでMP4から指定の再生位置のフレームを切り出し、ローカルに保存するツールが欲しかった
* 適当なツールがなかったので作った
* 生成AI [perplexity](https://www.perplexity.ai/) 先生に聞きながらつくった

## 1.作ったもの

動画はこんな感じ

https://twitter.com/basictomonokai/status/1784369944404369736

## 2.プレイグラウンド

[Codepen](https://codepen.io/sf-os/pen/mdggJOm) に貼りました

お茶の情報をまとめたTea’s Database【供養】

# はじめに
自分が作って公開した最古のWebアプリ「[Tea’s Database](https://venerable-marzipan-98473b.netlify.app/)」を供養の意味も込めて晒したいと思います。
初めてフロントとバックエンドを分けて作ったアプリで、[YEN$CONVERSION](https://qiita.com/syab-syab/items/c14ab0b6f2cb358ca520)のプロトタイプともいえる物です。
あまり書くことが無いかも…

# 動機
個人的に飲み物ではお茶を好んで飲むことが多いので、せっかくだからその情報をまとめたものを作ってみようと思いついたのがきっかけでした。
時々カフェインが多く入っているものを飲み過ぎて気分が悪くなってしまうことが多かったので、飲む前にどのくらいの量が入っているのかを検索せずに手軽に確認したかったからという理由もあります。

# 使い方
お茶の種類(日本茶や紅茶など)や
![スクリーンショット (379).png](https://qiita-image-store.s3.ap-northeast-1.a

JavaScriptのNumber型はいくつの階乗まで扱えるか調べてみた

前提：JavaScript の数値型のNumber は 倍精度64ビット浮動小数点形式 (IEEE 754) になっており、`2**1024 – 1` まで表示可能です。JavaScript における安全な整数の最大値は `2**53 -1` です

“`js
[…Array(1000).keys()]
.map(term => ++term)
.reduce((acc, current, index) => {
if (acc * current > Number.MAX_SAFE_INTEGER) {
console.log(`項数：${index}\n十進法：${BigInt(acc).toString()}\n二進法：${BigInt(acc).toString(2)}`);
throw new Error(`loop:${index}`);
}
return current *= acc;
}, 1);
// 項数：18
// 十進法：64023737

js/ts環境で発生するError: Service firestore is not availableの解決策

こんにちは。[virapture株式会社](https://virapture.com)でCEOしながら[ラグナロク株式会社](https://ragna-rock.com)でもCKOとして働いている[@mogmet](https://twitter.com/mogmet)です。

まったく最近忙しすぎてOutputできてなかったのですが、たまにはアウトプットを頑張ろうと久々に手をとりました。

今回はトラブルシューティング系のものになります。

## エラー概要

adminで使われるnode.jsやクライアントで使われるjsの環境にて、firestoreのインスタンスを取ろうとすると下記のようなエラーが出ることがあります。

> Error: Service firestore is not available

firebase自体のinstanceも生成できてるのになんで・・・と毎回苦しんでました

## 原因

モノレポなどでやっていると発生しがちなのですが、共通パッケージとかで使っているfirebaseのバージョンが一致していないために発生するものになります。
参照してるパ