プログラミング入門ナビ by Proglus（プログラス）

プログラミング学習初心者のための情報メディア

本ページにプロモーションが含まれる場合があります

You are here: Home / Archives for Nuxt.js

Nuxt.js

Nuxt.jsでcreate-nuxt-appを使った新規プロジェクトの作成方法

By

本記事は、Udemy「Nuxt.js入門決定版！」 、Proglus（プログラス）「Nuxt.js」サポート記事です。

プロジェクトファイルを配置する場所

記事では、
macOS, Windows共通: ユーザーのホームディレクトリ直下の、”nuxt-projects” という名前のディレクトリ（フォルダ）を作成して作業します。

プロジェクト作成方法

create-nuxt-appというnuxt.jsプロジェクトの雛形を作るアプリケーションを使います。

記事では、プロジェクト名は”hello”とします。
学習内容により、適宜プロジェクト名を変更してください。

ターミナルを使い、nuxt-projects内へ移動します。

操作例)
$ cd nuxt-projects

これで、nuxt-projects配下に、helloプロジェクトのディレクトリが作成されるように準備ができました。
エンターキー押下して次へ進める。

プロジェクト作成

$ npx create-nuxt-app hello

エンターキー押下して次へ進める。

補足：プロジェクト名である、”hello”の部分は、学習内容により適宜変更してください。

対話形式で、プロジェクトを設定する

create-nuxt-app v3.7.1 の質問項目と、設定内容は、下記となります。
尚、バージョンアップにより、質問項目が変更となる場合があります。

Generating Nuxt.js project in hello
? Project name: (hello)

プロジェクトネームを設定できます。カッコの中のhelloがデフォルトの値です。
デフォルトの値を使いたいので、そのままエンターキーを押下。

? Programming language: (Use arrow keys)
❯ JavaScript
TypeScript

プログラミング言語を選択します。
このコースではJavaScriptを利用します。
JavaScriptにカーソルがあたっている状態で、エンターキー押下

? Package manager:
Yarn
❯ Npm

パッケージマネージャーを選択します。
ざっくりいうと、ソフトウェア管理ツールです。
このコースでは、Npmを利用します。
エンターキー押下

? UI framework: (Use arrow keys)
❯ None
Ant Design Vue
BalmUI
Bootstrap Vue
Buefy
Chakra UI
Element
Framevuerk
Oruga
Tachyons
Tailwind CSS
Windi CSS
Vant
View UI
Vuetify.js

UIフレームワークを選択します。
知名度が高いものでいうと、たとえば、boostrapがあります。
ここでは選択しないので、Noneを選択した状態で、
エンターキー押下

? Nuxt.js modules:(Press ＜space＞ to select,＜a＞o toggle all,＜i＞ to invert selection)
❯◯ Axios – Promise based HTTP client
◯ Progressive Web App (PWA)
◯ Content – Git-based headless CMS

Nuxt.jsのモジュールを追加する場合は、選択するのですが、
ここでは、なにも選択しないで、エンターキー押下

? Linting tools:(Press ＜space＞ to select,＜a＞o toggle all,＜i＞ to invert selection)
❯◯ ESLint
◯ Prettier
◯ Lint staged files
◯ StyleLint
◯ Commitlint

Linting toolsを選択できます。
ざっくりいうと、コードレビューツールですが、ここでは使わないので、そのままエンターキー押下

? Testing framework: (Use arrow keys)
❯ None
Jest
AVA
WebdriverIO
Nightwatch

テストフレームワークの選択です。
ここでは使わないので、Noneを選択して、エンターキー押下

? Rendering mode: (Use arrow keys)
❯ Universal (SSR / SSG)
Single Page App

レンダリングモードを選択します。
ざっくりいうと、
Universalは、サーバー側で、jsを実行してレンダリングするモード。
Single Page Appは、クライアント側でjsを実行してレンダリングするモード。

ここでは、Universalを選択します。
補足：セクション「Nuxt.js & FirebaseによるSPA開発入門」の場合は、
Choose rendering modeの選択で、Single Page Appを選択してください。

エンターキー押下

? Deployment target: (Use arrow keys)
❯ Server (Node.js hosting)
Static (Static/Jamstack hosting)

Serverの方は、node.jsとして サーバーで動かす場合に選択、
Staticは、静的なファイルとして、静的ファイルを書き出して動作するので静的ホスティングサービス上にデプロイする場合に選択。

ここでは、Serverを選択します。
エンターキー押下

? Development tools: (Press ＜space＞ to select,＜a＞o toggle all,＜i＞ to invert selection)
❯● jsconfig.json (Recommended for VS Code if you’re not using typescript)
◯ Semantic Pull Requests
◯ Dependabot (For auto-updating dependencies, GitHub only)

開発ツールの設定に関する項目です。
VS Codeを使うので、jsconfig.jsonにチェックを入れます。スペースキーを押して、黒丸になれば、選択状態です。
エンターキー

? What is your GitHub username? (naka)

GitHubのユーザー名を入れます。特に理由がなければ、デフォルトの設定でOKなので、エンターキーをおしてください。

Version control system:
❯ Git
None

ソースコードのバージョンコントロールで、Gitを使うかの選択です。
コース内では、Gitは使いませんが、後で使いたくなることを考慮して、Gitを選択してエンターキー押下。
処理が行われます。数分掛かります。

“Successfully”と表示されればOKです。

動作確認

ターミナルで、下記を実行。
helloディレクトリに移動

$ cd hello

開発モードでサーバーを起動
$ npm run dev

画面に表示されているURL(例：http://localhost:3000/)をコピー、

Google ChromeでURLを開いてください。

このような、画面が表示されていればOKです。

補足：学習タイミングによってはUIが異なることが想定されます。

次のレクチャーへ進んでください。

検証環境

  • node.js v14.18.1
  • create-nuxt-app v3.7.1
  • nuxt.js 2.15.8

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

Nuxt.jsのバージョンを動作検証済みバージョンへ変更しHello Worldプログラムを実行しよう

By

概要

create-nuxt-appを利用すると、その時点での最新のNuxt.jsでプロジェクトが作成されます。

最新バージョンでは、コースの通り進めることができなくて、本質的ではないところで躓いてしまいますので、コースで使用しているバージョンにダウングレードします。

本コースは、この記事は、Udemyにて公開中のオンライン講座「Nuxt JS入門決定版！Vue.jsのフレームワークNuxt JSの基本からFirebaseと連携したSPAの開発まで」及びのProglus（プログラス）で公開中のオンライン講座「Nuxt.JS入門」サポート記事です。

流れはこのようになっています。

  1. インストール済みの依存パッケージを削除
  2. package-lock.jsonを削除
  3. package.jsonを修正
  4. nuxt.config.jsを修正
  5. 依存パッケージを再インストール
  6. pages/index.vue を編集
  7. 動作確認（Hello World!）

この記事では、3.15系から2.8系へダウングレードする方法について紹介します。

1. インストール済みの依存パッケージを削除

node_modules フォルダを削除します。

2. package-lock.jsonを削除

3. package.jsonの修正

①scriptsを下記のよう書き換えます。

v2.8当時の書き方に修正する。

修正前

"scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },

↓
修正後

 "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "export": "nuxt export",
    "serve": "nuxt serve"
  },

② nuxtのバージョンを2.9未満の最新版(2.8系の最新版)に設定

 "nuxt": "<2.9"

4. nuxt.config.jsを修正

@babel/preset-envのエラーが出ないように検証した結果を反映している。

編集前

build: {
}

↓

編集後

 build: {
    babel: {
      presets({isServer}) {
        const targets = isServer ? { node: 'current' } : { ie: 11 }
        return [
          [ require.resolve("@babel/preset-env"), { targets }  ]
        ]
      },
      plugins: [
        "@babel/syntax-dynamic-import",
        "@babel/transform-runtime",
        "@babel/transform-async-to-generator"
      ]
    }
  }

5. pages/index.vue を編集

v2.8当時の書き方に修正する。

編集前

<template>
  <Tutorial/>
</template>

<script>
export default {}
</script>

↓

編集後

<template>
  <section class="container">
      <p>Hello World</p>
  </section>
</template>

 
<script>
export default {}
</script>

6. 依存パッケージを再インストール

$ cd hello
$ npm install

補足：cd helloは、現在のディレクトリがhelloではない場合のみ(helloがカレントディレクトリではない場合のみ)、実施する

7. 動作確認（Hello World!）

開発用のウェブサーバを起動

$ npm run dev

※ 終了する場合はcontrol + c

8. 動作確認（Hello World!）

Nuxt.jsバージョン確認＆Google Chromeで指定のURLを開く

ページにHello World!と表示されれば動作確認OK。

よくあるご質問

Q. 記事の通り実行してもバージョンが変更されません。
Ans. 各種編集後のファイルが保存されていないケースが多いです。再度ご確認ください。

補足

ダウングレードするとプロジェクト直下にpluginsフォルダや、assetsフォルダ等ができない場合があるようですが、手動で作成すれば動作します。

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

Nuxt.jsで作成したアプリをNetlifyへデプロイするには? デプロイまでの流れを紹介!

By

この記事では、Nuxt.jsで作成したアプリケーションをNetlifyにデプロイする流れについて説明します。

この記事は、オンライン講座「Nuxt JS入門決定版！Vue.jsのフレームワークNuxt JSの基本からFirebaseと連携したSPAの開発まで」のサポート記事です。

なお、アクセス時期によっては実際のサイトと記事中の画像で表示が異なる場合があります。

Netlifyとは

  • 静的なWebサイト向けの高機能なホスティングサービスです。
  • Github等のレポジトリと連携することで、簡単にソースコードのビルド・デプロイからWebサイトの公開までを行うことができます。
  • 個人用途であれば無料で利用可能です。

デプロイの流れ

Githubのアカウントは取得済みであるものとします。

Githubレポジトリへの追加

Nuxt.jsで作成したアプリケーションをNetlifyにデプロイするためには、Githubで専用のレポジトリを作成する必要があります。ここでは、新規にレポジトリを作成します。

まずGithubにログインします。

github-new-repo

右上の「+」ボタンから「New repository」をクリックします。

github-create-repo

ここでは、「nuxt-todo」という名前のアプリケーションをデプロイしていきます。レポジトリ名は、手元のアプリケーションのフォルダ名と同じにすることをおすすめします。

レポジトリの公開設定はここでは「Public」とし、「Create repository」ボタンをクリックします。

ターミナルでNuxtアプリケーションのプロジェクトディレクトリに移動します。

$ git init
$ git add .
$ git commit -m "initial commit"
$ git remote add origin https://github.com/[ユーザー名]/[レポジトリ名].git
$ git push

上記の手順に従って、フォルダの中身をレポジトリにpushしてください。

Netlifyへのデプロイ

次に、作成したGithubレポジトリの中身をNetlifyにデプロイするまでの流れについて説明します。

netlify-top-page

Netlifyのトップページを開き、右上の「Sign Up」ボタンを押します。

netlify-sign-up

「GitHub」をクリックすることで、サービス連携で簡単にアカウント登録をすることができます。

 

netlify-after-login

ログイン後は、上のようなページが表示されます。

「Sites」をクリックして、「New site from Git」ボタンをクリックします。

netlify-select-github

「Create a new site」という表示が現れます。「Github」をクリックします。

netlify-authenticate-github

上記のような新規ウィンドウが現れるので、「Authorize Netlify by Netlify」をクリックします。

netlify-github-install

「Only select repositories」をクリックし、「Select repositories」ボタンでデプロイするレポジトリを選択します。

選択済みのレポジトリは、「Selected 1 repository」の下に表示されます。

「Insatall」ボタンをクリックします。

netlify-create-new-site

先ほど追加したレポジトリを選択します。

netlify-deploy-settings

「Owner」では自分のアカウント名、「Branch to deploy」は特別な事情が無ければmasterを選択します。

「Build Command」は、SPAモードでアプリケーションを作成した場合には「npm run build」と入力します。静的に生成されたサイトをデプロイする場合は、「npm run generate」と入力してください。

どちらの場合も、「Publish directory」は基本的に「dist」を指定します。

補足:「dotenv」で環境変数の管理を行っている場合

ここでは、ローカル環境でdotenvを用いて環境変数の管理を行っている場合について補足します。

「dotenv」の設定ファイルである.envファイルは隠しファイルであり、セキュリティ上の観点からgithubにはpushしないのが普通です。

そこで、Netlify上で環境変数の値を設定する必要があります。

まずアプリケーションフォルダ内のnuxt.config.jsファイルに、Netlifyから環境変数の値を受け取るために以下の修正を加えます。

ここでは、「FIREBASE_PROJECT_ID」というキー名の環境変数を用いています。キー名の部分は、各自のアプリケーション設定に合わせて変更してください。

export default {
　env: {
　  　FIREBASE_PROJECT_ID: process.env.FIREBASE_PROJECT_ID
   　},
　　　　　(-----   省略   -----)
}

そして先ほどのNetlifyの「Basic Build Settings」の画面では、環境変数を設定するために、「Advanced」をクリックします。

「New variable」ボタンを押してフィールドを追加し、環境変数のキー名と値のペアを入力してください。

完了したら「Deploy site」をクリックします。

デプロイ中

netlify-deploy-in-progress

デプロイが進行中の場合、このように表示されます。

デプロイが完了すると、緑色でURLが表示されます。URLをクリックします。

このように、デフォルトのウェルカムページが表示されればデプロイ成功です。

Netlifyへのデプロイが完了し、Nuxt.jsで作成したアプリを外部に公開することができました！

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

Nuxt.jsの新規プロジェクトを作成する

By

この記事ではWindowsをお使いの方が、Nuxt.jsの新規の空のプロジェクトを作成して、実行するところまでを学習します。

準備

npmのインストール

npmをインストールしていない方は、インストールを行う必要があります。

Windows版

Node.jsとnpmをWindowsにインストールする方法

macOS版

制作中

作業用のディレクトリの作成と移動

ここでは、一例として、ユーザーのホームディレクトリに、nuxt-projectsというディレクトリを作成して学習を行うことにします。

macOSの方は、ターミナル
Windowsの方はコマンドプロンプト、
を起動します。

ディレクトリの作成

mkdir nuxt-projects

と入力してエンターキーを押下。

作成したディレクトリに移動

cd nuxt-projects

と入力してエンターキーを押下。

参考：画面キャプチャ（Windows）

Nuxt.jsの雛形となるプロジェクトの作成

Nuxt.jsの雛形となるプロジェクトをすばやく作成できるツール「create-nuxt-app」が、Nuxt.jsチームによって用意されているので利用します。

npx create-nuxt-app hello

と入力してエンターキー

補足としては。
npxは、npmパッケージのダウンロードと実行を一度に行うツールのことです。
helloの部分はプロジェクト名です。任意の名前を設定します。

対話形式で、設定を行います。

プロジェクト名

? Project name (hello)

Project name、プロジェクト名を設定します。
括弧書きが、デフォルトで使われる名前です。
変更もできるのですが、
今回は、デフォルトの名前を使いたいので、エンターキーを押します。

プロジェクトの説明

? Project description (My scrumtrulescent Nuxt.js project)

プロジェクトディスクリプション、プロジェクトの説明を設定します。
変更もできますが、ここではデフォルトのまま使います。
エンターキーを押します。

サーバーサイドのフレームワークを選択

? Use a custom server framework (Use arrow keys)
❯ none
express
koa
adonis
hapi
feathers
micro

Nuxtアプリケーション内部で利用される、サーバーサイドのフレームワークを選択します.

ここでは使いませんので、noneを選択して、Enterキーを押します。

インストールする機能の選択

? Choose features to install (Press to select, <a> to toggle all, <i> to
inverse selection)
❯◯ Progressive Web App (PWA) Support
◯ Linter / Formatter
◯ Prettier
◯ Axios</i></a>

ここでは使いませんので、選択しないで、Enterキーを押します。

UIフレームワークの選択

? Use a custom UI framework (Use arrow keys) 
❯ none
 bootstrap
 vuetify
 bulma
 tailwind
 element-ui 
 buefy 
   (Move up and down to reveal more choices)

使用するUI フレームワークを選択します。
例えば、知名度が高いものだと、bootstrapです。
ここでは使用しないので、noneを選択してEnterキーを押します。

テストフレームワークの選択

? Use a custom test framework (Use arrow keys)
❯ none
jest
ava

テストフレームワークを選択します。
ここでは使用しないので、noneを選択して
Enterキーを押します。

レンダリングモードの選択

? Choose rendering mode (Use arrow keys)
❯ Universal
Single Page App

レンダリングモードの選択。
Universalは、サーバ側でレンダリング。
Single Page Appはクライアント側でレンダリング。
という違いがあります。

ここでは、Universalを選択して、Enterキーを押します。

作者の名前の設定

? Author name (naka)

Author name、作者の名前を設定します。
入力するか、デフォルトを設定するためのそのままにして、エンターキーを押します。

パッケージ管理ソフトを選択

? Choose a package manager (Use arrow keys)
❯ npm
yarn

パッケージ管理ソフトを選択します。
ここでは、npm （Node Package Manager） を選択してエンターキーを押します。

ここまでの操作で、Nuxtjsの雛形のプロジェクトが作成されました。

参考：すべての設定が終わったろころの画面キャプチャ

※ キャプチャはWindowsですが、macOSでも同様。

プロジェクトの実行

それでは、ひな形のプロジェクトを実行してみましょう。

作成されたhelloフォルダ（作成したプロジェクト名と同名）に移動します。

cd hello

開発モードで制作したプロジェクトを実行します。

npm run dev

下記のような画面が表示されます。Listening onに続くURLをコピーしてGoogle ChromeのURL欄にペーストして、表示します。

下記のような、ダミーのホームページが表示されれば動作確認としてはOKです。

プロジェクトの実行を終了したい場合は、
ターミナル（macOS）, コマンドプロンプト（Windows）にフォーカスをあって（ターミナルやコマンドプロンプトの領域をクリックして）、controlキー + Cキーを押します。

Windows環境で終了して良いか聞かれる場合（Y/N）?は、 Yを入力してEnterキーを押します。

おわりに

この記事では、Nuxt.jsの新規プロジェクトを作成する方法について学習しました。

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

インストーラー版のNode.jsとyarnをWindowsにインストールする方法

By

Node.jsとnpm、パッケージ管理ソフトyarnをWindowsにインストールする方法について学習します。

Node.jsとは？

Node.js（ノードジェイエス）というのは、ざっくり言ってしまうと、サーバ側で動作するプログラムをJavaScriptで書くために使う技術です。

npmとは？

npm（ネヌピーエム）というのは、Node Package Managerの略で、node.jsのモジュールを管理するツールです。

Rubyでいうところのgemとか、LinuxのCentOSでいうところのyum に相当するようなイメージです。

補足として、モジュールというのは、ざっくり言うと、Node.jsで使える便利なソフトウェアの塊のことです。

node.jsとnpmのインストール

Node.jsをインストールすると、一緒にnpmもインストールされます。
Windowsで使える、Node.jsのインストーラーをダウンロードして、インストールを行います。

node.jsのダウンロード

Node.jsの公式サイトのダウンロードページをWebブラウザで開きます。
ダウンロード | Node.js

LTSと表示されているバージョンをダウンロードします。
お使いのパソコンに合わせて、32bit版か64bit版を選択してください。
Windows10で32bit版か64bit版かを確認したい

補足として、LTSはLong Term Support、日本語でいうと長期サポート版のことです。
ざっくりいうと、長い期間メンテナンスされることが計画されているバージョンのことです。

基本的には、LTSの最新バージョンをインストールすることを推奨します。

万が一、バージョンによる問題が疑われる場合には、動画確認済みバージョンを使うことが学習を進める上で有効な場合があります。

node.jsのバージョンを指定してダウンロードする方法

学習を進める上でNode.jsのバージョンに依存する問題が発生する事も予想されます。
その場合には、本コースで動作確認済みバージョンを指定してダウンロードをお試し下さい。

(例) v18.15.0をダウンロードする場合
(1)過去のリリースバージョンページを開く。これまでにリリースしたバージョンが一覧表示されています。

(2)ブラウザ検索(cntl + F キーで検索できます。)で「v18.15.0」と入力し、検索でヒットしたリンクをクリックする。

(3)お使いのパソコンに合わせて、ダウンロードします。
32bit版・・・node-v18.15.0-x86.msi
64bit版・・・node-v18.15.0-x64.msi

インストーラーの起動

ダウンロードしたインストラーをダブリクリックして開きます。

Welcome to the Node.js Setup Wizard

Nextボタンをクリック。

ライセンスに同意

ライセンスに同意したうえで、チェックを入れて、Nextボタンをクリック。

インストールフォルダの指定

デフォルトの設定のままでOKです。

Nextボタンをクリックします。

カスタムセットアップ

インストール内容をカスタマイズできますが、ここでは、デフォルトの設定のまま進めます。

Nextボタンをクリックします。

Tools for Native Modules

オプショナルな開発ツールをインストールするか聞かれているので、チェックはOFFのままで、Nextボタンをクリック。

インストールの開始

これまで設定した内容に従って、インストールを行います。

Installボタンをクリックします。

環境によっては、ユーザーアカウント制御のダイアログが表示されるので、確認して「はい」ボタンをクリックします。

インストール実行中

しばらく時間が掛かります。

インストール完了

インストールが完了しました。

「Finish」ボタンをクリックして、インストーラーを終了します。

インストールされたことを確認

node.jsとnpmが正常にインストールされたことを確認してみましょう。
インストールされた、node.jsとnpmのバージョンを表示してみます。

コマンドプロンプトの起動

Node.jsのバージョンを表示

node -v

と入力してEnterキーを押下。

バージョンが表示されたらOKです。

npmのバージョンを表示

npm -v

と入力してEnterキーを押下。

バージョンが表示されたらOKです。

yarnのインストール

nodeを公式インストーラーでインストールした時のyarnのインストール方法です。

インストーラーをダウンロード

yarnの公式サイトからインストーラーをダウンロードします。
公式サイト
「Windows」タブを選択して、「インストーラーをダウンロードする」をクリックして、ダウンロードしてください。

インストーラーを起動

ダウンロードしたファイルを開いて、インストーラーを起動します。
「Next」をクリック。

インストール実行

インストールを実行します。
「Install」をクリック。

インストール完了

インストールが完了しました。
「Finish」ボタンをクリックして、インストーラーを終了します。

インストールされたことを確認

yarnがインストールされているか確認します。
コマンドプロンプトを起動して、コマンドを実行します。
yarn -v

と入力してEnterキーを押下。
バージョン情報が表示されていればOKです。

おわりに

この記事では、Windows環境にnode.jsとnpm、yarnをインストールする方法について学習しました。

検証環境

Windows10

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する