1. はじめに
表題の通りアプリを作ったので記事にしておこうと思います！
初めてHyperappで開発を始める方は
基本的な考え方を是非こちらでご確認ください。
https://qiita.com/hajime-nohara/items/888aae1c4e553f3cec86
実際にアプリを触りながら読んでもらえると良いと思います。
https://www.sharpen.tokyo/gantt.html
本記事はアプリの実装内容についてザックリ記し、開発環境設定については触れません。
※ 以降、本記事で紹介するアプリをsharpenと呼びます
※ 発展途上アプリです、ご指摘やアドバイスお願いします😉
1-1. sharpenはどんなアプリ？
シンプルなガントチャートUIをベースにした
タスク管理アプリです。
デザイン、UX、共にシンプルを追求。
1-2. 設計思想
・サンプルと呼べるほどのライトさ
・堅実な振る舞いの永続性
・mobile deviceにも対応
2. ソースコード解説
2-1. ディレクトリ構造
Hyperappの基本概念であるState, View, Action ごとに
ディレクトリを分けています。MVC風に言うとSVAですね。
その他、付随的なディレクトリがありますがここでは説明を省きます。
src/index.jsがエントリポイントになっていて、
そこでid="sharpen"のDOMの中にHyperappで生成したDOMを展開します。
基本構造
▾ src/
▾ actions/
index.js
table.js
▾ state/
index.js
▾ views/
detailModal.js
ganttBar.js
index.js
...
index.js
index.pug
実際のディレクトリ構造
https://github.com/hajime-nohara/sharpen/tree/develop/src
2-2. State
sharpenで作成されるデータのひな形になる部分です。
sharpenのStateの中身は、大きく2つに分類できます。
| 分類 | 内容 |
|---|---|
| タスクを纏めるプロジェクトの共通データ | プロジェクト名、locale etc |
| タスクに関するデータ | タスク名、開始/終了日付、todoリスト etc |
sharpenは、1つのプロジェクトのデータを1つのStateの変数で管理し、
ユーザが複数のState(プロジェクト)を管理できるように設計しています。
state/index.jsには初期データとしてStateが定義されています。
ユーザ操作によって変更されたStateは永続的に保存できる領域に
Storeし、以降は保存したStateをロードします。
sharpenの特徴は、
個々のデータ項目のためにDBカラムを定義せず、Stateをまるごと保存するところです。
その為、State内のレイアウトを変更したい場合は、jsでState内のレイアウト変更する処理を行います。
簡素化&スピーディな実装のための設計なんですが、
State(jsonオブジェクト)をベースに動くHyperappだから採用できたと言えます。
2-3. View
ganttBar.jsとdetailModal.jsの2つが中心的なViewです。
現在、タスクは全てGantt chart形式のBarで表現しています。
ganttBar.jsで一本のBarを表現します。
Barをタップした際にでモーダルダイアログを表示し、
詳細情報の表示/編集を行います。それはdetailModal.jsで実装されています。
その他のViewは、日付のヘッダ、ツールバー、モーダルダイアログ etcです。
これら付随機能も同じようにコンポーネント化して切り出し、別ファイルで書いています。
Viewでは以下の2つを実装しています
① JSX syntax をインターフェースとして VirtualDOMを生成
② onClickなどのイベント属性に指定する処理（関数化して実装。大抵の関数で何らかのActionを呼んでStateを更新しています）
JSXの詳細は割愛しますが、
一般的なMVCのテンプレートエンジンのようなノリでVirtualDOMを定義できる優れものです。
一見HTMLですが、
実態はh関数で、あくまでもjavascript言語であり、具体的にはHashオブジェクトになります。
ganttBar.js
https://github.com/hajime-nohara/sharpen/blob/develop/src/views/ganttBar.js
detailModal.js
https://github.com/hajime-nohara/sharpen/blob/develop/src/views/detailModal.js
2-4. Action
現在、表（gantt chart大枠）のデータを編集するActionは、
action/table.jsと言う名前で切り出しています。
taskに関するActionもaction/task.jsと行った感じで切り出す予定です。
Actionは多数実装するので1ファイルだと見辛くなります。
カテゴリ分けして切り出した方が良いと思います。
action/table.js
https://github.com/hajime-nohara/sharpen/blob/develop/src/actions/table.js
sharpenではStateの直接更新をしています。
ReactではNG行為ですがHyperappではNGではないようです。
Hyperappにおいても、
Actionは新しいState（Hashオブジェクト）をreturnしてStateを更新するのが基本的な実装方法ですが、State内に、配列サイズが可変、階層が深い、といったオブジェクトがある為、
そのような方法を用いています。
Hyperappは、ActionがreturnしたObjectと現在のStateを比較し、両者が
異なる場合にDOMを更新しますので、Stateを直接更新する多くのActionで
DOMを更新するために、return {} しています。
Stateの階層が深くなるとその更新が面倒になります。コンテンツ内容が充実している場合、
全てのDOMをHyperappで実装するのは
課題があると思います。これは後に触れます。
3. ガントチャートBarの動き
ここはjsの実装に一番時間を使った箇所です。
仕組みは単純ですが、DOMのイベントハンドラを結構使うし
クロスブラウザを意識しゴニョゴニョとトライ&エラーがありました。
基本的にはマウスポインタが移動したx軸の距離を取得し、
その値をBarのwidth OR position leftに反映させるだけです。
https://github.com/hajime-nohara/sharpen/blob/develop/src/views/ganttBar.js
3-1. 例）Barの右端（終了日位置）を右側に伸ばす
| 順序 | ユーザ挙動 | プログラム挙動 |
|---|---|---|
| ① | Barの右端をクリック |
onmousedown or ontouchstartした際の座標位置を変数に保持 |
| ② | 掴んだままマウスを右に移動 |
mousemoveでマウス移動中にリアルタイムでBarのwidthを、「現在のwidth + (現在のマウスポインタのx軸の位置-①)」 の値に変更 |
| ③ | マウスアップ |
mouseup or touchendした際の座標位置を取得 |
| ④ | マウスアップ | 現在のwidth + (③ - ①) の値でStateを更新する（Action実行） |
| ⑤ | - | BarのDOMを更新（再描画） |
4. Semantic UI
このデザインフレームワークは素敵です。
デザインはオーソドックスでありながらオシャレ。凝った動きもしてくれます。
ドキュメントが見やすく、実はこのSemantic UIを用いた
デザイン実装が一番楽しい作業でした！
ダイナミックな動きをするSemantic UIコンポーネントは、
使う際に$('.classname').xxxx()といった形で初期化するので、
oncreate={(e)=>$(e).xxxx()}という風にHyperappのライフサイクルイベントで初期化を行なっています。
Semantic UIはjQueryベースのフレームワークですが今のところ問題なくHyperappと共存しております。
しかし、
一部のケースで注意が必要です。
4-1. Hyperappと一緒だとすんなり使えないコンポーネント
Multiple Search Selection
これは、Semantic UIのjsの処理で派手にDOMの追加削除を行なっているので、
使えないです。
State管理のHyperappは勝手にDOMの追加や削除はNGです。
例えば、Multiple Search Selection を使うと
Hyperappでリレンダーできなくなります。
Selection系の一部のSemantic UIコンポーネントは、初期化の時にinputタグなんかを追加するので、
そのまま使うとよろしくないですが、
初期化時に生成されるDOMを予め書いておいてから初期化すると使えます。
あと、
modal dialog
これも派手にDOMの追加削除を行うため、
涙し、Semantic UI採用を断念しかけたのですが、
detachable: false このオプションで回避できました。
それでもlatest versionのSemantic UI だとデザインが崩れましたが、
諦めず頑張ってたら素敵なナイスガイのアドバイスに救われました。
ナイスガイのコメント
version 2.2.14 にしてみとの事
ダウングレードなので嫌でしたがそれでも私は semantic ui を使いたいのです！
そんなこんなで、Semantic UIをフル活用です。
5. 採用してしているその他の Library
| 名前 | 役割 | 公式page | 備考 |
|---|---|---|---|
| mobile-drag-drop | Mobile deviceでD&Dできる | https://github.com/timruffles/mobile-drag-drop | ガントチャートバーの編集をMobileで実現する為に採用 |
| flatpickr | Calendar Library | https://github.com/flatpickr/flatpickr | 美しいデザインのCalendar UI |
| dateformat | 日付データの書式を楽に設定できる | https://github.com/felixge/node-dateformat | 便利なフォーマッター |
| clipboard | クリップボードコピーができる | https://github.com/zenorocha/clipboard.js | 発行したプロジェクト共有用のURLをコピーする際に使用 |
| normalize.css | cssのnormalizeに | https://github.com/necolas/normalize.css |
6. 課題
前述でも少し触れましたが、いくつか課題を抱えています。
6-1. StateやViewをパーシャル化したい
ReactはViewコンポーネント毎にStateを持っていてコンポーネントが完全にパーシャルなんですが、
Hyperappの場合は、Stateは全体で1つしか持てずViewコンポーネント毎にStateを持つ事はできません。
(Reactの時は、Lift upやだな。Stateを共通で持ちたいなと思っていたものですが。。。)
理想としては、Stateは1つで、DOM更新の処理だけをパーシャル化できると完璧なんですが、今のところやり方がわかりません。
何が問題かと言うと、
コンテンツ内容が豊富なページでViewをたくさん実装すると、たった一箇所のDOM更新のためでも、結構な処理コストがかかると言う事です。Hyperappは、VirtualDOM（Hashオブジェクト）の中身をすべて見直して、どの部分が更新されてるかなとチェックするので、Hyperappで描画するDOMの数が多ければ多いほどCPUを使います。
USERの操作感をサクサクさせたいので、State更新を気軽に実装しちゃいますが、Stateがデカイ状態で
State更新をバンバン行うと、chromeのCPU使用率がすぐマックスになります。
なので、VirtualDOMの中身を全部チェックしないで、部分的にチェックしてDOM更新したいなと言う事です。
とりあえず、良さそうなテクニックがあるっぽいのでそれを試すつもりです。
hypercraft
6-2. middlewareを実装したいなぁ
やはり、Callback的な共通処理を実装したいケースはあるもので。。。
私の場合は、Stateを更新する際に共通処理を実行したいケースがありました。
middlewareのようにやろうとすると、reduce関数でActionを強引に作り直す、
みたいな事をしなければいけない感じかなと思っています。
Reactはどうやってるんだっけ？と完全に忘れてるので、
もう一度Reactのソースを確認してみようと思う今日この頃です。
とりあえず、最上位のviewの中で共通処理を実装してます。
Hyperappの生みの親である、jorgebucaranさんがslackで親切にその方法を教えてくれました。
ありがとうございます😊
6-3. 深くネストしているStateを扱う場合
これも少々厄介です。
階層深いStatenの奥深くの値の更新や削除は、pertial stateをnestしたアクションで更新するのもきついので強引に直接更新するしかないのか？
と言う状態です。
これらの課題に直面すると、1ページ全てをHyperappでやらずに
シンプルなSteteでミニマルに使いなさいという事かなと
思うのですが、私は、Hyperappでシングルページアプリケーションを作るために、
引き続き、色々勉強してみます。
hypeappで実装されたアプリを集めて紹介しているサイトなんかもあるので
この辺でお勉強してみます。
hyperapp.rocks
7. eslint
オレオレな見やすさを重視にコーディングしていましたが、
派手に怒られました。私が怒られた内容だけメモっておきます。
$ ./node_modules/.bin/eslint ./src/*
/Users/hanohara/Desktop/private/develop/sharpen/src/views/messageModal.js
1:19 error Strings must use singlequote quotes
2:8 warning 'utils' is defined but never used. Allowed unused vars must match /h/ no-unused-vars
19:22 error Unexpected usage of doublequote jsx-quotes
21:11 error Empty components are self-closing react/self-closing-comp
✖ 1537 problems (1436 errors, 101 warnings)
1397 errors, 16 warnings potentially fixable with the `--fix` option.
| err message | 意味 |
|---|---|
| Empty components are self-closing | コンテンツがない空のタグはself closingして(例: <img src="" />) |
| A space is required before closing bracket | self closing してるスラッシュの前にはスペースをいれて |
| Block must not be padded by blank lines | 関数のブロック{}内の最初に改行を入れないで |
| Multiple spaces found before 'from' | 'from'の前に複数にスペースがあるよ |
| Strings must use singlequote | String型は シングルクゥオートを使って |
| Extra semicolon | 余計なセミコロンがあるよ |
| Do not use 'new' for side effects | 副作用狙いでnew使うな |
| Unexpected usage of doublequote | ダブルクォートはなしで |
| Missing space before => | =>の前にはスペースを |
| Missing space after => | =>の後にはスペースを |
| Expected indentation of 12 spaces but found 10 | スペース12個分のインデントかと思いますが、10個分しかないっすよ |
| Expected '===' and instead saw '==' | '===' じゃなくて '==' になってますよ |
| A space is required after ',' | カンマの後ろにはスペースは必須です |
| Missing space before function parentheses | functionの括弧の前にはスペースが必要です |
| There should be no spaces inside this paren | 括弧の中にスペースは記入すべきじゃない |
| Trailing spaces not allowed | 行末のスペースはいけません |
| More than 1 blank line not allowed | 改行が2行以上あるのはだめです |
| Unexpected space between function name and paren | ファンクション名と括弧の間に不要なスペースがあります |
| Expected space or tab after '//' in comment | コメントの//の後ろに不要な空白かタブがあります |
| Infix operators must be spaced | 中置演算子の前後は空白が必要です。（a=bとかa+"b"とかで出る） |
| Arrow function should not return assignment | アローファンクションは割り当てステートメントを返すべきではない |
| Unary word operator 'delete' must be followed by whitespace | 単項演算子 'delete'の後に空白が続く必要があります |