フロントエンドの地獄

みせてやりますよ。本当の地獄ってやつをね。

【書評】イヌでもわかるHyperapp

技術書典4で購入したイヌでもわかるHyperappを読みました。

f:id:tatsuaki_w:20180501204628p:plain

こちらからPDF版が購入出来ます。

inutetraplus.booth.pm

ざっくり

QiitaがReactから変更したことで噂になったビューライブラリHyperappをマークダウンエディターを作りながら学べる本です。

サンプルを元に手を動かしながらHyperappの実装を進められます。

所要時間:約3時間

流れ

  1. Hyperappの概要説明
  2. カラーコードビューアーを作りながらHyperappを触ってみる
  3. マークダウンエディタを作ってみる
  4. 付録:v2.0についてなど

実際につくったもの

カラーコードビューアー

https://nabettu.github.io/study-hyperapp/

マークダウンエディタ

https://nabettu.github.io/study-hyperapp/#markdown

Hyperappについての所感

印象は軽くてとにかくシンプル。最低限だけど必要なものは揃ってる感じ。

v1で1KB程度 v2でも2KBくらいらしいので、とにかく軽い。

actionsでstateを更新して、viewを更新するという定番な流れなので学習コストが低い。

Reactと共通点も多く馴染みやすい。Preactよりさらにコンパクト感ある。

ちゃちゃっと導入するならvueやriotくらいサクッとできそうな印象。

しかし俺はjsxじゃなくpugが書きたい

本の感想

実際に手を動かしながら使ってみることが出来るので、概要を掴みながら実際に導入するイメージが持ちやすいです。

3時間程度で終わらせられたのでちょうどいいボリューム感。

犬がかわいい。

私ははじめからwebpack構成で進めましたが、本では2章は生HTML、3章はwebpackでという流れで進めてあります。

実際の現場ではwebpack必須だと思うので、webpackでのハマりどころを体験できていい感じ。

公式ドキュメント読まずともしっかり説明がされていて難なく進められた。

とりあえず「Hyperappがどんなもんかさっくり触ってみたい」という私にピッタリの内容でした!

以上です!

inutetraplus.booth.pm