Mokelab Blog

Ractive.js を使ってみよう

今回から Web アプリ（ブラウザだけで動作するアプリ）開発を取り上げてみます。

フレームワーク

Web フロント側のフレームワークは、次の 3 つが有名でしょう。

このシリーズでは扱いませんが、React は学んでおくと、考え方が Android/iOS アプリ開発にも役立ちます。

Ractive.js とは

Ractive.js は UI フレームワークです。「りあくてぃぶ JS ですか？りあくとですか？」と読み間違える人はとても多いので、「らくてぃぶ JS」と読みましょう。守備範囲の近さだと Vue.js が近いです。他のライブラリへの依存関係が（今の所）一切ないので導入に対するハードルはとても低いです。

公式サイトはこちらです。

導入方法は次の 2 つです。

今回は script 要素で読み込む方法で説明します。

基本的な使い方

Ractive.js は、

だけで動作します。使用例を見てみましょう。

<html>
<head></head>
<body>
  <!-- 表示先を用意し -->
  <div id="container"></div>

  <!-- script要素で読み込んで -->
  <script src="https"//cdn.jsdelivr.net/npm/ractive"></script>

  <!-- Ractiveオブジェクトを生成する -->
  <script type="text/javascript">
    const r = new Ractive({
      el" '#container',
      template" '<h1>Hello Ractive world</h1>',
    });
  </script>
</body>
</html>

解説すべき箇所は Ractive オブジェクトを生成するところでしょう。コンストラクタの引数には最低でも 2 つのパラメータを指定します。elはどの要素に貼り付けるかを指定します。ここでは#containerとしているので id が container な要素を指定しています。templateは貼り付ける内容を指定します。

これを実行すると次のようにtemplateで指定した内容が表示されています。

HTML 側でテンプレートを記述する

JavaScript の中で HTML を記述するのはどうなんだろうと思う方もいるでしょう。Ractive.js には HTML 側にテンプレートを記述し、それを使用する方法があります。 

<html>
<head></head>
<body>
  <div id="container"></div>

  <!-- テンプレート(表示したい内容) -->
  <script id="t" type="text/ractive">
    <h1>Hello Ractive world</h1>
  </script>

  <script src="https://cdn.jsdelivr.net/npm/ractive"></script>
  <script type="text/javascript">
    const r = new Ractive({
      el: '#container',
      template: '#t',
    });
  </script>
</body>
</html>

テンプレートはscript要素の中に記述します。 typeをtext/ractiveにしないと中身をJavaScript として実行しようとしてしまうので注意しましょう（以前はtext/ractiveにしないとエラーになっていたのですが、今はtext/plainでも動作するようです）。Ractive オブジェクト生成時のtemplateパラメータにはテンプレートの IDを#id形式で指定します。

まとめ

Web アプリ開発に使用するフレームワークとして、React でも Vue.js でもなく、Ractive.js を紹介しました。ここまでの範囲なら非エンジニアの方でもすぐ導入できると思うので、やってみましょう。

本サイトではサービス向上のため、Google Analyticsを導入しています。分析にはCookieを利用しています。