※ 株式会社GIGでは毎月社内勉強会を実施しています GIG inc. Good is good. We provide opportunities to the SEKAI by fusing technology and ideas. テクノロジーとクリエイティブでセカイをより良くする。小さなチームからスタートした多くの先人達が、世界をより豊かなモノに変革してきました。通信、UX、デバイス、技術の変化と共に世界はまだまだ加速度的に変わります。 Good is good. いいものはいい。GIGは、関わったユーザーやクライアントが前に進める"きっかけ"をつくりつづけます。 ■ お問い合せ https://giginc.co.jp/contact/

1. GIGLT.20
JUST HACK IT

2. WordPressとNuxt.jsで実現する
SPA
Ryuichi Kataoka

3. 突然ですが
こんなサイトないですか？

4. ローディングが長く読む気をなくすサイト

5. 本文にHTMLべた書きで運用しづらいサイト

6. WordPress + Gutenberg
と
Nuxt.jsで
SPA化してしまおう！

7. Gutenbergと ？

8. WordPress 新しいエディタ。
とても編集しやすい。
Gutenbergと

9. 実際に使ってみましょう！
Gutenbergと

10. Gutenbergと
2カラム（画像と本文を横に並べる）や YouTube 埋め込み等
お手 物だわ！
HTMLとして挿入する機能も備わっている で HTMLべた書きできる！
やったー！！！
ん？（こいつ何 ために CMS使っているんだろう・・・

11. SPAにする
メリット

12. 顧客体験 向上
● インタラクティブなサイトが作りやすい
（表現 自由度が向上）
● 少ない通信でコンテンツを読むことができる（滞在
時間 長いサイトに 最適）
SPAにするメリット そ １

13. 表示速度 高速化
● キャッシュを最大限使用することができる
● 離脱率 低下を防ぐことができる
(表示速度が1秒遅れるとコンバージョンが7%低
下する)
SPAにするメリット そ ２

14. インフラ・エンジニア コスト削減
● 従量課金系 クラウドサービス 費用を
抑えることができる
● Nuxt.jsを使用することでSPA 実装工数
比較的少なく実現できる
SPAにするメリット そ ３

15. そもそもなぜ
WordPress?

16. 全Webサイト 3分 1でWordPressを
使用されていると言われている
即ち、3分 1 サイトがコンテンツ
という資産をWordPress上に蓄えられている
そもそもなぜWordPress? - そ １

17. コンテンツを運用される方に
WordPressで 運用ノウハウがある
最近話題 Headless CMSで
運用するに 結構障壁がある
そもそもなぜWordPress? - そ ２

18. そもそもなぜWordPress? - そ ３
単純に
WordPressが
好きだから

19. SPA化へ 道

20. WP REST APIを非同期で取得
· 記事一覧データ or 記事データをWP REST APIから
取得し、Nuxt.jsで描画する
· 一番実装 工数が少なく実現できる
· SEO的な課題 ある
SPA化へ 道 そ ①

21. アクションフックで静的にしてしまう
· 記事やメニュー等各種変更時、アクションフックで
JSON等にしてしまい、S3等に配置
· おそらく最速で表示することができるし、CDNとかに
おけ さらにすごいことになる
· WordPressに障害が発生してもとりあえずコンテンツ 見れる
SPA化へ 道 そ ②

22. 今回 WP REST APIを非同期で取得する
方法でやっていきたいと思います☺
SPA化へ 道

23. WP REST API
と ？

24. (例) 記事一覧を取得する場合
{site_url}/wp-json/wp/v2/posts
にアクセスするとJSONでデータが返ってくる
WP REST APIと ？

25. 主なパラメータ（記事一覧）
· per_page=(n) ： n件を一覧で取得することができる
· page=(n) ： nページ目 一覧を取得することができる
（per_pageとセットで使う）
· _embed ： カテゴリー名を含めることができる
· context=embed： 一覧 データ内にpost_contentを含めない
WP REST APIと ？

26. 実際にみてみましょう！
WP REST APIと ？

27. 実際に作って
みよう！

28. 実際に作ってみよう！
nuxt.config.jsに
axiosを導入し、envにサイト URLを追加
← 非同期でデータ取ってくるすごいやつ
← 日付を扱いやすくしてくれる
すごいやつ
追加

29. 実際に作ってみよう！
storeにindex.jsを追加
これから作成するファ
イルを読み込む
Storeに登録

30. 実際に作ってみよう！
storeにstate.jsを追加
state ページ間等で使える便利な変数
← 投稿一覧データが入る
← ページャー 番号が入る
← 最初に一覧に訪れたかどうか
判別する

31. 実際に作ってみよう！
storeにmutations.jsを追加
主に同期処理を担当しています
← 取得した記事一覧を登録
← ページャー番号を登録
← ページャー番号1つ次に送る（インクリメント）
← 記事一覧へ アクセスが初回かどうか

32. 実際に作ってみよう！
storeにactions.jsを追加
主に非同期処理を担当しています

33. 実際に作ってみよう！
pages/index.vueで実際に使ってみよう！

34. 実際に作ってみよう！
データがセットされていることが確認できました！

35. 実際に作ってみよう！
pages/index.vueに記事一覧を表示してみよう！

36. 実際に作ってみよう！
記事一覧が表示されました！

37. 実際に作ってみよう！
pages/_postSlug/index.vueで詳細ページを作ろう！

38. 実際に作ってみよう！
pages/_postSlug/index.vueで詳細ページを作ろう！
↓ タイトル
↑ 本文

39. 実際にみてみましょう！
実際に作ってみよう！

40. One more thing...

41. うち メディアを
SPA化してみた

42. 実際にみてみましょう！
うち メディアをSPA化してみた

43. 有難うございました🙏

44. Good is good.
We provide opportunities to the SEKAI by fusing technology and ideas.
テクノロジーとクリエイティブでセカイをより良くする
こと