V8の奥に潜むプログラミング言語 Torqueを触ってみた

# はじめに

「JavaScriptのMath.Powはなぜ速いのか」という質問を読んでいたら、V8の組み込み関数に「Torque」という言語が使われているという記述を見つけました。

https://qr.ae/pvUmHX

**高速化のために、プログラミング言語処理系の中だけで使われるプログラミング言語…ロマンを感じずにはいられません**。実際にTorqueを動かしてみましょう。

# バージョン

V8: 記事執筆時点（2022/9/18）のmainブランチ

# 言語の概要

https://v8.dev/docs/torque

TorqueはV8組み込み関数の最適化処理を記述するために使われています。C++ではなくあえて別言語を使うのは、ロジックの可読性を上げるためだそうです。

> プログラミング言語 V8 Torqueによって、V8プロジェクトに貢献する開発者は無関係な詳細実装に煩わされることなく、VMへの変更の意図に専念し変更を表現することができるようになります。この言語はECMAScriptの仕様をV8の実装に直接変換するのを容易にするように設計されましたが

戻るボタンを押した時に、ページトップではなく元の位置に戻るようにしたい

CMSなど何らかの記事一覧ページがあったとして、
詳細ページに遷移後、また一覧に戻ったときも遷移前のスクロール位置を保持したい。

## 実装したこと
当初、以下の想定をしていました。
1) ローカルストレージに遷移前のスクロール位置を保存する。
2) 戻ったときにそこに移動する。

しかし、History APIが既にその仕様を取り扱っている模様。
history.back()を組み込んであげることで、ブラウザの[←戻る]ボタンを押したときと同じ動作を実現できます。

“`html:index.html
前のページに戻る
“`

## 最後に
[Twitter](https://twitter.com/ken___4010)も始めたので、良かったらお願いします〜！

## 参考サイト
・[History.back()](https://developer.mozilla.org/ja/docs/Web/API/History/back)
・[History.scr

へっぽこエンジニアが MobX を更に学ぶ （Observable 編）

[前回](https://zenn.dev/taichi221228/articles/d7de99a011055f)で MobX を**完全に理解した**ので、
今回からは少しでも**なんもわからん**に近づくために更に深ぼって学んでいく ?

# Observable State の作成

まずは[ここ](https://mobx.js.org/observable-state.html)を読んで observable state とは何ぞかを理解する。
が、わたしゃ読んだ位では理解できんので実際に試す。

## 引数

### target

観測対象。インスタンスを含むクラスかオブジェクトにする必要がある。

### annotations

オブジェクトで定義する。
観測対象内で使用される各プロパティに対して、MobX 側にどういった役割として追跡させるかを指示するもの。
ドキュメントでは *プロパティに注釈を付ける* みたいな言い方がされている。
注釈の種類のまとめは長いので別記事にしようと思う。

### overrides

annotaitons が自動で付与される関

[ClearScript] F# Interactive から JavaScript を扱う

## はじめに
最近、Google Apps Script や Office JavaScript API を使うことが多く、JavaScript と関わる機会が増えてきました。

普段は PowerShell, fsi(F# Interactive), IronPython をよく使いますが、作成した JavaScript の再利用を視野に、**Microsoft.ClearScript** を利用して F# Interactive から JavaScript を動かしてみました。

【ClearScript について】
　・[ClearScript](https://microsoft.github.io/ClearScript/)（公式）
　・[ClearScript の概要](https://docs.microsoft.com/ja-jp/archive/msdn-magazine/2014/september/cutting-edge-a-look-at-clearscript)（MSDN Magazine Issues 2014）
## 動作確認環境
記載した内容は
　・

エンジニア騎士とクエリの魔女 精霊の村 （paizaランク：B相当）SQL で解いてみた

精霊の村 （paizaランク：B相当）

https://paiza.jp/code_and_sql/challenges/cas_s_b_3001

>Hellテーブルから、属性名が「Air」、階級が「Boss」のレコードをすべて出力してください。
なお、属性名はHellテーブルのelement_idを外部キーとしてElementテーブルを、階級はHellテーブルのgrade_idを外部キーとしてGradeテーブルをそれぞれ外部参照してください。
レコードを出力する際に表示するカラムはHellテーブルのid, Hellテーブルのname, Elementテーブルのname, Gradeテーブルのnameとし、Elementテーブルのnameには「element」を、Gradeテーブルのnameには「grade」と名付けてください。

解答例(SQL)
問題文に沿って解いてみました。
“`sql
— Let’s チャレンジ！！
SELECT Hell.id, Hell.name, Element.name AS “element”, Grade.name AS “grade”
FR

エンジニア騎士とクエリの魔女　大海の渦 （paizaランク：B相当）JavaScript で解いてみた

大海の渦 （paizaランク：B相当）

https://paiza.jp/code_and_sql/challenges/cas_c_b_3001

をJavaScriptで解いてみました。

>あなたは参加したパーティで見た、飴を使った手品が印象に残っていました。
その手品は子供達に好きな分だけ飴を取ってもらい、それぞれの取った飴の数を当てるというものです。
この手品の手順を詳しく述べると以下になります。

>1. 子供たちに好きな数だけ飴を取ってもらう。

>2. 子供たちに横一列に並んでもらう。

>3. それぞれの子供に、自分自身と両隣の子供の持っている飴の個数の和を言ってもらう。
　・両端の子供には、自分自身と隣の子供の持っている飴の個数の和を言ってもらう。

>4. 左端の子供の持っている飴の個数だけから、それぞれの子供の持っている飴の個数を当てる。

>あなたはこの手品をプログラムで再現しようと思いました。
各子供たちの宣言した飴の数と左端の子供の飴の数を与えられたときに、
子供たちの持っている飴の個数を特定するプログラムを作成してください。

解答例1(JavaScr

【TypeScript】new Date()で取得した時刻と現在時刻を単純比較する時は注意が必要

# はじめに
new Date()で取得した時刻と現在時刻を単純比較する時は注意が必要です。
例えば下記のようなソースコードです。
※固定時刻を生成するために`new Date(2022, 0, 1, 0, 0, 0)`を使用していますが、ここはDBから取得した時刻でもなんでもよいです。

“`tsx
const date1 = new Date(); // 現在時刻
const date2 = new Date(2022, 0, 1, 0, 0, 0); // 2022/1/1 00:00:00
console.log(date1 > date2? true : false);
“`

このソースコード間違いではないんです。
ただサブスク型サービス等で単純比較すると痛い目に合います。
※私が痛い目に合いました（笑）

理由はnew Date()はクライアントの時刻を取得しているからです。
例えば、サブスク型サービスで契約期間があったとします。
その契約期間とnew Date()で取得した時刻を比較します。
通常であれば問題はありません。※PCは自動で現在時刻を補正しているためです

エンジニア騎士とクエリの魔女 龍の頭 （paizaランク：A相当）JavaScript で解いてみた

龍の頭 （paizaランク：A相当）

https://paiza.jp/code_and_sql/challenges/cas_c_a_2001

>白と黒の 2 色からなる画像が与えられます。
この画像は縦 H、横 W 個のピクセルが長方形状に敷き詰められるようにして構成されています。
また、この画像の左上のピクセルを P(1, 1)として、上から i 番目、左から j 番目のピクセルを P(i, j) と定義します。
あなたはこの中に黒色の長方形がいくつ存在するのかを数えたくなりました。
ただし、黒色の長方形は、長方形の左上の点 (y_0, x_0) および縦と横の長さ h, w から定義される以下のようなものを指します。

>・y_0 ≦ y < y_0 + h, x_0 ≦ x < x_0 + w を満たす任意の y, x について、P(y, x) は黒 ・y_0 ≧ 2 の場合、x_0 ≦ x < x_0 + w を満たす任意の x について、P(y_0 - 1, x) は白 ・y_0 + h ≦ H の場合、x_0 ≦ x < x_0 + w を満たす任意の x について

Vue3の学習コストが低いかも？！初学者はReactにこだわらなくてもいいんじゃないの？

React怖い

無知ながら求職条件によくみるので、
友人にReactをお勧めしておきながら、Reactの学習から逃げてました。
だって、その友人がものすごく賢いのに、苦戦してるんだもの。
そのため、フロントから逃げ気味になり僕はバックエンドをやるんだと・・・

導入

しかし、node.jsはまあなんとなくできるようになり（基礎だけね）とりいそぎfirebaseを学習しようとしたら、
どうしてもフロントが必要なんだよなあ。

svelteをいじってみましたが情報の少なさで怯んでしましました。
そのため、プログラミングからも逃げ、Youtubeを見ていたところ、Vue3がsvelteライクだぞ！という情報をみつけました。

楽そうなものは目ざとく取り入れる習性があるため、即Udemy講座を購入。

読める！読める！書ける！動かせる！簡単に書ける！
ともう興奮しっぱなしになり、本記事を書いています。

使ってみて

正直Reactとの比較はできない・・・だってやってないんだ

paizaラーニング レベルアップ問題集 幅優先探索・深さ優先探索メニュー JavaScript 領域の個数

領域の個数 (paizaランク A 相当)

https://paiza.jp/works/mondai/bfs_dfs_problems/bfs_dfs_problems__number_of_area

JavaScriptで解いてみました。

# 解答コード例1 スタックで深さ優先探索

グリッドの一つのマスを、探索のスタート地点にします。
stackを用意して、深さ優先探索をします。
探索したところは探索済にします。
グリッド全てのマスについて、同様に探索します。

“`javascript:JavaScript
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);
//グリッドの行数 H , 列数 W
const [H, W] = lines[0].split(” “).map(Number);
//グリッド
const grid = lines.slice(1, H + 1).map(ro

【TypeScript】型定義ファイルのないライブラリのインポートエラーについて【React】

１）はじめに

JavaScriptで作成していたポートフォリオをTypeScriptへ置換してた際に発生したエラー。

package.jsonに使用するライブラリを記載(今回の場合はreact-anchor-link-smooth-scroll)
しているにも関わらず、赤線でエラーの表示。

2）Why??

調べてみると、JavaScriptには型定義は存在しないので問題ないが、TypeScriptには型定義が存在するので
型定義ファイルがないJavaScriptライブラリを使用するとこのようなエラーが発生するみたい。

つまり型を定義すると解決するエラー。
上記のエラー文を読んでみると解決方法が二通りあって、
1)“`npm i –save-dev @t

Phaserで作った試作品を公開する環境

## 結論

PLAYCODEで公開するのがいいかな、と思いました。
https://964701.playcode.io

* サーバーを立てなくてもいいですし、SSL証明書を用意しなくてもいいので維持費がかかりません
* ファイルをアップロードしたり、ディレクトリ階層を作ったりできるので、実際に近い構成にすることができます
* 

## 発端

　流行りのWEB3にあやかりたいという願望から、Dappを開発できたらいいな、とか思うのですが、オープンソースで開発に携われるようなプロジェクトってあまり見つからないしハードルが高いと思うんですよね。
　それでもチャレンジしたいなら、自分で立ち上げるしかないってことでしょうか。
それで、個人規模で比較的簡単に作れそうなものはゲームかなと思ったわけです。
　スマコンとのインターフェースにWeb3

WebWorker + indexedDBで逆ジオコーディング

# PHPサーバなしで逆ジオコーディングしてみる
– 諸般の事情により、CORS有効化不能 or PHPサーバが用意できなかった時に作成
– もう用済みですが、せっかく作った＋WebWorkerのお勉強をしたため供養

## 概要
以前の記事、[逆ジオコーディングサーバを自作](https://qiita.com/wrwrhucjnd/items/68e8e16b3337e278ba7b)でヒュベニの式を用いて直接緯度経度から最近傍を探していましたが、今回はgeohashを使用しています。
https://github.com/davetroy/geohash-js/
(精度がイマイチ、容量削減効果も微小、パフォーマンスも実用上変わらずのため、ヒュベニの式に移行)
– あらかじめ住所とgeohashの対応表を用意して、javascriptの変数の形でファイル保存
– 初回利用時に上記ファイルを取り込み、indexedDBに格納
– WebWorkerを起動し、indexedDBへのクエリを担当
– 非同期処理がたくさんです

## コード
### 実際にウェブワーカーとして働くクラス