【GIG勉強会Vol.32】「WordPress × nuxt.jsで実現するSPA」と「コーディングとマジックナンバー」を開催しました！

今回は先日開催された32回目勉強会（LT.20）の様子をご紹介します。

前半テーマ：「Wordpress × nuxt.jsで実現するSPA」

前半はフロントエンドエンジニアの片岡 隆一さんが登壇し、「Wordpress × nuxt.jsで実現するSPAとその理由」についてお話いただきました！

片岡 隆一（かたおか りゅういち）：フロントエンドエンジニア。地元SIer・Web制作会社にてWeb制作全般とシステム開発、ネットワーク構築を行う。2019年6月GIGにジョイン。GIGの行動指針である「JUST HACK IT.」の模範的な社員を目指して日々活動しています。

前半テーマで当日使用したスライドはこちら。

LT.20 WordPress x nuxt.jsで実現するSPA from GIG inc.

どうしてWordpressとnuxt.jsを用いてSPA化する必要があるのか？

片岡さんは、以下のようなサイトを例に出し、SPA化の必要性について語ります。

1. ローディングが長く読む気が無くなるサイト
2. HTMLベタ書きで運用しづらいサイト

これらのサイトは、ユーザーに寄り添ったサイトとは言い難く、滞在率も低下してしまいます。そのため、Wordpressとnuxt.jsを用いてSPAにした方が良い、と片岡さんは言います。

今回は、Wordpressで実装された新エディタ『Gutenberg』が編集しやすいため、利用しながらSPA化について触れていきます。

片岡さんは、WordpressをSPA化することには、以下のようなメリットがあると述べています。

1. 顧客体験の向上
2. 表示速度の高速化
3. インフラ・エンジニアのコスト削減

勉強会中にSPA化したWordpressは、ページの表示速度がかなり高速化され、驚きの声が上がっていました！

後半テーマ：「コーディングとマジックナンバー」

後半のトークテーマは「コーディングとマジックナンバー」。登壇者は、フロントエンドエンジニアの揚原 博志さんです。

揚原 博志（あげはら ひろし）：フロントエンドエンジニア。大学時代は地域経済学を学び、卒業後は空調設備のサブコンに入社。見積や施工管理を担当する。「自分で考え、作り、なおす仕事」がしたいと思い、独学でプログラミングを学ぶ。2018年11月にGIGにジョイン。

後半テーマで当日使用したスライドはこちら！

LT.20 コーディングとマジックナンバー from GIG inc.

マジックナンバーとは、書き手にしかわからない数値

マジックナンバーとは、コンピュータプログラムのソースコードなどに直に記述された数値で、その意図や意味が書いた人にしかわからない数字のことを指します。

揚原さんは、コーディングにおいてマジックナンバーを定数化すること、そしてその数字の決め方について知る必要性があると言います。

まず、以下の数字について、数字の持つ印象と数学的な意味を取り上げました。

1. 整数
2. 忌み数
3. 素数
4. 高度合成数
5. 無理数

そして、揚原さんはそれらの数字の特徴を知ったうえでコーディングに取り組むことには、以下のメリットがあるとまとめました。

• コーディングに迷いが減る
• 他のコーダーの意図がわかるようになる

とはいえ、結局は人が見て判断するので、数字にとらわれずデザイナーの意見を聞くことも大事だそうです。

また、

• 表示数で印象付ける
• 記憶に残したい要素は4±1にまとめる

といった具体的な話は、エンジニアの方だけでなくライターの方など、さまざまな職種の人に役立つであろう内容でした！

勉強会のあとはケータリングと一緒に乾杯！

勉強会の後は参加した全員でケータリングを囲み乾杯です！勉強会の後はいつも楽しく交流会をしております！

今回のケータリングはお寿司とピザです。さっぱりしたお寿司とジャンキーなピザを交互に食べて大満足……！がんばって勉強したあとのおいしいご飯はたまりません！

GIGではgood is goodなチームを築ける仲間を募集しています！

現在GIGでは「一緒に学びながら成長していきたい！」と意欲のある仲間を募集しています。
詳しく話を聞いてみたい方はWantedlyからどうぞ！