Nuxt.js+CakePHP3でのSPA開発 Pokémon-Portfolioを作ってみる

一通りこちらの参考書を読んだので、Nuxt.js+CakePHP3でポケモン簡易サイトを作ってみました。

Nuxt.jsの全機能を試せていませんが、規約を重んじたフレームワークであり、Vue.jsはじめ公式の日本語ドキュメントも綺麗に整備されているので、Reactに比べれば学習コストは低めな印象です。

最終的な成果物

作ったものはポケモンの各種データをAPIで取得して、Nuxt.jsで表示するだけなので至極単純です。

今回のAPIはCakePHP3での実装で、ネット上の各種データをスクレイピングするのが面倒でしたが、基本的に単純なCRUD操作だけなので、最終的にはこちらにまとめています。

フロント側のNuxt.jsではポケモン図鑑やポケモンの各種データ(タイプや覚える技など)の一覧化、また特性や技の一覧と詳細を表示するページを作成、最終的な成果物はこちらに置いています。

地方別のポケモン図鑑↓

ポケモン別の特性や種族値、覚える技などを一覧表示↓

他にも特性、技、種族値ランキングの一覧表示画面などを実装。

必要なモジュールの導入

Nuxt.jsにはVue本体は勿論、その他開発で必要になるであろうモジュール(RouterやVuexなど)が既に導入されているので、足りない分を追加していきます。

axiosはAPIを呼び出すために必要なモジュールですが、今回Nuxt.jsもAPIもローカル環境(ポート番号変えて)にて動作させており、このままではクロスドメイン制約にproxyも追加しています。

私の環境ではnuxt.config.jsに以下設定を追加すれば動作しました。

レイアウトとコンポーネント

業務でのSPA開発経験が乏しいので、どこまでコンポーネント化すべきかノウハウが無いのですが、全画面共通で利用するヘッダー、フッター、サイドバーのみをコンポーネント化。

今回はNuxt.jsから追加された強力なテンプレート機能で呼び出して画面表示させてます。

その他の各画面はpageディレクトリ内でvueファイルとして作成。

pages配下のvueファイル

初期表示ではasyncDataでAPIを呼び出してレンダリング処理。

各地方のボタン押下で再度API取得を行ってレンダリングするだけの簡単な実装。

トランジション機能

Vue.jsで実装されているアニメーションを簡単に実装できる機能。

確かに簡単に利用でき、jQueryを使わずにすむので助かります。

今回はあまり使いこなせていませんが、簡単に利用出来るので評判は良いです。

Vuexでの状態管理

小規模であればVuexで状態管理は煩わしいですが、可読性や保守性を意識すると導入必須。

Vuexにはクラシックモードとモジュールモードの2種類があるようですが、前者は近々廃止される予定らしいので、参考書のサンプルに従ってモジュールモードで実装しています。

エラー時の考慮が皆無なので業務レベルではありませんが…

今後の課題

前評判通りによく出来たフレームワークなので、最低限のフロントエンド知識とES6理解に加えて、VueとNuxt本体の学習コストを考慮しても、多少勉強すればそれなりに動くものは作れそうです。

ただ実践レベルで考えると、前述の通りコンポーネントの切り方、ミドルウェアの活用(認証周り)や単体試験(最低限Vuexと複雑なコンポーネント)のノウハウは理解しておきたい感じです。