kaf.js へようこそ!

kaf.jsは、webサイト上でアプリケーションを構築するJavaScriptフレームワークです。

GitHub tag (latest by date) GitHub commit activity GitHub code size in bytes

上の作例のように、kaf.jsはフォーム要素等を利用したデータのバインディングや、辞書を定義するだけで利用できる強力なi18nのための機能、非常に便利でかんたんなイベントバインディングシステムなどを持った高機能かつ軽量なJavaScriptアプリケーションフレームワークです。

それでいて、他のJavaScriptフレームワークよりももっと簡単にあなたの既存プロジェクトに組み込むことができます。新規プロジェクトでの利用もシンプルで、複雑な構成を要求せず、一般的なHTML構造の中にkafの便利な機能を導入することができます。

はじめる

kaf.jsの利用方法の大まかな流れは、kaf.jsファイルからKafクラスをインポートし、Kafクラスのインスタンスをnew Kaf()式を使って生成することです。

そして、new Kaf()に引数としてkafのオプションを渡す必要があります。オプションには指定できる様々な機能がありますが(後述)、まずkaf.js唯一の必須オプションであるelemが登場します。

<main id="kaf">Hello, kaf!</main>
<script type="module">
  import Kaf from "kaf.js";
  const kaf = new Kaf({
    elem: '#kaf'
  });
</script>

<script>タグとして同一のHTMLファイル内からkafを初期化する場合、JavaScriptモジュールである必要があります。JavaScriptモジュールの詳細についてはこちらをご参照ください。

elemには、kaf.jsを初期化する対象となる要素のセレクターを指定します。上の例では、idが"kaf"<main>要素に対してkaf.jsを初期化しています。kaf.jsインスタンスは、この要素内だけで機能をはたらかせることに注意してください。


> 次に、kaf.jsの実際の機能や使い方を紹介します。