Help us understand the problem. What is going on with this article?

SPAフレームワークReact.jsを使ってWordPressを高速化する

More than 1 year has passed since last update.

SPAフレームワークReact.jsを使ってWordPressを高速化する

by yoko-yan
1 / 20

React.jsについて

react-logo-300x289.png


  • SPAフレームワーク
  • Facebook社が開発(2015年オープンソース化)
  • ネイティブアプリも作れる (React Native)
  • JavaScript (ES6,7)
  • JSX

最近から流行りだした技術ではない


なぜ 今、React.js ?


5年前ハイブリッドに苦い思い出


近年の動向

  • HTMLベースからコンパイル型など、クロスプラットフォーム技術の近年の拡大ぶりがすごい
  • グーグルやマイクロソフトなど大手が推進 (AngularJS・Xamarin)

  • HTMLベースからコンパイル型など、マルチプラットフォーム開発の近年の拡大ぶりがすごい
  • GoogleやFacebookなど大手が推進
  • パフォーマンスが、かなりよくなった。ネイティブとの差は、ほとんどない

特徴

  • 1方向データバインディング
  • VirtualDOMで高速化
  • Viewの一部の機能を提供するライブラリ

1方向バインディング
redux

dafda


豊富なライブラリ
axios


3大SPAフレームワーク


3大SPAフレームワーク

adaaa Angular angular.js Vue.js
This This This This
column column column column
will will will will

ハイブリッドアプリとの違い


事例
Facebook
Instagram
etc


WordPressをPWA化したい

ロカロカ PWA


WP touch 有料かよ
Super Progressive Web Apps 驚異の星5満点
でも、ReactでSPAアプリ作りたいんです
WordPressAPI + React.js という選択肢


WordPressをPWAにするメリット

ネイティブアプリも作れる
 ブログをネイティブアプリに組み込み。もくはその逆(つまり、ブログをネイティブアプリとして拡張)
サーバーサイドレンダリング
 高速化の期待


パフォーマンス


今後

HTMLタグを抜いて、ページビューの高い記事と低い記事の分析
ワードや
ブログを採点
ネイティブ化
高品質の写真を有料化
運用ようにGoogleAnaliticsからデータを取得して、分析データを同じ画面で表示しながら、ブログをウェブサーフィン
など

classi
学校の先生・生徒・保護者向けのB2B2Cの学習支援Webサービス「Classi(クラッシー)」 を開発・運営している会社です。
https://classi.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away