プログラミング学習初心者のための情報メディア by Proglus（プログラス）
地域によっては、外出自粛要請がでています。
不要不急な外出は控えて、自宅でオンライン動画をつかって学習しませんか？
世界最大級の学習プラットフォームUdemy(ユーデミー)で使える、期間限定の割引クーポンを配布します。
2021/09/02（木）より1ヶ月
下記リンクを経由すると、Udemyコースが割引価格で受講できます。
このコースが気に入ったら、ぜひレビュー投稿をお願いいたします。
オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！
在宅学習応援！今なら複数の基礎コースが無料！！
今すぐ詳細を確認する
create-nuxt-appを利用すると、その時点での最新のNuxt.jsでプロジェクトが作成されます。
最新バージョンでは、コースの通り進めることができなくて、本質的ではないところで躓いてしまいますので、コースで使用しているバージョンにダウングレードします。
本コースは、この記事は、Udemyにて公開中のオンライン講座「Nuxt JS入門決定版！Vue.jsのフレームワークNuxt JSの基本からFirebaseと連携したSPAの開発まで」及びのProglus（プログラス）で公開中のオンライン講座「Nuxt.JS入門」サポート記事です。
流れはこのようになっています。
この記事では、3.15系から2.8系へダウングレードする方法について紹介します。
node_modules フォルダを削除します。
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"
@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"
]
}
}
v2.8当時の書き方に修正する。
<template>
<Tutorial/>
</template>
<script>
export default {}
</script>
↓
<template>
<section class="container">
<p>Hello World</p>
</section>
</template>
<script>
export default {}
</script>
$ cd hello $ npm install
$ npm run dev
※ 終了する場合はcontrol + c
Nuxt.jsバージョン確認＆Google Chromeで指定のURLを開く
ページにHello World!と表示されれば動作確認OK。
ダウングレードするとプロジェクト直下にpluginsフォルダができない場合があるようですが、手動で作成すれば動作するようです。
オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！
在宅学習応援！今なら複数の基礎コースが無料！！
今すぐ詳細を確認する
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サーバー構築運用入門」のサポート記事です。
結論としては、下記の流れで、問題の解決が行えます。
記事中では、記事執筆2021/6/27時点での、最新バージョン 6.1.22をダウンロードします。
https://www.virtualbox.org/
ダウンロードした、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.pkgを、ダブルクリック
実行許可を求められるので、”許可を”クリック
インストールを進める
システム機能拡張がアップデートされました。と表示されるので、”セキュリティ環境設定を開く”をクリック
セキュリティとプライバシー画面が開きましが、ロックされているので、鍵マークをクリック
VirtuaｌBoxの開発元”Oracle America, Inc”を許可します。許可ボタンをクリック。
PCを再起動します。
インストーラーはゴミ箱へ（任意）
再起動後には、VirtualBoxを使って、仮想マシンが起動できるようになりました!
オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！
在宅学習応援！今なら複数の基礎コースが無料！！
今すぐ詳細を確認する
この記事では、VSCodeを使用する上で必須となるプロジェクトフォルダ機能の設定方法について解説します。
この記事は、オンライン講座「ウェブ開発入門完全攻略コース – HTML/CSS/JavaScript. プログラミングをはじめて学び創れる人へ！」とProglus「新HTML入門」のサポート記事です。
なお、アクセス時期によっては実際のサイトと記事中の画像で表示が異なる場合があります。
VSCodeはVisual Stduio Codeの略で、Microsoft社が開発しているエディタを指します。
VSCodeは様々な言語やOSに対応しており、拡張機能も豊富で効率的に開発を進めることができるため、人気が集まっています。
プロジェクトフォルダとは、プログラムを作成する際の作業フォルダを指します。
プロジェクトフォルダを設定することでコーディングを効率的に進めることができます。
ここでは、デスクトップに配置した「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でプレビュー表示する方法ついて説明します。
①画像のダウンロード
Webサイトなどで表示されている画像をダウンロードして利用したい場合について解説します。
画像を右クリックして、「名前をつけて画像を保存」をクリックします。
②画像のドラッグ & ドロップ
ダウンロードした画像をプロジェクトフォルダにドラッグ & ドロップします。
VSCodeで既にプロジェクトフォルダを設定している場合は、直接画像ファイルをドラッグ & ドロップすることも可能です。
③VSCodeでプロジェクトフォルダを開く
VSCodeのプロジェクトフォルダにダウンロードした画像が追加されています。
画像ファイル名をクリックすると、右側のタブに画像が表示されます。
VSCodeで画像をプレビュー表示することができました！
オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！
在宅学習応援！今なら複数の基礎コースが無料！！
今すぐ詳細を確認する
xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun
下記コマンドを実行して、Xcodeをインストールすれば解決する。
$ xcode-select –install
確認ダイアログが表示されるので、OKして進める。
macOS Big Sur バージョン11.2.3
オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！
在宅学習応援！今なら複数の基礎コースが無料！！
今すぐ詳細を確認する
