LT1 Wordpress x nuxt.jsで実現するSPA

片岡　隆一様

読み込みが遅いサイト
HTMLベタ書きで運用しずらいサイト
ありませんか？

Gutenberg

WordPressの新しいエディタ
とても編集しやすい
・ブロック単位
・HTMLの属性を入れ込める
・2カラムやYouTubeの埋め込みが簡単
・HTMLベタ書きも可能

SPA

SinglePageApplication

メリット

1. 顧客体験の向上
インタラクティブなサイトが作りやすい（表現の自由度が向上
少ない通信でコンテンツを読み込む

2. 表示速度の高速化
キャッシュを最大限使用することができる
離脱率の低下を防ぐことができる（1秒遅れるとコンバージョンが7％下がる）

3. インフラ・エンジニアのコスト削減
従量課金系のクラウドサービスの費用を抑えることができる
Nuxt.jsを使用することでSPAの実装工数は比較的少なくできる
PWA化も視野に入る

なぜWordPress？

1. 全Webサイトの3分の1がWordPress
すなわち、コンテンツと言う資産がWordPressに蓄えられてる

2. コンテンツ運用者にWordPressでの運用ノウハウがある
Headless CMSで運用するには結構障壁がある

SPA化への道

1. WP REST APIを非同期で取得
記事データ等をNuxt.jsで描画する

2. アクションフックで静的にしてしまう
アクションフックでJSONにしてしまい、S3等に配置

技術と工数的にWP REST APIを紹介する

WP REST API

記事一覧をJSONにして返してくれる

主なパラメータ（記事一覧）

実際に作って見よう

nuxt.config.jsにaxiosを導入し、envにサイトのURLを追加

storeにindex.jsを追加

storeにstate.jsを追加
stateはページ間等で使える便利な変数

storeにmutations.jsを追加
主に同期処理を担当

storeにaction.jsを追加
主に非同期処理を担当
（ブレブレ…）

pages/index.vueで実際に使う

pages/index.vueに記事一覧を表示してみる

pages/_postSlug/index.vueで詳細ページを作る

LT2 コーディングとマジックナンバー 数字の魔法を解明する

揚原 博志様

以下の書籍を参考に

マジックナンバーとは

コードに直に記述された数値、意味や意図が書いた本人にしか分からない
・なぜこの数字にしたのか
・cssでcontainerのwidth:1000pxとか

印象
1：ユニーク
2：二面性、対比、対立、女性
3：調和（1と2の和なので、三位一体）
4：公正と秩序、季節、方位、男性
5：結婚
6：完全数（1＋2＋3、神は6日で世界を創った）
7：ラッキーセブン、19世紀くらい
10：万物の数（1＋2＋3＋4）

性質
2：二進数
三角関数
30
45
60

時間に関する数字
7
24
30
365

人間の性質
4：人が瞬間的に記憶できる短期記憶、マジカルナンバー
10：指の数

忌み数
素数
高度合成数
無理数

比率・数列

画面比
pcは16：9、タブレットは3：4
・フィルム時代になんとなく3：4
・いろんな画面比が乱立、折衷案が16：9

白銀比
ドラえもん
1：√2
日本人は白銀比が好き

黄金比
自然界の至るところで発見される比率

実装

表示する数で印象を与える
うまく利用して印象を変える
例：1はユニーク、2は対極というイメージ

変更に強くする
高度公倍数にすれば、端数が出にくい
6の倍数でサイズ指定すれば、2〜3カラムへの変更が綺麗にできる

数字からコードを読む
90、180、360をみたら、何かアニメーションの処理かも
7、12、24、365だったら時間系の処理？

記憶力を利用する
記憶に残したい要素を4±1にまとめる
10以上は 「両手で数えられないたくさんのもの」

クレームを避ける
特定のお客さんは、忌み数に気をつける

同時処理を避ける
setTimeoutで素数を指定する

6の倍数がいい
タブレット、PCの幅は6で割れる
PCは横幅いっぱいにコンテンツをだすことはほぼない

印刷
白銀比が用紙にぴったり

調和した画面構成
黄金比を使えばバランスのいいレイアウトを作れる

複雑な回転
黄金比を使う
ひまわりなんかもそうなってる

まとめ
数字の意味を知ると、迷いが減る
意味を理解できる

質問

NextjsよりNuxtjsの方が良いですか？
ロゴ可愛いし、初めて触ったものなので、個人的にNuxt.jsが好き

WP Rest APIはWordpressのカスタム投稿にも対応していますか？
対応してる、カスタムフィールドが課題になると思う

gigさんではワードプレスとnuxtを使った開発はすでに導入されているのでしょうか？ または今後導入する可能性は高いでしょうか？
案件はまだない、ただ関連するような案件はあった

業務でよく使う中でお気に入りの数字はありますか？
12、2でも3でも4でも割れるので

プラグインのcssやjsはnuxt側で取り込めるのでしょうか(特にnuxt実装後に管理画面から追加されたもの)
課題のひとつです、それらをWPのテーマとして捉える開発がベターかと

8と9の意味はありますか？
8は末広がり、9は思い出せませんすいません

静的に作れるサイト（コーポレートサイトなど）でもnuxtで作ることはありますか？
あります、お仕事お待ちしております

拝聴した限り、GIGさんはフロントエンドエンジニアがデザイン上の細部の調整を行なっているような印象ですが、実際そうやっていますか？
案件にもよるが、細かい調整はエンジニアがある、大枠はデザイナーさん、こっちから提案することもある、密にコミュニケーションをとってます

画面のWidth指定ってどうしてますか？
・800px
・960px（端数がでないので）
・1024pxを超えないようにする
・フォントは
　・スマホ：14px
　・PC：16px

感想

SPAの話、具体的でとても参考になった。
React.jsの勉強をしているが、PWAなども考えてVue.jsも手を出そう。

数字の話、面白かった！
１だとユニーク、唯一
２だと対立、比較
３だと安定、調和
なるほど、プレゼン資料やコンセプトサイトなんかを考えてみてもそのような印象がある。
何気ない数字を工夫することで色々な効果があるし、戦略的に使うこともあると。めっちゃinterestingだった！