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
編集者のメモ: 以下の記事は、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