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

## :one: こんなの

![デモgif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227179/16c73d40-ad4c-22ea-7155-f933629b1789.gif) 
[![Netlify Status](https://api.netlify.com/api/v1/badges/9cf65edb-8397-4b6d-bccb-4b4ee1376ea8/deploy-status)](https://app.netlify.com/sites/easy-rezept-viewer/deploys)

デモはこちら → https://easy-rezept-viewer.netlify.app/
[GitHubリポジトリ](https://github.com/old-stone/easy-rezept-viewer)

GW中作ってました。そして出遅れた...
過去`hyperapp`で作っていた自作アプリを`React`で作り変えてみました。

## :two: そもそもレセプトとは？

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

>レセプト（診療報酬明細書）は、医療費の請求明細のことで、保険医療機関・保険薬局が保険者に医療費を請求する際に使用するものです。
>
>引用元: 社会保険診療報酬支払基金 レセプト電算処理システム

病院でもらう領収書は電子データだとこのような**CSV**で記録されています。
病院はこれを保険機関に送って、お金をもらっているわけです。[^c]
[^c]: 超テキトーに言ってるので、本物っぽい人の前では忘れてください。

CSVの中身はこのようなイメージです。
><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227179/8ceaa5be-b8fa-f579-a43a-e2c52119b521.png" width=50% alt="電子レセプトイメージ">
>引用元: 社会保険診療報酬支払基金 レセプト電算処理システム

CSVのフォーマットは**記録条件仕様**[^b]という名前で公開されています。~~フォーマットでええやん。~~
[^b]: 患者3割負担の`基金Ver`と、0割負担の`労災Ver`がある
このアプリは、この仕様で作成されたレセプトを確認できる、というものになっています。

余談ですが、このCSVの中にはこのような**階層構造**が存在しています。
><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227179/20905248-20e0-93b5-0e3a-eda80a28f485.png" width=50% alt="医科記録条件仕様">
>引用元: 社会保険診療報酬支払基金 レセプト電算処理システム 電子レセプトの作成

皆様いろいろ言いたいことあるとは思いますが、まあ、**ずいぶんアグレッシブなCSV...**とオブラートに包んでおきます。[^a]
YAML化してえ...

[^a]: 相当苦しめられた。絶許。

## :three: アプリの話

### 概要

レセプトを作るには`レセプトコンピュータ`(通称レセコン)という高機能なツールが必要です。
**このアプリはレセコンではなく、レセコンで作成されたレセプトを見るビューワ的なものです。**
（一応エディタっぽいこともできるけどビューワにしています。）

### 対象

* 電子レセプトに関係する人
  * テストデータ作りたい人
  * 故障対応とかで解析しなきゃいけない人
  * 仕様がよくわからない新規さん 等

### 仕様

特徴は最初に貼ったgifの通りです。
「**サンプルデータ投入**」ボタンで簡単に試せます。
https://easy-rezept-viewer.netlify.com/

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

## :four: 技術的な話

### 技術要素と選択理由

* jsライブラリ: `React` `Redux`  
`Vue`,`React`で悩みましたが、勉強のためにも資料が多くスタンダードなReactをチョイス。  
アプリの規模感でいうと間違いかもしれません。  
`Redux`はある程度作り込んだ段階で、stateが複雑化してきたので、一貫性をもたせるために導入しました。結果的に可読性は上がったかと思います。  
* トランスパイラ: `babel`  
`create-react-app`で構築したため、もれなくセット
* モジュールバンドラ: `webpack`  
同上
* UIライブラリ: `Material-UI`  
[公式のDemo](https://material-ui.com/)が見やすく、学習しやすかったのでチョイス。
* ホスティング: `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`で同じようなものを作りかけていたのですが、そのせいもあってか比較画像ほどではないですが、コード量は多く感じました。
><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227179/c2448459-75e8-7db0-eb53-41306b7f6c60.png" width=30%>
> 2018 年は Hyperapp の年だ
> https://qiita.com/JorgeBucaran/items/c48446babe0627e25ee6

#### :persevere: `AtomicDesign`を理解するのが難しい
`molecules`と`organisms`の考え方がなかなか入ってこなかったです。
友人@saike1119 に相談したら以下のWebページを紹介してくれました。
>Atomic Design の理解 : molecules と organisms をどのように分割するか
>https://frasco.io/atomic-design-molecules-organisms-dc937b5989

併せて本は読んでいましたが、有識者とやらないと変な覚え方しそうで怖かったです。
「EffectiveReact」とか出ないかなーと思いました。[^d]
[^d]: 最初に言い出したのは@shima07
>React開発 現場の教科書 (著)石橋 啓太
>https://www.amazon.co.jp/dp/4839960496

## :five: 終わりに

このアプリに関しては、改善点がありまくりで(クソコードとかザルチェックとか)、他にもElectron化しちゃうとかやりたいことはあるので、ちょっとずつコミットしていきます。
バグとかあれば[Issue](https://github.com/old-stone/easy-rezept-viewer/issues)にお願いします。

最初はもっと技術的なこと書こうと思っていたら、基本機能しか使っていなくてあまり書くことがなかった...
次はもっとQiitaっぽい記事かけるように`React`の深みにはまっていきたいですね。