さっき決めたブログ

[Nim]NimからJavaScriptを作成してWebページを作る

目次

• 簡単なプログラム
• JQueryを使いたい
• デバッグは出来るのか？
• 使ってみた感想
• 参考にしたサイト

Nimでプログラミングシリーズ、今回はWeb系をやろうかと思います。
Nimには標準でJavaScriptにトランスパイラする機能が備わっているので、それでどこまで出来るのかを確認します。

Webクライアント系の技術で言えば、WebAssemblyも試してみたいところではありますが、それはまた別の記事で試すとして、今回はJavaScriptの部分のみ検証します。

簡単なプログラム

簡単なサンプルプログラムを作成します。
いつものように画面に "Hello World!!" と表示するものです。
DOM関連はDOMライブラリをインポートして使用しています。

確認用のHTMLも作成します。

tasks.json, launch.json はこんな感じです。

これで、コンパイルするとフォルダに nimtest03.js が作成されています。

実行するとブラウザが起動して、結果が表示されました。

実行結果

JQueryを使いたい

NimをJavaScriptに変換して動作されることは出来たけど、例えばJQueryとかJavaScriptのライブラリを使用する前提のばあいどうするんだろ？？？ という疑問が残ります。

このあたり "NIM" "JQUERY" なんかで調べてもいまいちいいのが出てこない。。。と思ったら一番上に "jsffi" なるキーワードが！！
調べてみたら Nim で JavaScript の外部ライブラリを使用するためのライブラリらしいです(JQueryだけではなく他でもいけるのかな？)。

なんだかこれで行けそうなので試してみる。

index.html も修正します。

今回 JQuery は Google の提供しているものを使用しています。
tasks.json を次のように直してコンパイル。

実行してみたらうまい事動作しました。

実行結果

ただ、JSON表記が直で出来無さそうなのがめんどい。
あと、このやり方だと、"font-size" の様な、ハイフンの入ったキー名の指定が出来ない気がします。
(`font-size`とバッククオートで囲めば Nim のコンパイルは通るのですが、JavaScriptに変換された際に "fontHEX2Dsize" と勝手にハイフンが変換されてしまうようです)
JQueryのCSS指定の場合は、DOMの表記方法でも動くようなので(初めて知った。。。)一応回避は出来ましたが、他の用途でJSON形式のデータを扱う際に詰む場面があるのではと思います。

ちょっと微妙かな～。

デバッグは出来るのか？

現在検証中

Nimのソースコードで、VSCode上でのデバッグは出来るのだろうか？
(TypeScriptでは、出来ると聞いたことがあるので、何かしら方法はあるのかもしれない)

使ってみた感想

• 一通りの事は出来そうな感じ
• JSON形式のデータの扱いに難あり
• 出力されたコードが結構冗長になる
• 結局、JavaScriptも多少は知らなくては作れないんじゃないの？？
• Nimのソースコードでのデバッグはできるのかな？

参考にしたサイト

Nimで他の言語との連携方法まとめ

https://qiita.com/snowlt23/items/1696687cca61bfedb1cc

NimでJavaScriptとして出力しHTMLから利用する

https://jiro4989.github.io/home/tech/nim/js.html

jsffi

https://nim-lang.org/docs/jsffi.html 日本語訳:https://runebook.dev/ja/docs/nim/jsffi

以上になります。