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

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

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

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

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

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

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

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

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

JS書くの楽しい！！
シンプルにJSをゴリゴリ書いていくので、JSの技術も高まっていくし明確にロ
ジックを書いていく感覚が楽しいです😊

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

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

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

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

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

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

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

More Related Content

What's hot (20)

Similar to React.jsでサービスを作ってみた話 (20)

More from GIG inc. (20)

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