search
LoginSignup
13

More than 3 years have passed since last update.

posted at

Organization

NimのSPAフレームワーク "Karax" のご紹介

NimによるWeb開発

Nimは、JavaScriptにトランスコンパイルできるPythonライクな静的型付け言語です。
JSの他にも、C, C++, Objective-C にコンパイルでき、わかりやすい構文と強力なマクロ、演算子オーバーロードがサポートされているので、書きやすさ・速度面などがとても優れた言語なのですが、この記事では言語についての説明は省きます。
最近 version.1.0 がリリースされました。そのシンプルさゆえ、英語のドキュメンテーションや先人のQiitaなどを参考にすれば小学生でも書けるんじゃないでしょうか。日本のプログラミング教育でも採用して欲しいくらいです。

さて、Web開発が可能(単にJSにコンパイルされるだけでなく、DOM操作やJS関数のラッパーがスタンダードライブラリでサポートされているためです)なNimで、「Karax」というSPAフレームワークが開発されています。
Githubはこちら。READMEを読んでみると説明があるので、どういう志向のフレームワークなのかがわかります。大まかに要約すると

  • KaraxはNimのSPAフレームワークだよ。
  • Nimのマクロを使って、少ない分量で柔軟に高速にWeb開発ができることを目標にしているよ。
  • divはNimの予約語なので tdiv を使って仮想DOMのdiv要素を生成するよ。

karaxの開発速度は、遅い時で1週間に1commit、頻度がいい時は毎日更新されています。

開発環境を整える ~ Hello,world!

インストール

Nimをインストールすると、同時にNimbleというパッケージマネージャもインストールされるので、これを利用してKaraxの環境を整えましょう。
READMEに大方従います。

mkdir karax-workspace
cd karax-workspace
nimble develop karax

結果例。Mac OS Sierraにアップデートした後の初めてのターミナル操作だとエラーが出て詰まるのでMac OS Sierraにしたらgitコマンド、ターミナル上にエラーが出てしまった。を参考にして直しました。
Warningがいくつか出てきていますが、こちら側の問題ではないので無視します。

MomeeMac:hello momiyama$ nimble develop karax
Downloading https://github.com/pragmagic/karax using git
   Warning: Package 'karax' has an incorrect structure. It should contain a single directory hierarchy for source files, named 'karax', but file 'scrollapp_simple.nim' is in a directory named 'experiments' instead. This will be an error in the future.
      Hint: If 'experiments' contains source files for building 'karax', rename it to 'karax'. Otherwise, prevent its installation by adding `skipDirs = @["experiments"]` to the .nimble file.
  Verifying dependencies for karax@1.1.0
   Warning: The .nimble-link file is pointing to a missing file: /Users/momiyama/Desktop/karax/karax/karax.nimble
      Hint: Remove '/Users/momiyama/.nimble/pkgs/karax-#head' or restore the file it points to.
 Installing karax@1.1.0
   Building karax/karax/tools/karun using c backend
   Success: karax installed successfully.

Successで成功です。Karaxを構成するプログラムやサンプルプログラムがダウンロードされます。
karaxディレクトリにまとめられているので、

cd karax

をお忘れなく。

Hello,world.

早速、Karaxに挨拶していきましょう。karaxディレクトリの中に適当な名前のディレクトリを作成します。

mkdir helloworld

最低限必要なファイルが二つあるので、用意します。

  • htmlファイル
  • nimファイル

特に命名規則もないので、 index.htmlhello.nim にしました。
htmlに、雛形を書き込みます。

index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Hello,world</title>
  </head>
  <body id="body">
    <div id="ROOT" />
    <script type="text/javascript" src="hello.js"></script>
  </body>
</html>

さて、id ROOT を持つdiv要素が必要なので、忘れないようにしましょう。
hello.nim をJSにトランスコンパイルすると nim.js になるので、予め読み込んでおきます。

hello.nim
include karax / prelude

proc createDom(): VNode =
  result = buildHtml(tdiv):
    text "Hello World!"

setRenderer createDom

Nimプログラムもたったこれだけです。言語の特性もあるでしょうが、ここまですっきり書けると感動しませんか?私はします。
さて、詳しい解説は後回しにしてコンパイルします。

nim js hello.nim

間違いがなければコンパイルが通り、hello.js が生成されます。

open index.html

で開いて、「Hello World!」が表示されていれば優勝です。おめでとうございます。

詳しい話

karaxをincludeしているのはさておき、重要なのはcreateDOM関数です。(procは、Nimにおける関数定義キーワードです。)
VNodeとは、Karaxに置いて仮想DOMの要素を表現している型です。これを返す関数ですね。
Nimには3つの戻り値返却パターンがあり、1つめはおなじみ return を使って投げる方法、2つめはそこそこおなじみ最後の式を評価して投げる方法、そして3つめがこの result変数 に値を入れて返却する方法です。
さて、 karax/experiments/trello/knete.nimbuildHtmlが定義されています。タグを受け取って要素を返すマクロですね。
tdivは仮想DOMのdiv要素を返しますが、 karax/experiments/oldwidgets.nim に関数として定義されていました。
textは要素のテキストとして返す関数で、これによって生成されたHTMLは

<div id="ROOT">Hello world!</div>

となっています。setRenderer は内部で生成された仮想DOMを生成する関数です。これが必須で書かなければいけないのが少し意外でした。(筆者も深くKaraxを理解しているわけではないため。)

サンプルプログラム

Karaxのサンプル、学習用として karax/examples に数個のアプリケーションが用意されています。carouselmediaplayerscrollapptodoappです。その他にもコンポーネントが含まれています。
これらも小さなアプリで、簡単に読むことができるので次はそれらのコードの働きを見ていこうと思います。
終わり。皆さんもNimやってみてくださいね。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
13