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

Nuxt.jsについて

ENGチームのLEEHANYOONです!!

この数年間、フロントエンドとして必須になってきたjavascriptのフレームワークは下記の3つだと言っても過言ではありません。
・Angular(アンギュラー)
・React(リアクト)
・Vue.js(ビュージェーエス)

弊社ではWordpress(CMS)ベースのWEBサイト制作がメインになりますが、
モバイルファーストを充実したLPページの開発をするチャンスができたので、
3大JavaScriptフレームワークであるVue.js(Nuxt.js)を導入して開発をしております!
開発の目的の1つであるLPクリエイティブのフレームのベストプラクティスの模索をするため、
Vue.jsをより効果的に使えるフレームワークであるNuxt.jsを使いました。

「Vue.js?Nux.js?」最初、一体何なのか、疑問点しかなかったのですが、
数か月間開発をしている段階でやっと分かってきたので、アウトプットします!!

nuxtjs

Nuxt.jsとは

Vue.jsベースのJavaScriptのフレームワークで、いわゆる「ナクスト」と読みます。
React.jsベースのSSR(サーバーサイドレンダリング)用フレームワークであるNext.jsに触発されて作られました。

UIなどフロントエンド向けのフレームワークであるVue.jsに対し、
UI以外の部分でWebアプリケーション開発に必要な機能が最初から組み込まれています。

Nuxt.jsで何ができるの?

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

SSRとは、
「JavaScriptをサーバー内部で実行し、HTMLを生成して、クライアントに返すような仕組み」です。
JavaScriptは本来だとWebブラウザ上で実行されるものでしたが、
サーバー側で実行することにより、処理の速さが早くなりました!
下図の流れで処理は行われます!

サーバーサイド

head要素の管理

JavaScriptのオブジェクトベースでmetaタグの管理ができます!
設定ファイルに記載し、フォーマット化することで、全てのページに反映されます。
とても安心ですね!

拡張性が高い構造

Nuxt.jsではnpmパッケージが利用可能です。
オープンソースだけでなく、
独自にパッケージを開発して運用することもできます。

次回はNuxt.jsのメリット、SPA、SSRについて具体的にアウトプットしたいと思います!