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
350
Reactで作るDrupalサイト
Shunsuke Watanabe
February 19, 2018
Tweet
Share
More Decks by Shunsuke Watanabe
See All by Shunsuke Watanabe
いますぐ {id: number;} をやめろ
craftgear
1
260
forループを越えて / beyond for loop
craftgear
0
480
Reactハンズオン 01 入門編 コード部分抜粋 / React Handson 01 components (excerpt)
craftgear
1
500
Reactハンズオン 02 redux編 コード部分抜粋 / React Handson 02 redux (excerpt)
craftgear
0
500
Reactハンズオン 01 入門編 コード部分抜粋 / React Handson 01 components (excerpt)
craftgear
0
580
大阪Node学園 七時限目 「ゼロからはじめるnode.js」
craftgear
1
400
大阪Node学園 六時限目 「generator小咄」
craftgear
1
310
大阪Node学園四時限目 "This crazy testless world"
craftgear
1
320
Other Decks in Programming
See All in Programming
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
170
階層化自動テストで開発に機動力を
ickx
0
150
Goで作る、開発・CI環境
sin392
0
260
フロントエンドのパフォーマンスチューニング
koukimiura
5
2k
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
2
21k
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
470
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
5
8.7k
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
660
Claude Code派?Gemini CLI派? みんなで比較LT会!_20250716
junholee
1
550
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
500
AWS Summit Japan 2024と2025の比較/はじめてのKiro、今あなたは岐路に立つ
satoshi256kbyte
1
120
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
770
Featured
See All Featured
Six Lessons from altMBA
skipperchong
28
3.9k
Practical Orchestrator
shlominoach
189
11k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
970
Being A Developer After 40
akosma
90
590k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
A designer walks into a library…
pauljervisheath
207
24k
Site-Speed That Sticks
csswizardry
10
700
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Rails Girls Zürich Keynote
gr2m
95
14k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
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?