その③：DjangoでHello Worldを表示するまで

このマガジンは期間限定で無料公開とします！！

ここまでで、Djangoの環境を行ってきました。仮想環境の構築ってどうやるの？何のためにやるの？って方はその②をご覧ください。

Djangoでサーバーを立ち上げる

いよいよUIの作成まで進めてきたいと思います。開発していきたい対象のフォルダは今以下のようになっているかと思いますので、ここに新しくサイトの元になるフォルダを作ります。

（フォルダ作成前）

（フォルダ作成後）

この状態にするには以下の実行を行えば実現可能となります。

(django) (base) C:\Users\(ユーザー名)\Desktop\django>django-admin startproject mysite

これによって出来上がったフォルダ内で今後の作業は実施してくので、このmysiteの中に入ると、もう一つmysiteというフォルダと、同じ階層にmanage.pyというものが出てきます(重要なものです)。まずはフォルダとファイルがあることを確認してください。

無事に確認できたら、次に以下を実行します。

(django) (base) C:\Users\(ユーザー名)\Desktop\django\mysite>python manage.py runserver

すると、以下のようなウェブサーバーがLocalで立ち上がったことを示す文字が表示されるかと思いますので、そこにあるhttp://127.0.0.1:8000/ (*) をChromeまたはお使いのブラウザの検索に入力してみます。
(*)人によってはhttp://127.0.0.0:8000/であったり、別の値の時もありますが、気にせずにこれをコピーしてChromeの検索に張り付けることをお勧めします。また、最初私がこれを見たときに訳が分からなかったので、もし初めてこれを見る方で混乱する場合にはいったん無視してもらって大丈夫です。

Watching for file changes with StatReloader
Performing system checks...

System check identified no issues (0 silenced).

You have 18 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.
Run 'python manage.py migrate' to apply them.
January 04, 2021 - 17:09:07
Django version 3.1.4, using settings 'mysite.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.
[04/Jan/2021 17:09:51] "GET / HTTP/1.1" 200 16351
[04/Jan/2021 17:09:51] "GET /static/admin/css/fonts.css HTTP/1.1" 200 423
[04/Jan/2021 17:09:51] "GET /static/admin/fonts/Roboto-Regular-webfont.woff HTTP/1.1" 200 85876
[04/Jan/2021 17:09:51] "GET /static/admin/fonts/Roboto-Bold-webfont.woff HTTP/1.1" 200 86184
[04/Jan/2021 17:09:51] "GET /static/admin/fonts/Roboto-Light-webfont.woff HTTP/1.1" 200 85692
[04/Jan/2021 17:11:33] "GET / HTTP/1.1" 200 16351

すると、ブラウザで以下が表示されていればDjangoの疎通ができたことになります。最初私もここまでできて、安心しました。ひとまずの目標はこれになるかと思いますので、できなかった方はどこでできなかったかコメントいただけると。

どういう仕組みでこれができているかというちょっとした解説ですが、これは立ち上げたときに、Djangoがデフォルト機能としてRootingをし、最初の画面で表示するURLを表示している画面です。

つまり、今後はここに自分の好きな画面をHTMLやCSSやJavaScriptで作っていく形になります。

Hello Worldを表示する

ではここで、再度、フォルダを見てみましょう。すると、最初に比べて新しくsqliteというファイルが出来上がっているかと思います。これはデータベース機能を要するもので、これを使った開発もできるのですが、今時点では無視しても大丈夫です。気になる方は"Django　SQLITE"といったキーワードで検索してみてください。

では、ここまでできたらこれらをベースに、Hello Worldを表示してみましょう。これを実施するには、mysite>mysiteに移動して、以下のコマンドを実行します。

(django) (base) C:\Users\(ユーザー名)\Desktop\django\mysite>dir
ドライブ C のボリューム ラベルは OSDisk です
ボリューム シリアル番号は B0E1-0179 です

C:\Users\(ユーザー名)\Desktop\django\mysite のディレクトリ

2021/01/04  17:09    <DIR>          .
2021/01/04  17:09    <DIR>          ..
2021/01/04  17:09                 0 db.sqlite3
2021/01/04  12:39               647 manage.py
2021/01/04  18:08    <DIR>          mysite
              2 個のファイル                 647 バイト
              3 個のディレクトリ  21,739,474,944 バイトの空き領域

(django) (base) C:\Users\(ユーザー名)\Desktop\django\mysite>python manage.py startapp crypto

上記のコマンドですが、最初のdirで今mysite>mysiteにあるフォルダを表示していますが、このフォルダがある階層で、python manage.py startapp cryptoを実行します。cryptoは今回のアプリケーション名ですので、何でも大丈夫です。

次に、mysiteのurlsを変更していきます。以下のコードを貼り付けてください。includeをdjango.urlsから追加で呼び出し、urlpatternsのpathにアプリケーションのurlsを追加します。

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

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

これによって、mysiteのurls.pyが以下のようになったら完成です。

大本のmysiteディレクトリにある各種ファイルをいじるのはもうちょっとで終わります。

最後にsettings.pyのINSTALLED_APPの行(33行目くらいからあります)に'crypto'と追加します。

これによって、本体のmysiteからアプリケーションとしてのcryptoへの連携が完了します。

以上でmysiteの設定は終了です。

ではここから、cryptoフォルダに移動します。まず、画面に表示するHTMLファイルを作っていきます。

templatesというフォルダを作り、home.htmlというファイルを作ります。作ったら、home.htmlに以下のようにHello Worldと入力します。以下となったらOKです。

ここから、ちょっと複雑なのですが、このcryptoディレクトリ配下にurls.pyを新規に作成し、以下を貼り付けてください。

from django.contrib import admin
from django.urls import path, include
from . import views #追加

urlpatterns = [
   path('', views.home, name="home"),#Rootingを実施するコードの追加
]

以下のように完成です。何をやっているかが気になる方への解説ですが、from . import viewsはこのディレクトリ下にあるviews.pyを呼び出すというものです。
urlpatternsのpathの1つ目の""(""の間には何も書かないのがいったん正解です)は、どんなURLでもviews.homeを返すというものでこれをRootingと言います。また、3つ目のnameは後程HTMLファイル内で検索結果を用いて別ページに移動させたり、HOMEに戻したりするように使います。このviews.homeを名前として名付けているものです。

では、最後にviews.pyを触っていきます。クリックしてもらうと、#Create your views hereと記載があるかと思うのですが、そこに以下を張ってください。

# Create your views here.
def home(request):
   return render(request, "home.html", {})

これは、URLをたたいた際に発生するrequest（これ自体はどんな変数名でも大丈夫ですが、requestとするのが一般的）をhome.htmlにrenderで渡すという意味です。最後の{}は今の所、無視してもらって大丈夫です。後程出てきます。

これでいったんHello Worldを画面に表示するまでの一連の作業は終了です。

いかがでしょうか？？うまくできましたでしょうか？一連の作業をしているとおそらくrunseverが止まった状況かと思います。そのため、再度以下を実行して、同様にブラウザに貼り付けてみてください。

(django) (base) C:\Users\(ユーザー名)\Desktop\django\mysite>python manage.py runserver

するとどうでしょうか？以下のような画面になりますでしょうか？

こうなれば成功です。