React
material-ui
Netlify
レセプトコンピュータ

【React】誰でも簡単にレセプトが見れる!EasyRezeptViewerを作ったよ!


:one: こんなの

デモgif

デモ - https://easy-rezept-viewer.netlify.com/

GitHubリポジトリ

GW中作ってました。そして出遅れた...

ずっとJava(SpringBoot)のバックエンド屋だったので、他のこともやりたいなと思い

今回はじめてReactに挑戦してみました。


:two: そもそもレセプトとは?

ざっくり言うと、病院でもらう点数と金額が書いた領収書です。


レセプト(診療報酬明細書)は、医療費の請求明細のことで、保険医療機関・保険薬局が保険者に医療費を請求する際に使用するものです。

引用元: 社会保険診療報酬支払基金 レセプト電算処理システム


病院でもらう領収書は電子データだとこのようなCSVで記録されています。

病院はこれを保険機関に送って、お金をもらっているわけです。1

CSVの中身はこのようなイメージです。


電子レセプトイメージ

引用元: 社会保険診療報酬支払基金 レセプト電算処理システム


CSVのフォーマットは記録条件仕様2という名前で公開されています。フォーマットでええやん。

このアプリは、この仕様で作成されたレセプトを確認できる、というものになっています。

余談ですが、このCSVの中にはこのような階層構造が存在しています。


医科記録条件仕様

引用元: 社会保険診療報酬支払基金 レセプト電算処理システム 電子レセプトの作成


皆様いろいろ言いたいことあるとは思いますが、まあ、ずいぶんアグレッシブなCSV...とオブラートに包んでおきます。3

YAML化してえ...


:three: アプリの話


概要

レセプトを作るにはレセプトコンピュータ(通称レセコン)という高機能なツールが必要です。

これは、レセコンで作成されたレセプトを見るビューワ的なアプリです。

(なのでエディタっぽいこともできるけどビューワにしています。)


対象


  • 電子レセプトに関係する人


    • テストデータ作りたい人

    • 故障対応とかで解析しなきゃいけない人

    • 仕様がよくわからない新規さん 等




仕様

特徴は最初に貼ったgifの通りです。

サンプルデータ投入」ボタンで簡単に試せます。

https://easy-rezept-viewer.netlify.com/

ちなみに散々基金から引用しといて労災のみ対応です!すません!


:four: 技術的な話


技術要素と選択理由


  • jsライブラリ: React

    Vue,React,hyperappで悩みましたが、勉強のためにも資料が多くスタンダードなReactをチョイス。

    アプリの規模感でいうと間違いかもしれません。

  • トランスパイラ: babel

    create-react-appで構築したため、もれなくセット

  • モジュールバンドラ: webpack

    同上

  • UIライブラリ: Material-UI

    公式のDemoが見やすく、学習しやすかったのでチョイス。

  • ホスティング: netlify

    最初はherokuを使っていたのですが、スリープしちゃうと遅いのでnetlifyをチョイス。

    速度で言うとfirebaseが爆速だったので、今後はCIをかまして移行する予定。


キャッシュを消してアクセスした際の速度

表示速度

heroku
3.7s

netlify
620ms

firebase
274ms


作ってわかったこと


:blush: フロント楽しい

バックエンドエンジニアだったので、目に見えてモノが動くということ自体がとても楽しかったです。

Material-UIはそれを加速させてくれました。これのおかげでモチベーション維持できたと言っても過言ではないです。


:blush: 関心ごとのある部分だけに集中できる

最初にテンプレートを作成してくれるcreate-react-appが相当優秀でした。

即動くものが出来上がるため、環境構築にまつわる一切の躓きがありませんでした。

また、インフラを忘れさせてくれるnetlifyの存在も新鮮でした。

(以前Lambda使ったときも思いましたが)VPS借りてCentOSゴリゴリしてたあの頃が懐かしい...

アプリだけに集中できる環境が揃っているのはいい時代ですね。


:persevere: ボイラープレートコードが多い

Reactで疲れた点。以前hyperappで同じようなものを作りかけていたのですが、そのせいもあってか比較画像ほどではないですが、コード量は多く感じました。




2018 年は Hyperapp の年だ

https://qiita.com/JorgeBucaran/items/c48446babe0627e25ee6



:persevere: AtomicDesignを理解するのが難しい

moleculesorganismsの考え方がなかなか入ってこなかったです。

友人@saike1119 に相談したら以下のWebページを紹介してくれました。


Atomic Design の理解 : molecules と organisms をどのように分割するか

https://frasco.io/atomic-design-molecules-organisms-dc937b5989


併せて本は読んでいましたが、有識者とやらないと変な覚え方しそうで怖かったです。

「EffectiveReact」とか出ないかなーと思いました。4


React開発 現場の教科書 (著)石橋 啓太

https://www.amazon.co.jp/dp/4839960496



:five: 終わりに

このアプリに関しては、改善点がありまくりで(クソコードとかザルチェックとか)、他にもElectron化しちゃうとかやりたいことはあるので、ちょっとずつコミットしていきます。

バグとかあればIssueにお願いします。

最初はもっと技術的なこと書こうと思っていたら、基本機能しか使っていなくてあまり書くことがなかった...

次はもっとQiitaっぽい記事かけるようにReactの深みにはまっていきたいですね。





  1. 超テキトーに言ってるので、本物っぽい人の前では忘れてください。 



  2. 患者3割負担の基金Verと、0割負担の労災Verがある 



  3. 相当苦しめられた。絶許。 



  4. 最初に言い出したのは@shima07