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

D4084f9cdb67f59662636573f96a689a?s=47 ohga naryu domo
May 23, 2017
200

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

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

D4084f9cdb67f59662636573f96a689a?s=128

ohga naryu domo

May 23, 2017
Tweet

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勉強方法2 • 動画 ◦ 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以外にもいくつか紹介されている
  9. None
  10. モバイルWeb スピード パフォーマンス

  11. None
  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化 •

    開発:期間短縮 => 通常より低いコスト • メンテナンス:容易 • 柔軟性:高い • パフォーマンス:2〜4倍高速 => 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デベロッパー募集中!