第⼀回 React 勉強会 略して酒がないと勉強会！

項⽬ 時間 開場＆受付 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 本⽇のスケジュール ※休憩やトイレは適宜ご⾃由に

酒がないと勉強会の⽬標 u 各⾃のスキル向上を⽬指し、⼈⽣を豊かにする！ u 刺激をもらってモチベーションを⾼める u アウトプットは最⼤のインプット u 学びの追体験、参加型の勉強会（にしていきたい） u no drink, no hack!

勉強会で学ぶ 参加型の学び スピーカー登壇 読んで勉強 アウトプットは最⼤のインプット

とりあえずお酒をもって〜 乾杯

初⼼者がReactを学ぶのに役⽴ったサイト /勉強⽅法を紹介 ついでにチームで開発するための開発環境検討した話と、 React and Monacaでスマホアプリを作ってみた話

Reactを勉強しようと思ったきっかけ u 圧倒的なプロダクトを作ってサービスを⽴ち上げたい！ u ビジネスモデルはマッチング型事業フォーマットで検討中 u 時代を考えればモバイルアプリじゃね？ u WEBやモバイルアプリ技術が必須 u 知⼈がReactって単語を⼝にして知った。 u というわけで最近のイケてるらしい技術、React について 調査していこ

どのように勉強を始めたか：Google検索 u Qiita（エンジニア向け情報共有サイト）の投稿から学ぶ u フリーランス⼈材紹介系会社のコラム/投稿から学ぶ リンクに⾶んだ後に ブラウザ戻るボタンを 押すと出現

どのように勉強を始めたか：Youtube u Youtube なら動画で学べる。 u 国内、海外のカンファレンスでのプレゼン動画も豊富 u 英語の勉強にも。 「React 開発」で 3,640件 「React Redux」で 133,000 件

どのように勉強を始めたか：Twitter u Twitterなら⾊んな⼈が有益な情報をプッシュしてくれる。 u 良い情報や良いニュースをツイートあるいはリツイートしているアカウン トを探してフォローする。そういう⼈のフォロー先を⾒て情報源を増やす。 u 優秀な⼈々と繋がれる。謎のVCからDMをいただいたり。 Next.js 6 リリース！ などリアルタイムな情報の⼊⼿ フォローしてね！ @hiromb1804

React を学ぶために役⽴ったサイト - Reactとは u 出来る限り短く説明するReact.js⼊⾨ https://qiita.com/rgbkids/items/8ec309d1bf5e203d2b19 u React.jsはUIのパーツ（構成部品）を作るためのJSフレームワーク/ライブラリ Facebookが開発、OSSとして公開している。 u JSX を使⽤するため、コンパイルが必要（Facebookが開発した独⾃タグの技 術） u 仮想DOMという技術でパフォーマンスが良い、規模が⼤きくなっても管理しや すい。 u リアクティブプログラミング「反応する側」と「認識する側」を分けて考え、 反応に対して⾃動的に対応するという考え⽅＋関数型⾔語っぽく書ける

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の思想を理解すること で他のプログラミング⾔語にも応⽤することができる。 思想が重要 ⼀度覚えれば、繰り返し異なる ⾔語習得をしなくて良いことがウリ

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で スマホアプリにデスクトップアプリ まで作れる時代？！

俺の知ってるJavaScrptと違う・・・ “>alert(‘XSS’)

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 「これがクールでダサくないイケてるコードよ。」 「よくわからないですね。とりあえず僕のコードのほうが短くないっすか？」 「今のところはね。」 「あと、ダサいと⾔われ続ける今の僕のスキルじゃ、先輩のコードは意味がわか らないし、ごちゃごちゃしてるようにも⾒えます。」 「⽣意気ね。ごちゃごちゃうるさいのはあなたよ。今からそれを説明してあげる んだから、ちょっと黙れ⼩僧。」イラッとしたサクラに叱咤されてしまった。

Q1：React以外にも同じようなJSフレーム ワークあるけど、どう違いがあるの？ 本当にReactに注⼒して良いのかな・・・

React を学ぶために役⽴ったサイト - ⼈気のあるフレームワーク調査 u 5000⼈に聞いた、2018年最先端のフロントエンドツールはこれだ https://qiita.com/rana_kualu/items/8dc3f93a7176d9a0f05d Launching the Front-End Tooling Survey 2018というフロントエンドツールのアンケート調査 ⾚⾊：聞いたこともねえ ⻩⾊：聞いたことはある ⽔⾊：ちょっと使った ⻘⾊：快適に使ってるで グローバル調査で 快適に使ってる率が JQueryに次ぐ⼆番⼿。

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

Q1：React以外にも同じようなJSフレーム ワークあるけど、どう違いがあるの？ 本当にReactに注⼒して良いのかな・・・ A1:React良さそうじゃん！

Q2：フロントエンドは良いとして、バッ クエンドはどうする？

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/

Q2：フロントエンドは良いとして、 バックエンドはどうする？ A2: Firebaseでいいんじゃね

Q3：そこそこ⼤きなプロダクト作るなら チーム開発も視野に環境整えないといけ ないよね・・・？

チームでの開発環境考えてみた ホスト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 にアクセス

開発環境作成 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

開発環境作成 u npm -g install monaca u npm uninstall --save onsenui u npm install --save [email protected] 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

Q4：monacaってどんな感じ？デモ

以上！ご静聴ありがとうございました。