4
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

初心者がオススメするNuxt.jsの良いところ!

Last updated at Posted at 2019-11-12

#はじめに
この記事はJavaScript初心者がNuxt.jsを触ってみて良いなと思ったところをオススメする記事です。
技術的な良いところについては深掘りしませんのでご了承ください。

#Nuxt.jsとは

###Nuxt.js
Nuxtは、Vueの公式ガイドラインに沿って強力なアーキテクチャを提供するように設計されたフレームワークです
Nuxt公式ホームページ

これだけでは「Vueってはじめて聞いたし、なんのこっちゃわからん」となった私。

そこで私なりにJavaScriptやVueとの関係性をまとめてみました

###私なりにまとめた図(個人の見解です)

image.png

ふむふむ、Nuxtとは、Vueフレームワークにさらに規約・設定を足して、強力なアーキテクチャを提供することができるんだな!と理解。

#Nuxt.jsの良いところ3つ

###(1) 学習導入コストが低い!

導入に必要なもの

  • VSCode(他のでも良い)
    • VeturとJapaneseのみインストールしました
  • Node.js
  • 頑張る!という気持ち

create-nuxt-appパッケージをインストール

  • インストールしてすぐコマンドでサーバー起動ができる!
    image.png

  • ソースを修正しながらすぐに動きを確認できる!
    image.png

細かいサーバー設定などが不要なので、すぐに動くプログラムを確認しながら
実際のソースコードを記載して試すことができます。

###(2) 公式ドキュメントの充実性

####日本語版対応の公式ドキュメント
Vue.js公式ドキュメント
Nuxt公式ドキュメント

チュートリアルから、教科書のような記載から、APIの詳細まで記載されているので
わざわざ参考書を購入する必要がありません!

###(3) 厳格な規約

####ディレクトリ構成
create-nuxt-appプロジェクト作成後
image.png

Nuxt.jsでは、各ディレクトリに対して、役割・ルールが決められているため
開発者独自のローカルルールなどのディレクトリが存在しません!

  • pages
    • アプリケーションのページ
ルーティングファイル
  • store
    • Vuexストアファイル(状態管理を扱う)

#最後に

今までJavaしか触ったことのない私でしたが、Nuxt.jsを1ヶ月触ってみて、「設定よりも規約」思考のフレームワークも良いところいっぱいあるなと思いました。
目的によって手段を使い分ける上では、いろんな選択肢を持つのは悪くないなと思いますので、引き続きNuxt触っていきますー!

4
3
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?