django

Pycharm Professionalを使ってWebサイトを激速で作ってみた！

  /

本記事は、Djangoを使ってこれからWebサイトを構築してみようという人向けです。今回は統合開発環境Pycharm上でDjangoを設定したところ、大変簡単に始められましたのでその紹介をしていきたいと思います。

　Pychamのインストール

pycharmをお持ちでない方はまずはじめに、Pycharmをリンクのページからダウンロードしてください。ProfessionalとCommunity版がありますが、Djangoの設定が簡単にできるProfessional版を使っていきます。Djangoのメニューが備わっているため素早くかつ便利に開発が進められることと、リモート開発機能ではWebサーバーへのプログラム反映も効率的にできるようになるため断然Professional版をおすすめします。Professional版の利便性については後日別記事にて紹介していきたいと思います。

1か月間無料で利用できますので、もし継続利用される方は契約いただく必要がありますが、統合開発環境としてとても使いやすいので私は毎年契約を更新しながら使い続けています。

ダウンロードが完了しましたら、exeファイルをクリックしてインストールしてください。インストールオプションは特に選択せず「次へ」で進んでいきます。

インストール完了後は早速起動します

起動するとWelcome to Pycharm画面がでますので「Plugins」を選択し、Japanseと検索ボックスに入力すると、Japanse Language Packが表示されますので、Installしておくと、日本語化適応してくれます。Install完了後はRestartでPycharmを再起動する必要があります。

Pycharmのセットアップ～プロジェクト作成まで

早速、Django用のプロジェクトを作成していきたいと思います。新規プロジェクトを選択しDjangoを選択します。プロジェクト名（以下の図のdjangoProjet4部分）はお好みで変更してください。詳細設定のアプリケーション名にhogeと記入してください。こちらもお好みで構いませんが作成したサイトへアクセスする際に(****.com/hoge)でアクセスすることができるようになります。変更後は作成ボタンを押します。

作成が完了しましたら、さっそくプログラムを実行したいと思います。デバッグボタンを押下してください。

コンソール画面に http://127.0.0.1:8000/ が表示されますので、クリックしてください。ブラウザが開き、ロケットが飛んでいる画面が表示されると成功です。

ここまでで基本設定は完了となります、いかがでしょうか？めちゃくちゃ早く設定が終わりました。Pycharm最高

プロジェクトをカスタマイズ

ロケットが飛んだ後は、目的のサイトを作る設定を進めていきます。ここではhttp://127.0.0.1:8000/hogeを開くとhoge.htmlが表示されるまでの手順を説明していきたいと思います。

はじめに、urls.pyを編集していきます。

from django.contrib import admin
from django.urls import path, include # この行を追加

urlpatterns = [
    path('admin/', admin.site.urls),
    path('hoge/', include('hoge.urls'))  # この行を追加
]

上のように記載することで hogeディレクトリパスをdjangoへ認識してもらえるようになりました。

続いてhogeディレクトリは以下にurls.pyを作成します。hogeディレクトリで右クリックし、新規–>pythonファイルで作成できます

from django.urls import path
from . import views

urlpatterns = [
  path('', views.index, name='index')  # views.index 関数が呼ばれる
]

urls.pyに上のコードをコピー＆ペーストしてください。http://127.0.0.1:8000/hogeでviews.pyのindex関数が呼ばれるようになったので、次はview.pyにindex関数を作っていきます。views.pyファイルを開き、以下のコードをペーストしてください

from django.shortcuts import render


# Create your views here.

def index(request):
    return render(request, 'index.html')

これでhttp://127.0.0.1:8000/hogeでindex.htmlを開けるようになりますが、index.htmlが未作成のため、作成する必要があります。templatesディレクトリの下へindex.htmlファイルを作成してください。（中身は空っぽで大丈夫です）

<!DOCTYPE html>
<html lang="en">
<script type="text/javascript">
</script>
<head>
    <meta charset="UTF-8">
    {% load static %}
    <title>hoge</title>
</head>
<body>
hoge
</body>
</html>


参考までに上のコードを記載してみてください、最後にdjangoを起動してhttp://127.0.0.1:8000/hogeを開くと、以下の画面が表示されると成功となります

Django Pycharm
RELATED POST