ホーム > DERUKUIブログ > エンジニア > Nuxt.jsについて②

Nuxt.jsについて②

最近、移動時間にWEBサイトのインプットに興味ができ、
日々会社に出社する移動時間が楽しみなENGチームのLEEHANYOONです。
ちなみに今日はLPページのインプットしました。
LP・ランディングページ制作の参考になるWebデザインギャラリー・クリップ

今日はNuxt.jsのメリット、SPAについて具体的にアウトプットしたいと思います!
(※前の記事はこちら)

Nuxt.jsのメリット

Nuxt.jsを選ばれる理由

Nuxt.jsが選ばれる理由としては、以下が考えられると思います。
・通信の最適化(モバイルファースト)
・ドキュメントが多い。(Vue.jsのフレームワークなどで、参考書も多い。)
・SSRの実装ができる。
・静的サイトを簡単に作れる。(セクションごとにコンポーネント管理しやすい。)など
nuxtjs

通信の最適化(モバイルファースト)

ユーザーにほとんど負荷がかからない。(Nuxt.jsの容量は57KB程度と非常に軽量なフレームワーク)

Vue.jsベースでSSRの実装ができる。

WebアプリケーションのUIの構築できるJavaScriptフレームワークであるVue.jsベースで手軽にSSRの実装ができます。

ドキュメントが多い。

Nuxt.js自体の公式サイトも、Nuxt.jsのもとになっているVue.jsの公式サイトも日本語でドキュメントを読むことができます。

上記の理由だけでもなんでNuxt.jsが流行っているのか、わかりますね!

SPAってなに?

spa
WEBサイト、WEBアプリに必須になってきたSPAを皆さんご存知ですか?
WebマーケティングにおけるSPAとは、Single Page Application(シングルページアプリケーション)のことです。
単一のWebページでアプリケーションを構成する設計構造の名称になります。

SPAはClientが必要な部分のみ、Javascriptを利用し、アップデートします。
用はSPAの中にhtml,css,Javascriptなどの情報が全てあり、新しいデータは必要な際、
APIを叩いて必要なデータのみ呼び出すイメージですね。(とても便利!)

SPAのメリット

・動作性の向上。(ロード後、ブラウザ内、他のページを定義して表示される。)
・より高度なWeb表現ができる。
・Webアプリ開発。
それではなんでより行動なWeb表現ができるか説明したいと思います。

より高度なWeb表現ができる。

前述に記載した通り、SPAはユーザーのアクションに対して必要な部分のみを更新します。
これにより、幅広くUIを実装することができます。
さまざまな機能によって高速なページ遷移やアニメーションの実現ができます。
モバイルファーストに必要なUXの重要視。
ご時世においてSPAは強い味方となるでしょう。