hyperappとparcelで作るお手軽フロントエンド環境

hyperappとは

軽量でシンプルなビューライブラリ
https://qiita.com/JorgeBucaran/items/ac7d54d862dcb33673f1

parcelとは

お手軽に使える新しいバンドルツール
https://qiita.com/bitrinjani/items/b08876e0a2618745f54a

hyperappをparcelで使う

hyperappをインストール

npm i --save hyperapp

parcelをインストール

npm i -D parcel-bundler

グローバルにインストールしてもOK

npm i -g parcel-bundler

hyperappでjsxを使うのでbabelのプリセットをインストール

npm i -D babel-preset-hyperapp

.babelrcでプリセットを指定

{
  "presets": ["hyperapp"]
}

index.htmlで読み込むjsを指定

<script src="./index.js" />

jsはgithubのreadmeのサンプルから拝借

import { h, app } from "hyperapp"

const state = {
  count: 0
}

const actions = {
  down: () => state => ({ count: state.count - 1 }),
  up: () => state => ({ count: state.count + 1 })
}

const view = (state, actions) => (
  <main>
    <h1>{state.count}</h1>
    <button onclick={actions.down}>-</button>
    <button onclick={actions.up}>+</button>
  </main>
)

export const main = app(state, actions, view, document.body)

起動

./node_modules/.bin/parcel index.html

parcelもhyperappもお手軽に使えるので、サクッと何か作りたい時に重宝しそう。

サンプルコード

作成したサンプルをgithubに置いておきました。
https://github.com/SatoshiKawabata/hyperapp-parcel-example/tree/master