プログラミング入門ナビ

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

You are here: Home / Archives for プログラミング入門

プログラミング入門

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が異なることが想定されます。

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

検証環境

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

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

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

在宅学習応援！今なら複数の基礎コースが無料！！

今すぐ詳細を確認する

GCPで本当に各サービスがすべて停止、シャットダウンしてて課金対象外となってるか確認する方法

By

GCP(Google Cloud Platform)の学習が終わりリソースをクリーンアップした後に、本当に各サービスがすべて停止、シャットダウンしてて課金対象外となってる確認する方法について解説します。

このコースは、Udemyコース「最速で学ぶ – Google Cloud Platform（GCP）入門完全攻略コース」と、Proglus（プログラス）で公開しているオンラインコース「Google Cloud Platform（GCP）入門」のサポート記事です。

解決方法

結論としては「GCPのお支払いページで日毎の利用料がゼロになったのを確認する」ことが確実です。

日毎の利用料の確認方法

お支払い > レポート から確認ができます。

GCP　お支払い ><noscript><img src=

尚、補足として、「プロジェクトの削除」「Cloud 請求先アカウントを閉鎖する」を実行すれば、より安心できます.

プロジェクトの削除

Cloud請求先アカウントの閉鎖

おわりに

GCP(Google Cloud Platform)の学習が終わりリソースをクリーンアップした後に、本当に各サービスがすべて停止、シャットダウンしてて課金対象外となってる確認する方法について解説しました。

クラウドの利用に慣れていない場合、料金面が不安になる方も多いと思います
利用料レポートを日々確認して異常のないことを確認しましょう。

また、学習が終わり、当面GCPを使わない場合には、忘れないうちに「プロジェクトの削除」「Cloud 請求先アカウントを閉鎖する」を実行するとよいでしょう。

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

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

在宅学習応援！今なら複数の基礎コースが無料！！

今すぐ詳細を確認する

Nuxt.jsのバージョンをコース指定のバージョンに変更する方法

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

7. 動作確認（Hello World!）

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

$ npm run dev

※ 終了する場合はcontrol + c

8. 動作確認（Hello World!）

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

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

よくあるご質問

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

補足

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

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

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

在宅学習応援！今なら複数の基礎コースが無料！！

今すぐ詳細を確認する

VSCodeの基本～プロジェクトフォルダの設定方法について解説します！

By

この記事では、VSCodeを使用する上で必須となるプロジェクトフォルダ機能の設定方法について解説します。

この記事は、オンライン講座「ウェブ開発入門完全攻略コース – HTML/CSS/JavaScript. プログラミングをはじめて学び創れる人へ！」とProglus「新HTML入門」のサポート記事です。

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

VSCodeとは

VSCodeはVisual Stduio Codeの略で、Microsoft社が開発しているエディタを指します。

VSCodeは様々な言語やOSに対応しており、拡張機能も豊富で効率的に開発を進めることができるため、人気が集まっています。

VSCodeのプロジェクトフォルダ設定

プロジェクトフォルダとは、プログラムを作成する際の作業フォルダを指します。

プロジェクトフォルダを設定することでコーディングを効率的に進めることができます。

GUIでの設定

ここでは、デスクトップに配置した「web」という名前のフォルダをプロジェクトフォルダに設定する想定で、手順について説明します。

まずVSCodeを起動します。

VSCodeを起動すると、デフォルトではプロジェクトフォルダは設定されていない状態です。

左のカラムの一番上が「Explorer」のアイコンです。

「Explorer」アイコンをクリックすると、右側に「You have not yet opened a folder」という表示が出るので、その下の「Open Folder」ボタンをクリックします。

なお、VSCodeの左上の「File」をクリックして、「Open…」を選択しても同じ操作が可能です。(Windows版では「File」から「Open Folder…」を選択)

Finderまたはファイルエクスプローラーが表示されるので、プロジェクトフォルダを選択します。

プロジェクトフォルダを設定すると、Exploerのカラムにプロジェクトフォルダの中身が表示されます。

今回は、「web」フォルダの中に「html-basic」という名前のフォルダが存在するので、その中身が一覧表示されています。

プロジェクトフォルダを設定すると、フォルダ内のファイル構成が一目で分かるようになるので便利です。

ファイル名をクリックすると、ファイルが右側のタブで表示されます。

コマンドラインでの設定

プロジェクトフォルダはコマンドラインからも設定できます。

VSCodeをダウンロードするとコマンドラインでcodeコマンドが有効になります。code フォルダ名とすることで、該当フォルダをプロジェクトフォルダとしたウィンドウが立ち上がります。

WindowsではPowerShellまたはコマンドプロンプト、Macではターミナルから起動可能です。

$ cd ~/Desktop
$ ls
web
$ code web

VSCodeで画像をプレビュー表示

ここでは、インターネットからダウンロードした画像をプロジェクトフォルダに追加し、VSCodeでプレビュー表示する方法ついて説明します。

①画像のダウンロード

Webサイトなどで表示されている画像をダウンロードして利用したい場合について解説します。

画像を右クリックして、「名前をつけて画像を保存」をクリックします。

②画像のドラッグ & ドロップ

ダウンロードした画像をプロジェクトフォルダにドラッグ & ドロップします。

VSCodeで既にプロジェクトフォルダを設定している場合は、直接画像ファイルをドラッグ & ドロップすることも可能です。

③VSCodeでプロジェクトフォルダを開く

VSCodeのプロジェクトフォルダにダウンロードした画像が追加されています。

画像ファイル名をクリックすると、右側のタブに画像が表示されます。

VSCodeで画像をプレビュー表示することができました！

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

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

在宅学習応援！今なら複数の基礎コースが無料！！

今すぐ詳細を確認する

vimで編集・保存できない時の対処法を解説！swpファイル削除

By

この記事では、swpファイルが作成されてvimでファイルが編集できない時の対処法について説明します。

この記事は、オンライン講座「はじめてのLinuxサーバー構築運用入門 – Linuxコマンドラインを基礎から学び、自分のウェブサーバまで構築できる」のサポート記事です。

YouTubeで学習する

チャンネル登録してね！

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

Vimとは

・CUIで利用できるエディタです。

・Viという世界でよく使われているエディタの拡張版です。

・GUIの無いサーバーなどでターミナルからファイルの編集を行う際によく用いられます。

Vimでファイルが編集できない場合

vimエディタを起動した時に、以下のような画面が表示されて上手くファイルが編集できないときがあります。

これはvimが何らかの原因で強制終了した時や、別のターミナルで同一ファイルを編集している際に作成されるswpファイルが原因です。

この画面は、前回の編集内容についてどのような操作を行うか聞かれている状態です。

以下の選択肢から選びます。

・[O] Open Read-Only

読み取り専用モードでファイルを開きます。ファイルの編集を行うことはできません。

・[E] Edit anyway

前回の編集内容は気にせずにそのまま編集・上書きを行います。

・[R] Recover

前回の編集内容の復元を行います。

・[D] Delete it

前回の編集内容を削除します。

・[Q] Quit

該当ファイルの編集を終了します。

・[A] Abort

vimアプリケーション自体を強制終了します。

この中から自分の実行したい選択肢に該当する記号を入力し、確定してください。

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

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

在宅学習応援！今なら複数の基礎コースが無料！！

今すぐ詳細を確認する