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

pulldown_cmark使ってMarkdownEditor作ってみた

# はじめに

前回まではRustとWebAssembly使ってFavicon生成などの画像処理を学習していたが、

今回はユーティリティ系アプリの作成もしてみたいので、pulldown_cmarkを使ってマークダウンエディタを作ってみる。

以前作成したfaviconツールについて

https://qiita.com/shisojuice/items/2ce43d25ec48c2c36486

pulldown_cmarkについて

https://docs.rs/pulldown-cmark/latest/pulldown_cmark/

# プロジェクトの作成

pulldown_cmarkを使うと簡単にマークダウンの処理が可能。

下記のようにOptionと入力文字でParserを作成し、

Parserをpush_htmlのメソッドにいれるだけでHTMLに変換される(便利すぎる😎)

“`rust:lib.rs
// 省略

#[wasm_bindgen]
pub fn md_preview(input: String) -> String {
let m

【初学者-備忘録】immutableとmutableの違い

# immutable(イミュータブル)
書き換えができないもの。
プリミティブ型の値が該当する。
> 文字列、数値、BigInt、真偽値、undefined、シンボルなど

何か変数の値を変更した際に、参照が新しい値に向くことになる。
新しい値がどこかのメモリ領域に追加され、そこに参照先が切り替わる。
参照先が変わるような操作のことをイミュータブルは操作という。
元の値を上書きしたことにはならない。

# mutable(ミュータブル)
書き換えが可能なもの。
イミュータブルな値以外、オブジェクトなど
元の配列が定義されていて、そこに新しい値が追加されたとき、配列に対して参照が貼られていて、その配列から新しい参照が追加されるイメージ。
変数の参照する先が変わらない状態のこと。
元の配列の中身が変わっている＝値が上書きされている。

JavaScriptの「文字列を切り出す」系メソッド3つの違い（substr、slice、substring）

文字列を扱っているときに「一部を切り出したい！」と思うのはよくあることです。

JavaScriptに用意されているの三つの文字列の抽出メソッド、`substr`、`slice`、`substring`について、違いを簡潔にまとめておきます。

## substr
:::note alert
このメソッドは非推奨になりました。
新たな使用は避け、既存のコードは更新する必要があります。
:::

`substr`メソッドは、指定された位置から始まる特定の文字数の文字列を返します。このメソッドの第一引数は開始位置を示しますが、第二引数は他2つのメソッドと違い「取得する文字数」です。

例えば、`text.substr(0, 5)`は文字列`text`の最初の5文字を返します。

## slice
`slice`メソッドは、指定された開始位置から終了位置までの部分文字列を抽出して返します。

負の数を引数として受け取った場合、文字列の末尾からの位置として扱います。
例えば、`text.slice(-5, -1)`は文字列`text`の「末尾から5文字目」から「末尾から2文字目」までの文字列

【Figma Widget】はじめてのFigmaのウィジェット作り（セットアップ）


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

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

https://www.figma.com/widget-docs/api/api-

JavaScript: BWTとか圧縮とか

block sort(burrows wheeler transform, BWT)を利用した圧縮programを紹介します。ロードバイク並の加速力で、gzipを遥かに超える程度の圧縮力を誇るかどうか定かではないほどの性能です。

## 原理
処理の流れは `BWT -> Move To Front -> Zero Length Encoding -> Range Coder` となります。
日本語訳すると、整列により圧縮しやすくし、小さい数値に偏らせ、特に0は連長圧縮し、Range符号でとどめをさす、と言った具合です。

## 実装編
“`js:BWT
function compare(R,a,b,i,n,r){
for(n-=a

自己紹介ページ　画像をじわりと表示させる

お疲れ様です。

昨日少しお話しいたしました、自己紹介ページで使っている画像を、JSを使ってじわりと表示させるよう編集をしてきました。


skyというid名の画像が現れたら、コンソールに「あおぞら」と返すようにします。
ページをスクロールし、画像を表示させると…　↓
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3810013/72f2249d-1287-70a9-85f3

Adobe Illustratorで印刷入稿前のチェックの効率化を図る自動化スクリプト

## はじめに

Adobe Illustratorで作業を自動化するためのスクリプト(JavaScript)を紹介します。このスクリプトは、印刷入稿前のチェックの効率化を図るために、以下の一連の操作を自動で実行します。

## 機能
このスクリプトは次の操作を自動で行います：

1. 全てのレイヤーとオブジェクトのロック解除 – 編集が困難なロック状態を解除します。
1. カラーモードの変換 – ドキュメントがRGBモードの場合、プリント基準のCMYKモードへ変換します。
1. テキストのアウトライン化 – フォント依存の問題を避けるため、全てのテキストをアウトライン化します。
1. リンクファイルの埋め込み – 外部リンクされている画像やデータをドキュメントに埋め込みます。
1. ファイル名の自動改名 – ファイル名の末尾に「(CHK)」を追加し、バージョン管理を容易にします。
1. AIとPDF形式での保存 – 編集可能なAIファイルと共有・印刷向けのPDFファイルの両方で保存します。

## メリット
このスクリプトにより、以下のようなメリットがあります：

– 時間の節約：複

げきむずデータも怖くない！JavaScriptのオブジェクト配列変換の方法

## はじめに
DBやAPIから取得したデータを扱う際、配列を別の配列にしたり、配列からオブジェクトを生成したり、ということがあるかと思います。

今回はオブジェクトの配列にフォーカスして、どのように別の配列やオブジェクトを生成するか、ということを確認します。

本記事内では「TypeScript」を扱っていますが、JavaScriptでも使えるメソッドになります。

## オブジェクトの配列から、別の配列を生成する
### 概要
“`typescript
// ユーザー型の定義
interface User {
id: number;
name: string;
email: string;
age: number;
}
// ユーザーデータ
const users: User[] = [
{ id: 1, name: “田中太郎”, email: “tanaka@example.com”, age: 28 },
{ id: 2, name: “佐藤花子”, email: “sato@example.com”, age: 35 },
{

関数はオブジェクトである

関数もオブジェクトってほんまかいな？

じゃあ試しにログ出力してみよか
“`Javascript
function mathAdd(a,b){
return a+b;
}
console.log(mathAdd);
“`

そのまま表示された😯
つまりそういうことなん？

awaitの挙動からsetTimeoutがawaitされない理由を紐解く

## はじめに
async/awaitを使っていて制御の順番が思い通りにならなくて困ったことは誰しもあると思います。
そんな方のために、awaitの挙動からなぜ書いたコードが思い通りの順番で実行されないのか少しだけ深掘りしていきます。
今回は`setTimeout()`編です。

## 目次
1. [async/awaitとは](#Chapter1)
1. [待ってくれないawait](#Chapter2)
1. [awaitはPromiseインスタンスの値を取り出す](#Chapter3)
1. [setTimeout()はPromiseじゃない](#Chapter4)
1. [awaitにPromise以外を待たせようとしても待ってくれない](#Chapter5)
1. [それでも待たせたいなら](#Chapter6)

## async/awaitとは
async/awaitとは、非同期処理を行う際に処理の順番をコントロールするために使う記述です。
例えば以下のようにasync関数内で`fetch()`を行う関数を実行すると、コード上

朝会のファシリを決める脳汁くじ引きをサクッと作る

# はじめに
こんにちは、H×Hのセンリツ大好きエンジニアです。（同担OKです😉）

毎日業務で朝会をやると思いますが、ファシリテーター固定じゃつまらないですよね😁
しかも、朝から脳汁分泌できたら気持ちよく無いですか？😇

そんな変態な方へ送るファシリテーターくじ引きをサクッと作ります。

# 完成したもの
こちらになります。
毎回朝会のはじめに回してもらい、次回のファシリテーターを決める運用にします。


#### パ、パトランプ気持ちええ〜〜！！！
#### 確定演出気持ちええ〜〜〜！！！

朝からこんなに気分が上がるくじ引き、あったでしょうか？😍
スタートボタンを押すたびに抽選が行われ、**一定の確率で虹色＆パトランプ演出**が発生します！🤩

まあ、そんな大層なことはしてないので、チャチャっと紹介します。

# ソースコ

【AtCoder】入茶しました！！【初投稿】

初めまして！OCH_Taoと申します！
先日[ABC360](https://atcoder.jp/contests/abc360)にて入茶をしたので、記念に記事を投稿します！
## はじめに
### 自己紹介
現在高校三年生のプログラミングとDTMとTRPGが大好きな人です。
自分がなんとなく欲しいツールを暇つぶしで作ったりとのんびりやってます。
最近、ATH-M50xというaudio-technicaのヘッドホンを買ったら、友達も一緒に買い替えてくれて嬉しかったですw
### 競プロを始めたきっかけ
私の通っている高校には競プロを誰彼構わず勧める一人の先輩がいました。
私は、当時まだプログラミング経験が浅く、学校が用意しているプログラミング入門教材の最初を少しかじった程度の経験しかありませんでした。
具体的に言うと多少のHTMLタグとdocument.wri

javascriptによるECS – Entity Componet System (NOT Unity DOTS)

■概要
——————————

javascriptのみで作成したECS(Entity Componet System)のサンプルを示し、その解説を行う。
ピュアな javascript で作られたECSのサンプルがQiitaで見つからなかったので、記事を書いてみた。
**これは Unity ECS (Unity DOTS) の記事ではありません。**

ECSはゲームやシミュレーションによく使われる設計パターンで、ゲームに登場する「もの」を`Entity`、「もの」の持つ属性を`Component`としてデータを持つ。

※[WikipediaのECS記事](https://en.wikipedia.org/wiki/Entity_component_system)より

こうしたデータを対象に`System`によって毎フレーム処理を行うことでゲームを動かしていくのがECS。

コレを読めば理解できる！const、let、varの違い

# 読み飛ばしてください

おはようございます、しなもんです。
先日高校で情報のテストがあったのですが、**無事にJavascriptの問題**で詰みました。
（const使っとけばいいと思ってたら性質を利用する問題が出て詰んだ）
~~Pythonばっかり書いてる弊害がここに…~~

ので、この記事では**改めて`const`, `let`, `var`の違いをまとめたいと思います。**

# そもそもなんで種類が分かれてるんだ？
そもそも、`const`、`let`、`var`というものが別々に存在する理由はなんなのでしょうか？

Javascriptでは初期、`var`しか存在しませんでした。
そのため、**変数のスコープや再宣言ルールが曖昧で**、
**予期せぬバグが発生しやすい**という問題がありました。

`const`と`let`は、他の多くのプログラミング言語でも採用されている変数宣言方法であり、
Javascriptでもこれを取り入れることで、より信頼性の高い言語へ進化できたのです。

つまりは**意図しないバグを防ぐために変数宣言時に制限を設けた**のです。

#

プチ話 ライブラリを作っとくとめっちゃ楽な話

どうもAtsu1209です。
今日は私の体験談を書いていきます。

# 昔ライブラリ作った話
実は私 今後使いやすいだろうというアニメーションやコードをまとめてライブラリ化したことがあったんです。
例えば、スクロールしたらしたからふわっと出てきたり メニューのコンテンツをクリックしたら自動でスクロールされたり
などをまとめて作りました。

# クソ使いやすい
実は今、ウェブサイトなどを作っている時にめちゃくちゃライブラリを使っています。
他人が見たら「なんやことクソコード」と思うかもしれません。
でもアニメーションを付けたりするのが苦手な僕からしたらめちゃくちゃいいんです。

# まとめ
作って良かった^^

今回は以上になります。
ではまた次の記事で(^^)/

RustとWebAssemblyでドット絵Generator作ってみた

# はじめに

過去記事でRustとWebAssembly使ってAsciiアート生成ツールに挑戦した際に

ドット絵生成ツールにも挑戦したいと思ったので、

今回は、RustとWebAssembly使ってドット絵生成ツール的なのを作成しようと思います。

https://qiita.com/shisojuice/items/2413580f72244a4823c7

# プロジェクトの作成

wasm-packのテンプレートから作成。

今回は、wasmでimageのdataを受け取り、ドット絵調に画像加工して出力する関数を作成する。

出力ベース画像は縦横比 512px x 512px とし、

押下されたButtonの内容と同じドット絵の比率に合わせたセル数に加工してみる。

“`rust:lib.rs
// 省略

// セルのサイズ
let dot_size:u32 = input_size.parse().unwrap_or(8);
let cell_size:u32 = 512/dot_size;
let mut output_i

SvelteKitでのCSRF対策の実装って結局、必要なの？不要なの？

## はじめに

昔からある攻撃の1つであるCSRFだが、SvelteKitでは対応不要というのを見かけた。

https://github.com/sveltejs/kit/issues/72#issuecomment-927143506

ほんとに？というのをソースコードを見て安心したいと思ったので、今回はソースコードでどのように実装されているか？を見てみたいと思う。

そしてソースコードを見ていく中で、[server route](https://kit.svelte.dev/docs/routing#server)による`’Content-Type’: ‘application/json’`を受け入れるエンドポイントを実装した場合は、自分でCSRFの対策をする必要があるように思えたので、それについてもまとめてみたいと思う。

## CSRFの対策を実装している部分の実装を見てみる

ずばり以下の部分。

https://github.com/sveltejs/kit/blob/%40sveltejs/package%402.3.2/packages/kit/src/runtim

Next.jsの静的画像が表示できない件と公式の重要性

Next.jsでアプリを作成中、コンポーネントにアイコン画像設定したくなりpublicフォルダにある画像を表示しようとしたところ、エラーに苛まれました。

# ファイルpathに/public/は不要

今回私はstorybookを使用してコンポーネント内に画像が表示されるかのテストで画像が表示されるかの確認を行なっていました。
ただNext.jsのpage.tsxでも同様で、原因はファイルpathでした

これは間違いで、Next.jsではpublicフォルダはルートディレクトリとして扱われるようなので

**仮にpublic/hogehoge.png**

というファイルpathで画像がある場合は

“`tsx
ex

【Figma REST API】Figma の REST API は何ができるの？

## はじめに

みなさんは、FigmaのREST APIでは、何が取得できるの？と思ったことはあるでしょうか？
この記事ではそんな、FigmaのREST APIについて紹介しようと思います。

## Figma の REST API とは？

> Figma APIは、Figmaファイルへの読み取りとインタラクションをサポートしています。
>
> これにより、オブジェクトやレイヤー、それらのプロパティを表示、抽出することができ、Figmaの外部で画像としてレンダリングすることができます。
>
> そうすれば、デザインをプレゼンテーションしたり、他のアプリケーションに接続したり、ビジョンを拡張するために使用したりすることができます。
>
> （引用：[Figma API](https://www.figma.com/developers/api#intro)

Cloud Functions + Node.jsをDocker環境で動かす by GCP

# ディレクトリ構成
“`
├── Dockerfile
├── docker-compose.yml
├── index.js
├── node_modules
├── package.json
└── yarn.lock
“`

# Dockerfile
nodeのバージョンを20にしているのは以下のガイドから。LTSがv20なのと、v22はプレビュー版のみ、v18は非推奨が結構近いので、v20にしている。

https://cloud.google.com/functions/docs/concepts/execution-environment?hl=ja#node.js


“`Dockerfile
FROM node:20.11.0-bullseye-slim

RUN apt up