Reactハンズオンセミナー配布用司会スライド

2017年5月23日に開催したReactハンズオンセミナーの司会進行用に使用したスライドです。Reactの勉強に役立つ書籍を掲載しています。また、Reactを利用してサイトをSPA化するMobifyの紹介もあります。

Transcript

1. 話題のReactを学ぶならココ！ 超初心者でも分かるReact入門&ハンズオン DOMO presents
2. Today’s MENU 1. 「Web開発とコンポーネントシステム」 Mozilla Tech Speaker 清水智公さま 2. 「React ハンズオン」 株式会社サイバーエージェント 原一成さま 3. 「React勉強方法・Mobifyの紹介」 株式会社ドーモ 大賀匠竜
3. Profile 大賀匠竜 株式会社ドーモ／モバイルサービス部・CTO @naryu
4. 会社紹介 スマートフォンサイト最適化 タイアップ企画・制作 教育事業
5. Sample App https://goo.gl/ITVuO7 CodePen https://codepen.io/
6. React勉強方法＆ Mobifyの紹介
7. 参考：React勉強方法 • 公式のドキュメント、チュートリアル： https://facebook.github.io/react/ • 書籍（刊行順） ◦ 入門 React ―コンポーネントベースの Webフロントエンド開発 2015/4/3 ◦ JavaScript フレームワーク入門 2016/9/15 ◦ Webデベロッパーのための React開発入門: JavaScript UIライブラリの基本と活用 2016/11/25 ◦ WEB+DB PRESS Vol.97 (Reactで作るシングルページアプリケーション入門 ) 2017/2/24 ◦ ☆Reactビギナーズガイド ―コンポーネントベースのフロントエンド開発入門 2017/3/11 ☆おすすめ。新しい記法に対応。環境構築や周辺ツールの説明も豊富。 ◦ Electronではじめるアプリ開発 ~JavaScript/HTML/CSSでデスクトップアプリを作ろう 2017/3/28 UIの構築にReactを採用している。 Firebaseとの連携サンプルがある。記法も新し い。
8. 参考：React勉強方法２ • 動画 ◦ React for Beginners（https://reactforbeginners.com/） • Create React App (https://github.com/facebookincubator/create-react-app) ◦ 2016年7月にリリースされた簡単に環境構築するFacebook公式ツール ◦ Create React apps with no build configuration ◦ 環境構築ツールとして脅威のGithubStar 27,082 ◦ githubスター数の推移(http://andrewhfarmer.com/create-react-app/) • UIコンポーネントライブラリ ◦ Best UI Frameworks for your new React.js App. (https://hackernoon.com/the-coolest-react-ui-frameworks-for-your-new-react-app-ad699fffd651) 有名なMaterial-UI以外にもいくつか紹介されている
10. モバイルWeb スピード パフォーマンス
12. Progressive Web Apps High Performance Mobile Web Push Notifications AMP Store Integrations
13. 13 ▪ 画面ベースのWebアプリからAPIベースのSingle Page Applicationへの進化 MobifyのPWA Progressive Mobile WebによるSPA化 • 開発：期間短縮 => 通常より低いコスト • メンテナンス：容易 • 柔軟性：高い • パフォーマンス：２〜４倍高速 => CVR、AOVの向上 メリット
14. 14 ▪ React：ビューを生成 ▪ Redux：ステートを管理 ▪ Node.js/ Webpack/Babel/ES6 ：開発環境 ▪ Mobify Cloud：クラウドベースのインフラ ↓ これらの技術を利用して WebサイトをSPA化する PMWのテクノロジー • 豊富なコンポーネント • UI設計をスピーディに • 全体のパフォーマンスアップ • Mobifyのプラグイン導入による拡張（プッシュ、決済、コン テンツ、位置情報、AI、etc…） 技術的メリット
15. 15 特徴 HTML5 CSS3 ES6 React Redux Babel Webpack Reactベースのフレームワーク
16. 16 豊富なコンポーネント AccordionItemContent AccordionItem Accordion Badge Banner Breadcrumbs Button CardInput CarouselItem Carousel DangerousHTML Divider ExpiryDate Feedback …
17. 17 プラットフォームへの拡張
18. Google I/O17で紹介
19. 5/24 PWAサービス提供開始
20. Reactデベロッパー募集中！