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

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

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

902224621c1e67059a4b8ede19211ef5?s=128

hiroyuki8103

May 20, 2018
Tweet

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の⼥⼦⾼⽣

    の先輩から受けた特訓5⽇間 サポート記事 静的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】3⼤フレームワーク 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. 以上!ご静聴ありがとうございました。