第一回 酒がないとReact勉強会_初心者がReactで学ぶのに役立ったサイト/勉強方法を紹介

初心者がReactで学ぶのに役立ったサイト/勉強方法を紹介〜チームで開発するための開発環境検討とReact & Monacaでスマホアプリを作ってみた話〜

Transcript

1. 第⼀回 React 勉強会 略して酒がないと勉強会！
2. 項⽬ 時間 開場＆受付 18:00 - 18:20 開催説明＆乾杯 18:20 - 18:25 【LT1】 初⼼者がReactで学ぶのに役⽴ったサイト/勉強⽅法 を紹介〜チームで開発するための開発環境検討とReact & Monacaでスマホアプリを作ってみた話〜 18:25 - 18:40 【LT2】Sketchで作成したUIをReactコードへ変換する⽅法 18:45 - 18:50 【LT3】storybookのススメ 18:55 - 19:00 【LT4】初⼼者がNext.jsでWebサイトを作ってみた話 19:05 - 19:10 【LT5】React初⼼者はReactをどう使ったのか 19:15 - 19:20 パネルディスカッション 19:20 - 19:40 交流会 19:40 - 20:40 退場＆⽚付 20:40 - 21:00 本⽇のスケジュール ※休憩やトイレは適宜ご⾃由に
3. 酒がないと勉強会の⽬標 u 各⾃のスキル向上を⽬指し、⼈⽣を豊かにする！ u 刺激をもらってモチベーションを⾼める u アウトプットは最⼤のインプット u 学びの追体験、参加型の勉強会（にしていきたい） u no drink, no hack!
4. 勉強会で学ぶ 参加型の学び スピーカー登壇 読んで勉強 アウトプットは最⼤のインプット
5. とりあえずお酒をもって〜 乾杯
6. 初⼼者がReactを学ぶのに役⽴ったサイト /勉強⽅法を紹介 ついでにチームで開発するための開発環境検討した話と、 React and Monacaでスマホアプリを作ってみた話
7. Reactを勉強しようと思ったきっかけ u 圧倒的なプロダクトを作ってサービスを⽴ち上げたい！ u ビジネスモデルはマッチング型事業フォーマットで検討中 u 時代を考えればモバイルアプリじゃね？ u WEBやモバイルアプリ技術が必須 u 知⼈がReactって単語を⼝にして知った。 u というわけで最近のイケてるらしい技術、React について 調査していこ
8. どのように勉強を始めたか：Google検索 u Qiita（エンジニア向け情報共有サイト）の投稿から学ぶ u フリーランス⼈材紹介系会社のコラム/投稿から学ぶ リンクに⾶んだ後に ブラウザ戻るボタンを 押すと出現
9. どのように勉強を始めたか：Youtube u Youtube なら動画で学べる。 u 国内、海外のカンファレンスでのプレゼン動画も豊富 u 英語の勉強にも。 「React 開発」で 3,640件 「React Redux」で 133,000 件
10. どのように勉強を始めたか：Twitter u Twitterなら⾊んな⼈が有益な情報をプッシュしてくれる。 u 良い情報や良いニュースをツイートあるいはリツイートしているアカウン トを探してフォローする。そういう⼈のフォロー先を⾒て情報源を増やす。 u 優秀な⼈々と繋がれる。謎のVCからDMをいただいたり。 Next.js 6 リリース！ などリアルタイムな情報の⼊⼿ フォローしてね！ @hiromb1804
11. React を学ぶために役⽴ったサイト - Reactとは u 出来る限り短く説明するReact.js⼊⾨ https://qiita.com/rgbkids/items/8ec309d1bf5e203d2b19 u React.jsはUIのパーツ（構成部品）を作るためのJSフレームワーク/ライブラリ Facebookが開発、OSSとして公開している。 u JSX を使⽤するため、コンパイルが必要（Facebookが開発した独⾃タグの技 術） u 仮想DOMという技術でパフォーマンスが良い、規模が⼤きくなっても管理しや すい。 u リアクティブプログラミング「反応する側」と「認識する側」を分けて考え、 反応に対して⾃動的に対応するという考え⽅＋関数型⾔語っぽく書ける
12. React を学ぶために役⽴ったサイト - React の特性 u Reactの基礎知識【初⼼者向け】 （サイト：学⽣エンジニアのプログラミング） https://student-engineer.net/react-basic/ u Declarative (宣⾔的である) u どんな条件でどんな処理をし、どんな結果になるのか。これが明確でわかりやすい u Component-Based (コンポーネントベースである) u 複雑なUIも作りやすく、保守や拡張、何より再利⽤も容易 u Learn Once, Write Anywhere （⼀度学ぶことで何でも書くことができる） u ReactはWeb開発だけではなく、React Nativeと⾔うライブラリを使⽤することでス マートフォンのアプリケーションも製作できたり、またReactの思想を理解すること で他のプログラミング⾔語にも応⽤することができる。 思想が重要 ⼀度覚えれば、繰り返し異なる ⾔語習得をしなくて良いことがウリ
13. React を学ぶために役⽴ったサイト - React のメリット u Reactを学ぶメリットとReactの開発環境を簡単に構築する⽅法 http://tadaken3.hatenablog.jp/entry/first-step-react 「Reactの特徴のひとつに「Learn Once, Write Anywhere」(⼀度学べば、どこでも 書ける)という考えがあります。Reactには、プラットフォームをまたいでコード を活⽤できるエコシステムが存在しています。例えば、以下のような範囲でReact の知識を活かすことができそうだと感じました。」 u WEBフロントエンド: React u モバイルアプリ（iOS,Android）: ReactNative u デスクトップアプリ（Mac,Windows): React + Electron u サーバーサイド: Node.js + React Javascriptで スマホアプリにデスクトップアプリ まで作れる時代？！
14. 俺の知ってるJavaScrptと違う・・・ “><script>alert(‘XSS’)</script>
15. React を学ぶために役⽴ったサイト - 関数型プログラミング u React (.js Facebook)解説 関数型プログラミングに⽬覚めた！ IQ145の⼥⼦⾼⽣ の先輩から受けた特訓５⽇間 サポート記事 静的HTML編 http://kenokabe-techwriting.blogspot.jp/2015/04/react-js-facebook-iq145-html.html http://kenokabe-techwriting.blogspot.jp/2015/04/iq145.html u 「これがクールでダサくないイケてるコードよ。」 「よくわからないですね。とりあえず僕のコードのほうが短くないっすか？」 「今のところはね。」 「あと、ダサいと⾔われ続ける今の僕のスキルじゃ、先輩のコードは意味がわか らないし、ごちゃごちゃしてるようにも⾒えます。」 「⽣意気ね。ごちゃごちゃうるさいのはあなたよ。今からそれを説明してあげる んだから、ちょっと黙れ⼩僧。」イラッとしたサクラに叱咤されてしまった。
16. Q1：React以外にも同じようなJSフレーム ワークあるけど、どう違いがあるの？ 本当にReactに注⼒して良いのかな・・・
17. React を学ぶために役⽴ったサイト - ⼈気のあるフレームワーク調査 u 5000⼈に聞いた、2018年最先端のフロントエンドツールはこれだ https://qiita.com/rana_kualu/items/8dc3f93a7176d9a0f05d Launching the Front-End Tooling Survey 2018というフロントエンドツールのアンケート調査 ⾚⾊：聞いたこともねえ ⻩⾊：聞いたことはある ⽔⾊：ちょっと使った ⻘⾊：快適に使ってるで グローバル調査で 快適に使ってる率が JQueryに次ぐ⼆番⼿。
18. React を学ぶために役⽴ったサイト - 有名どころの⽐較 u 【JavaScript】３⼤フレームワーク Angular, React, Vue.jsを⽐べてみよう (2018年4⽉) ※下記表は抜粋 http://iwasiman.hatenablog.com/entry/2018/04/23/200000 項⽬ Angular React Vue.js 提供元 Google及びコミュニティ Facebook及びコミュニ ティ 元GoogleのAngularJS開発 チームだったEvan Youさん (中国⼈)及びコミュニティ ⽇本語で読める書籍 Angular4-5: 4冊ぐらい Angular2: 1冊 AngularJS: 2冊 新旧合わせて10冊ぐらい 3冊ぐらい 大手 採用実績 Webサービス系各種 Googleのサービスでは実 は使ってないという話も？ Facebookのサービス各種 任天堂、サイバーエージェ ント Instagram, Netflix, Twitter はてな ブログ、ニコニコ動画も アリババ(中国最⼤のEコ マース企業) GitLab Adobe PHPのLaravel、 Onsen UIなどがスポン サー データバインディング データ←→HTMLの双⽅向 データ→HTMLの⽚⽅向 (逆はイベントを拾い setState()が必要) データ←→HTMLの双⽅向 ネイティブアプリ⽤ プラットフォーム Ionic (React Nativeに⽐べると 発展途上) React Nativeが 最も有名 Weex (React Nativeに⽐べると 発展途上) ⼤⼿企業での採⽤実績 ＝⼈材需要が⾼まる ＝開発者の年収UP
19. Q1：React以外にも同じようなJSフレーム ワークあるけど、どう違いがあるの？ 本当にReactに注⼒して良いのかな・・・ A1:React良さそうじゃん！
20. Q2：フロントエンドは良いとして、バッ クエンドはどうする？
21. React を学ぶために役⽴ったサイト - 有名どころの⽐較 u MBaaS（エムバース）の特徴とは | メリット・デメリット・モバイルアプリ開発サービス https://boxil.jp/mag/a3651/ MBaaSとは「Mobile Backend as a Service」の略で、スマホ向けのウェブアプリ機能を提 供するサービスです。 u サーバの構築や開発に時間を取られない。 u サーバの運⽤が不要（障害対応、セキュリティ、etc…） u mBaaS⽐較 https://intheweb.io/compare-mbaas/ u Firebase u ニフティクラウド mobile backend u GMO MBaaS u mBaaSの⼤本命グーグルのFirebaseを試してみた！基本編 https://www.apps-gcp.com/mbaas-firebase/
22. Q2：フロントエンドは良いとして、 バックエンドはどうする？ A2: Firebaseでいいんじゃね
23. Q3：そこそこ⼤きなプロダクト作るなら チーム開発も視野に環境整えないといけ ないよね・・・？
24. チームでの開発環境考えてみた ホストOS: (Mac or Windows) MbaaS ゲストOS: Docker コンテナ② ① /usr/src/ReactApp ② /usr/src/ReactApp マウント↑ /Desktop/ReactApp/ Github チームメンバ環境 チームメンバ環境 チームメンバ環境 Port:3000 and 8000 ①Port:3001 and 8001 ②Port:3002 and 8002 Pull/ Push Pull/ Push ゲストOS: Docker コンテナ① Port:3000 and 8000 Dockerコンテナから npm start して実⾏し ホスト端末で http://localhost:3002 にアクセス
25. 開発環境作成 u #ベースとなるubuntuイメージをDockerHubよりダウンロード u docker pull ubuntu u #ホスト側にポートフォワードして起動 u docker run -w /usr/src/ -it --name react_test -p 3001:3000 -p 8001:8000 -p 9001:9000 -v /Users/XusernameX/Desktop/XfoldernameX/1ubuntu:/usr/src ubuntu bash u apt-get update -y u apt-get install nodejs -y u apt-get install npm -y u apt-get install git -y
26. 開発環境作成 u npm -g install monaca u npm uninstall --save onsenui u npm install --save onsenui@2.0.4 u npm install u npm start u u #上記⼿順で作ったDocker image u https://hub.docker.com/r/hiroyuki8103/react_dev/ u #その後、以下のcreate-react-appも⼊れる必要性 u npm install –g create-react-app
27. Q4：monacaってどんな感じ？デモ
28. 以上！ご静聴ありがとうございました。