Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

232 views

Published on

公開日 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/

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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

  1. 1. React.jsでサービスを作ってみた話#
  2. 2. ## index Reactでサービス作ってみました- Reactについてさくっとおさらい- Vueと比較してみて- 実際に制作して感じたこと- まとめ-
  3. 3. React.jsについてさくっとおさらい## JSの拡張記法『JSX』を使用します- Vueと比較してゴリゴリJSで記述していきます- 他のSPAフレームワークと比べて、書き方のお作法に厳しいです- ライブラリ(サードパーティー製)が豊富に揃っています-
  4. 4. React.jsでサービスを作ってみました## GIGのSlackからAPIにリクエストを送信して、#daily-reportチャンネルに所属し ているアカウントを一覧で表示するサービスを作りました。
  5. 5. 実際に制作して感じたこと## 初期の環境構築が手間 Action / Reducer Store Component SPAの開発に必要な最低限のパッケージを含めた、環境構築にかかるコストが Vue.jsとReact.jsを比較した時にReact.jsはとてもコストがかかる…😭
  6. 6. 実際に制作して感じたこと## ドキュメントが英語… React.jsは公式ドキュメントが英語で記載されています。 更にQiitaなどを含む個人ブログもおおよそバージョンが古いものなど最新の記事 は大体海外の人がまとめた記事に集約されている印象です
  7. 7. 実際に制作して感じたこと## Routerの定義が手間 画面遷移や兄弟ページを定義するRouterの書き方が、ReactはReduxを入れるか入 れないかで書き方が変わってしまう… 更に、最近のReactの更新でReact-redux-routerが非推奨になったため、更に書 き方が変わってしまいました…。
  8. 8. 実際に制作して感じたこと## Redux-loggerが便利!! Reduxを導入しStoreでデータを管理すると、既存のデータからちゃんと指示した action通りにStoreが更新されているか気になるところですが、Console.logなど を書かなくてもRedux-loggerでChrome DevToolに吐き出してくれます
  9. 9. 実際に制作して感じたこと## JS書くの楽しい!! シンプルにJSをゴリゴリ書いていくので、JSの技術も高まっていくし明確にロ ジックを書いていく感覚が楽しいです😊
  10. 10. Vueと比較してみて## 環境構築が手間… React.jsにはcreate-react-appが、Vue.jsにはVue Cliというのがそれぞれ用意さ れています。 このコマンドをターミナルで叩くことで、簡単に開発に必要なパッケージやディ レクトリ構成をインストールし、すぐ開発に着手できる環境を整えてくれる便利 なものですが、Reactは『ライブラリ』というその特性上から、StoreやRouterな どのパッケージは初期インストールに含まれておらず自分で適応するバージョン のライブラリを調査し、実装する手間が発生します
  11. 11. Vueと比較してみて## 初期学習のコスト React.jsは公式サイトのドキュメントが全文英語で記載されています。 更に、Qiita含む個人ブログもバージョン違いやベースの知識がないと理解できな い内容や、そもそもバージョンが古いものだったりと初期学習のコストがVue.jsと 比較して圧倒的にかかる印象です😨
  12. 12. Vueと比較してみて## 大規模サービスは作りやすい React MASTERのようなエンジニアがいることが前提になりますが、Reduxが担っ てくれている部分をファイル単位で切り分けられることや、それぞれの記法が細 かいところまでルール化されている部分などから、初期環境構築を乗り切ってし まえば、データの様々なやりとりやユーザーアクションによる更新、複雑なコン ポーネント間へのデータの受け渡しや変更検知などが必要な大規模サービスの開 発にはとても適していると思います😊
  13. 13. Vueと比較してみて## Vueは直感的に書きやすい!! Reactと比較すると、本当にVueは直感的に書きやすいです😊 日々書いているHTML / CSS / JSで書けてしまうし、1ファイルに必要なロジック も含まれているので、運用時のコストも低い気がします。
  14. 14. まとめ## Vueの勉強をすると、React × Reduxの勉強も深まってきた気がします。- Redux周りの理解が深まるとReactでの開発がとても楽しくなってきます- 引き続き社内ツールなどの制作と掛け合わせて、React大規模開発をしていきなが ら知見を貯めていきたいです。 -
  15. 15. Good is good. We provide opportunities to the SEKAI by fusing technology and ideas. テクノロジーとクリエイティブでセカイをより良くする       のこと

×