音楽サーバ"Mopidy"のフロントエンドを作る：小休止 - Visual Studioの環境づくり
"Mopidy"フロントエンド「Mopidy.Finder」が出来るまで、今回は小休止です。
近年のWeb系のみなさんには不評この上ないWindows+IDEですが、セットアップさえしてしまえば、強力な助っ人になってくれます。
WindowsでVisual Studioの開発環境を整えるまでの手順を、少しずつUIを追いながら、書き綴ってみたいと思ます。
Visual Studioのインストール
まずはVisual Studio。現行最新はVisual Studio 2019です。
特にCommunity Editionは、小規模事業者や学生さん向けに無償で配布されています。
無償とはいえ、機能はほぼProfessional Editionと変わりありません。
この「無償ダウンロード」リンクから、インストーラがダウンロードできます。
このインストーラを起動すると、Visual Studioの機能を選択する画面が出てきます。
私の場合は、過去案件の保守の関係もあり、下記の4つをいつも入れています。
- ASP.NETとWeb開発
- .NET デスクトップ開発
- .NETによるモバイル開発
- .NET Core クロスプラットフォームの開発
機能を選んで「インストール」ボタンを押すと、インストールが始まります。
インストールが終わると、Visual Studioが起動します。
あらかじめ作っておいた、Microsoftアカウントを使ってサインインします。
こちらが起動直後の、プレーンなVisual Studio 2019の画面です。
ためしに一度、ASP.Net Coreプロジェクトを作ってみます。
「新しいプロジェクトの作成」をクリックすると、プロジェクトテンプレートの一覧が出てきます。
ASP.Net Coreプロジェクトを選んで進めると、こんな画面。
「作成」ボタンを押すと、さらに詳細なテンプレート選択が出てきます。
おっと、ASP.Net Coreのバージョン 2.2が選べませんね。
これは後からインストールする必要があるようです。
一旦このまま、プロジェクトを作ってみます。
そして、作り立てのプロジェクトの最初の画面。
最初はファイル一覧などが右側に配置されてます。
私は左側に置いておきたいので、移動させます。
プロパティウインドウはデスクトップアプリしか使わないため、左帯に追いやりました。
Extensionのインストール
Visual Studioでは拡張機能が色々用意されています。
このままでも十分使い物になるのですが、そこはお好みで。
Extensionのインストールは、メニュー「拡張機能」からです。
「Manage Extensions」画面の左ペインで、オンラインを開きます。
まずは定番、Microsoftさん御謹製のProductivity Power Toolsです。
そして、改行コードを保存時に整形してくれる「Line Endings Unifier」
Markdownの編集機能も便利です。
ひととおり欲しいものを「Download」ボタンで追加しておき、画面を閉じます。
そして、Visual Studio自体も一回閉じてしまいます。
すると、Extensionのインストーラが走ります。
しばらく待つと、インストール対象の確認ダイアログが出ます。
そしてVisual Studioを起動すると、Extensionがインストールされた状態で開かれます。
いらないExtensionを無効化する場合は、同様にメニュー「拡張機能」から「拡張機能の管理」を開きます。
Productivity Power Toolsは沢山のExtensionのセットパッケージです。
私の場合は「Shrink Empty Lines」があまり好みではないため、無効化しています。
.Net Core SDKの追加インストール
前述でプロジェクトを作ったとき、ASP.Net Core 2.2が選択できませんでした。
これは、.Net Core SDK 2.2がまだ入ってないためです。
追加でインストールしましょう。
え...っと、どれだ？と迷いました。
Visual Studio用のインストールなので、左側三番目かなぁ？
選んでみると、注釈が出ていました。
ほうほう、2019で使うならそのリンクなんですね。ぽちっとな。
なんだか色々出てきました。
この辺がMSさんの洗練されてないところいや、素朴なところと言っておきます(?)
環境はWindows10-x64なので、SDK2.2.401のx64インストーラを選びます。
インストーラがダウンロードされました。
早速インストール。
インストール終了後、Visual Studioを起動。
また新しくASP.Net Coreプロジェクトを作ると、リストにASP.NET Core 2.2が出てくるようになりました。
node.jsのインストール
node.js開発機能は選択しませんでしたので、現状ではまだnode.jsがインストールされていません。
コマンドプロンプトをだして...
npmをお試し。
はい、無いですね。
公式配布ページから、node.jsをもらって来ます。
最新の12.7.0 Currentを選びました。
ダウンロードしたインストーラがこちら。
インストーラを起動し、デフォルト状態で次へ次へと進みます。
インストール後、コマンドプロンプトを起動して、お試し。
よしよし、入ってますね。
Visual Studioのプロジェクトを開いて、npmが使えるか試してみます。
どれどれ。
おー。npm init が通りました。
さてこの調子で、webpackやらmochaやらのインストールを進めていくと。
あら。ダメ出しされちゃいました。
メッセージを読むと、rejected by your operationg systemとな。
こりゃ権限エラーかな、ということで、WindowsのUACを無効化してみます。
コントロールパネルを出して...
ユーザーアカウントを開いていくと、ありますね。
ユーザーアカウント制御設定の変更です。
これを、最低設定にします。
UACは再起動しないと適用されませんので、再起動かけます。
さて、どうよ？
おー。無事にnpmパッケージがインストールされました。よしよし。
TSCの設定
さてここで、tsc(Typescriptコンパイラ)が走るかどうか、試してみます。
おっと、ダメですね。
tscの存在が分からないらしい。
tscはどこにあるか、というと。
Visual Studioでインストールした場合、ここに入ります。
C:\Program Files (x86)\Microsoft SDKs\TypeScript\[version]ですね。
ここにパスを通してみます。
一番最後に、TypeScriptのインストールパスを追記しました。
さて、どうよ？
ありゃ？
tscを、Windows Script Hostが実行しちゃってますね。
これをnode.jsが実行するように、変更します。
C:\Program Files (x86)\Microsoft SDKs\TypeScript\3.5\tsc.jsのプロパティから。
実行するプログラムを変更します。
最初はNode.js: Server-side Javascriptの選択肢がありません。
「このPCで別のアプリを探す」から、node.exeを探してセットします。
デフォルトインストールの場合、C:\Program Files\nodejs\node.exeとなるはずです。
実行プログラムをnodeに変更し、リトライです。
よしよし、ちゃんと動いてますね。
Chromeのセットアップ
Visual Studio 2017からは、標準でChromeデバッガへのアタッチが可能になりました。
これまではIEかEdgeでしか出来なかったJavascriptのステップデバッグが、Chromeで出来るようになったんですね。
これを使わない手はない！ということで、Chromeを入れます。
まずはWebから、インストーラを貰ってきてセットアップ。
インストール後に出来るChromeのショートカットに、デバッガポートの設定を追記します。
chrome.exe の後ろに、--remote-debugging-port=9222と追記します。
これを一回起動しておけば、あとはChromeが覚えていてくれるようです。
動作環境のテスト
さて、ひととおりセットアップが終わったはずです。
ここでMopidy.Finderの初期コミットを貰ってきて、デバッガの動作を試します。
１つめはフォルダ構造がよろしくないため、２つ目のコミットをダウンロードします。
zipを解凍してプロジェクトを開きます。
まずはnpmパッケージをインストール。
ん、なんか警告出てるけど。まあ一応通りました。
この警告は、lodashの脆弱性付きバージョンに対するものだったと思います。
テストは通るかな？
よしよし、通ってますね。
ビルドも、問題なく通ります。
Visual StudioでTypeScriptコードにブレイクポイントを置き、ブラウザをChromeに。
これを実行してみると。
Chromeが出てきて、「デバッガで止まってるよ」と表示が出ます。
Visual Studioに戻ってみます。
おーし！
ブレイクポイントで止まっています。
既に実行済みの、song1の生成後の値も確認できますね。
というわけで、今回は環境構築のおはなし、でした！
