WindowsにVisual Studio CodeをインストールしてDjangoの開発環境を快適にしてみた
先日、やってみた系の記事として、Djangoで作ったアプリケーションをAWS Elastic Beanstalkへデプロイする方法をご紹介しました。
今回は、デプロイする前の開発段階で、ローカルのコーディングをより効率化する開発環境のご紹介です。
タイトルですでにお察しかとは思いますがVisual Studio Code、通称VSCodeです!
今回は、VSCodeの簡単なご紹介とDjangoの開発環境構築チュートリアルをご紹介します。
アプリケーション開発に限らず、HTMLやCSS、Markdownの編集やPythonやRuby、JavaScriptのコーディングにも使えてとても便利なので、ぜひ試してほしいという思いを込めて!
目次
Visual Studio Codeとは
まず、Visual Studio Codeとは何ぞや。という方のために、簡単な説明を。
- VSCodeとは
VSCodeの強み
- 開発者向けの機能
- オープンソース
- めちゃくちゃ高機能にもかかわらず無料です。ありがたい。
- 複数OSに対応
プログラミング技術に関するナレッジコミュニティStack Overflowの2019年の調査では、Visual Studio Codeが最も人気のある開発者環境ツールとして評価されており、回答者の過半数である50.7%(87,317人中)が使用していると回答しました。
本調査の2020年版では、開発環境のランキングはありませんでしたが、その他の調査内容も非常に興味深いものばかりだったので、併せてご確認いただければと思います。
開発者の経歴や志向、給料など幅広く調査されているので、眺めているだけでも、自身がどういう位置づけなのかを知る参考になるかなと。
Django開発環境のセットアップ
それでは、簡単にDjango開発環境をセットアップするまでの流れをご紹介します。
Djangoアプリケーションは、以前紹介した以下の記事をもとに作成していただくと、そのままお使いいただけるかなと思います。
AWS Elastic Beanstalkを使ってDjangoアプリをデプロイしてみた(後編) - みっきー申す
ちなみに、筆者はWindows10で実行しています。
VSCodeのインストール
以下のサイトからDownload for Windowsをクリックして、インストーラVSCodeUserSetup-x64-x.xx.x.exeをダウンロードします。
先ほどの、インストーラを実行して、案内通りに進めていけば、躓くことなくインストールができるかと思います。
まず、使用許諾書への同意です。 問題なければ、「同意する」を押して、「次へ」をクリックしてください。
続いて、インストール先の指定です。
こちらもこだわりがなければ、デフォルトの設定のまま、「次へ」をクリックしてください。
確認のポップアップが出ますが、こちらも「はい」をクリックしてください。
続いてスタートメニューフォルダの指定ですが、こちらもこだわりがなければ、デフォルトのまま「次へ」をクリックしてください。
追加タスクの選択では、デフォルトのままでもいいのですが、標準のエディタとしたい場合は、「エクスプローラーのファイルコンテキストメニューに[Codeで開く]アクションを追加する」にチェックを入れて、インストールするのもよいかもしれません。
確認次第、「次へ」をクリックしてください。
最後に確認画面が出るので、「インストール」をクリックしてください。
1分もたたないうちに完了すると思います。
開発環境の整備
それでは、VSCodeを使って、ローカル環境にセットアップしたDjangoを実行するまでをご説明します。
VSCode を起動し File から Open Folder... をクリック、プロジェクトのディレクトリ(前回のAWS EBで作成された環境をお使いの方ならばtrial_django)を開きます。
次に、Python の Extension を install します。
下図の通り、左タブの上から5番目、「Extensions」をクリックし、検索タブでpythonと入力。
PythonのExtensionをクリックして、インストールしてください。
次に、View の Command Palette... を選択。
Python : select interpreter をクリック
仮想環境(前回のAWS EBで作成された環境をお使いの方ならばeb-virt)のinterpreterを指定してください。
もし、仮想環境の選択肢にeb-virtが出てこない場合は、仮想環境は上の階層にあるので、 「Enter interpreter path」でDjango_workspace\eb-virt\Scripts\python.exeを選択してください。
もちろん、Djangoプロジェクトのフォルダ(前回の記事でいうところのtrial_django)に仮想環境を作るのもありです。
そうした場合、プロジェクトごとに仮想環境が用意できますね。
そして最後に、左タブの上から5番目、虫のアイコンをクリック後、歯車アイコンをクリックします。
この時自動的に、Python:Djangoの環境が選択されるはずなのですが、うまくいかない場合は、手動でPythonおよびDjangoを選択してください。
そして、緑の▶(再生ボタン)を押すと、Debug Console上でアプリケーションが起動します。
webブラウザで 127.0.0.1:8000 へ飛ぶといつものロケット発射が確認できるかと思います。
以下、トラブルシュートの例として、2点ご紹介しておきます。
実行時にエラーメッセージが出てしまった場合
- PowerShellでの実行制限がかかっている可能性があります。
- デフォルトではPowerShellの実行が制限されています。
以下を実行してみてください。
PowerShell Set-ExecutionPolicy RemoteSigned
RemoteSignedというのは、ローカル上のスクリプトと非ローカル上の署名のあるスクリプトのみ実行可能な権限のことです。
詳しくは、以下の記事などが参考になります。
DisallowedHost at /~ と表示された場合
- EBのハンズオンを実行していた人は、AllowedHostの設定があるかと思いますので、削除をお願いします。
まとめ
今回は、エディタの紹介という、ちょっと違った視点でのご紹介でした。
VSCode自体、2015年の11月にリリースされたもので、比較的新しいソフトウェアですが、使い勝手はとても良いように感じています。
無料でこの機能は文句なしですし、基本これひとつで、大抵のPC作業は済んでいます。
情報感度の高い方は、もうすでにお使いかとは思いますが、開発者の方に限らず、Webデザイナーやブロガーの方にも是非この便利さを味わってもらいたいなと思いました。