Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Reactで作るDrupalサイト
Search
Shunsuke Watanabe
February 19, 2018
Programming
0
220
Reactで作るDrupalサイト
Shunsuke Watanabe
February 19, 2018
Tweet
Share
More Decks by Shunsuke Watanabe
See All by Shunsuke Watanabe
いますぐ {id: number;} をやめろ
craftgear
1
120
forループを越えて / beyond for loop
craftgear
0
340
Reactハンズオン 01 入門編 コード部分抜粋 / React Handson 01 components (excerpt)
craftgear
1
360
Reactハンズオン 02 redux編 コード部分抜粋 / React Handson 02 redux (excerpt)
craftgear
0
360
Reactハンズオン 01 入門編 コード部分抜粋 / React Handson 01 components (excerpt)
craftgear
0
340
大阪Node学園 七時限目 「ゼロからはじめるnode.js」
craftgear
1
390
大阪Node学園 六時限目 「generator小咄」
craftgear
1
290
大阪Node学園四時限目 "This crazy testless world"
craftgear
1
310
Other Decks in Programming
See All in Programming
AWSマネコンに複数のアカウントで入れるようになりました
yuhta28
2
160
Amazon ECS とマイクロサービスから考えるシステム構成
hiyanger
2
490
Flutter × Firebase Genkit で加速する生成 AI アプリ開発
coborinai
0
150
iOSエンジニアから始める visionOS アプリ開発
nao_randd
3
120
[JAWS-UG横浜 #80] うわっ…今年のServerless アップデート、少なすぎ…?
maroon1st
1
170
Writing documentation can be fun with plugin system
okuramasafumi
0
120
Grafana Cloudとソラカメ
devoc
0
140
Linux && Docker 研修/Linux && Docker training
forrep
23
4.5k
Bedrock Agentsレスポンス解析によるAgentのOps
licux
2
720
SwiftUI Viewの責務分離
elmetal
PRO
0
140
JavaScriptツール群「UnJS」を5分で一気に駆け巡る!
k1tikurisu
10
1.8k
How mixi2 Uses TiDB for SNS Scalability and Performance
kanmo
29
11k
Featured
See All Featured
Faster Mobile Websites
deanohume
306
31k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
GraphQLとの向き合い方2022年版
quramy
44
13k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
31
2.1k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
The Pragmatic Product Professional
lauravandoore
32
6.4k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Making Projects Easy
brettharned
116
6k
4 Signs Your Business is Dying
shpigford
182
22k
Typedesign – Prime Four
hannesfritz
40
2.5k
Transcript
Reactで作る Drupalサイト Drupal梅田 #2 2018/02/19 渡辺俊輔 @craftgear
Reactとは facebookが開発し、オープンソースとして公開 しているUI開発用ライブラリ。 シンプルな設計と豊富なエコシステムを備え、 Single Page Application 作成用ライブラリとし てトップシェアを占める。 ベンチャーからfortune500企業まで、世界中
で利用者多数。
Single Page Application AjaxからSPAへ Asynchronous javascript and XMLHttpRequest (2005) 同時期にリリースされたRuby
on Railsでも採 用され、RoR普及と相まって一般へ。 部分的なUIの更新が徐々にページ全体、サイ ト全体へと拡大されてゆき、Single Page Applicationと呼ばれるようになった。
➔ 軽快な操作性によるユーザー体験の向上 ➔ 自社サービスに合わせたUIの作り込みを容易にする ➔ プロプライエタリな独自技術を必要としない ➔ UIとバックエンドの分離開発 SPAのメリット
➔ コードが複雑になる ➔ DOM操作が重い ➔ SEOで不利 SPAのデメリット
ライブラリが進化 2005 2006 2009 2010 2011 2013 2014 2016 Ajax
/ RoR jQuery AngularJS Backbone Web Components React / Polymer Vuejs Angular2 (Safariがflashのサポートを終了) モジュール化 コンポーネント化 VirtualDOM
なぜReactか
一番食えそうだから
1 HNTrends https://www.hntrends.com/ YCombinatorが運営するテック系フォーラム HackerNewsでの求人動向をまとめたもの
None
None
採用実績 https://github.com/facebook/react/wik i/Sites-Using-React
Nativeへの展開 https://facebook.github.io/react-native/
John Resig曰く 「ほとんどReact使ってるよ」 jQuery作者もすなるReact
ヘッドレス あるいはデカップルドとは
CMSから描画機能を省いたもの 要はAPIサーバのこと (REST/GraphQL)
Resevoir https://github.com/acquia/reservoir 詳しくはDrupalマガジン雫のこちらの記事へ http://shizuku.io/about-reservoir
デモ
デモの構成
Questions?