Nuxt.jsからプラットフォームAPIをコールする（環境準備）
こんにちは！株式会社スマレジ 、開発部のmasaです。 大阪本社の周りはだんだん春の陽気が感じられるようになってきました。
先週のブログの続きじゃないですが、masaは登山にハマってしまい、先週も別の山に登ってました汗 大阪と兵庫の間の低山だったんですが、登っているとむしろ暑いくらいで、また、枯れ草の中から緑が少しずつ顔を出すの見かけると、だんだんと春の気配が強まっているのを感じました。
さて今週は、Nuxt.jsを触って見た回です。
Nuxt.jsを触ってみた
Nuxt.jsはフロントエンドフレームワークであるVue.jsを使用したフレームワークです。
Vue.jsの特徴として、Vue.jsを用いてSSRを使用することができるところにあります。
SSRなどの詳しい説明は上のリンクを見ていただきたいですが、要はフロントエンドのJSのページ生成処理をサーバ側で受け持つことで、 処理性能を向上させることができるフレームワークです。
Vueは仮装DOMを使用している分、旧来のjQueryなどのDOMを直接いじる系のフレームワークよりも処理性能が向上できますが、サーバサイドの協力が必要となるSSRまでは含まれていません。masa的には、それに対応したのがNuxt.jsというイメージです。
スマレジ 管理画面などは大量のDOMを使用するページもありますから、SSRの考え方や実際の実装や影響などを触ってみながら覚えれればな、と思って今回触れてみることにしました。
めっちゃ簡単な環境構築
エンジニアになって３年目ですが、Nuxt.jsの環境構築は一番楽チンでした。 上記公式のインストールの手順に従い、yarn or npx or npmで下記のコマンドを実行するだけでした。
yarn create nuxt-app <project-name>
モジュールのインストールはパッケージマネージャのバージョンが最新版であれば不要なようです。 デフォルトでついているんですね。
ここで、戸惑ったのがここのサイトで紹介しているように、create-nuxt-appモジュールでアプリケーションビルドする段階でバックエンドのフレームワークを選択できると思っていたのですが、最新バージョンだとその選択肢がなくなっているようです。
UIのフレームワークはあるのに・・・。
フロント寄りの方が主に使うから、ガッツリバックエンドの処理を書くのではなくて、AWS Lambda+axiosなんかでサーバレスに動かすケースの方が多いんですかね・・・？この辺りは勉強始めたばかりなので、詳しい方教えてくれますとありがたいです。
あとは、作成されたプロジェクトフォルダに行って、起動コマンドを叩くだけ！ （起動コマンドもプロジェクト内のpackage.jsonに記載してくれてます。)
cd <project-name> yarn dev
ちなみにpackage.json内のコマンドはこんな感じ。
"scripts": { "dev": "nuxt", "build": "nuxt build", "start": "nuxt start", "generate": "nuxt generate", "test": "jest" }
内部的にはnuxtコマンドがあるみたいですね。(testにjestが入っているのは、作成段階でテストフレームワークを選んでいるからです）
あとはhttp://localhost:3000でアクセスすれば、UIフレームワークのデフォルト画面が表示されます。 ちなみにmasaはVuetifyを選びました。
次回はGCPへのデプロイ部分を実装して本番環境を作っていきます。
