はじめに
はじめまして。Webサービス開発グループで2019年度新入社員の浜村です。
本記事ではOJTでやっていることの中から一つピックアップして、紹介したいと思います。
現在、弊社で進めているレガシー脱却プロジェクトの一環で、独自システムのリプレースを行っております。
それに伴い、付随するツール類のリメイクが必要で、OJTの業務としてその一翼を担いました。
やったこと
結論から言うと、以下のような社内ツールのフォームを、
以下のように、Reactを使って一から作り直しました。
※ 実際に作った社内ツールはお見せできないため、
代わりに、同じ部品で作ったダミーのフォームをお見せしています。
既存ツールについて
今回、自分がリプレースを担当しているツールは、
JSPベースの独自フレームワークで作られたもので、
15年以上前に作られたものとなっています。
今回使った技術
- JavaScript
- React.js
- react-datepicker
- react-toggle
- axios
- React.js
- Redux (react-redux)
- Bootstrap (react-boostrap)
- Git, BitBucket
- npm
React.jsとは
React.js は一言で言うと、モダンなWebアプリを作るための技術です。
これを使うと、通常の HTML と JavaScript では作るのが大変な、状態変化の多いWebアプリが作りやすくなり、
例えば、リンクをクリックする度に真っ白にならないWebアプリ（Single-Page Application）を作ったりできます。
類似ライブラリとして、Vue.js と Angular.js があります。
Reactのうれしいところ
Reactを使ってみて、個人的にいいと思ったところは以下の通りです。
可読性が上がる
テンプレートみたいな感じで、HTMLコードのまとまりを一つの部品とし、カスタムタグとして使うことができるため、これで複雑なコードを整理して、読みやすくすることができます。
部品の再利用性が高まる
一度作ったUI部品を複数のページや、他のアプリで再利用するのが簡単になります。また、他の人が作った部品（ライブラリ）も非常に簡単に使えます。
変更が楽
複数のページで使っている部品の変更が一箇所で済むのでとにかく楽です。
速い
「仮想DOM」と言われる技術のおかげで、通常のDOMよりもページの更新速度が速いです。
Reactを採用している企業
Facebookの他に、
Airbnb、Netflix、Slack、Uber、Wantedly、Yahoo!
などの企業が採用しています。
他にもこちらに記載されています。
Reactをかじってみよう
これについては、すでに質のよいチュートリアルや記事がたくさんありますので、そちらの方を参考にしてください。
私は React公式ドキュメント と、Udemyの英語の動画講義 で勉強しましたが、
最近は、私の大好きなプログラミング初心者向けの学習サイトである、Progate に、React のコース が新たに追加されたみたいなので、このコースを受講することをおすすめします。
Reduxとは
Redux は、React とよくセットで使われる JavaScript ライブラリで、
これを使うと、アプリが持っている情報や状態を一箇所にまとめて保持できるようになります。
Reactでは、ある部品の状態や、そこで表示する情報を、各部品が保持してますが、
例えば、ログイン中のユーザの情報や、ダークモードがONかどうかなど、
全ての部品で共通して使うようなものを、一箇所で保持したいことが良くあります。
Reactだけ使った場合、ルートとなるような部品にその情報を持たせて、
下の部品に、引数のような形で、情報を渡します。
ところが、一番に下にいる部品に情報を渡すために、
中間にいる部品にもバケツリレー形式で渡さないといけないため、
階層構造が深くなってくると、無駄な情報の受け渡しが多くなります。（イメージ図参照）
それを改善するために役立つのが、Redux です。
今回作ったアプリについて
こだわった点
- こちらの記事を参考にして、セレクトボックスは、中身が展開されたトグルボタン（ラジオグループ）とし、選択肢の視認性を向上させ、必要なクリック数を減らしました。
- こちらの記事を参考にして、チェックボックスは、トグルスイッチに置き換え、ON/OFFが視覚的に分かりやすく、ミスを起こしにいデザインにしました。
- トグルスイッチがOFFのときは、入力する必要が無いテキストフィールドを非表示にしました。
大変だった点
コスト意識
大幅な仕様変更を行ってしまうと、以下の追加コストが発生してしまいます。
- 既存マニュアルの変更に伴う作業コスト
- ツールを使う方の学習コスト
今回の業務では、これらの追加コストをなるべく抑えることが要件となっていたため、いかに、元の基本レイアウトを変更せずに、使いやすくできるかが、一つのポイントでした。
React独特の癖
これに関しては、Reactを触ったことのある方しか分からないところもありますが、
Reactを触って大変だったところを載せたいと思います。
- イベントハンドラーの書き方が微妙に違います
- 通常のJS
- onclick=”onClickSave()”
- React
- onClick={onClickSave}
- onClick={(param) => onClickSave(param)}
- 通常のJS
- this.setState() の使い方に癖があります
- this.state.item.title = ‘hoge’
ができないので、
this.setState({item: {…this.state.item, title: ‘Some title’} })
のように書く必要があります（深くなるともっと辛い） - this.setState() はすぐに実行されない
- this.state.item.title = ‘hoge’
- HTML の class属性は JSの予約語なので、代わりに className を使わないといけない
Reduxの勉強
通常の Redux と、 React での Redux の書き方が違うところで、２度学習する必要がありました。
やりがい
- 興味を持っている分野であるフロントエンドの業務で開発できた
- 前から関心を持っていたけど、まだ触っていなかった技術、特にRedux、を業務の中で学習することができた
- レガシーなシステムをモダンな技術で作り変える業務で、モダンな技術に触れることができた
おわりに
いかがだったでしょうか、これを読んで React と、弊社でやっていることに少しでも興味を持っていただければ幸いです。
今回の業務を通して、弊社は、興味のある技術に触れられるようにと、留意してくれるいい環境だと感じました。
普段、優しく接してくれるメンターの方々に感謝したいと思います。
ありがとうございました。
ReactのロゴはC.C. 4.0ライセンスで提供されています。
