[ホーム] >> [ 02 | Djangoのインストールとプロジェクトの作成]
DjangoはPythonで実装されたWebアプリケーションフレームワークです。
まずは開発のための環境を構築していきます。
Homebrewのインストール
Homebrewとは、Mac上でソフトウェアのインストールやアンインストールを管理してくれるシステムです。
インストールは以下の手順でお願いします。
mrradiology.hatenablog.jp
pyenvのインストール
pyenvはPythonのバージョンを管理してくれるツールです。
インストールは以下の手順でお願いします。
mrradiology.hatenablog.jp
Xcodeのインストール
Xcodeをアップルストアからインストールします。
https://apps.apple.com/jp/app/xcode/id497799835?ls=1&mt=12
![アップルストアからインストール](https://cdn-ak.f.st-hatena.com/images/fotolife/M/MrRadiology/20200807/20200807201707.png)
入手をクリックします。
![入手](https://cdn-ak.f.st-hatena.com/images/fotolife/M/MrRadiology/20200807/20200807201854.png)
約8GBあるので時間がかかります。
インストールが完了したら「開く」をクリックします。
![ダウンロード終了](https://cdn-ak.f.st-hatena.com/images/fotolife/M/MrRadiology/20200807/20200807205405.png)
以下の画面がでればインストールが完了です。
![インストール完了](https://cdn-ak.f.st-hatena.com/images/fotolife/M/MrRadiology/20200807/20200807210230.png)
Pythonのインストール
バージョン3.10.4をインストールします。
インストールはpyenvで行います。
pyenv install 3.10.4
![pyenv install 3.10.4](https://cdn-ak.f.st-hatena.com/images/fotolife/M/MrRadiology/20220509/20220509212532.png)
pyenv versions
でpyenvのバージョンを確認できます。
pyenv local 3.10.4
としてPythonのバージョンを指定します。
python --version
で使用しているPythonのバージョンを確認できます。
![Pythonバージョン確認](https://cdn-ak.f.st-hatena.com/images/fotolife/M/MrRadiology/20220509/20220509213554.png)
gitのインストール
下記のページからダウンロードし、インストールしてください。
git-scm.com
Visual Studio Codeのインストール
プログラムコードの編集、コマンド、Gitの管理は全てVisual Studio Codeで行います。
特にGitの管理はアプリケーションをデプロイする際に必須です。
code.visualstudio.com
ダウンロードされた「VSCode-darwin-stable.zip」ファイルを解凍し、解凍された「Visual Studio Code」ファイルがアプリケーション本体です。
![「Visual Studio Code」](https://cdn-ak.f.st-hatena.com/images/fotolife/M/MrRadiology/20200806/20200806205317.png)
「Visual Studio Code」ファイルを使用する場所に移動してダブルクリックします。
![起動](https://cdn-ak.f.st-hatena.com/images/fotolife/M/MrRadiology/20200806/20200806205926.png)
日本語化します。
メニューバーから「view」を選択し、「command palette」 を選択します。
![コマンドパレット](https://cdn-ak.f.st-hatena.com/images/fotolife/M/MrRadiology/20200806/20200806210249.png)
「configure display language」を選択します。
![「configure display language」](https://cdn-ak.f.st-hatena.com/images/fotolife/M/MrRadiology/20200806/20200806210511.png)
「install additional laugage」を選択します。
![「install additional laugage」](https://cdn-ak.f.st-hatena.com/images/fotolife/M/MrRadiology/20200806/20200806210728.png)
すると左に拡張言語パックが出てくるので「Japanese Language Pack for Visual Studio Code」を探してインストールします。
![インストール](https://cdn-ak.f.st-hatena.com/images/fotolife/M/MrRadiology/20200806/20200806211019.png)
すべてが終わったらVScodeを再起動します。
![再起動](https://cdn-ak.f.st-hatena.com/images/fotolife/M/MrRadiology/20200806/20200806211403.png)
私は背景色をAbyss(青)で設定しています。
左下の設定マークの配色テーマからできます。
![配色テーマ](https://cdn-ak.f.st-hatena.com/images/fotolife/M/MrRadiology/20200806/20200806211613.png)
コードの書式をフォーマットしてくれる便利な拡張機能をインストールします。
拡張機能の検索ボックスで「prettier」と入力し、一番上に表示される「Prettier - Code formatter」を選択します。
![Prettier - Code formatter](https://cdn-ak.f.st-hatena.com/images/fotolife/M/MrRadiology/20220623/20220623115301.png)
インストールボタンをクリックしてインストールしてください。
![Prettier - Code formatter インストール](https://cdn-ak.f.st-hatena.com/images/fotolife/M/MrRadiology/20220623/20220623115423.png)
左下歯車マークをクリックして設定を選択します。
![設定](https://cdn-ak.f.st-hatena.com/images/fotolife/M/MrRadiology/20220623/20220623120347.png)
検索ボックスに「format」と入力し、左側の「テキストエディター」を選択します。
Default Formatterの欄で「Prettier - Code formatter」を選択します。
![Default Formatter](https://cdn-ak.f.st-hatena.com/images/fotolife/M/MrRadiology/20220623/20220623121115.png)
検索ボックスに「save」と入力し、「Format on Save」の項目にチェックを入れます。
![Format on Save](https://cdn-ak.f.st-hatena.com/images/fotolife/M/MrRadiology/20220623/20220623121336.png)
↓↓クリックして頂けると励みになります。
[ホーム] >> [ 02 | Djangoのインストールとプロジェクトの作成]