3
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

MacとVSCodeでDjangoアプリケーションの開発環境を構築する

Last updated at Posted at 2020-11-26

はじめに

Mac&VSCode環境化でDjangoを使用したWebアプリケーションを作成する機会があったので備忘をかねての投稿です。Pythonのインストールからプロジェクトの作成まで順を追って解説していきます。

Pythonのインストール

はじめてPythonで開発をするという方はこちらからはじめます。今回はHomebrewを使用してインストールをすすめていきます!

pyenvのインストール

Pythonをインストールする前に、複数のPythonのバージョンを管理するためのツール「pyenv」をインストールします。ターミナルを開き下記のコマンドを実行します。

brew install pyenv
pyenv -v #バージョンを表示して正常にインストールされているか確認する

正常にインストールが完了したらpyenvのパスを設定していきましょう。ターミナルでecho $SHELLを実行すると下記のどちらかが表示されると思います。

/bin/bash #パターン1
/bin/zsh #パターン2

パターン1:/bin/bashの場合 ※ひとつずつ入力しても何も起こりませんが設定はできてます

echo 'export PYENV_ROOT="$HOME/.pyenv"' >> ~/.bash_profile
echo 'export PYENV_ROOT="$HOME/.pyenv"' >> ~/.bash_profile
echo 'eval "$(pyenv init -)"' >> ~/.bash_profile
source ~/.bash_profile

パターン2:/bin/zshの場合

echo 'export PYENV_ROOT="$HOME/.pyenv"' >> ~/.zshrc
echo 'export PATH="$PYENV_ROOT/bin:$PATH"' >> ~/.zshrc
echo 'eval "$(pyenv init -)"' >> ~/.zshrc
source ~/.zshrc

以上で以上でpyenvのpathの設定は完了です。

Pythonのインストール

つづいてPythonをインストールしていきます。まずはpyenvのコマンドをつかってインストール可能なPythonのバージョンを確認します。

pyenv install --list 

使用可能なバージョンが多数表示されますが、今回は3.8.0をインストールします。

pyenv install 3.8.0 #インストールするバージョンに合わせる

下記のコマンドでpyenvがインストールしているPythonのバージョンを確認できます。

pyenv versions

最後にMacにデフォルトで入っているPython2が作動しないように下記の設定をして完了です。

pyenv global 3.8.0 #インストールしたバージョン
〜〜〜〜〜
python3 --version #使用するバージョンの確認

VSCodeの設定

今回はエディタとして Visual Studio Code(VSCode) を使用しますので、こちらでPythonの開発ができるよう最低限の設定をしていきます。

VSCodeのインストール

VSCodeのインストールが済んでいない場合はこちらでMac版をインストールします。
vsc_1_2.png
ダウンロードされた.zipファイルを展開するとVisual Studio Code.appが作成されます。これでインストールは完了です。

拡張機能の追加

VSCodeでPythonを使用するには拡張機能を追加する必要があります。VSCodeのウェルカムウィンドウで下記のアイコンをクリックします。vsc_2_1.png
検索窓に"python"と入力すると、関連する拡張機能がいくつかヒットします。下記のとおり選択してクリックしてください。vsc_2_2.png
画像ではすでにインストール済みのため表示が違いますが、未インストールの場合は緑枠部分にインストールボタンがあるのでクリックします。vsc_2_3.png
これでPythonコードを編集するための、最低限の準備が整いました。

仮想環境の作成とDjangoのインストール

仮想環境とは

自身のコンピュータのローカルで、バージョン(Django自体やライブラリ)の異なるDjangoアプリケーションを一括に管理しようとするとエラーが発生してしまいます。 そこでアプリケーションごとに、それぞれに適した環境を用意してあげる必要があります。これが仮想環境です。

仮想環境の作成

まずは今回のプロジェクトで使用するフォルダを作成します。フォルダ名はわかりやすいように「Django」にしました。env_1_1.png
続いてDjangoフォルダ内に仮想環境をつくります。
次のコマンドをターミナルで実行します。(python3 -m venv 仮想環境名

cd Django
python3 -m venv my-app

正しく実行されると、次の画像のようにDjangoフォルダ内に「my-app」という仮想環境が確認できます。env_1_3.png
作成された仮想環境を使用するには、ターミナルでアクティベートを実行する必要があります。
source 仮想環境名/bin/activate

 source my-app/bin/activate

アクティベートに成功すると、次の画像のように先頭に(my-app)と表示されるようになります。env_1_4.png
以上で仮想環境の作成は完了です。(ディアクティベートはターミナルdeactivateを入力実行)

Djangoのインストール

続いてDjangoのインストールをしていきます。Djangoのインストールにはpipコマンドを使用します。pipとはPythonのライブラリを管理するためのツールで、Pythonをインストールした時点で使用できます。
作業は簡単で、仮想環境をアクティベートした状態で次のコマンドを実行してください。

pip install Django

env_1_5.png
Successfully installed... と表示されたら仮想環境へのDjangoのインストールは完了です。

プロジェクトの作成

プロジェクトとは

Djangoにはプロジェクトとアプリと呼ばれる2つのディレクトリが存在します。 プロジェクトでは、主にアプリケーション全体に関連する設定等を行います

ex) 時間設定・言語設定・個々のアプリの登録・データベース etc..

プロジェクトの作成

ターミナルを開いて次のコマンドを実行するとプロジェクトが作成されます。今回はサンプルとして「簡易ツイッター」を作成する予定なので、プロジェクト名はsimple_twitterとしました。

django-admin startproject simple_twitter

Djangoフォルダを開くと新たにsimple_twitterプロジェクトが作成されているのが確認できます。pjc_1_2.png
次にプロジェクトの中身を見ていきます。manage.pysimple_twitterフォルダが確認できます。 manage.pyは今後サーバーを動かす際やDBの変更がある場合に使用しますので、その際に説明をします。 simple_twitterフォルダをクリックしてさらに中身を見ていきましょう。pjc_1_4.pngフォルダを開くと、5つのPythonファイルが確認できます。各ファイルの役割は下記のとおりです。

フォルダ名 概要
__init__.py このファイルを含むディレクトリをPythonにパッケージとして認識させる役割があります
asgi.py 非同期処理に対応したWebアプリケーションを動作させるための、Python製Webサーバーです
settings.py ファイル名のとおり様々な設定を書いていくファイルです
urls.py アプリケーションの軸となるURLを設定していくファイルです
wsgi.py 本番環境等にデプロイする際にサーバーの設定を行います

サーバーを立ち上げる

ターミナルを開き、cdコマンドでDesktop/Django/simple_twitterに移動します。そしてsimple_twitterフォルダ内にmanage.pyが存在することをlsコマンドで確認し、次のコマンドでサーバーを立ち上げます。

python manage.py runserver

srv_1_1.png
Starting development server at http://127.0.0.1:8080/Quit the server with CONTROL-C. の表示が確認できれば、サーバーの立ち上げは成功です。この状態でhttp://127.0.0.1:8080/にアクセスしてみます。
srv_1_2.png
上のようなページが表示されれば環境構築は完了です。あとは自身で作成したいアプリケーションの追加等をすれば開発をはじめることができます!

さいごに

長々と書きましたが、慣れている人からしたらほんの数分で終わる作業だと思います。この記事が初めてDjangoで開発を始める方の参考になれば幸いです。また、メインのアプリケーション作成についても、時間があれば記事にしてみたいと思います!

3
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?