MacでFlask、Anaconda、VSCodeのインストールとFlaskを開発する環境の構築をする

4 VSCodeのアプリケーションをダウンロードして、flaskのサンプルアプリケーションを作成して実行する

Anacondaとは？
Anacondaのインストール
VSCodeのインストール
VSCodeの環境設定
Flaskのコードの記述とアプリケーションの立ち上げ

などFlaskのアプリケーション開発をこれから始めたい人向けに、AnacondaとVSCodeを用いた環境構築の方法を記載する。

[rtoc_mokuji title="" title_display="" heading="h3" list_h2_type="" list_h3_type="" display="" frame_design="" animation=""]

Anacondaとは？

Pythonの仮想環境を構築するためのツールで、データサイエンスなどの分野で特に用いられる。
以下の図のように、環境に応じてPythonの開発環境を構築したい場合に非常に便利。

公式サイト: https://www.anaconda.com/

Anacondaのインストール

Anacondaのインストーラのダウンロード

インストーラは以下のサイトからダウンロードできる。（2020/11現在）

https://www.anaconda.com/products/individual#macos

サイトの一番下にインストーラのダウンロードリンクがある。64-Bit Graphical Installerをクリックする。

Anacondaのインストール

1. インストーラのダウンロードが完了したら、インストーラを実行する。

2. はじめに、大切な情報、利用許諾で続けるを押し、使用許諾に同意する

3. インストールを押すと、インストールが開始される

Anacondaで仮想環境を作成する

Anacondaのコマンドを実行するには、ターミナルを立ち上げて実行する。

1．Anacondaでの仮想環境を作成する

conda create -n 環境名 python=〇.〇を実行すると、python開発用の仮想環境を構築することができる。

実行結果 (conda create -n flaskenv python=3.8)

2．Anacondaの仮想環境をアクティベート（有効化）する

conda activate 環境名を実行することで、アクティベート（有効化することができる）

実行結果 (conda activate flaskenv)

実行すると、ターミナルの左端が(flasknenv)になる。

また、仮想環境はディアクティベーション（無効化）するには、conda deactivateを実行する。

3. 仮想環境上にパッケージをインストールする

パッケージをインストールする場合、conda activateで仮想環境をアクティベートしてconda installを実行する。
今回は、Flaskのアプリケーション開発するための準備を行うので、flaskをインストールする。

conda install パッケージ名

実行結果 (conda install flask)

また、パッケージを削除するには、conda uninstall パッケージ名を実行する。

参考(Anacondaのコマンド一覧)

以下に、代表的なAnacondaのコマンド一覧を記載する。

コマンド	説明
conda create -n 環境名 python=〇.〇(python=3.8等)	指定した環境名のpythonの仮想環境を指定したバージョンで作成
conda activate 環境名	パッケージをアクティベートする
conda deactivate	パッケージをディアクティベートする
conda install パッケージ名	パッケージをインストールする
conda uninstall パッケージ名	パッケージをアンインストールする
conda env list	仮想環境一覧を表示する
conda list	アクティベートした環境でインストールされたパッケージ一覧を表示
conda remove -n 環境名 (--all)	仮想環境を削除する(--allを付けた場合、)

VSCodeのアプリケーションをダウンロードして、flaskのサンプルアプリケーションを作成して実行する

1. VSCodeのアプリケーションをダウンロードする

VSCodeは統合開発環境(IDE)の1つで、Pythonなどのプログラムの開発する際に、実行やデバッグなどがやりやすくなる。

1-1. VSCodeのアプリケーションは以下のリンク先からダウンロードする
https://code.visualstudio.com/

1-2. アプリケーションのダウンロードを完了したら、実行する

・実行画面

2. VSCodeの日本語化を行う

2-1. 日本語化をするには、View → Command Paletteを選択する（あるいは、ctrl+shift+p）

2-2. 検索窓が表示されるので、Configure Display Languageを検索して選択

2-3. install additional languageを選択して、日本語を選択してインストールする

3. VSCode画面左下の拡張機能を選択→pythonと検索して、pythonの拡張機能をインストールする

これがないとVSCodeがpythonのファイルを認識して実行できないため、拡張機能をインストールする。
以下の図の各リンクをクリックすると、pythnoの拡張機能をインストールされる。

4. VSCodeでのPythonのpathを指定する

4-1. フォルダーを開くをクリックして、flaskのアプリケーションを作成したいフォルダーを選択する

4-2. 表示→コマンドパレットから、検索窓でsettings.jsonと検索して検索し、基本設定を選択する
この際、以下の設定項目が複数表示されるが、それぞれ以下の意味を持っている。

設定項目	意味
基本設定: 設定（JSON)を開く	VSCode全体での設定を記述する
基本設定: ワークスペース設定（JSON)を開く	現在開いているプロジェクトに対しての設定を記述する

どちらを選択しても良いが、今後フォルダを変えても同じ設定が読み込まれるようにしたいのなら、基本設定: 設定（JSON)を開くを選択すればよい。

表示→コマンドパレットから、検索窓でsettings.jsonと検索して検索し、基本設定を選択した結果

4-3. 設定に以下の内容を記述する
これは、flaskのアプリケーションを実行する際のそのPythonのパスを指定している。
これには、Anacondaで作成した仮想環境のflaskの仮想環境のpythonのパスを指定すればよい。
仮想環境のPythonのパスを指定するには、conda env listをして、見つかったパスに/bin/pythonを付ければよい（下記参照）