こんなの
デモはこちら → https://easy-rezept-viewer.netlify.app/
GitHubリポジトリ
GW中作ってました。そして出遅れた...
過去hyperappで作っていた自作アプリをReactで作り変えてみました。
そもそもレセプトとは？
ざっくり言うと、病院でもらう点数と金額が書いた領収書です。
レセプト（診療報酬明細書）は、医療費の請求明細のことで、保険医療機関・保険薬局が保険者に医療費を請求する際に使用するものです。
引用元: 社会保険診療報酬支払基金 レセプト電算処理システム
病院でもらう領収書は電子データだとこのようなCSVで記録されています。
病院はこれを保険機関に送って、お金をもらっているわけです。1
CSVの中身はこのようなイメージです。
引用元: 社会保険診療報酬支払基金 レセプト電算処理システム
CSVのフォーマットは記録条件仕様2という名前で公開されています。フォーマットでええやん。
余談ですが、このCSVの中にはこのような階層構造が存在しています。
引用元: 社会保険診療報酬支払基金 レセプト電算処理システム 電子レセプトの作成
皆様いろいろ言いたいことあるとは思いますが、まあ、**ずいぶんアグレッシブなCSV...**とオブラートに包んでおきます。3
YAML化してえ...
アプリの話
概要
レセプトを作るにはレセプトコンピュータ(通称レセコン)という高機能なツールが必要です。
このアプリはレセコンではなく、レセコンで作成されたレセプトを見るビューワ的なものです。
（一応エディタっぽいこともできるけどビューワにしています。）
対象
- 電子レセプトに関係する人
- テストデータ作りたい人
- 故障対応とかで解析しなきゃいけない人
- 仕様がよくわからない新規さん 等
仕様
特徴は最初に貼ったgifの通りです。
「サンプルデータ投入」ボタンで簡単に試せます。
https://easy-rezept-viewer.netlify.com/
ちなみに散々基金から引用しといて労災のみ対応です！すません！
技術的な話
技術要素と選択理由
- jsライブラリ:
ReactRedux
Vue,Reactで悩みましたが、勉強のためにも資料が多くスタンダードなReactをチョイス。
アプリの規模感でいうと間違いかもしれません。
Reduxはある程度作り込んだ段階で、stateが複雑化してきたので、一貫性をもたせるために導入しました。結果的に可読性は上がったかと思います。 - トランスパイラ:
babel
create-react-appで構築したため、もれなくセット - モジュールバンドラ:
webpack
同上 - UIライブラリ:
Material-UI
公式のDemoが見やすく、学習しやすかったのでチョイス。 - ホスティング:
netlify
最初はherokuを使っていたのですが、スリープしちゃうと遅いのでnetlifyをチョイス。
速度で言うとfirebaseが爆速だったので、今後はCIをかまして移行する予定。
キャッシュを消してアクセスした際の速度
| 表示速度 | |
|---|---|
| heroku | 3.7s |
| netlify | 620ms |
| firebase | 274ms |
作ってわかったこと
フロント楽しい
バックエンドエンジニアだったので、目に見えてモノが動くということ自体がとても楽しかったです。
Material-UIはそれを加速させてくれました。これのおかげでモチベーション維持できたと言っても過言ではないです。
関心ごとのある部分だけに集中できる
最初にテンプレートを作成してくれるcreate-react-appが相当優秀でした。
即動くものが出来上がるため、環境構築にまつわる一切の躓きがありませんでした。
また、インフラを忘れさせてくれるnetlifyの存在も新鮮でした。
(以前Lambda使ったときも思いましたが)VPS借りてCentOSゴリゴリしてたあの頃が懐かしい...
アプリだけに集中できる環境が揃っているのはいい時代ですね。
ボイラープレートコードが多い
Reactで疲れた点。以前hyperappで同じようなものを作りかけていたのですが、そのせいもあってか比較画像ほどではないですが、コード量は多く感じました。
2018 年は Hyperapp の年だ https://qiita.com/JorgeBucaran/items/c48446babe0627e25ee6
AtomicDesignを理解するのが難しい
moleculesとorganismsの考え方がなかなか入ってこなかったです。
友人@saike1119 に相談したら以下のWebページを紹介してくれました。
Atomic Design の理解 : molecules と organisms をどのように分割するか
https://frasco.io/atomic-design-molecules-organisms-dc937b5989
併せて本は読んでいましたが、有識者とやらないと変な覚え方しそうで怖かったです。
「EffectiveReact」とか出ないかなーと思いました。4
React開発 現場の教科書 (著)石橋 啓太
https://www.amazon.co.jp/dp/4839960496
終わりに
このアプリに関しては、改善点がありまくりで(クソコードとかザルチェックとか)、他にもElectron化しちゃうとかやりたいことはあるので、ちょっとずつコミットしていきます。
バグとかあればIssueにお願いします。
最初はもっと技術的なこと書こうと思っていたら、基本機能しか使っていなくてあまり書くことがなかった...
次はもっとQiitaっぽい記事かけるようにReactの深みにはまっていきたいですね。