Vue.js の勉強会は今回で２回目。
1回目は Vue.js Tokyo v-meetup #4 でした。その時もブログ枠として参加でした。
その時のレポートこちらです。
今回の v-kansai Vue.js/Nuxt.js meetup #4 では登壇者が５名とLTがありました。
Nuxt.jsの発表が２つ、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,
"
[javascript][/javascript]
“: {
“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
コメント