KATUBLO
2019年03月26日

【nuxt.js】初心者がnuxt.jsとはなにか?を簡単に調べてみた

こんにちは。KATUOです。現在2つの会社でインターンをしているのですが、トータルで扱うフレームワーク増えてきて、混乱してきています。笑 今回は初心者がnuxt.jsについて調べてみたのでその結果を記事にまとめていこうと思います。

 

nuxtってそもそも何?

「Nuxt.js Vue アプリケーションを作成するフレームワークです。ユニバーサルアプリケーション、静的に生成されるアプリケーション、シングルページアプリケーションの中から作成するアプリケーションを選ぶことができます。」

↑公式サイトより引用

 

と公式ドキュメントには書かれていました。先輩から聞いた話だと、nuxtの上でvueを動かすと考えて良いそうです。また特徴としてはサーバーサイドレンダリングを行うアプリケーション開発に必要な設定がディフォルトでされているということが挙げられます。

nuxtに含まれるパッケージ

vue2

vue本体のことを指します。

vue-router

vueアプリケーションの公式ルーターです。コンポーネントとルートをマッピングさせる機能を持ちます。

vuex

vueアプリケーションの状態管理パターンを提供します。コンポーネントから共有している状態を抽出し、重複を除くことで、常にユニークな状態で管理してくれます。

vue server renderer

vueアプリケーションをサーバサイドレンダリングするために用意されたパッケージです。

vue-meta

vueアプリケーションのmeta 情報を管理するパッケージです。このmetaというのはmataタグのことです。

 

nuxtを使うことでのメリット

ルーティングを自動で行ってくれる

pagesの下にcomponentを設置する。そしてpagesの下に.vueファイルを作成すると、自動でルーティングを行なってくれる。個人で開発をしていて、いちいちルーティングを行うのはかなりめんどうと感じたのでこれはありがたい。

 

必要なライブラリが完備されている

冒頭でも言ったが、nuxtはvueアプリケーション開発で必要なライブラリ、パッケージが初期段階からすべて完備しています。なので、いちいち必要な物をその都度調べてインストールするという手間がなくなるので、開発に集中することができます。

 

感想

調べた結果、vue.jsを使ってアプリケーションを開発するときはnuxt.jsを使用した方が良さそうですね。現在個人で開発しているアプリケーションは「vue + larave」を使用しているのですが、nuxt.jsを導入してみたいと思います。

 

参考サイト

 

最後まで読んで頂き、ありがとうございました。
SNS等でのシェアが頂ければ幸いです。

関連記事

プロフィール

@KATUO

現在都内私立大学に通う大学4年生。大学では電気電子工学を専攻。大学2年の夏頃に、プログラマーの長期インターン募集の広告が目に止まり、独学でプログラミングの学習をスタート。この時期からプログラミングにどハマりし、現在までに「AIスタートアップ」「Webマーケティング会社」でエンジニアとしての業務に没頭してきた。

過去の投稿