Japan
このブログでは、Google から開発者のみなさま向けの情報をいち早くお届けします。
AMP と React+Redux を使う
2016年10月11日火曜日
この記事は amphtml
による Accelerated Mobile Pages Project の記事 "
AMP and React+Redux: Why Not? – Accelerated Mobile Pages Project
" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。
編集者のメモ: 以下の記事は、Reddit の
ブログ
にシニア ソフトウェア エンジニアの u/arbeitrary が投稿したものです。Reddit が React を使用して AMP をどのように実現しているのかについて、以下の記事をご覧ください。
Reddit は、
Accelerated Mobile Pages
(AMP)テクノロジーを使用したいくつかのコメントページの
別版を構築
しました。AMP は、モバイル端末での検索結果からページを即座に読み込むために、Google などがオープンソースの世界で設計したテクノロジーです。Reddit は、モバイル ユーザーの操作感の向上を図るため、AMP を実装しています。
これは、React と Redux を使った Node.js アプリとして構築されています。React は、ウェブ開発で発生するさまざまな問題を解決してくれる最新のウェブ フレームワークです。Redux は便利なライブラリで、UI アプリケーションの状態を管理し、ユーザーの制御や API のコールバックによらない状態遷移の抽象化を行い、不変で一元的かつ正確なアプリケーションの状態をビュー コンポーネントに提供します。本質的に静的なマークアップをレンダリングするアプリで React と Redux を使うのは奇妙な選択だと感じる方もいらっしゃるかもしれません。しかし、この組み合わせは効率的であることがわかっています。この判断は、コード自体よりも人的要素と生産性を重視したものです。
Reddit には、React と Redux を活用して新しいバージョンのモバイル ウェブアプリを懸命に開発しているすばらしいチームがあります。現在 m.reddit.com で運用されているサイトはこの仕組みによって更新される予定となっており、数週間後にはリリースされる見込みです。この新しいアプリは単一ページアプリになっています。つまり、サーバーが各ページをレンダリングするのではなく、クライアントサイドの JavaScript コードがクリックの処理や API に対するリクエストを行い、ブラウザに新しいビューを表示します。アプリが初めて読み込まれた際の体験をすばらしいものにするために、サーバーサイドでのページの完全なレンダリングや部分的なレンダリングもサポートしています。
AMP アプリを構築するテクノロジーを選んだ主な目的は、すばやいナビゲーションと快適なユーザー エクスペリエンスを両立するためです。AMP は基本的にモバイル向けであるため、モバイル ウェブアプリの手始めとして新しい React および Redux をベースとしました。しかし、この 2 つの技術はサーバーサイドのレンダリングのみに使用しています。既存のコードベースを基にしているため、Reddit での AMP 体験がコアとなるモバイルウェブ エクスペリエンスとどう違うかに意識を向けることができました。React では、HTML 要素を使う場合と同じようにして、amp-img や amp-accordion といった AMP コンポーネントを使用してビューを構築します。そのため、新しいコンポーネントに対して都度接着剤の役割をするコードを追加しなくても、別の React プロジェクトとの間で一貫性のあるパラダイムを維持できます。
AMP トラフィックが増加し、本番環境での AMP についての知識が深まり、モバイルの Reddit ユーザー向けにコンテンツを提供するさまざまな方法の探求が進んでいくと、AMP アプリとそのコアとなるモバイル ウェブアプリの境界が曖昧になってくるかもしれません。AMP アプリとモバイル ウェブアプリを統合できるよう、扉は意図的に開いてあります。基本的なレベルでは、これによってコードの共有が簡単になるとともに、AMP の高速読み込みを使うための柔軟性が得られます。その結果、新しいユーザーが定期的な Reddit ユーザーになるにつれて、ページ間の相互作用がスムーズで豊かになっていきます。
技術的な観点から見ても、ユーザー エクスペリエンスの観点から見ても、私たちはこの新しいツールや AMP、React などのエコシステムに興奮しています。どちらも、デベロッパーのコードの質を向上させ、高速で魅力的なウェブを作ることにつながるものです。私たちは、Reddit ユーザーがインターネット上で拠り所を見つけるための確かなテクノロジーの構築に役立つものにいつも注目しています。
Posted by
Yoshifumi Yamaguchi - Developer Relations Team
コメントを投稿
ラベル
#DevFest16
1
#hack4jp
3
Addy Osmani
1
ADK
2
AdMob
8
Ads
3
ALPN
1
AMP
9
Analytics
9
Andorid
8
Android
180
Android Auto
1
Android Design Support Library
1
Android Developer Story
3
Android N
14
Android Pay
1
Android Studio
16
Android Support Library
3
Android TV
8
Android Wear
21
androidmarket
3
Angular 2
1
AngularJS
2
API
21
APIExpert
45
apk
1
app engine
21
App Indexing
7
App Invites
6
AppCompat
2
Apps Script
6
aprilfool
3
ArtTech
1
Audio
3
Auth Code
1
Authentication
3
AuthSub
2
Autotrack
2
Awareness API
1
Beacons
6
BigQuery
7
BLE
4
Blink
1
blogger
1
Brillo
1
Brotli
1
Calendar
1
Cardboard
3
Career
1
Case Study
1
chrome
59
Chrome Custom Tab
1
chrome extension
4
Chrome for Android
2
Chrome for iOS
1
Chrome OS
2
Chromebook
2
Chromecast
7
chromewebstore
6
Chromium
4
CLI
1
ClientLogin
3
Closure Compiler
1
Cloud
8
Cloud Test Lab
2
CocoaPods
1
codejam
5
codelab
2
compute engine
3
Context
1
Dart
2
DataCenter
1
Daydream
3
Deep Learning
1
Demo Party
1
Design Sprint
3
DesignBytes
1
DevArt
3
DevBytes
6
Developer
14
Developer Console
4
Developer Preview
3
Developer Relations
2
DevFest
7
DevFestX
3
devtools
3
DirectShare
1
Doodle
1
DoubleClick
4
Doze モード
1
drive
2
Dynamic Links
1
EarlGrey
1
Easter Egg
1
ECMAScript 2015
1
Eddystone
4
egypt
1
English
2
ES2015
1
ES2016
1
ES6
2
ES7
1
Firebase
38
Firebase Cloud Messaging
1
Firebase Database
1
Firebase Remote Config
1
font
2
game
16
GDD11JP
56
GDD2010JP
23
GDE
2
GDG
11
Geo
30
Gingerbread
1
GLIDE
5
Gmail
1
Go
1
golang
4
goo.gl
1
Google
5
Google Apps
4
Google Apps Script
3
Google Cast
8
Google Cloud Messaging
10
Google Cloud Platform
6
Google Developer Experts
2
Google Developers Academy
1
Google Developers live
5
Google Developers Summit
1
Google Drive
3
Google Fit
2
Google for Mobile
1
Google for Work
1
Google Maps
35
Google Play
37
Google Play Game Services
6
Google Play Services
18
Google Plus
14
Google Search
4
Google Sign-In
10
Google Tag Manager
1
Google+
1
Googleapps
10
GoogleGames
1
GoogleI/O
27
GoogleLabs
1
GoogleTV
1
Gradle
1
gRPC
2
GTUG
5
GWT
2
hack4jp
2
hackathon
6
Hosting
2
HTML5
17
HTML5Rocks
1
HTTP/2
4
HTTPS
3
ID Token
1
Identity
12
Identity Toolkit
1
Ignite
4
IME
10
Instant Apps
1
intern
2
Invites
1
iOS
12
IoT
1
IPv6
1
Japanese Input
1
JavaScript
5
K-12
1
Knowledge Graph
1
l10n
8
Lollipop
10
Machine Learning
1
Marshmallow
10
Material
1
Material Design
19
MDL
1
MIDI
2
Mobile
11
Mobile Bootcamp
4
Mobile Vision
3
mod_pagespeed
1
monetize
3
Mozc
14
Music
1
NativeDriver
2
Nearby
4
Nexus
2
Nexus S
1
NFC
1
Node.js
1
NPAPI
2
NPN
1
oauth
8
OpenGL
4
OpenID
3
OpenID Connect
2
OpenSocial
1
opensource
12
Optimization
1
Payment
2
People API
1
Performance
6
PersonFinder
1
Physical Web
3
Place Picker
1
Player Analytics
4
Policy
2
Polymer
7
Progressive Web Apps
6
project hosting
1
Promise
1
Promo code
1
Protocol Buffers
1
publicdata
1
Push API
1
Push Notification
3
QUIC
1
RAIL
1
React
1
React Native
2
Realtime Database
1
Redux
1
Remote Config
1
Remote Display API
1
Runtime Permission
1
Sample Code
2
schema.org
1
security
15
Service Worker
3
sketchup
1
SmartLock for Passwords
4
social
4
SPDY
3
speak2tweet
1
startup
3
Storage
1
streetview
3
Study Jams
3
Swift
1
SwiftShader
1
Task
2
techtalk
12
TensorFlow
2
test
2
Test Lab
1
ToS
1
Transliteration
1
Twitter
1
Udacity
15
Unity
2
UX
1
V8
2
VP9
1
VR
4
Vulkan
2
Watch Face
2
wave
2
Weave
1
Web
5
Web Animations
1
Web Components
5
Web Manifest
1
WebAssembly
1
WebMusic
4
WTM
2
Xcode
1
YouTube
15
YouTube API
1
インタビュー
1
コードサンプル
1
プライバシー
1
言論の自由
1
節電
3
東日本大震災
9
日本語入力
40
ブログ アーカイブ
2016
10
9
8
7
6
5
4
3
2
1
2015
12
11
10
9
8
7
6
5
4
3
2
2014
12
11
10
9
8
7
6
5
4
3
2
1
2013
12
11
10
9
8
7
6
5
4
3
2
1
2012
12
11
10
9
8
7
6
5
4
3
2
1
2011
12
11
10
9
8
7
6
5
4
3
2
1
2010
12
11
Feed
Google
on
Follow @googledevjp
"プロダクトに関するご意見は
プロダクトフォーラム
にお願いします"