みっきー申す

ITに関する興味関心のまとめ、サイバーセキュリティニュースのまとめ、Twitterで配信中の情報まとめなどを公開します。

WindowsにVisual Studio CodeをインストールしてDjangoの開発環境を快適にしてみた

f:id:micro_keyword:20200902175302j:plain:w400

先日、やってみた系の記事として、Djangoで作ったアプリケーションをAWS Elastic Beanstalkへデプロイする方法をご紹介しました。

今回は、デプロイする前の開発段階で、ローカルのコーディングをより効率化する開発環境のご紹介です。

タイトルですでにお察しかとは思いますがVisual Studio Code、通称VSCodeです!

今回は、VSCodeの簡単なご紹介とDjangoの開発環境構築チュートリアルをご紹介します。

アプリケーション開発に限らず、HTMLやCSSMarkdownの編集やPythonRubyJavaScriptのコーディングにも使えてとても便利なので、ぜひ試してほしいという思いを込めて!


目次


Visual Studio Codeとは

まず、Visual Studio Codeとは何ぞや。という方のために、簡単な説明を。

  • VSCodeとは
    • エディタの一種
      • WindowsMacともにメモ帳が用意されていますが、それもエディタですね。
      • 学生や社会人なりたての頃は、サクラエディタを使っていました。
      • ちなみに、ブログの執筆は、HackMDを使っています。

VSCodeの強み

  • 開発者向けの機能
    • テキストのエディット機能だけでなく、プログラミングやシステム開発に関する機能が用意されています。
    • コードに色づけしてくれたり、コードの補完をしてくれたりします。
    • ターミナル機能も付いているので、コマンドプロンプトをわざわざ開く必要もありません。
  • オープンソース
    • めちゃくちゃ高機能にもかかわらず無料です。ありがたい。
  • 複数OSに対応

プログラミング技術に関するナレッジコミュニティStack Overflowの2019年の調査では、Visual Studio Codeが最も人気のある開発者環境ツールとして評価されており、回答者の過半数である50.7%(87,317人中)が使用していると回答しました。

f:id:micro_keyword:20200902173427p:plain

insights.stackoverflow.com

本調査の2020年版では、開発環境のランキングはありませんでしたが、その他の調査内容も非常に興味深いものばかりだったので、併せてご確認いただければと思います。

開発者の経歴や志向、給料など幅広く調査されているので、眺めているだけでも、自身がどういう位置づけなのかを知る参考になるかなと。

insights.stackoverflow.com


Django開発環境のセットアップ

それでは、簡単にDjango開発環境をセットアップするまでの流れをご紹介します。

Djangoアプリケーションは、以前紹介した以下の記事をもとに作成していただくと、そのままお使いいただけるかなと思います。

AWS Elastic Beanstalkを使ってDjangoアプリをデプロイしてみた(後編) - みっきー申す

ちなみに、筆者はWindows10で実行しています。


VSCodeのインストール

以下のサイトからDownload for Windowsをクリックして、インストーラVSCodeUserSetup-x64-x.xx.x.exeをダウンロードします。

code.visualstudio.com

f:id:micro_keyword:20200902173139p:plain

先ほどの、インストーラを実行して、案内通りに進めていけば、躓くことなくインストールができるかと思います。

まず、使用許諾書への同意です。 問題なければ、「同意する」を押して、「次へ」をクリックしてください。

f:id:micro_keyword:20200902173145p:plain:w400

続いて、インストール先の指定です。

こちらもこだわりがなければ、デフォルトの設定のまま、「次へ」をクリックしてください。

f:id:micro_keyword:20200902173149p:plain:w400

確認のポップアップが出ますが、こちらも「はい」をクリックしてください。

f:id:micro_keyword:20200902173154p:plain:w400

続いてスタートメニューフォルダの指定ですが、こちらもこだわりがなければ、デフォルトのまま「次へ」をクリックしてください。

f:id:micro_keyword:20200902173200p:plain:w400

追加タスクの選択では、デフォルトのままでもいいのですが、標準のエディタとしたい場合は、「エクスプローラーのファイルコンテキストメニューに[Codeで開く]アクションを追加する」にチェックを入れて、インストールするのもよいかもしれません。

確認次第、「次へ」をクリックしてください。

f:id:micro_keyword:20200902173204p:plain:w400

最後に確認画面が出るので、「インストール」をクリックしてください。

f:id:micro_keyword:20200902173209p:plain:w400

1分もたたないうちに完了すると思います。

f:id:micro_keyword:20200902173214p:plain:w400


開発環境の整備

それでは、VSCodeを使って、ローカル環境にセットアップしたDjangoを実行するまでをご説明します。

VSCode を起動し File から Open Folder... をクリック、プロジェクトのディレクトリ(前回のAWS EBで作成された環境をお使いの方ならばtrial_django)を開きます。

f:id:micro_keyword:20200902173108p:plain

次に、Python の Extension を install します。

下図の通り、左タブの上から5番目、「Extensions」をクリックし、検索タブでpythonと入力。

PythonのExtensionをクリックして、インストールしてください。

f:id:micro_keyword:20200902173114p:plain

次に、View の Command Palette... を選択。

f:id:micro_keyword:20200902173120p:plain

Python : select interpreter をクリック

f:id:micro_keyword:20200902173127p:plain

仮想環境(前回のAWS EBで作成された環境をお使いの方ならばeb-virt)のinterpreterを指定してください。

f:id:micro_keyword:20200902173133p:plain

もし、仮想環境の選択肢にeb-virtが出てこない場合は、仮想環境は上の階層にあるので、 「Enter interpreter path」でDjango_workspace\eb-virt\Scripts\python.exeを選択してください。

もちろん、Djangoプロジェクトのフォルダ(前回の記事でいうところのtrial_django)に仮想環境を作るのもありです。

そうした場合、プロジェクトごとに仮想環境が用意できますね。

そして最後に、左タブの上から5番目、虫のアイコンをクリック後、歯車アイコンをクリックします。

https://code.visualstudio.com/assets/docs/editor/debugging/launch-configuration.png

この時自動的に、Python:Djangoの環境が選択されるはずなのですが、うまくいかない場合は、手動でPythonおよびDjangoを選択してください。

https://code.visualstudio.com/assets/docs/editor/debugging/debug-environments.png

そして、緑の▶(再生ボタン)を押すと、Debug Console上でアプリケーションが起動します。

webブラウザ127.0.0.1:8000 へ飛ぶといつものロケット発射が確認できるかと思います。

f:id:micro_keyword:20200902174242p:plain:w400

以下、トラブルシュートの例として、2点ご紹介しておきます。

実行時にエラーメッセージが出てしまった場合

  • PowerShellでの実行制限がかかっている可能性があります。
  • デフォルトではPowerShellの実行が制限されています。

以下を実行してみてください。

PowerShell Set-ExecutionPolicy RemoteSigned

RemoteSignedというのは、ローカル上のスクリプトと非ローカル上の署名のあるスクリプトのみ実行可能な権限のことです。

詳しくは、以下の記事などが参考になります。

qiita.com

DisallowedHost at /~ と表示された場合

  • EBのハンズオンを実行していた人は、AllowedHostの設定があるかと思いますので、削除をお願いします。

まとめ

今回は、エディタの紹介という、ちょっと違った視点でのご紹介でした。

VSCode自体、2015年の11月にリリースされたもので、比較的新しいソフトウェアですが、使い勝手はとても良いように感じています。

無料でこの機能は文句なしですし、基本これひとつで、大抵のPC作業は済んでいます。

情報感度の高い方は、もうすでにお使いかとは思いますが、開発者の方に限らず、Webデザイナーやブロガーの方にも是非この便利さを味わってもらいたいなと思いました。