ES6で書くRiot - Felt編 #es6

Advent Calendarの10日目です。(すみません、Mac故障につき遅刻しました...) 近年、JavaScriptでプログラムを書くのに避けて通れない「プリコンパイル」について、Riotの文脈で3本ほど書いてみたいシリーズの3本目です。

ES6で書くRiot - riot.config.js編 - (サンプルコード)
ES6で書くRiot - Rollup編 - (サンプルコード)
ES6で書くRiot - Felt編 - (サンプルコード)

前回まで、各種のツールを組み合わせて「いろいろ乗り越えて使う」印象が強かったかと思いますが、正直避けて通りたいです。もっと、簡単にRiotを始める方法はないのでしょうか? それが、今回のテーマです。

Feltとは

Feltは一種のHTTPサーバです。将来(1,2年先)の標準で書いて、JavaScript(ES6)やCSS(css4)で書けば、ブラウザには自動的にES5など現在のブラウザが対応するものに変換した状態で送出されます。つまり、riot.config.js編、Rollup編と2回にわたって説明してきた、トランスパイラやバンドラについて、気にする必要がなくなります。

3ステップで試す

チュートリアル用に使用例のリポジトリを用意しました。こちらからダウンロードしてください。

ダウンロードしたファイルを解凍するとfelt-example-riot-tutorialというフォルダができているはずです。ターミナル(黒い画面)を開いて、その中に移動しましょう。

$ cd felt-example-riot-tutorial

Step 1: ライブラリのダウンロード

この例では、次のライブラリ(モジュール)をimportして使っています。

riot: Riotのライブラリ本体
marked: Markdownで書かれたテキストをHTMLに変換するライブラリ

メモ: markedは例として使っているだけなので必須ではありません。実際に自分のサイトで使う際は、必要に応じたライブラリを読み込んでください。

どんなライブラリを使うかはプロジェクトごとに異なるので、システム全体ではなくプロジェクト(フォルダ)内にインストールします。まずは下準備で次のコマンドを実行します。

$ npm init -y

これでpackage.jsonというファイルが作成されたはずです。続けて、次のコマンドを実行しましょう。

$ npm install -S riot marked
$ npm install -D felt felt-recipe-riot

1行目で上述のライブラリのインストール、2行目でFeltとその「レシピ」をインストールしています。それぞれのコマンドの実行に1,2分かかるので気長に待ちます。

Step 2: 起動スクリプトを書く

package.jsonを開くと、"test": "echo \"Error: no test specified\" && exit 1"の一行があるはずです。この行の代わりにstartスクリプトとしてfelt -r riotを追加します。全体としては次のような内容になります。

{
  "name": "felt-example-riot-tutorial",
  ...
  "scripts": {
    "start": "felt -r riot --debug"
  },
  ...
  "dependencies": {
    "marked": "^0.3.6",
    "riot": "^3.0.2"
  },
  "devDependencies": {
    "felt": "^0.3.0",
    "felt-recipe-riot": "^0.2.1"
  }
}

メモ: 上記、バージョン番号については、執筆時の最新なので多少変わっていても構いません。
メモ2: feltのコマンドに--debugフラグを追加しておくと、feltがどんな働きをしているかわかりやすいです。

Step 3: サーバの起動

あとは、もうWebサーバを起動するだけです。次のコマンドを実行して、ブラウザでhttp://localhost:3000を開いてみましょう。

$ npm start

Hello Rollup!

と表示されていれば成功です

まとめ

最初は、黒い画面やpackage.jsonの扱いが面倒に思えるかもしれません。ただ、Riotを含めてnpmのライブラリは必ず必要になってくるので、その点だけは乗り越えてしまいましょう。ただ、いままでの2編(riot.config.js, Rollup)と比べると、各段に簡単だったのではないかと思います。

レシピがfelt-recipe-riotとして用意されている
バンドル後のファイルの置き場所を気にしなくていい

などの点が大きいですね。まずは、Feltで簡単に始めて、開発の規模やサーバ環境に応じて(Nodeが動かせるかほか)、Rollupやwebpackに取り組むとよいのではないでしょうか。

Feltについての詳細は、以前こちらの記事にまとめました。詳しくはそちらをどうぞ。