Vue.jsを始めてみたかったので環境構築
Vue.jsを始めてみたかったのです。
（アイコンはここから）
まえがき
ふとしたきっかけからVue.jsを始めてみたいと思いました。
Node.jsを開発で扱うのは始めてだし、せっかくなので学習記録を取ろうと思い、ブログに残していくことにします。
色々なドキュメントに目を通した結果、Node.jsのパッケージ周り、特に数の多さとか依存関係のエグさとかで心が折れそうですが諦めず頑張っていこうと思います。
環境の準備
ミドル編
手を動かせる土台を作ります。
自分のナレッジベースと学習コストを判断材料にすると、こんな環境で始めることになるでしょうか。
- Windows Server
- Visual Studio Code
- TypeScript
- Google Chrome
普段はC#（.NET Framework）、VS、WinSvで仕事をする生粋のWindows使い故に利用OSはWindows。
本当はこれを機にLinuxを真面目に覚えるべきなのでしょうけど、必要になったら改めて考えます。
学習のための環境を準備しますが、主題はVue.js（とNode.jsとts）なので、それ以外の部分はさくっと。
WinSv2019をAzure VM上に作成。
とりあえずVMにVS類をインストールした後のスタートメニュー。WinSvなのでストアアプリが無くシンプルです。
多分VSCodeでやるべきなのでしょうけれど、念のためVSも入れます。
Node.jsテンプレートだけ選べるようにしました。こんな構成でインストールするのは初めてで、MSBuildすら入らない事実にﾋﾞﾙﾄﾞｦﾀ勢としては動揺を隠しきれません。
Git for Windowsは何かと使うでしょう、多分。
VSCodeはいつも使う拡張機能をいくつかと普段使いの設定を。細かいところは段々変わっていくでしょう。
Node.js編
ガチャガチャやっていく環境は出来たので、次にNode.jsを入れていきます。
せっかくなのでPowershell使いましょうか。
どのご家庭のWindousにも一つは入っているPowershellですが、これを使ってツール類を統合管理することができます。yum や apt-get のWindows版……という説明は合っているような間違っているような。
『Chocolatey』という名前で提供されています。
ただこのChocolatey、今回のやり方だと PackageManagement の仕組みを利用するので、Win7や古めのWin10ビルドだとうまくいかない場合があります。その場合は choco コマンドを利用したやり方で実施するか、 Chocolatey GUI で導入することになります。
choco公式やグーグル検索で色々ヒットしますのでここでは説明を省略します。
PackageManagementについては公式ドキュメントを一通り読むのが確実です。
日本語が怪しい場合は英語に切り替えましょう。
PowerShell ギャラリー | Microsoft Docs
https://docs.microsoft.com/ja-jp/powershell/gallery/overview
Powershellを管理者権限で起動し、まずはバージョン確認。
$PSVersionTable という組み込み変数で確認できます。
PS C:\> $PSVersionTable Name Value ---- ----- PSVersion 5.1.17763.316 PSEdition Desktop PSCompatibleVersions {1.0, 2.0, 3.0, 4.0...} BuildVersion 10.0.17763.316 CLRVersion 4.0.30319.42000 WSManStackVersion 3.0 PSRemotingProtocolVersion 2.3 SerializationVersion 1.1.0.1
一番上の PSVersion が5.1なので問題なさそうですね。
次。
ChocolateyGetプロバイダーの確認PowerShellGetプロバイダーの確認NuGetプロバイダーの確認
現在利用可能なプロバイダーの一覧を表示する Get-PackageProvider コマンドレットを使います。
PS C:\> Get-PackageProvider Name Version DynamicOptions ---- ------- -------------- msi 3.0.0.0 AdditionalArguments msu 3.0.0.0 PowerShellGet 1.0.0.1 PackageManagementProvider, Type, Scope, AllowClobber, SkipPublisherCheck, ... Programs 3.0.0.0 IncludeWindowsInstaller, IncludeSystemComponent PS C:\>
PowerShellGet しかないので他ふたつを入れる必要がありますね。
ひとまずChocolateyの確認のために、正確なプロバイダー名称を Find-PackageProvider コマンドレットで調べます。
PS C:\> Find-PackageProvider -Name *Choco* プロバイダー 'nuget v2.8.5.208' がインストールされていません。 nuget は、https://onegetcdn.azureedge.net/providers/Microsoft.PackageManagement.NuGetProvider-2.8.5.208.dll から手動でダウンロードしてインストールすることができます。 PackageManagement で nuget を自動的にダウンロードしてインストールしますか? はい(&Y) いいえ(&N) 中断(&S) Y Name Version Source Summary ---- ------- ------ ------- chocolatey 2.8.5.130 https://onege... ChocolateyPrototype provider for the OneGet meta-pa... ChocolateyGet 1.0.0.1 PSGallery An PowerShell OneGet provider that discovers packag... ChocoOneGet 0.4.0 PSGallery OneGet provider for Chocolatey PS C:\>
コマンドレットの実行に NuGet が必要だったので自動的にインストールされました。
さて、choco というキーワードで3件ヒットしましたが、今回使いたいのは真ん中の ChocolateyGet なので、これをインストールします。
Install-PackageProvider コマンドレットを使います。
PS C:\> Install-PackageProvider ChocolateyGet -Force Name Version Source Summary ---- ------- ------ ------- ChocolateyGet 1.0.0.1 PSGallery An PowerShell OneGet provider that discovers packag... PS C:\>
インストールに成功すると、今入れた物が何なのかコンソールに表示してくれます。
もう一度、手元のプロバイダー一覧を確認してみます。
PS C:\> Get-PackageProvider Name Version DynamicOptions ---- ------- -------------- ChocolateyGet 1.0.0.1 AdditionalArguments msi 3.0.0.0 AdditionalArguments msu 3.0.0.0 NuGet 2.8.5.208 Destination, ExcludeVersion, Scope, SkipDependencies, Headers, FilterOnTag... PowerShellGet 1.0.0.1 PackageManagementProvider, Type, Scope, AllowClobber, SkipPublisherCheck, ... Programs 3.0.0.0 IncludeWindowsInstaller, IncludeSystemComponent PS C:\>
無事 ChocolateyGet と NuGet がインストールされました。
ちなみに、設定によってはインストール時にこんな表示が出ることもあります。
PS > Install-PackageProvider ChocolateyGet パッケージは、信頼済みとマークされていないパッケージ ソースから取得されています。 'PSGallery' からソフトウェアをアンインストールしますか? [Y] はい(Y) [A] すべて続行(A) [N] いいえ(N) [L] すべて無視(L) [S] 中断(S) [?] ヘルプ (既定値は "N"):
けっこうツッコミ所ありますが、気にせず続行。
ようやくNode.jsを入れる準備が整いました。
（インストーラーでやればよかったと思ったのは秘密）
Node.jsは Package として公開されているので、まずは存在を確認します。
Find-Package コマンドレットを使います。
余談ですがPowershellのVerb - Noun命名は判りやすいし探しやすくて好みです。
PS C:\> Find-Package -Name node* -Provider ChocolateyGet Choco.exe is required to continue ChocolateyGet is built on Choco.exe. Do you want ChocolateyGet to install Choco.exe from 'https://chocolatey.org/install.ps1' now? [Y] はい(Y) [N] いいえ(N) [S] 中断(S) [?] ヘルプ (既定値は "Y"): Y Name Version Source Summary ---- ------- ------ ------- nodejs.install 12.2.0 https://www.c... nodejs 12.2.0 https://www.c... nodejs-lts 10.15.3 https://www.c... nodejs.commandline 6.11.0 https://www.c... nodist 0.9.1 https://www.c... kubernetes-node 1.11.3 https://www.c... visualstudio2017-workload-node 1.2.2 https://www.c... SeleniumGridInABox.Node 1.9.1.6 https://www.c... ncrunch-gridnodeserver 3.27.3 https://www.c... powerdelivery3node 3.0.1 https://www.c... visualstudio2019-workload-node 1.0.0 https://www.c... visualstudio2017-workload-n... 1.0.1 https://www.c... visualstudio2019-workload-n... 1.0.0 https://www.c... PS C:\>
Choco.exe が必須などと言われましたが、後方互換の兼ね合いでしょうか。
さておき、二番目がお目当てのNode.jsなのでこれを入れましょう。 Install-Package コマンドレットですね。
PS > Install-Package -Name nodejs -Provider ChocolateyGet Are you sure you want to perform this action? Installing package 'nodejs'. By Installing you accept licenses for the package(s). The package possibly needs to run 'chocolateyInstall.ps1'. [Y] はい(Y) [N] いいえ(N) [S] 中断(S) [?] ヘルプ (既定値は "Y"): Y Name Version Source Summary ---- ------- ------ ------- nodejs v12.2.0 https://www.c... PS >
インストールの確認後、しばらく待っているとこのようになります。
（当たり前かもですがTranscript結果にプログレスは表示されないんですね）
さて、（パッケージの依存関係的に）実質インストーラーを叩いたのと同じ結果が得られるはずなので、環境変数も変更されているはずです。一旦ホストを閉じて再度管理者で起動しなおしてみます。
PS C:\> $env:Path -split ";" （中略） C:\Program Files\nodejs\ PS C:\>
いました。
PS C:\> node -v v12.2.0 PS C:\> npm -v 6.9.0 PS C:\>
出ました。
ようやく、Windows環境でNode.jsを扱う準備ができました。
……なんだか凄く時間掛かった気がするので、この先は別の機会にしましょうか。
あとがき
10年ぶりくらいに書くブログはいろいろ勝手が判らなくて大変。
