大阪・神戸・奈良・京都を中心に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 を使うとサクッと環境構築できるみたいです、

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

2. nuxt を起動

 

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

 

 

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

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

 

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

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

追記

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

これで 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

コメントを残す

メニューを閉じる