Reactで作るDrupalサイト

by Shunsuke Watanabe

Slide 1

Slide 1 text

Reactで作る Drupalサイト Drupal梅田 #2 2018/02/19 渡辺俊輔 @craftgear

Slide 2

Slide 2 text

Reactとは facebookが開発し、オープンソースとして公開しているUI開発用ライブラリ。シンプルな設計と豊富なエコシステムを備え、 Single Page Application 作成用ライブラリとしてトップシェアを占める。ベンチャーからfortune500企業まで、世界中で利用者多数。

Slide 3

Slide 3 text

Single Page Application AjaxからSPAへ Asynchronous javascript and XMLHttpRequest (2005) 同時期にリリースされたRuby on Railsでも採用され、RoR普及と相まって一般へ。部分的なUIの更新が徐々にページ全体、サイト全体へと拡大されてゆき、Single Page Applicationと呼ばれるようになった。

Slide 4

Slide 4 text

➔ 軽快な操作性によるユーザー体験の向上 ➔ 自社サービスに合わせたUIの作り込みを容易にする ➔ プロプライエタリな独自技術を必要としない ➔ UIとバックエンドの分離開発 SPAのメリット

Slide 5

Slide 5 text

➔ コードが複雑になる ➔ DOM操作が重い ➔ SEOで不利 SPAのデメリット

Slide 6

Slide 6 text

ライブラリが進化 2005 2006 2009 2010 2011 2013 2014 2016 Ajax / RoR jQuery AngularJS Backbone Web Components React / Polymer Vuejs Angular2 (Safariがflashのサポートを終了) モジュール化コンポーネント化 VirtualDOM

Slide 7

Slide 7 text

なぜReactか

Slide 8

Slide 8 text

一番食えそうだから

Slide 9

Slide 9 text

1 HNTrends https://www.hntrends.com/ YCombinatorが運営するテック系フォーラム HackerNewsでの求人動向をまとめたもの

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

採用実績 https://github.com/facebook/react/wik i/Sites-Using-React

Slide 13

Slide 13 text

Nativeへの展開 https://facebook.github.io/react-native/

Slide 14

Slide 14 text

John Resig曰く「ほとんどReact使ってるよ」 jQuery作者もすなるReact

Slide 15

Slide 15 text

ヘッドレスあるいはデカップルドとは

Slide 16

Slide 16 text

CMSから描画機能を省いたもの要はAPIサーバのこと (REST/GraphQL)

Slide 17

Slide 17 text

Resevoir https://github.com/acquia/reservoir 詳しくはDrupalマガジン雫のこちらの記事へ http://shizuku.io/about-reservoir