webコーダーのsaco @sacocco_sacoya です。
Vueの基礎勉強を一通り終えたため、VueのフレームワークNuxt.jsの勉強を開始します。

教材ははじめてつくるNuxtサイト(三好アキさん著書)です。

こちらの教材に決めた理由は、

• レビュー高評価で、わかりやすい内容の予感がしたこと
• 教材ボリュームが初心者の私にも優しいのではないかと感じたため
• 何か形になるものを一つ作成できそうだったため（教材のテーマはポートフォリオ作成）

です。

現在のVueの理解度 / 勉強に使用した教材

Vueの基礎は勉強し終えましたが、実際に何かを作成できたわけではない状況です。
私がVueの基礎勉強に使用した教材は以下です。

udemy:はじめてのVue.js 3 入門！jQuery を使わないウェブ開発 – 導入からアプリケーション開発まで体系的に学ぶ

【Vue入門　基本編】あさめしコード

【Vue入門　コンポーネント編】あさめしコード

udemyの中村 祐太先生の教材も、あさめしコードさんの教材もどちらも非常にわかりやすく、つまづき少なく進めることができたので、Vueを始める方にはおすすめしたい内容でした。

以下、勉強のメモになります。

Nuxtとは

NuxtはVueのフレームワーク。

Vue自体がJavascriptのフレームワークなのに、さらに別のフレームワークがある理由として、Vue自体の機能は最低限となっており、実際のサイトやアプリ制作で必須の設定は自分で行う必要がある。

それらの必須の設定がすでに済ませてあり、開発をすぐに始められるのがNuxt.js。

Nuxt.jsは静的サイト（スタティックサイト）開発から、本格的なフルスタックアプリ開発まで幅広い用途に対応しており、日本でも広く使われている。

Node.js

Node.jsはJavascriptをブラウザの外でも使う実行環境のことで、「JavaScriptで書けるサーバー」として一般的に知られている。

Nuxt開発にはNode.jsが必要なので以下よりダウンロード。

https://nodejs.org/en/download

ダウンロードのバージョンには「LTS（安定版）」と「CURRENT（最新版）」があるが、特別な理由がない限りは「LTS」をダウンロードする。

npm

npmとはNode Package Managerの略。
VueやNuxt開発には様々な周辺テクノロジーが必要になり、それらを「パッケージ」と呼ぶ。

スマートフォンにアプリをインストールして機能を拡張するように、Nuxt開発でもnpmで「パッケージ」をインストールして機能を追加・拡張して開発する。

npmはNode.jsと一緒にインストールされる。

↓インストールされているかターミナルで確認する

npm -v

「9.7.1」などバージョン名が表示されていたらインストールされている。

VS Code拡張機能

Volarという拡張機能がプロパティやメソッドの補完をしてくれるのでおすすめとのことでした。
CompositionAPIもサポートされているようです。

https://marketplace.visualstudio.com/items?itemName=Vue.vola

まとめ

• Nuxt.jsはVue.jsのフレームワークで、Vue.jsをさらに便利にしたもの
• 実際のサイト作成やアプリ開発に必要な機能や便利なツールがあらかじめ導入されている
• 静的サイトからアプリ開発まで幅広く対応しており、日本でも広く使用されている
• Nuxt.js開発にはNode.jsが必要
• npmで様々なパッケージをインストールして機能を追加・拡張して開発する。
• Nuxt開発におすすめのVS Code拡張機能はVolar

第１章はNuxt.jsの基本的な箇所が紹介・説明されていました。非常にわかりやすかったです。

Node.jsやnpmなどについても少し触れられていて勉強になりました。

第１章のまとめは以上になります。