見出し画像

Python×Django+RestFramework×ReactでWebアプリケーション➅ Djangoでお買い物アプリ（フロント+バックエンド）➊ 環境構築

ノンストップ飯田

今回から、まずはDjangoでフロントもバックエンドも含めて「お買い物リスト」アプリを作っていきたいと思います。

1．概要

まず、フロント部分については本マガジンの➂で作成した、HTML+CSS+JavaScriptのものを大部分流用できると思います。

DjangoのViewから渡されるDBから抽出した未購入一覧、購入一覧をHTML上表示しつつ、インプット欄からの入力や購入済・削除ボタンに、データベースの各TABLEの新規作成(Create)・削除(Delete）が行われるよう記載していくイメージでやってみます。

今回はまず、Djangoで開発を行える環境構築をしていきたいと思います。

2．Pythonの仮想環境を構築する

JavaScriptやReactはCode Sandboxで、自分のPCにインストール等せずにやってきました。

Djangoでアプリケーションを構築していくには、Pythonをインストールし、更にDjangoを別途インストールしたうえで、自分のPC上で開発用のフォルダを作成し、コードを書いていく必要があります。

こういったPythonの標準ライブラリにない、外部モジュールをインストールする場合には仮想環境というものを作成し、環境別に異なるバージョン等で対応できるようにします。
（例えば、Aというモジュールが対応しているPythonのバージョンが3.7じゃないと動かないので、この環境内ではPythonはバージョン3.7を利用したいんだ・・・等）

仮想環境を構築するにはいくつか方法がありますが、一番簡単なのはAnacondaとともにPythonをインストールする方法です。

(1) Anaconda

仮想環境の作成・管理等が簡単にできるのと、今回は利用しませんが機械学習・AIをやる際に使用する外部ライブラリである多重リストの処理等が得意なnumpyや機械学習モデル作成のためのscikit-learn、表計算をするpandasやグラフ化するmatplotlibなども同時にインストールされたりするのは便利かもしれません。

なお、僕も過去の記事でAnacondaをオススメしています。

デメリットもない訳ではなく、、、ありとあらゆるところにパスを通したりするので、いざアンインストールやインストールし直そうとした時に「あれ？？あれ？？」となる事象が起きたりするかもしれません。

僕は、Anaconda自体のバージョンアップをさぼっていて、いい加減やろうとした時にバージョンが離れすぎたせいか上手くできず。

アンインストールした後に、インストールしたらWindowsのコマンドプロンプトが一切開かなくなるという事象に見舞われました。

Djangoのデータベースのテーブル作成(models.py）や、サーバー起動などはコマンドプロンプトから実行するので、上記事象を解消するのに大変苦労しました。。。
(最終的にはPowerShellからコマンド1個入れるだけで解消したのですが・・・）

とりあえず、全然初心者なので簡単が一番！！というなら、変わらずオススメです。

(2) venv

Pythonの公式ドキュメントにも記載がありますが、venvというモジュールで仮想環境の作成・管理が可能です。

Python単体でインストールし、venvを使って仮想環境を構築し、そこに外部モジュールとしてDjangoをインストールする流れです。

ではまず、Pythonをインストールしてみましょう。

公式ページ(Welcome to Python.org)のDOWNLOADから、自分のOSにあうものを選んでインストールします。(一旦バージョンは何でもOKです）

(1) に掲載した過去記事や他にも沢山インストール方法の関する記事は、他の方が書いているのでそちらを参考にしてください。単体で運用する場合は、PATHを通しておくことを忘れないでください。（外部モジュールをインストールする際に必要です）

(3) 今回の環境構築方法

過去Djangoに関する別のマガジンでは、Anacondaで一通りやったので今回はvenvを使って仮想環境を構築して、そこにDjangoをインストールしたいと思います。

3．venvで仮想環境を作成する

(1) コマンドプロンプトの基本的な使い方

まずはコマンドプロンプトを起動します。
以下のように、Windowsメニューの横にある検索でcmdと検索しても出てきます。

次に仮想環境をおくディレクトリ(フォルダ)まで移動します。

僕は自分のユーザーフォルダ直下に「django_venv」というディレクトリを作成し、そこで仮想環境を作成したいと思います。

ディレクトリ作成等はエクスプローラーで行っても全然OKですが、コマンドプロンプトでもできます。

mkdirでディレクトリ作成、cdでディレクトリ移動

ちなみに、start フォルダパスでエクスプローラーを開くことができますので、覚えておいてください。

start フォルダパスを実行すると・・・

該当のディレクトリにいる状態でエクスプローラーが開きます。

中身はまだ空

他に良く使うコマンドとして、dirとlsがあります。

ディレクトリ内のファイルやフォルダを確認するコマンドです。
なお、touchでファイル作成が可能です。

ためしに今回のディレクトリに2個ファイルを作成してdirコマンドとlsコマンドをそれぞれ実行してみます。

2個ファイルが存在することが確認できます。

ちなみにdelコマンドで削除も可能です。

delコマンドでファイル削除

では仮想環境を構築していきましょう。

(2) 仮想環境を作成する

仮想環境をvenvで構築する際は、以下コマンドを入力するだけです。

python -m venv 仮想環境名

(3) 仮想環境を有効化する

作成した仮想環境は有効化しないと意味がありません。（仮想環境にあるモジュール等を使わない場合は、有効化しなくてもOK）

有効化する場合は、Windowsの場合は以下コマンドでOKです。

仮想環境名\Scripts\activate.bat

なお、画面表示が"¥"になっていると思いますが、入力はバックスラッシュ"\"です。仮想環境が有効になると、以下のように表示されます。

左側の括弧内に環境名が表示された状態となる

(4) 仮想環境を無効にする

無効にする際は、deactivateとコマンドを入力すれば仮想環境が無効となります。

4. Djangoのインストールをする

外部モジュールをインストールする際は、pip installで実行可能です。
仮想環境を有効にしたうえで、Djangoをインストールしてみましょう。
pip install django　と入力してみましょう。

djangoがインストールされる

ちなみに、下の方に出ている黄色いメッセージはあなたのpipはバージョンが古いよ、アップグレードできるよ？というメッセージなので一旦無視します。

5．まとめ

今回は、Djangoで開発を行うにあたり以下についてふれました。次回からいよいよ、Djangoでお買い物リストを作成していきたいと思います。

  1. pythonのインストール

  2. コマンドプロンプトの使い方

  3. 仮想環境の構築・有効化

  4. Djangoのインストール



この記事が気に入ったらサポートをしてみませんか？