勉強会

準備

①npmの導入

brew update
brew install node
# 以下を確認
node -v                                                                                                                                  
v12.14.1
npm -v
6.14.8

②vscodeを使用する場合の設定

必要なプラグイン → Django/Django Template/Python/Pylance/Beautify/Vetur
インタープリタでPython3最新を選び、フォーマッタにblackを選択する。
settings.jsonに以下を加筆する。

{
  "python.formatting.provider": "black",
  "python.languageServer": "Pylance"
}

③PyCharmを使用する場合の設定

black(フォーマッター)の導入

pip install --user black
# 以下必須ではないが、blackのインストール先のパスは控えておく
which black
directory/to/python/version/bin/black
black # 起動確認
No Path provided. Nothing to do 😴

pip install中にWARNING: The scripts black, black-primer and blackd are installed in '/hoge/fuga/bin' which is not on PATH.のようなアラートが表示された場合
- /hoge/fuga/bin/blackを絶対パスとして控えておく。

下記画像を参考にpreferences -> tools -> file watcher -> +ボタンを押して追加。控えておいた絶対パスを赤字の箇所に入力する。

④プロジェクトフォルダ作成

適当な場所でmkdir project

step1: Djangoの環境構築

ゴール

docker composeでローカルサーバーの立ち上げ

Djangoのデフォルト画面の表示

手順

ディレクトリの作成

.
├── docker
│   ├── python
│   └── vue
├── docker-compose.yml
├── python
└── vue

Dockerの設定
- Dockerfile記述
- docker-compose.yml記述
Djangoプロジェクト作成

cd python
docker compose run django django-admin startproject app .

ブラウザ表示

docker compose up

localhost:8000

step2: Vuejsの環境構築

ゴール

docker composeでローカルサーバーの立ち上げ

Vueのデフォルト画面の表示

手順

Vuejsの導入

cd vue
npm install -D @vue/cli
npx @vue/cli create vue

Dockerの設定
- Dockerfile記述
- docker-compose.yml加筆

.
├── docker
│   ├── python
│   │   └── Dockerfile
│   └── vue
│       └── Dockerfile
├── docker-compose.yml
├── python
│   ├── app
│   │   ├── __init__.py
│   │   ├── asgi.py
│   │   ├── settings.py
│   │   ├── urls.py
│   │   └── wsgi.py
│   ├── db.sqlite3
│   └── manage.py
├── requirements.txt
└── vue
    ├── README.md
    ├── babel.config.js
    ├── node_modules
    ├── package.json
    ├── public
    │   ├── favicon.ico
    │   └── index.html
    ├── src
    │   ├── App.vue
    │   ├── assets
    │   │   └── logo.png
    │   ├── components
    │   │   └── HelloWorld.vue
    │   └── main.js
    └── yarn.lock

コンテナ立ち上げ

docker compose down
docker compose build
docker compose up

ブラウザ確認

localhost:8080

docker compose down

prettier(フォーマッター)の導入

npm i -D prettier

pluginからprettierを検索してインストールする
言語＆フレームワーク -> javascript -> prettierで以下のように設定する。

Step3： Djnago側にwebpack導入

ゴール

localhost:8000にアクセスした際にAre you sure webpack has generated the file and the path is correct?と表示されること

手順

Djangoで必要なライブラリを追加する→Vue側でwebpackの設定ファイルを作成する流れ

python/templates/index.htmlを作成する
settingsファイルでテンプレートディレクトリを定義する。
urls.pyで上記のテンプレートを指定する
django-webpack-loaderの導入
Are you sure webpack has generated the file and the path is correct?と表示されることを確認

*参考資料
https://githubja.com/owais/django-webpack-loader

Step4： Vue側にwebpack導入

ゴール

localhost:8000にアクセスした時にVueのデフォルトページが表示されること

手順

vue.config.jsを作成し編集する。

cd vue
npm i -D webpack-bundle-tracker
touch vue.config.js

*参考資料
https://cli.vuejs.org/config/
https://webpack.js.org/plugins/split-chunks-plugin/
https://webpack.js.org/configuration/resolve/#resolvealias
https://webpack.js.org/configuration/dev-server

mnbst/django-group-study

勉強会

準備