大阪・神戸・奈良・京都を中心にNPOのWEB制作やITサポートをしています。
v-kansai Vue.js/Nuxt.js meetup #4 参加してきました!

Vue.js の勉強会は今回で2回目。
1回目は Vue.js Tokyo v-meetup #4 でした。その時もブログ枠として参加でした。
その時のレポートこちらです。

今回の v-kansai Vue.js/Nuxt.js meetup #4 では登壇者が5名とLTがありました。
Nuxt.jsの発表が2つ、vueコンポーネントの話が1つ、vueあんまり関係ない話?が1つ、vueとAWSを使ったチャットアプリの話って感じだったかと思います。

私は kintone や WordPress のお仕事をメインにしているので、kintone や WordPress の中でちょこっと Vue.js を使う程度です。

なので、今回の勉強会では Nuxt.js(なくすとじぇいえす と呼ぶらしい)のことを勉強させていただきました!
ありがとうございます!

Nuxt.jsとは

  • Vue.js製のフレームワーク
  • App 開発に便利なツールが揃っている
    • Vuex Store、Vue Router、SSRなど
  • npx コマンドで簡単に作れる

※ ショウノシオリさんのスライドから抜粋
https://speakerdeck.com/sshono1210/nuxt-dot-js-falsedeirekutori?slide=3

公式ドキュメントではこのような説明がされています。

Nuxt.js はサーバーサイドレンダリングをもっと楽しめるように Vue.js アプリケーションの開発に必要な設定をあらかじめプリセットしています。
https://ja.nuxtjs.org/guide/

サーバーサイドレンダリング(SSR)とは

「(元々ブラウザ上でしか動かなかった)JavaScriptをサーバー内部で実行して、HTMLを生成すること」を指します。
これによって初期表示の際にユーザーが待たされることがなくなるなどのメリットがあります。
https://medium.com/@sundaycrafts/%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E4%BD%93%E9%A8%93%E3%82%92%E5%90%91%E4%B8%8A%E3%81%95%E3%81%9B%E3%82%8B%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%82%B5%E3%82%A4%E3%83%89%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0javascript-%E6%AD%B4%E5%8F%B2%E3%81%A8%E5%88%A9%E7%82%B9-df68cd7cd991

 

Vue.js はクライアントサイドアプリケーションを構築するためのフレームワークです。通常では、Vue コンポーネントはブラウザで DOM を生成し操作がされます。しかし、同じ Vue コンポーネントをサーバ上の HTML 文字列に描画し、ブラウザに直接送信し、最終的に静的なマークアップとしてクライアント上の完全なインタラクティブアプリケーションに “ハイドレート (hydrate)” することもできます。

サーバで描画された Vue.js のアプリケーションは、アプリケーションのコードの大部分が、サーバとクライアントの両方で実行されるという意味で、”アイソモルフィック (isomorphic)” や “ユニバーサル (universal)” と見なすことができます。
https://ssr.vuejs.org/ja/

なるほどです。
本来 JavaScript は DOM が生成されたあとに見た目や動的な動きや json の内容などを表示させたりするので、少し表示が遅い。そこで登場したのがサーバーサイドレンダリングなんですね。
サーバーサイドレンダリングをするとサーバー側でJavaScriptの操作が終わったあとのHTML生成してブラウザーに返してくれるみたいですね。

今はWeb制作は WordPress を使っていますが、今後WEBアプリや、モバイルアプリを作ったりする場合、Nuxt.js とCapacitor や Cordova とか使えば良さそうですね。

Nuxt.js を触ってみる

Nuxt.js が何者なのかがざっくりわかったところでせっかくなんで触ってみようと思います。
まずは公式ドキュメントですね。
https://ja.nuxtjs.org/guide/installation/

1. create-nuxt-app を使って環境構築

create-nuxt-app を使うとサクッと環境構築できるみたいです、

$ mkdir try-nuxt-js
$ npx create-nuxt-app hello-nuxt
$ npx create-nuxt-app hello-nuxt
npx: 379個のパッケージを56.115秒でインストールしました。
> Generating Nuxt.js project in /Users/takashi/source/try-nuxt-js/hello-nuxt
? Project name hello-nuxt
? Project description My geometric Nuxt.js project
? Use a custom server framework none
? Choose features to install Progressive Web App (PWA) Support, Linter / Formatt
er, Prettier, Axios
? Use a custom UI framework element-ui
? Use a custom test framework none
? Choose rendering mode Universal
? Author name tkc49
? Choose a package manager npm
node-pre-gyp WARN Using needle for node-pre-gyp https download


> fsevents@1.2.7 install /Users/takashi/source/try-nuxt-js/hello-nuxt/node_modul
es/fsevents

> fsevents@1.2.7 install /Users/takashi/source/try-nuxt-js/hello-nuxt/node_modul
es/fsevents
> node install

[fsevents] Success:
"/Users/takashi/source/try-nuxt-js/hello-nuxt/node_modules/fsevents/lib/binding/
Release/node-v64-darwin-x64/fse.node" is installed via remote
node-pre-gyp WARN Using needle for node-pre-gyp https download
npm

> fsevents@1.2.7 install /Users/takashi/source/try-nuxt-js/hello-nuxt/node_modul
es/fsevents
> node install

[fsevents] Success:
"/Users/takashi/source/try-nuxt-js/hello-nuxt/node_modules/fsevents/lib/binding/
Release/node-v64-darwin-x64/fse.node" is installed via remote
node-pre-gyp WARN Using needle for node-pre-gyp https download
npm notice created a lockfile as package-lock.json. You should commit this file.


> fsevents@1.2.7 install /Users/takashi/source/try-nuxt-js/hello-nuxt/node_modul
es/fsevents
> node install

[fsevents] Success:
"/Users/takashi/source/try-nuxt-js/hello-nuxt/node_modules/fsevents/lib/binding/
Release/node-v64-darwin-x64/fse.node" is installed via remote

> fsevents@1.2.7 install /Users/takashi/source/try-nuxt-js/hello-nuxt/node_modul
es/fsevents
> node install

[fsevents] Success:
"/Users/takashi/source/try-nuxt-js/hello-nuxt/node_modules/fsevents/lib/binding/
Release/node-v64-darwin-x64/fse.node" is installed via remote

> nodemon@1.18.10 postinstall /Users/takashi/source/try-nuxt-js/hello-nuxt/node_
modules/nodemon

> hello-nuxt@1.0.0 lint /Users/takashi/source/try-nuxt-js/hello-nuxt
> eslint --ext .js,.vue --ignore-path .gitignore . "--fix"


  To get started:

	cd hello-nuxt
	npm run dev

  To build & start for production:

	cd hello-nuxt
	npm run build
	npm start

以下のディレクトリが作成されました。

hello-nuxt/
├── README.md
├── assets
├── components
├── layouts
├── middleware
├── node_modules
├── nuxt.config.js
├── package-lock.json
├── package.json
├── pages
├── plugins
├── static
└── store

2. nuxt を起動

$ npm run dev
$ npm run dev

> hello-nuxt@1.0.0 dev /Users/takashi/source/try-nuxt-js/hello-nuxt
> nuxt

ℹ Preparing project for development                                                                                           11:41:02
ℹ Initial build may take a while                                                                                              11:41:02
✔ Builder initialized                                                                                                         11:41:03
✔ Nuxt files generated                                                                                                        11:41:03

✔ Client
  Compiled successfully in 8.12s

✔ Server
  Compiled successfully in 7.42s


 ERROR  (node:13839) DeprecationWarning: Tapable.plugin is deprecated. Use new API on .hooks instead                        11:41:07

                                                                                                                              11:41:08
With useBuiltIns option, required direct setting of corejs option

                                                                                                                              11:41:08
With useBuiltIns option, required direct setting of corejs option

ℹ Waiting for file changes                                                                                                    11:41:15

   ╭─────────────────────────────────────────────╮
   │                                             │
   │   Nuxt.js v2.4.5                            │
   │   Running in development mode (universal)   │
   │   Memory usage: 328 MB (RSS: 434 MB)        │
   │                                             │
   │   Listening on: http://localhost:3000       │
   │                                             │
   ╰─────────────────────────────────────────────╯

 

以下のURLにアクセスするとローカルのサーバーのWEBサイトが表示されます。
http://localhost:3000

 

 

昨日の話によればこのページは確か pages ディレクトリを見れば現在表示しているファイルがあるはず!
pages ディレクトリを見てみるとindex.vue があり、それを見てみると現在表示されているページのソースコードがありました。

だが・・・
ちょっとタイトルとかを修正して保存をし直すとエラーが・・・

↻ Updated pages/index.vue                                                                                                     12:03:37

✖ Client
  Compiled with some errors in 400.66ms

✔ Server
  Compiled successfully in 397.80ms


 ERROR  Failed to compile with 1 errors                                                                       friendly-errors 12:03:38


 ERROR  in ./pages/index.vue                                                                                  friendly-errors 12:03:38

Module Error (from ./node_modules/eslint-loader/index.js):                                                    friendly-errors 12:03:38

/Users/takashi/source/try-nuxt-js/hello-nuxt/pages/index.vue
  4:12  error  Insert ·                                                                                                                                                                                                                                        prettier/prettier
  8:76  error  Replace >Documentation</a with ⏎··········>Documentation</a⏎········                                                                                                                                                                          prettier/prettier
  9:11  error  Replace ·href="https://github.com/nuxt/nuxt.js"·target="_blank"·class="button--grey">GitHub</a with ⏎··········href="https://github.com/nuxt/nuxt.js"⏎··········target="_blank"⏎··········class="button--grey"⏎··········>GitHub</a⏎········  prettier/prettier

✖ 3 problems (3 errors, 0 warnings)
  3 errors and 0 warnings potentially fixable with the --fix option.

                                                                                                              friendly-errors 12:03:38
 @ ./.nuxt/router.js 7:24-9:3
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&name=client&path=/__webpack_hmr/client ./.nuxt/client.js

 

まだ触り始めたばかり・・・道のりは長そうですが、エラーメッセージは友達ということで頑張って調べようと思います!

v-kansai コミュニティの皆さん勉強会の企画ありがとうございました!
とりあえず Nuxt.js の触りまでこれました!!

追記

上記のビルドのエラーですが、VS Codeのsettings.json ファイルの
“editor.formatOnSave”: true -> “editor.formatOnSave”: false に変更するとビルドが通りました。
“editor.formatOnSave”: true にしているとVS Code保存時に違うフォーマットに変更されてしまう現象が起きていました。

{
    "workbench.iconTheme": "vs-minimal",
    "editor.insertSpaces": false,
    "window.title": "${activeEditorLong}",
    "editor.minimap.enabled": false,
    "explorer.autoReveal": false,
    "php.suggest.basic": false,
    "editor.formatOnType": true,
    "editor.formatOnPaste": true,
    "editor.formatOnSave": false,
    "eslint.autoFixOnSave": true,
    "

“: {
“editor.tabSize”: 4,
“editor.insertSpaces”: true,
},
“window.zoomLevel”: 0,
“terminal.integrated.rendererType”: “dom”,
“eslint.validate”: [
“javascript”,
“javascriptreact”,
{
“language”: “vue”,
“autoFix”: true
}
],
}

これで Nuxt.js を使って開発の続きができそうです!

その他

.vue ファイルをシンタックスハイライトをするのに VS Code の Vetur をインストールしました。
https://marketplace.visualstudio.com/items?itemName=octref.vetur

参考

Nuxt.js のディレクトリ

VSCode で Vue.js に自動で ESLint をかける
https://qiita.com/moriyuu/items/6bac1c75c61d9d359f96

コメントを残す

メニューを閉じる