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

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

【HTML】Quine時計

## 前書き

* 毎フレーム画面上に時計として機能するQuineが表示される
* PCのChromeで動けばいいとする
* あんま動作確認してないのでバグるかも…

## 成果物

https://mogamoga1024.github.io/html_clock_quine/

コピペはコンソールから

## コード

“`html