Meguro es7 での発表資料

1. Reactを触ったことない人が
ReactNativeを開発できるよう
になるまでの道筋
Meguro.es #7 2016/12/8

2. 自己紹介
田上 健太
Web Programmer
Ruby on Rails
React
Rust
田中TOM

3. オープンソースで運営されている
プログラミング学習サイト
学習者がそのままコミッター
になるので開発も盛ん

4. 昨日酒に酔って書いたブログ
カレシ・カノジョできないエンジニア Advent Calendar 2016
http://qiita.com/advent-calendar/2016/give_me_kareshi

5. 最近 React Native
はじめました

6. ところで、この記事読みました？
【翻訳】 2016年にJavaScriptを学んでどう感じたか - Endo Tech Blog
http://kikuchi1201.hateblo.jp/entry/2016/10/26/172404

7. とあるオフィス
久しぶりに Javascript 使って
フロントエンドの開発がしたいんだけど
確か詳しいよね？

8. おうなんでも聞いてくれ!

9. 早速だけど、
jQuery使ってここのデータを
書き換えようとしているんだけど

10. おいおい冗談だろ。
今どきjQueryなんて誰も使ってないよ。
今は2016年なんだから、
まずReactを学ぶべきだ。

11. そうなんだ。ところでReactって?

12. ReactはFacebookが作った
イケてるライブラリさ。
Reactを使うとビューの変更を
簡単に扱うことができて、統制が取れ、
パフォーマンスもいいんだ。

13. へぇ～いいね。
じゃ、Reactを使う事でサーバから
データを表示する事はできるのかな?

14. もちろん、でもまず最初に、君のwebページに
ReactとReactDOMが必要だね。

15. ちょっと待ってくれよ、
何で2つもライブラリが必要なんだ?

16. 1つは本当に只のライブラリで、
2つめはJSXで記述する事ができて、
DOMを操作する為なんだ。

17. JSX?JSXって何?

18. その後も会話は続く

19. Babel
npm
ES5
Browserify
ES2016+
SystemJS
Webpack
TypeScript

20. これが React(Native)
関連限定だとしても

21. Redux
Actions
Components
Containers
Dispatcher
Store
Reducers
Flux

22. 登場人物多すぎて
もぅﾏﾁﾞ無理。

23. 私がReact Nativeを学
習した方法

24. 動画学習サイトudemy

25. 今まで動画での
プログラミング学習は諦めてた
• ○○○インストールみたいなサイトでは基礎は
学べるけど、そこから自分のオリジルナルを
作れるレベルまで達しない内容の場合が多い
• 適したコンテンツを探すのが面倒で評価も分
かりにくい
• MOOCも無料だけど基本初級者向けだったり
する

26. けどね udemy だったら
• 新しい言語とかフレームワークの講座もあったりし
て新しい技術を学習しやすい ElixerでPhoenixとか
• 難易度も始めて触る人レベルから、es6かけて当た
り前でフレームワークだけガツガツ触っていくぞの
範囲が広い
• 評価と学んでいる人の総数がわかるので、優れた講
座なのかもわかる
• 英語だけど、結局はプログラミングなので、理解で
きる(気がする)
• 一緒にコードを書いていくので、どこに変更があっ
たかが分かりやすい

27. 利用した動画
よかったところ
・最初はReact のみで実
装。その後にReduxを組
んで実装しているので、
Reduxの登場人物の違い
が理解しやすい
・React 用のテンプレー
トレポジトリを用意して
くれていて、自分で作り
始める時に使える
https://github.com/StephenGrider/ReduxSimpleStarter

28. 利用した動画2
よかったところ
・サンプルアプリの
index.ios.js をいきなり全
部消して1からコードの説
明をしてくれる
・React と React Native
の違いなども説明してく
れる

29. まとめ
• 動画学習というプログラミング学習の新たなス
タイルの可能性を感じた
• デメリット
• 以前視聴した部分を探すときに、動画なので
検索しにくい
• 値段が高い(動画1レッスンが技術本と同じく
らいの値段まで下がれば動画を選ぶと思う)

30. ちなみに
みんながudemyで購入しても一銭も入ら
ないよ。世知辛いね。

31. Have a nice code!