Javascript – DECODE https://decode.red/blog data decode, decoder or decoded ... design of code Mon, 15 Dec 2025 06:15:00 +0000 ja hourly 1 https://wordpress.org/?v=4.7.29 Onyx WebAssembly ../../../202503021870/ Sun, 02 Mar 2025 07:09:06 +0000 ../../../?p=1870 JavaScriptおよびTypeScriptが全盛の今、その周辺の技術も賑やかです。
WebAssemblyというのは、処理の高速化等で使用されますが、これにコンパイルできるOnyxという言語を試してみました。

https://onyxlang.io/

インストール）

sh <(curl https://get.onyxlang.io -sSfL)

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Onyx WebAssembly</title>
</head>
<body>
    <h1>Onyx WebAssembly</h1>
    <div>
        <button id="runButton">11 + 22</button>
        <p id="result"></p>
    </div>
    <script>
        async function loadWasm() {
            const response = await fetch('add.wasm');
            console.log(response)
            const bytes = await response.arrayBuffer();
            console.log(bytes)

            const imports = {
                "host": {
                    "print_str": (offset, length) => {
                    console.log(`WASM tried to print a string at offset ${offset} with length ${length}`);
                    }
                }
            };
            const importObject = {}

            const wasmModule = await WebAssembly.instantiate(bytes, imports);
            console.log('wasm', wasmModule)
            return wasmModule.instance.exports.add;
        }
        document.getElementById('runButton').addEventListener('click', async () => {
            const add = await loadWasm();
            console.log(add)
            const result = add(11, 22);
            document.getElementById('result').innerText = `11 + 22 = ${result}`;
        });
    </script>
</body>
</html>

#export "add"  (a: i32, b: i32) -> i32 {
    return a + b
}
main :: () {}

onyx build -o add.wasm -r js add.onyx

python3 -m http.server 8080

wasmを外部モジュールとして呼び出すサンプルです。
下記、node でもやってみました。

import fs from 'fs/promises';

async function loadWasm() {
    const bytes = await fs.readFile('./add.wasm');
    const imports = {
        "host": {
            "print_str": (offset, length) => {
    	   		console.log(`WASM tried to print a string at offset ${offset} with length ${length}`);
       		}
       }
    };
    const { instance } = await WebAssembly.instantiate(bytes, imports);
    return instance.exports.add;
}

loadWasm().then(add => {
    console.log("11 + 22 =", add(11, 22));
}).catch(console.error);

% node index.js
11 + 22 = 33

どちらでも使える共通モジュールを持つことができます。
アルゴリズムなどで利用すると便利ですね。

]]> Markdown Syntax ../../../202401061739/ Fri, 05 Jan 2024 22:46:22 +0000 ../../../?p=1739 マークダウンHTML変換を最近構築した静的生成ブログのライブラリで使用されているのを見て、これを単独で動かして見ました。

https://github.com/systemsblue/betalogg/blob/main/lib/markdownToHtml.ts

環境）
node v20.4.0 / Mac(arm64)

markdownToHtml.js

import {remark} from 'remark';
import html from 'remark-html';

export default async function markdownToHtml(markdown) {
  const result = await remark().use(html).process(markdown);
  return result.toString();
}

demo.js

import markdownToHtml from './markdownToHtml.js';
import fs from 'fs';

const md = fs.readFileSync("demo.md");

const html = await markdownToHtml(md);
console.log(html);

インストール）

npm i remark
npm i remark-html

package.json

{
	"type": "module",
	"dependencies": {
		"remark": "^15.0.1",
		"remark-html": "^16.0.1"
	}
}

※　最初はtypeのみ記述(ESModuleでなくCommonJSなので)。depencenciesは、インストールで自動的に追記。

変換前

% cat demo.md
## title
**abc**
>1234
>5678

`abcdefg`
```
ABCDEFG
```

変換後

% node demo.js
<h2>title</h2>
<p><strong>abc</strong></p>
<blockquote>
<p>1234
5678</p>
</blockquote>
<p><code>abcdefg</code></p>
<pre><code>ABCDEFG
</code></pre>

ブログを更新するまでもなく、HTMLが確認できますので、便利です。
これでマークダウンの拡張を試みたいと思っています。

さらに下記の記事に詳細な説明がありますので、また学習したいと思います。

「MarkdownをHTMLに変換するunifiedインターフェースについての解説」
https://qiita.com/masato_makino/items/ef35e6687a71ded7b35a
「unified を使って Markdown を拡張する」
https://zenn.dev/januswel/articles/745787422d425b01e0c1

]]> React.js / Next.js ../../../202112051381/ Sun, 05 Dec 2021 02:47:31 +0000 ../../../?p=1381 Javascriptというプログラミング言語ほど、その使われた方が多様な言語はないと思っています。
時代とともに変化する要求に使い方をどんどん変化させ、AJaxでGoogleが積極的に使いだし、サーバサイドのnodejsが出現したあたりから急速に進化しだしました。
最近ではリアクティブという性質を生かしたReact.jsなどがとても有名ですが、最初はReactのJSXの独特の記述方法に、かなり抵抗を覚えました。(今でもプログラム初心者がこの構文から入ることに抵抗があります)
しかしそれを取り巻く環境はとても魅力で、最近話題のReact.jsのフレームワークであるNext.jsについて試してみました。

環境) Node v14.17.0, npm v6.14.13 / Windows 10

インストール　(TypeScriptを使用する設定)

(中略)

yarn devで実行してlocalhost:3000にブラウザでアクセスします。テキストエディタでコードを変更するとリアルタイムで表示を反映し、エラーがある場合は、ブラウザに表示します。

デフォルトのページはそのままに、下記、自分のページを追加します。
試したかったことは、JSXよる表示と、JSONデータの取得、ハイパーリンク、外部コンテント呼び出しをコンパクトにまとめました。

pages/mypages/index.tsx

import Header from '../components/header'
import Content from '../components/content'
import useSWR from 'swr'
import Link from 'next/link'
const fetcher = (url: string) => fetch(url).then(res => res.json())

export default function MyPage1() {
	const {data, error} = useSWR('/api/message', fetcher)
	console.log(data)
	if (error) return <div>failed to load</div>
	if (!data) return <div>loading...</div>
	const now = new Date()
	return (
	<>
		<Header title={`My Page 1`}></Header>
		<p>{data.message}</p>
		<Link href={`/`}><button>Top Page</button></Link>
		<Content>Upated {now.getMonth()+1}/{now.getDate()}</Content>
	</>
	)
}

pages/components/component.js

export default function Content({children}) {
	return (
	<>
		<div className="container">{children}</div>
		<hr />
		<footer>©2021 DECODE Ed</footer>
	</>
	)
}

pages/compoments/header.js

export default function Header(props) {
    return (
        <h3>{props.title}</h3>
    )
}

pages/api/message.ts

import type { NextApiRequest, NextApiResponse } from 'next'
export default function handler(req: NextApiRequest, res: NextApiResponse) {
  res.status(200).json({
    message: "Response Message"
  })
}

表示結果

サーバがダウンするとfailedになり、再起動すると表示が自動的に復活します。
またTypeScriptで開発すると、devでは動いていたものが、yarn build時にエラーチェックが入りエラーがでることがあります。タイプが厳格にチェックされているということがわかります。

今回VSCodeとか使わず、テキストエディタとDOS窓だけで作業しますが、環境がよくできているので、この程度ならストレスなく開発ができます。やはりよく使われるものというものは、どんどん便利になっていくものですね。
ただプロジェクトのファイルサイズがここまでで250MBほどになることには驚きました。Unityなどもそうですが最近はこういう傾向なのでしょう。(環境まるごとパッケージ)
サーバサイドはDockerとか使って開発、デプロイとか、Firebaseのようなサーバレスサービスを利用するとか、開発の高速化とかさらにすすみそうです。

参考)
https://tomosta.jp/article/nextjs-basic/
https://qiita.com/irico/items/d8f0ed7887f3c490ffa1
https://zenn.dev/eitches/articles/2021-0719-api-routes-http-request-type

リアクティブ関連

Reactive / Vue.js


グラフィック関連

Word Cloud / D3.js

]]> Reactive / Vue.js ../../../202106061289/ Sun, 06 Jun 2021 06:34:03 +0000 ../../../?p=1289 かつてはjQueryをよく使った仕事をしていましたが、それ以降Javascriptはちょっとご無沙汰でしたので、ここでモダンJavascriptのVue.jsをリアクティブシステムの観点でテストしてみました。
リアクティブというのは「反応的」という意味ですが、Webの世界で言えばデータを変えれば、View(見た目)も変わるというものです。(わざわざ描画しなくても自動的に変わるしくみ)
私はいつもこれを直感的に理解するにはExcelだと思っています。一つのセルの値を変えれば、影響するセルの値も連動して変わります。
ここではできるだけシンプルにVue.jsがリアクティブを実現しているしくみを理解できるよう実装してみました。

参考) https://jp.vuejs.org/v2/guide/list.html

<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<table border="1" style="border-collapse: collapse">
<tr v-for = "n in num2">
  <td>{{ n  }}</td>
  <td>{{ n * num1  }}</td>
</tr>
</table>
</div>
<script>
var app = new Vue({
  el: '#app',
  data: {
	num1: 1,
	num2: 5
  }
})
</script>
</body>
</html>

ファイルをFirefoxでローカルオープンします。

コンソールから変数を書き換えます。

すぐに反映されます。

シンプルすぎましたが、とてもわかりやすいです。
まずはしくみを押さえておいて、次にデータの供給の仕方を試していきたいと思っています。

]]> Word Cloud / D3.js ../../../20150830399/ Sun, 30 Aug 2015 10:36:15 +0000 ../../../?p=399 前回のword2vecで利用したテキストファイルをD3.jsのワードクラウドを使って、可視化してみました。
D3.jsについては、以前下記ブログで扱ったことがありますが、ワードクラウドは初めて使います。
D3.js from Excel http://crossframe.iiv.jp/20131214667/
jQueryPlot from Excel http://crossframe.iiv.jp/20131207651/

text8のファイルは大きすぎるので、先頭約300kを切り出して使いました。(処理的にこのくらいが限界)
word_cloud01

d3-cloudのサイトのサンプルを元に、ローカルファイルを読み込んで実行できるようにしました。

<html>
<meta charset="utf-8">
<body>
<input type="file" id="read_file">
<script src="d3/d3.js"></script>
<script src="../d3.layout.cloud.js"></script>
<script>
var file = document.querySelector('#read_file');

file.onchange = function (){
	var fileList = file.files;
	var reader = new FileReader();
	reader.readAsText(fileList[0]);

	reader.onload = function  () {
		var res = reader.result;
		r = res.split(' ');
		h = {};
		for(i=0;i<r.length;i++){
			if(h&#91;r&#91;i&#93;&#93; == undefined){
				h&#91;r&#91;i&#93;&#93; = 0;
			}
			h&#91;r&#91;i&#93;&#93; = h&#91;r&#91;i&#93;&#93; + 1;
		}
		
		arr = &#91;&#93;;
		max = 0;
		kx = "";
		for(var k in h){
			if(h&#91;k&#93; > 1){
				arr.push([k, h[k]]);
			}
			if(h[k] > max){
				max =h[k];
				kx = k;
			}
		}
		(function() {
			var fill = d3.scale.category20();
			var layout = d3.layout.cloud()
				.size([800, 500])
				.words(arr.map(function(v){
					return {text: v[0], size: Math.sqrt(v[1] / max) * 100};
				}))
				.padding(5)
				.rotate(function() { return ~~(Math.random() * 2) * 90; })
				.font("Impact")
				.fontSize(function(d) { return d.size; })
				.on("end", draw);

			layout.start();

			function draw(words) {
				d3.select("body").append("svg")
					.attr("width", layout.size()[0])
					.attr("height", layout.size()[1])
					.append("g")
					.attr("transform", "translate(" + layout.size()[0] / 2 + "," + layout.size()[1] / 2 + ")")
					.selectAll("text")
					.data(words)
					.enter().append("text")
					.style("font-size", function(d) { return d.size + "px"; })
					.style("font-family", "Impact")
					.style("fill", function(d, i) { return fill(i); })
					.attr("text-anchor", "middle")
					.attr("transform", function(d) {
					return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
				})
				.text(function(d) { return d.text; });
			}
		})();
	}
};
</script>
</body>
</html>

ローカルで使うツールとして、どの単語がよく使われているかを、直感的に知るために作ってみました。しかしサイズが大きいファイルではちょっと難しそうです。

参考: https://github.com/jasondavies/d3-cloud/tree/master/examples

]]>