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
第3回 Snowflake 中部ユーザ会- dbt × Snowflake ハンズオン
hoto17296
4
360
Lottieアニメーションをカスタマイズしてみた
tahia910
0
120
ファインディの テックブログ爆誕までの軌跡
starfish719
2
1.1k
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
7
2.5k
AHC041解説
terryu16
0
590
chibiccをCILに移植した結果 (NGK2025S版)
kekyo
PRO
0
210
いりゃあせ、PHPカンファレンス名古屋2025 / Welcome to PHP Conference Nagoya 2025
ttskch
1
270
Grafana Loki によるサーバログのコスト削減
mot_techtalk
1
110
Writing documentation can be fun with plugin system
okuramasafumi
0
120
CNCF Project の作者が考えている OSS の運営
utam0k
5
690
チームリードになって変わったこと
isaka1022
0
190
DROBEの生成AI活用事例 with AWS
ippey
0
130
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
How GitHub (no longer) Works
holman
313
140k
Bash Introduction
62gerente
610
210k
A Tale of Four Properties
chriscoyier
158
23k
It's Worth the Effort
3n
184
28k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
Rails Girls Zürich Keynote
gr2m
94
13k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
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?