公開日 2018年12月14日 「React.jsでサービスを作ってみた話」を公開 ※ 株式会社GIGでは毎月社内勉強会を実施しています GIG inc. Good is good. We provide opportunities to the SEKAI by fusing technology and ideas. テクノロジーとクリエイティブでセカイをより良くする。小さなチームからスタートした多くの先人達が、世界をより豊かなモノに変革してきました。通信、UX、デバイス、技術の変化と共に世界はまだまだ加速度的に変わります。 Good is good. いいものはいい。GIGは、関わったユーザーやクライアントが前に進める“きっかけ”をつくりつづけます。 ■ お問い合せ https://giginc.co.jp/contact/

1. React.jsでサービスを作ってみた話#

2. ## index
Reactでサービス作ってみました-
Reactについてさくっとおさらい-
Vueと比較してみて-
実際に制作して感じたこと-
まとめ-

3. React.jsについてさくっとおさらい##
JSの拡張記法『JSX』を使用します-
Vueと比較してゴリゴリJSで記述していきます-
他のSPAフレームワークと比べて、書き方のお作法に厳しいです-
ライブラリ(サードパーティー製)が豊富に揃っています-

4. React.jsでサービスを作ってみました##
GIGのSlackからAPIにリクエストを送信して、#daily-reportチャンネルに所属し
ているアカウントを一覧で表示するサービスを作りました。

5. 実際に制作して感じたこと##
初期の環境構築が手間
Action / Reducer
Store
Component
SPAの開発に必要な最低限のパッケージを含めた、環境構築にかかるコストが
Vue.jsとReact.jsを比較した時にReact.jsはとてもコストがかかる…😭

6. 実際に制作して感じたこと##
ドキュメントが英語…
React.jsは公式ドキュメントが英語で記載されています。
更にQiitaなどを含む個人ブログもおおよそバージョンが古いものなど最新の記事
は大体海外の人がまとめた記事に集約されている印象です

7. 実際に制作して感じたこと##
Routerの定義が手間
画面遷移や兄弟ページを定義するRouterの書き方が、ReactはReduxを入れるか入
れないかで書き方が変わってしまう…
更に、最近のReactの更新でReact-redux-routerが非推奨になったため、更に書
き方が変わってしまいました…。

8. 実際に制作して感じたこと##
Redux-loggerが便利！！
Reduxを導入しStoreでデータを管理すると、既存のデータからちゃんと指示した
action通りにStoreが更新されているか気になるところですが、Console.logなど
を書かなくてもRedux-loggerでChrome DevToolに吐き出してくれます

9. 実際に制作して感じたこと##
JS書くの楽しい！！
シンプルにJSをゴリゴリ書いていくので、JSの技術も高まっていくし明確にロ
ジックを書いていく感覚が楽しいです😊

10. Vueと比較してみて##
環境構築が手間…
React.jsにはcreate-react-appが、Vue.jsにはVue Cliというのがそれぞれ用意さ
れています。
このコマンドをターミナルで叩くことで、簡単に開発に必要なパッケージやディ
レクトリ構成をインストールし、すぐ開発に着手できる環境を整えてくれる便利
なものですが、Reactは『ライブラリ』というその特性上から、StoreやRouterな
どのパッケージは初期インストールに含まれておらず自分で適応するバージョン
のライブラリを調査し、実装する手間が発生します

11. Vueと比較してみて##
初期学習のコスト
React.jsは公式サイトのドキュメントが全文英語で記載されています。
更に、Qiita含む個人ブログもバージョン違いやベースの知識がないと理解できな
い内容や、そもそもバージョンが古いものだったりと初期学習のコストがVue.jsと
比較して圧倒的にかかる印象です😨

12. Vueと比較してみて##
大規模サービスは作りやすい
React MASTERのようなエンジニアがいることが前提になりますが、Reduxが担っ
てくれている部分をファイル単位で切り分けられることや、それぞれの記法が細
かいところまでルール化されている部分などから、初期環境構築を乗り切ってし
まえば、データの様々なやりとりやユーザーアクションによる更新、複雑なコン
ポーネント間へのデータの受け渡しや変更検知などが必要な大規模サービスの開
発にはとても適していると思います😊

13. Vueと比較してみて##
Vueは直感的に書きやすい！！
Reactと比較すると、本当にVueは直感的に書きやすいです😊
日々書いているHTML / CSS / JSで書けてしまうし、1ファイルに必要なロジック
も含まれているので、運用時のコストも低い気がします。

14. まとめ##
Vueの勉強をすると、React × Reduxの勉強も深まってきた気がします。-
Redux周りの理解が深まるとReactでの開発がとても楽しくなってきます-
引き続き社内ツールなどの制作と掛け合わせて、React大規模開発をしていきなが
ら知見を貯めていきたいです。
-

15. Good is good.
We provide opportunities to the SEKAI by fusing technology and ideas.
テクノロジーとクリエイティブでセカイをより良くする
のこと