学生向けプログラミング入門 | 無料

学生向けにプログラミングを無料で解説。Java、C++、Ruby、PHP、データベース、Ruby on Rails, Python, Django

Django3.2 | クラウドソーシングアプリの構築 | 01 | 開発環境を整える

ホーム】 >> 【02 | アプリケーション作成

まずは開発のための環境を構築していきます。

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

アップルストアからインストール
アップルストアからインストール



入手をクリックします。

入手
入手



約8GBあるので時間がかかります。
インストールが完了したら「開く」をクリックします。

ダウンロード終了
ダウンロード終了



以下の画面がでればインストールが完了です。

インストール完了
インストール完了


Pythonのインストール

バージョン3.10.4をインストールします。
インストールはpyenvで行います。
pyenv install 3.10.4

pyenv install 3.10.4
pyenv install 3.10.4



pyenv versionsでpyenvのバージョンを確認できます。
pyenv local 3.10.4としてPythonのバージョンを指定します。
python --versionで使用しているPythonのバージョンを確認できます。

Pythonバージョン確認
Pythonバージョン確認


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」
「Visual Studio Code」



「Visual Studio Code」ファイルを使用する場所に移動してダブルクリックします。

起動
起動



日本語化します。
メニューバーから「view」を選択し、「command palette」 を選択します。

コマンドパレット
コマンドパレット



「configure display language」を選択します。

「configure display language」
「configure display language」



「install additional laugage」を選択します。

「install additional laugage」
「install additional laugage」



すると左に拡張言語パックが出てくるので「Japanese Language Pack for Visual Studio Code」を探してインストールします。

インストール
インストール



すべてが終わったらVScodeを再起動します。

再起動
再起動



私は背景色をAbyss(青)で設定しています。
左下の設定マークの配色テーマからできます。

配色テーマ
配色テーマ



コードの書式をフォーマットしてくれる便利な拡張機能をインストールします。
拡張機能の検索ボックスで「prettier」と入力し、一番上に表示される「Prettier - Code formatter」を選択します。

Prettier - Code formatter
Prettier - Code formatter



インストールボタンをクリックしてインストールしてください。

Prettier - Code formatter インストール
Prettier - Code formatter インストール



左下歯車マークをクリックして設定を選択します。

設定
設定



検索ボックスに「format」と入力し、左側の「テキストエディター」を選択します。
Default Formatterの欄で「Prettier - Code formatter」を選択します。

Default Formatter
Default Formatter



検索ボックスに「save」と入力し、「Format on Save」の項目にチェックを入れます。

Format on Save
Format on Save


Chrome拡張機能「JsonView」の追加



chromeウェブストアで拡張機能「JsonView」をインストールしてください。
chrome.google.com

拡張機能「JSon View」
拡張機能「JSon View」


Nodeのインストール

バージョン14.17.0をインストールします。
Nodeのインストールは以下の手順でお願いします。
nodeのバージョン部分は14.17.0に置き換えてください。
mrradiology.hatenablog.jp

Yarnのインストール

Yarnのインストールは以下の手順でお願いします。
mrradiology.hatenablog.jp

↓↓クリックして頂けると励みになります。


ホーム】 >> 【02 | アプリケーション作成

YAE C5 CLINIC(札幌美容クリニック)

関連記事(外部サイト)