【Python】0からWebアプリ！ハンズオン(0)～環境構築編～

# 概要
Pythonで0からWebアプリを作る機会があったので、そのまとめとして！
この記事では環境構築について書いています。

# こんな方に読んでほしい
* プログラミング未経験だけどアプリ作ってみたい方
* 新人Webプログラマの方
* 経験者だけどPythonでWebアプリ書いたことない方

# ゴール
HTML, CSS, JavaScript, Python, SQLを使ってCURD機能を持ったWebアプリを作成するのが目標です。

# 必要なもの
* PC（Windows OS）
* インターネット回線
* わくわくした気持ち

# 1. Pythonのインストール
公式サイトからダウンロードできます。
[Download Python | Python.org](https://www.python.org/downloads/)
<img width="957" alt="2020-07-31_10h28_38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147118/54c8e398-b48f-e25f-bc95-dec452a316cf.png">

インストーラを起動したら、「Add Python 3.8 to PATH」にチェックを付けて「Install Now」してください。
<img width="333" alt="2020-07-31_10h30_06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147118/cc9fbc46-7d22-0206-f124-db0e488a75a1.png">

コマンドプロンプトを起動し、`python`と入力して画像のようになったらインストール成功です。
<img width="734" alt="2020-07-31_10h56_47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147118/0f12c52b-cfbc-df61-1839-865749bc7634.png">

# 2. Visual Studio Codeのインストール
公式サイトからダウンロードできます。
[Visual Studio Code - Code Editing. Redefined](https://code.visualstudio.com/)
<img width="935" alt="2020-07-31_10h46_58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147118/5eede2f4-fe1f-f9a4-0934-0cfd6503acb3.png">

インストーラを起動し、基本的には次へ次へ進めてOKです。
「エクスプローラーのファイルコンテキストメニューに[Codeで開く]アクションを追加する」と「エクスプローラーのディレクトリコンテキストメニューに[Codeで開く]アクションを追加する」の2つにチェックを入れると、エクスプローラー上でフォルダ右クリックしてVSCodeで開けたりするので便利です。
<img width="257" alt="vscodeinstaller.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147118/929eb156-d023-cd81-a770-3229888be189.png">

# 3. Visual Studio Codeプラグインのインストール
VSCodeでは便利な拡張機能が多数配布されています。サイドバーから確認できます。
<img width="960" alt="2020-07-31_11h04_44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147118/61ef70a6-ecf4-9f0e-5bd2-068405f85fbe.png">
とりあえずぼくが入れている & 今回使いそうな最低限のものをご紹介します。

### Japanese Language Pack for Visual Studio Code
デフォルト英語のVSCodeを日本語化してくれます。
<img width="960" alt="2020-07-31_11h06_12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147118/3356ff92-b7e1-478a-235e-9579996d457a.png">

### Python
Pythonの実行をVSCode上でできます。
<img width="960" alt="2020-07-31_11h07_22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147118/c805fb7a-4822-60e2-d233-eac9fa7c99fc.png">

### Prettier - Code formatter
コードフォーマッターです。（コードのインデントやスペースを自動で整えてくれるやつ）
VSCode標準のフォーマッターもあるんですが、Prettierは幅広く、カスタマイズ容易なので使っています。
<img width="960" alt="2020-07-31_11h12_45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147118/a1906351-a8b8-1225-e296-15a3d36d5a1f.png">

# 4. PostgreSQLのインストール
EDBのサイトからダウンロードできます。
[Download PostgreSQL Database for Windows, Linux and MacOS & 32-bit or 64-bit Versions | EDB](https://www.enterprisedb.com/downloads/postgres-postgresql-downloads)
<img width="960" alt="2020-07-31_10h46_49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147118/5ce3d7e4-38f4-e199-a38c-03653ed9df41.png">

インストーラを起動し、基本的には次へ次へ進めてOKです。
<img width="414" alt="2020-07-31_10h49_02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147118/749da852-9038-9bfc-31e3-6bfcdc9cb96b.png">
pgAdmin4はPostgreSQLを簡単に扱うためのGUIツールです。これがないとCLIからの操作（コマンドライン）になるので、慣れていない方はpgAdmin4にチェックしたままインストールしてください。

# まとめ
今回はここまで！
サーバーサイド言語、データベース、コードエディターの環境を整備しました！

# 次回は･･･
アプリの設計、データベースの構築を行います！
[【Python】0からWebアプリ！ハンズオン(1)～設計、DB構築編～ - Qiita](https://qiita.com/tsumasakky/items/8993b6645f2d8bef43f2)