react(パッケージ)の導入（完了）

[kimurayui45a]

• [x] react(パッケージ)の導入
• [x] ビルドパック(Node.js)の追加
• [x] jsxファイルのビルド
• [x] 本番環境での動作確認

[kimurayui45a]

＜react導入の理由＞

* パフォーマンスの向上

描画データが増えると読み込み時間が増えたりローカルよりも動作が遅いと思いました。 また描画ツールのツールパネルの操作性(ドラッグ)が悪いことが実装時から気になっていました。 reactのライフサイクルでもっとパフォーマンスを上げられないかと検討しています。

* タッチとマウスの両方の操作に対応したい

これも描画ツールのツールパネルの操作性(ドラッグ)に関連するものです。 他の箇所でもドラッグ機能が必要になる可能性があるため、jsでの実装では挙動にもたつきがあり不安に思いました。

• この問題を解決するだろうreactのライブラリ：react-draggable、react-rnd

* コード量の改善

現在描画ツールのコードをjsのユニーク化で対応しているためformのビューファイルのコード量が多くなっており見ずらいため、reactでもっとシンプルにしたいです。

＜react導入コマンド＞

$ yarn add react react-dom

＜herokuビルドパック追加コマンド＞

$ heroku buildpacks:add --index 1 heroku/nodejs -a app-flowthing

最初にnodejsから実行するように設定しています。

＜本番環境での動作確認＞

動作確認テストとして簡単なドラッグオブジェクトを配置し、現状では問題なく動作することを確認しました。