Django×PinaxでWebサービス入門③｜PyCharmをセットアップ

## この記事の内容

[前回](https://qiita.com/mtitg/items/91f4accad77d1888c883)はMacでローカル開発環境のセットアップとWebアプリケーションの構築を行いました。
VPSにデプロイしてインターネット公開する前に、MacにPyCharmというIDE（統合開発環境）をインストールして、今後の開発をスムーズに行えるようにします。

PyCharmはチェコのJetBrains社が作ったPython用の統合開発環境（IDE）です。

<details><summary>統合開発環境(IDE)とは</summary><div>
プログラミングは特定の構文に従って文字列を書いていきファイルを作り、複数のファイルを組み合わせることでアプリケーションとして動作するようになります。
基本的に文字を書いていくだけなので、極論テキストファイルを使ってファイルを編集していくだけでもプログラミングは可能です。しかしアプリケーションが大きくなればなるほど、作業効率が低下しやすく、しかし重要になってきます。
統合開発環境（IDE）はこのプログラミングの生産性を向上させるためのいろいろな機能が搭載されたツールです。
具体的には、

- コードの自動補完
- エラーチェック
- デバッグ
- ファイル・コードの検索

といったことができます。
</div></details>

今回の対象は、全体像で見てみるとこの緑色で囲った部分です。

![Overall Structure_02.png](https://qiita-image-store.s3.amazonaws.com/0/113133/b18f2b11-0cf1-7591-b1dd-e1091e052b4f.png)

## PyCharm Professional Editionのダウンロード

PyCharmには有料のProfessional Edition、無料のCommunity Editionがあります。
Professional EditionにはDjango、DB、SQLの対応などがされているため、今回はこのProfessional Editionを利用します。
料金は年間1万円弱ですが、最初の30日間はフリートライアル期間となっています。

[PyCharm: Python IDE for Professional Developers by JetBrains](https://www.jetbrains.com/pycharm/
)

JetBrains社のサイトからアプリケーションをダウンロードします。

最初にPyChamrを立ち上げるときはいくつか設定用のダイアログが出てきます。設定は後からでも行えるので、今回は一旦基本的にデフォルトの設定のまま進めます。

まず、PyCharmの設定をインポートするかと聞かれます。初めてPyCharmを利用する場合は関係無いので、`Do not import settings`を選択します。

![スクリーンショット 2018-06-05 8.35.24.png](https://qiita-image-store.s3.amazonaws.com/0/113133/a789182c-4edc-0725-b1af-d48b8f1915bd.png)

PyCharmを購入するか、30日間のフリートライアルを行うかの選択用のダイアログが出てくるので`Evaluate for free for 30 days`を、続いてライセンス規約への合意のためのダイアログが出てきます。

キーマップスキーマの選択用ダイアログが出てきます。ここも初めてPyCharmを使うので、`I've never used PyCharm` を選択。

<img width=70% src='https://qiita-image-store.s3.amazonaws.com/0/113133/f0e3fb37-6424-6e8a-0db2-e739178c95a4.png'>

UIテーマの選択用のダイアログです。個人的に背景が白いほうが好みなので、`Light`を選択しました。

<img width=70% src='https://qiita-image-store.s3.amazonaws.com/0/113133/239dd998-2a9f-d579-7696-2e6f830208ab.png'>

コマンドでファイルやプロジェクトを起動できるようにするためのスクリプトを作成できます。
ここも何もせずに次へ進みます。

<img width=70% src='https://qiita-image-store.s3.amazonaws.com/0/113133/8d121993-6494-6d06-cd7e-a30bb0452647.png'>

PyCharmのプラグインをダウンロードするか聞かれます。何もダウンロードせずに進みます。

<img width=70% src='https://qiita-image-store.s3.amazonaws.com/0/113133/5eab55da-1d87-7935-8c73-bf4b4067bb7c.png'>

これでPyCharmの設定は終了です。この次に前回の記事で作成したWebアプリケーション用のプロジェクトを作成し、PyCharmを実行できるようにしていきます。

## Webアプリケーションを読み込む

先程までの初期設定が終わると、下記のような画面が表示されます。ここで`Create New Project`を選択して、プロジェクトを作成します。

<img width=70% src='https://qiita-image-store.s3.amazonaws.com/0/113133/8455a806-02b0-e4a9-a75a-4ba77eaa99d1.png'>

続いて表示されるダイアログで、作成するプロジェクトの詳細を選択していきます。
まず、今回はDjangoでWebアプリケーションを作っているため、左側の一覧から`Django`を選択します。

<img width=70% src='https://qiita-image-store.s3.amazonaws.com/0/113133/e64d038e-49b1-3cb5-06ed-1df6d7ece714.png'>

Location: に前回の記事で作成したTODOアプリのディレクトリを指定します。

<img width=70% src='https://qiita-image-store.s3.amazonaws.com/0/113133/54a41550-4619-27dd-a376-5a1aea4ee4ed.png'>

Project Interpreter: に、同様に前回作成したVirtualenvのPython3を指定します。前回の記事で`source`コマンドでVirtualenvを起動し、その中でTODOアプリを実行しましたが、これと同じことがPyCharm経由でも行えるようにするためです。
Project Interpreterには`New environment`と`Existing interpreter`があります。今回は`todo_env`という仮想環境をすでに作成済みなので、それを呼び出します。`Existing interpreter`を選択するとInterpreterが選択できるようになります。`todo_env`はまだここに表示されないので、右側にある『...』と書かれたボタンから`todo_env`をInterpreterとして登録します。

ボタンを押すと、Add Python interpreterというダイアログが表示されます。ここでも右側に『...』と書かれたボタンを押します。
Macのディレクトリから前回作成した`todo_env`を探し、その中の`python`を選択します。場所は`PycharmProjects/todo/todo_env/bin/python`となっているはずです。

<img width=70% src='https://qiita-image-store.s3.amazonaws.com/0/113133/40ce9555-8383-5e04-a116-482e25ed67dc.png'>

『OK』をクリックするともとのダイアログに戻り、『Create』ボタンを押します。

<img width=70% src='https://qiita-image-store.s3.amazonaws.com/0/113133/a5fca571-01a3-7447-993d-526a235256eb.png'>

すると、選択されたディレクトリはすでに存在しています、プロジェクトをこの存在するソースをもとに作成しますか？と聞かれるので、『Yes』を選択して進みます。

<img width=70% src='https://qiita-image-store.s3.amazonaws.com/0/113133/b64d08d6-89c1-d308-727d-294ac18818cd.png'>

TODOアプリのプロジェクトが開きます。この状態でもPyCharm上でボタンひとつで`python manage.py runserver`コマンドを実行し、アプリケーションを起動することができます。しかしこれだとnpmを使って行っていたsassをcssにコンパイルするという部分にまだ対応できていないため、その設定をいれてあげます。

Run > Edit Configurations からアプリケーション実行用の設定ダイアログを開きます。

![スクリーンショット 2018-06-10 9.55.13.png](https://qiita-image-store.s3.amazonaws.com/0/113133/45867bd6-4ed6-b1f9-a39f-c8d03646d548.png)

ここで、TODOアプリが実行可能になっているのを確認してみましょう。左の一覧から Django server > todo　を選択すると、アプリケーション実行用の設定が入っていることがわかります。

<img width=70% src='https://qiita-image-store.s3.amazonaws.com/0/113133/72a925a3-0838-fcfe-7302-cba7e34969b9.png'>

それでは、npmの設定も行っていきます。左上の『＋』ボタンからnpmを選択します。

<img width=70% src='https://qiita-image-store.s3.amazonaws.com/0/113133/4d53b50b-a975-8e78-9012-1de057e9a631.png'>

するとnpm実行用の設定を作成することができます。ここでは

- Name: todo
- Scripts: watch

とします。`watch`というスクリプトは、scssファイルに変更があるとcssを自動でコンパイルするように見張っておく、というものです。これをつねに動かしておくことで、PyCharm上でのフロントの対応が楽になります。

最後に『OK』を押して設定を終了します。

<img width=70% src='https://qiita-image-store.s3.amazonaws.com/0/113133/cd93c100-636a-229d-55f5-81e23f9c14e6.png'>

## PyCharmからアプリケーションを実行する

最後に、PyCharmからアプリケーションを実行できるか試してみます。

そのためにアプリケーション側の設定を一部変更したいので、左側のプロジェクトのナビゲーションから`todo/todo/settings.py`というファイルを選択します。

![スクリーンショット 2018-06-10 10.33.48.png](https://qiita-image-store.s3.amazonaws.com/0/113133/dfccb3c3-5040-8a88-fbaa-766d5f0152b5.png)

このファイルはアプリケーションの設定を司るファイルで、

- データベースの接続設定
- 静的ファイルのパスの設定
- インストールしているアプリケーションの設定
- ログの設定

などなどがここで定義されます。

この中に、どのホストからの接続を許可するかを制御する`ALLOWED_HOSTS`という設定があります。
Pinaxは初期状態だと、`localhost`からの接続のみ許可するので、これを全てのホストからの接続を許可してあげます。

```py:todo/todo/settings.py
ALLOWED_HOSTS = [
    "*",
]
```

ついでにタイムゾーンと言語も変更しておきます。

```py:todo/todo/settings.py
TIME_ZONE = "Asia/Tokyo"

LANGUAGE_CODE = "ja"
```

それでは、PyCharmの右上にある緑色の三角ボタンを押してアプリケーションを実行します。
ボタンを押すと、PyCharmのコンソールに下記のように表示されます。

```terminal:Console
/Users/user/PycharmProjects/todo/todo_env/bin/python /Users/user/PycharmProjects/todo/todo/manage.py runserver 8000
Performing system checks...

System check identified no issues (0 silenced).
June 10, 2018 - 11:42:05
Django version 2.0.6, using settings 'todo.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.
```

`http://127.0.0.1:8000/`に接続すると、前回の記事同様Pinaxの初期状態の画面が表示されます。
これでPyCharmを使ってガリガリ開発していく準備が整いました。

## 次回

次回は前回作ったアプリケーションを外部のVPSサーバーにデプロイするところまで進めていきます。

[Django×PinaxでWebサービス入門④｜VPSサーバーにデプロイ](https://qiita.com/mtitg/items/08fdf6c7462bb1dae038)