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

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

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

You are here: Home / Archives for 2021

Archives for 2021

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週間無料体験しよう

今すぐ詳細を確認する

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

By

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

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

解決方法

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

日毎の利用料の確認方法

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

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

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

プロジェクトの削除

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

おわりに

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

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

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

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

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

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

今すぐ詳細を確認する

AWS Cloud9のMySQLサーバにローカルPCから接続する方法について解説します！

By

この記事では、AWS Cloud9のEC2インスタンスに立てたMySQLサーバーに、ローカル環境のMySQLクライアント(MySQL Workbench) から接続する方法についてご説明します。

この記事は、Udemyオンライン講座「はじめてのRuby on Rails入門-RubyとRailsを基礎から学びWebアプリケーションをネットに公開しよう」とProglus「Ruby on Rails5入門」のサポート記事です。

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

AWS Cloud9とは

・クラウドコンピューティングサービスのAWSで利用できるサービスの一つです。
・クラウド上のサーバー資源を利用して、ブラウザ上の統合開発環境(IDE)でWebアプリケーションを開発することができます。
・Cloud9を起動すると、AWSのEC2インスタンスに接続され、開発を進めることができます。

AWS Cloud9上のMySQLサーバーに接続する

Webサービスの開発を進める上で、MySQLサーバーに接続してSQLコマンドを実行し、DB操作を行う場面は多々あります。

そしてクラウド上で動くリモートのMySQLサーバーに接続するためには、SSH接続などで認証する必要があります。

Cloud9で開発を行う場合、EC2インスタンスが自動的にブラウザ上のIDEと接続されます。そのため認証情報がユーザーに見えない形となっているので、Cloud9のEC2環境で起動しているMySQLサーバーに接続するためには少し工夫が必要です。

ここでは、Cloud9のMySQLサーバーにローカル環境から接続するまでの流れについて解説します。

解説で用いる主なバージョンについては以下の通りです。

ローカル環境:
PC: MacBook Pro 13-inch(2020, intelプロセッサ)
MySQL Workbench: 8.0.25

Cloud9環境:
インスタンスタイプ: t2.micro (1 GiB RAM + 1 vCPU)
プラットフォーム: Ubuntu Server 18.04 LTS
MySQL: 8.0.25

キーペアの作成

SSH接続でリモートサーバーとの認証に用いるため、まずは公開鍵・秘密鍵のキーペアを作成します。

まずawsのEC2コンソールを開き、「キーペア」を選択します。

「キーペアを作成」を押し、新規作成を行います。

キーペア名を入力し、ファイル形式としてpemを選択します。「キーペアを作成」を押します。

するとcer形式のファイルとして秘密鍵がダウンロードできるので、分かりやすい場所に保存しておきます。

この秘密鍵は再発行ができないので、もしファイルを削除してしまった場合は、もう一度新しいキーペアの作成を行なってください。

公開鍵の登録

先ほどダウンロードした秘密鍵から、公開鍵を生成します。

公開鍵の生成にはssh-keygenコマンドを使用します。

$ ssh-keygen -y -f {秘密鍵ファイルまでのパス}
ssh-rsa .....

出力のssh-rsaで始まる文字列が公開鍵となります。

以下のようなエラーが発生する場合は、秘密鍵のファイルの権限を変更する必要があります。

$ ssh-keygen -y -f demo.cer
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@ WARNING: UNPROTECTED PRIVATE KEY FILE! @
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
Permissions 0644 for '/Users/ricky/Downloads/demo.cer' are too open.
It is required that your private key files are NOT accessible by others.
This private key will be ignored.
Load key "/Users/ricky/Downloads/demo.cer": bad permissions

chmodコマンドを管理者権限で実行し、0600を指定します。

sudo chmod 0600 {秘密鍵ファイルまでのパス}

公開鍵が出力できたら、Cloud9の開発環境を起動してください。

ターミナルで以下のように入力し~/.ssh/authorized_keysファイルを開きます。

$ vim ~/.ssh/authorized_keys

出力された公開鍵を、以下のようにファイル下部に新しく貼り付けます。

ここで既に存在する鍵は絶対に削除しないでください。Cloud9のコンソールからブラウザ開発環境に接続できなくなります。

セキュリティグループの変更

次に、ローカルPCからCloud9のEC2インスタンスにSSHできるように、セキュリティグループの設定を変更します。

Cloud9のコンソールで環境名をクリックし、詳細画面に飛びます。

 

「Go To Instance」をクリックすると、Cloud9の環境があるEC2インスタンスの詳細画面に飛びます。

「セキュリティ」から「セキュリティグループ」のリンクをクリックし、セキュリティグループの詳細に飛びます。

「インバウンドルールの編集」をクリックします。

ローカルのPCからの接続を許可するため、ソースに「0.0.0.0」と「::/0」を追加しましょう。完了したら、「ルールを保存」をクリックします。

これでネットワーク周りの設定は完了です。ローカルPCからSSHができることを確認しましょう。

もう一度EC2インスタンスの詳細を開き、インスタンスのグローバルIPを確認します。

そして以下のコマンドで接続します。

$ ssh -i {秘密鍵ファイルまでのパス} ubuntu@{EC2インスタンスのグローバルIP}

上手くいけば、EC2環境にSSHで入ることができるはずです。

Workbenchから接続

次はWorkbenchで接続情報を入力し、Cloud9のEC2環境で起動しているMySQLサーバーに接続してみましょう。

MySQLは既にセットアップ済みで、起動状態であるとします。

Workbenchを起動します。

「MySQL Connections」の右の「+」アイコンをクリックします。

すると接続の設定画面が表示されます。

まず、Connection Nameで適当なコネクション名を設定します。そしてConnection Methodの部分で「Standard TCP/IP over SSH」を選択します。

次はSSH認証に関する設定を行います。SSH HostnameにはEC2インスタンスのパブリックIPを入力し、SSH UsernameにはEC2インスタンスのユーザー名を入力してください。

SSH Key Fileでは、先ほどssh-keygenで作成した秘密鍵のファイルまでのパスを指定します。

デフォルトの場合は図の通りですが、MySQLの設定に変更がある場合は、ホスト名やポート番号、ユーザー名も適宜変更を行ってください。

これで準備が整いました、Test Connectionを押してCloud9上のMySQLサーバーとの接続確認を行います。

以下のように表示されたら成功です。

「OK」ボタンを押せば、WorkbenchからMySQLサーバーに接続することができます。

これで、Cloud9のMySQLサーバーにローカル環境から接続することが出来ました！

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

オンライン学習サービス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週間無料体験しよう

今すぐ詳細を確認する

macOSのVirtualBoxで”Kernel driver not installed (rc=-1908)”発生時の対処方法を解説

By

macOSのバージョンをBig Surにアップデート後、VirtualBoxを使って仮想マシンを起動しようとすると、”Kernel driver not installed (rc=-1908)”というエラーが発生して、仮想マシンが起動しない問題が発生しました。

“Kernel driver not installed (rc=-1908)

Make sure the kernel module has been loaded successfully.

where: suplibOsInit what: 3 VERR_VM_DRIVER_NOT_INSTALLED (-1908) – The support driver is not installed. On linux, open returned ENOENT.”


“仮想マシン”xxxxx”のセッションを開けませんでした。

The virtual machine ‘Windows10’ has terminated unexpectedly during startup with exit code 1 (0x1).”

この記事では、解決方法について説明します。

この記事は、Proglusにて公開しているオンラインコース「はじめてのLinuxサーバ（ローカル環境編）」、Udemyで公開しているオンラインコース「はじめてのLinuxサーバー構築運用入門」のサポート記事です。

概要

結論としては、下記の流れで、問題の解決が行えます。

  • VirtualBoxのアンインストール
  • VirtualBoxのインストール
  • macOSのセキュリティの設定

対応手順

VirtualBoxの最新版の入手

記事中では、記事執筆2021/6/27時点での、最新バージョン 6.1.22をダウンロードします。
https://www.virtualbox.org/

VirtualBoxをアンインストーラーを使ってアンインストール

ダウンロードした、dmgファイルをダブルクリックして起動。

次に、アンインストーラーを起動します。

このような、警告が表示され、起動がブロックされます。

ロックを解除します。
画面左上メニューのリンゴマーク > システム環境設定 > セキュリティとプライバシー
画面を開きます。

“画面下の”VirtualBox_Uninstall.tool”は開発元を確認できないため、使用がブロックされました”と表示されているので、
“このまま開く”をクリック

再度、起動がブロックされますが今度は、”開く”ボタンがありますので、クリックして起動します。

ターミナルが表示されます。質問に対して、答えていくとVirtualBoxのアンインストールが行えます。

“Do you wish to continue none the less (Yes/No)?
(意訳：続けて良いですか？)
→ Yes と入力してエンターキー

VirtualBox detected the FUSE for macOS core package which might’ve been installed
by VirtualBox itself for the vboximg-mount utility. Do you wish to uninstall
the FUSE for macOS core package (Yes/No)?
（意訳：FUSE for macOSのコアパッケージをインストールして良いですか？）
→ Yes と入力してエンターキー

“Do you wish to uninstall VirtualBox (Yes/No)?”
(意訳：VirtualBoxをアンインストールして良いですか？)
→ Yes と入力してエンターキー

The uninstallation processes requires administrative privileges
because some of the installed files cannot be removed by a normal
user. You may be prompted for your password now…

→ (意訳：macOSのログインパスワードを入力して、エンターキー）

※ バージョンによっては、質問が異なる場合も想定されます。その場合は、基本的にはYesを入力していけば良い可能性が高いですが、念の為、必要に応じてGoogle翻訳等を使って、質問内容を確認してください。

これで、既存のVirtualBoxが削除できました。

VirtualBoxのインストール

ダウンロードした、インストーラーからVirtualBox.pkgを、ダブルクリック

実行許可を求められるので、”許可を”クリック

インストールを進める

システム機能拡張がアップデートされました。と表示されるので、”セキュリティ環境設定を開く”をクリック

セキュリティとプライバシー画面が開きましが、ロックされているので、鍵マークをクリック

VirtuaｌBoxの開発元”Oracle America, Inc”を許可します。許可ボタンをクリック。

PCを再起動します。

インストーラーはゴミ箱へ（任意）

再起動後には、VirtualBoxを使って、仮想マシンが起動できるようになりました!

検証環境

  • iMac(Retina 5K, 27-inch, 2019)
  • macOS Big Sur バージョン 11.4
  • VirtualBox 6.1.22

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

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

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

今すぐ詳細を確認する