こんにちは。リューさんです。この記事ではタイトルの通り、DockerでFlaskの開発環境を構築する手順を紹介していきます。Flaskの公式サイトはこちらです。

1. プロジェクトディレクトリを作成する

まず、PC上にプロジェクトディレクトリを作成します。mkdirコマンドを使うか、GUIで作成しても構いません。名前は適当で大丈夫です。今回はtestdirとでもしておきます。

次に、そのディレクトリ内にPythonファイルを作成し、以下のように記述します。この名前はapp.pyとしておきます。別の名前にしても大丈夫ですが、この後使用するので注意してください。

from flask import Flask

app = Flask(__name__)


@app.route('/')
def hello():
    return 'Hello, World!'


if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0', port=8000)

このファイルの詳細な説明はまた別の記事に書こうと思いますが、Dockerを利用して環境構築をする際にはファイル末尾の、”app.run(debug=True, host=’0.0.0.0′, port=8000)“という記述を忘れないようにしてください。portの部分は変えても大丈夫ですが、host=’0.0.0.0′が無いとアクセスすることができません。

ちなみに、Flaskのデフォルトポートは5000番らしいです。

2. requirements.txtを作成する

requirements.txtを1で作成したプロジェクトディレクトリ内に作成します。以下のように記述してください。

flask

このファイルでインストールするパッケージを管理します。

3. Dockerfileを作成する

2.と同様に、プロジェクトディレクトリにDockerfileという名称のファイルを作成します。Dockerfileには以下のように記述してください。

FROM python:3.9-alpine
ADD . /code
WORKDIR /code
RUN pip install --upgrade pip
RUN pip install -r requirements.txt
CMD ["python", "app.py"]

今回はpython3.9のイメージを使います。ファイル末尾のCMD [“python”, “app.py”]の”app.py”は1.で作成したpythonのファイル名に置き換えてください。

4. docker-compose.ymlを作成する

docker-compose.ymlというファイルをプロジェクトディレクトリ内に作成し、以下のように記述してください。

version: '3'
services:
  web:
    build: .
    ports:
      - "8000:8000"
    volumes:
      - .:/code

5. 実行する

プロジェクトディレクトリ上で以下のコマンドを実行してください。コンテナが作成されるはずです。

docker-compose up -d

もしこの時にエラーが出て、requirements.txtなどを修正した場合、上のコマンドを打ち直しても変更されません。そのような場合は、以下のようなコマンドを実行しましょう。

docker-compose build
docker-compose up -d

無事コンテナが作成されたら、docker-machine ip [マシン名]で仮想マシンのipアドレスを取得し、ブラウザ上で

“http://[取得したipアドレス]:8000”にアクセスしてください。マシン名は特に変更してない場合、defaultという名前になっているはずです。

アクセスできたら、app.pyで指定した通りhello world!が表示されていると思います。そうなれば成功です！

おわりに

この記事では、Dockerを利用してFlaskの環境構築を行う手順を紹介しました。使用したOSはWindows10ですが、マック等もそこまで変わらないはずです。

「動かない」「この部分は間違っている」等ご意見ありましたら、僕のTwitter(@Ryu_programs)までご連絡いただければ幸いです。

この記事ではDjangoについては詳細な説明をしていないので、Djangoの実装方法などについては以下の記事を読んでみてください。

Djangoで簡単な「文字カウントメモ」を作ってみる

この記事では、「Djangoを勉強したい！」「Pythonで何か作ってみたい」という人に向けて、Djangoを用いた簡単なWebアプリ作成の方法を実際に一緒に作りながら紹介していきます。プログラミング学習の助けになれば幸いです。

ryuusan.com

2020.05.16

はじめに – Ajaxとは？

Ajax(Asynchronous JavaScript and XML)は、それ自体が技術というわけではなく、一種のアプローチです。このAjaxを利用ことで、表示されているページをすべて更新することなく、一部のみを更新することができ、Webアプリケーションの高速化を行うことができます。

よくGoogle MapsがAjaxを利用している例として挙げられます。Google Mapsはドラッグに合わせて、ページをリロードすることなく表示される範囲が滑らかに移動しますが、それはAjaxを利用しているためです。

また、Asynchronous JavaScript and XMLにはXMLの文字が入っていますが、JSONの方が軽く、JavaScriptで扱いやすいなどの理由から最近はXMLよりもJavaScriptの方がよく使われているそうです。今回もJSONを使って実装していきたいと思います。

実装

テンプレートファイルは以下の通りです。今回はjQueryの$.ajaxメソッドを利用しているので、base.htmlでjQueryを読み込んでいます。

getCookieから$.ajaxSetupまでは、csrftokenをいい感じにするために記述しています。送信フォームを使う場合は{% csrf_token %}をつけておけばDjangoが良い感じにしてくれるのですが、ajaxでPOSTする場合はこのようにcookieから拾ってきたcsrftokenの内容をX-CSRFTokenという名前でヘッダに設定する必要があります。

{% extends 'article/base.html' %}

{% block title %}
    My test page
{% endblock %}

{% block content %}
    <ul>
        {% for article in article_list %}
            <li>
                {{ article.article_text }}
                <span class="add_good" id={{ article.id }}>&hearts;</span>
                <span id="good-count-{{article.id}}">{{ article.good_count }}</span>
            </li>
        {% endfor %}
    </ul>
    <button onclick="location.href='{% url 'article:article_create' %}'">
        追加
    </button>
{% endblock %}

{% block extrajs %}
    <script>
        function getCookie(name) {
            var cookieValue = null;
            if (document.cookie && document.cookie !== '') {
                var cookies = document.cookie.split(';');
                for (var i = 0; i < cookies.length; i++) {
                    var cookie = jQuery.trim(cookies[i]);
                    // Does this cookie string begin with the name we want?
                    if (cookie.substring(0, name.length + 1) === (name + '=')) {
                        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                        break;
                    }
                }
            }
            return cookieValue;
        }

        var csrftoken = getCookie('csrftoken');

        function csrfSafeMethod(method) {
            // these HTTP methods do not require CSRF protection
            return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
        }

        $.ajaxSetup({
            beforeSend: function (xhr, settings) {
                if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                    xhr.setRequestHeader("X-CSRFToken", csrftoken);
                }
            }
        });

        $('.add_good').on('click', function(e) {
            article_id = $(this).attr("id");
            $.ajax({
                'url': '{% url "article:change_count" %}',
                'type': 'POST',
                'data': {
                    'id': article_id,
                },
                'dataType': 'json'
            }).done( response => {
                const response_id = response.id;
                const good_count = response.good_count;
                const element = '#good-count-' + response_id;
                $(element).text(good_count);
            });

        });
    </script>
{% endblock %}

モデルはこんな感じです。good_countがいいねの数に対応しています。ajaxでArticleのidをもらい、viewで対応するArticleのgood_countを増やしてからjsonで追加後のいいね数を返しています。

from django.db import models

# Create your models here.
class Article(models.Model):
    article_text = models.CharField(max_length=100)
    good_count = models.IntegerField(default=0)
    
    def __str__(self):
        return self.article_text

viewは以下の通りです。add_good_count_for_articleが主にajaxの処理を行う関数です。return JsonResponseでJsonを返却しています。

from django.shortcuts import render
from .models import Article
from django.views.generic import ListView
from django.views.generic.edit import CreateView
from django.urls import reverse
from django.http import JsonResponse

# Create your views here.
class ArticleListView(ListView):
    template_name = 'article_list.html'
    model = Article
    

class ArticleCreateView(CreateView):
    model = Article
    fields = ('article_text', )
    
    def get_success_url(self):
        return reverse('article:article_list')
        

def add_good_count_for_article(request):
    article_id = request.POST.get('id')
    article = Article.objects.get(id=article_id)
    article.good_count += 1
    article.save()
    data = {
        'id': article_id,
        'good_count': article.good_count,
    }
    return JsonResponse(data)

urlは以下のように設定しています。

from django.urls import path
from . import views

app_name = 'article'
urlpatterns = [
    path('', views.ArticleListView.as_view(), name='article_list'),
    path('create/', views.ArticleCreateView.as_view(), name='article_create'),
    path('change/', views.add_good_count_for_article, name='change_count')
]

トリミングと拡大をしているのでだいぶ荒いですが、このようにいいねを押すとリロードを挟まずにいいね数が増えていきます。変更はデータベースにも反映されているので、リロードを行ってもいいね数は変更された値のままです。(ListViewを使っているので、順序は変わるかもしれませんが)

おわりに

今回はDjangoとajaxを利用していいね!を行うことができる簡単なWebアプリを実装しました。このアプリではいいねを何度も押すことができましたが、ユーザやIPアドレスなどで判別して一度しか押せないようにしたり、いいね！したらcssなどで色を変えたりすればより実用的になると思います。

今までDjangoアプリを開発するときは基本的に生のjavascriptかjQueryを使っていたのですが、どうやら少し前から脱jQueryが叫ばれているようですし、実現したい機能を実装する際に便利そうだったのでReactを学習することにしました。

間違っていたら教えてください。(小声)

Reactについて

Reactの特徴

Reactはユーザインタフェースを構築するためのJavaScriptライブラリです。Reactの特徴は以下の3点です。

Reactはデータの変更を検知し、関連するコンポーネントだけ効率的に更新・描画を行います。

Reactは自分自身の状態を管理するカプセル化されたコンポーネントを作成します。コンポーネントはJavaScriptで書くことができるので、DOMに状態を持たせることなく様々なデータを扱うことができるようになります。

Reactを使って新たな機能を実装する際に、既存のソースコードを書き換える必要はありません。また、Nodeを使ったサーバー上やモバイルアプリケーションの中でも動きます。

React要素とは？

React要素とは、下で説明しているJSXなどで構成されるJavaScriptのオブジェクトです。ブラウザのDOM要素とは異なり、低コストで生成することができます。React DOMがReact要素に合致するようにDOM要素を更新します。

例えば、HTMLファイルに以下のように記述するとします。

<div id="root"></div>

次にReactで以下のように記述していきます。この時HTMLファイルの中に記述したdivの中はReact DOMで管理されています。このdivのことをルートDOMノードと呼びます。このルートDOMノードの数に制限はありませんが、Reactだけでアプリケーションを構成している場合は通常ひとつだけ持たせるようにします。

const element = <h1>Hello World!</h1>
ReactDOM.render(element, document.getElementById('root'));

このコードはページにHello World!と見出しで表示します。

React要素はイミュータブルでなければなりません。一度要素を作成すると子要素や属性を変更することは出来ません。そこで、Reactを使ってUIを更新するためには新しい要素を作成してReact DOMに渡す必要があります。ただ、その方法は少し不便であるため、Reactには以下で紹介するステート付きコンポーネントがあり、より簡単にUIを更新することができます。

コンポーネントとは？

以下は簡単なコンポーネントです。”test”という文字を受け取り、描写しています。

returnの内部を見てください。HTMLのように書いていますが、これはJSXと呼ばれる構文です。このように、{ }で囲った部分にJavaScriptの式を入れることができます。(JSXの中ではfor文やif文などは使えません)

See the Pen KKMPpab by Ryuji Okura (@ryuji-commit) on CodePen.

このコードではExampleコンポーネントがデータを受け取り、描画しているだけですが、以下のようにコンポーネント内部で状態(state)を保持することも出来ます。その状態が変化するとrender()が再実行され、必要な箇所のみ再描画されます。

右側の入力欄に適当な文字を入力して、エンターやボタンで送信してみてください。入力した値が表示されるはずです。このコードでは、handleSubmit関数で送信された値をstateにセットしています。そうすることで状態が変化し、render()が再実行されて入力値が表示されているのです。

See the Pen React Example(State) by Ryuji Okura (@ryuji-commit) on CodePen.

handleChange関数を見てください。

this.setState({
  text: e.target.value,
})

このように入力された値をstateのtextにセットし、そのtextをinputのvalueにすることで入力を反映させています。この関数が無ければ入力ができません。JSXの中でinputタグを使うときには注意してください。

次にhandleSubmit関数について説明します。この関数は入力値が送信された際に動作し、setStateを行う関数ですが、最初にe.preventDefault();と記述されています。

入力値はReactで制御しているためサーバに送信する必要はないのですが、ReactではJavaScriptとは違い、falseを返してもイベントを止めることができません。そこでpreventDefaultを呼び出し、submitイベントを止めています。

また、これらの関数をconstructor内で以下のようにbindしていますが、JavaScriptの仕様上メソッドの末尾に()をつけずに参照するために必要なことです。

this.handleSubmit = this.handleSubmit.bind(this);
this.handleChange = this.handleChange.bind(this);

この方法の他にクラスフィールド構文やアロー関数を使用する方法もありますが、個人的にはbindする方が好きです。(個人の感想です)

コンポーネントの中にはSidebarやDialogのように事前に子要素を知らないものもあります。このようなコンポーネントでは以下のようにchildrenという特別なpropsを使い、子要素を受け取って出力することができます。

See the Pen WNxNYGP by Ryuji Okura (@ryuji-commit) on CodePen.

Reactは上のExampleやMyNameなどの状態(state)を持つクラスコンポーネントや、状態(state)を持たず、propsを受け取って描画するだけの関数コンポーネントを組み合わせることによってUIを構築します。

仮想DOMについて

仮想DOMとは、今までブラウザが持っていたDOMツリーをJavaScriptのオブジェクトとして仮想的に表現し、差分だけリアルDOMに反映させることでレンダリングコストを下げるという技術です。

ReactではReact DOMと呼ばれるライブラリを用いて実装されています。そのため、Reactは必要な箇所のみリアルDOMの更新を行う事ができます。

JSXについて

JSXとは

Exampleクラスコンポーネントのコードを見てください。コードの下の方に以下のように書いていると思います。

const text = "Hello World";
const element = <h1>{text}</h1>

ReactDOM.render(
  element,
  document.getElementById('example2')
);

この<h1>{text}</h1>がJSXと呼ばれる構文です。上でも軽く触れましたが、{}の中にはあらゆるJavaScriptの式を使用することができます。例えば、関数はもちろんJSXの外でfor文やif文を使って配列を作って、その配列を呼び出したり、計算したり、stateやpropsを参照したりと様々な用途があります。ただし、JSXの中でfor文やif文を使う場合はひと工夫必要です。

JSXの中でループや条件分岐を行う方法

See the Pen VwjZrMd by Ryuji Okura (@ryuji-commit) on CodePen.

JSXでfor文やif文を使う方法の１つとして、上のように即時関数を使う方法が挙げられます。JSXの内部で即時関数を作り、その中でforを回したり、if文で分岐させたりして結果をreturnで返却させます。

また、ループさせたい場合は即時関数を作る以外にmapを使う方法もあります。例えば配列を既に持っていて、その中の値を順番に表示させたいときなどはmapを使うと便利です。

条件分岐させたい場合は、論理演算子を使う方法や三項演算子を使う方法もあります。

keyについて

このようにループなどでリストをレンダリングするときは、keyを設定することが推奨されています。例えば、上のコードでは<li key={i}>{i}</li>のように指定しています。keyにはその配列の中でユニークな値をセットする必要があります。今回の場合は添字ですね。keyを利用することで、Reactはどの要素が変更されたのかを識別できるようになります。

keyは兄弟要素の中で一意であればよく、全体の中でユニークである必要はありません。そのため、今回の例は2つともkeyに同じ値を指定しています。

JSXのその他の役割

JSXはそれ自体もJavaScriptの式のため、if文やfor文の中で使ったり、変数に代入したり、関数から返したりすることができます。さらに、JSXにはインジェクション攻撃を防ぐという役割もあります。

JSXを使う際の注意点

最後にJSXを使うときの注意点です。JSXはHTMLにとても似ていますが、実際はJavaScriptに近い構文です。そのため、React DOMはHTMLの属性(例えば”class”など)ではなく、キャメルケースの命名規則(例えば”className”など)を使用しています。

ついつい<div class=”hogehoge”>と書いてしまうので、気をつけてください。

おわりに

まだ学習している最中なので、新たなことを学び次第追記していきます。もし間違えている個所や改善点などありましたら、@Ryu_programsまで連絡いただければ幸いです。

設定コンテキストについて

Nginxの設定ファイルは、以下のようにいくつかのコンテキスト(要素)によって構成されます。

このように、それぞれのコンテキストを正しく設定することでNginxが思い通りの処理をしてくれるようになります。

リバースプロキシ

リバースプロキシサーバは、Webサーバと利用者の間に置かれ、それぞれの通信を中継するために使われます。今回の僕の目的は、このリバースプロキシサーバを用いてプライベートサーバ上のDockerで動いているアプリケーションを公開することです。

また、リバースプロキシを使うことでセキュリティ向上や負荷分散などが可能になり、メリットもとても大きいです。以下はリバースプロキシを使用するための設定ファイルです。 /etc/nginx/conf.dに以下のような設定ファイルを置きます。

server {
    listen 80;
    server_name "サーバ名";
    proxy_set_header Host $http_host;
    location /{
        proxy_pass "中継したいURL"
    }
}

ちなみに、中継したいURLの最後にスラッシュをつけるかどうかで動作が変わってくるので注意してください。その後、Nginxを再起動させて変更した設定ファイルを読み込ませます。

systemctl restart nginx

最低限の設定ファイルはこのようになります。さらに、ここからSSL設定等を追記していきます。

リバースプロキシを行う場合、Webサーバ側にはユーザからのアクセスが全てリバースプロキシからのアクセスとなってしまい、ユーザのIPアドレスなどを確認することができなくなってしまいます。そこで、以下のような設定を行うことでユーザの痕跡を残すことができるようにします。

server {
    listen 80 default_server;
    server_name "サーバ名";
    
    proxy_redirect   off;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;

    location / {
        proxy_pass "中継したいURL";
    }
}

以下のように設定したファイルをconf.dディレクトリ下に新しく置きます。

server {
    listen 443 ssl http2 default_server;
    server_name "サーバ名";

    ssl_certificate "/etc/letsencrypt/live/"Domain"/fullchain.pem";
    ssl_certificate_key "/etc/letsencrypt/live/"Domain"/privkey.pem";
    ssl_session_cache shared:SSL:1m;
    ssl_session_timeout  10m;
    ssl_ciphers PROFILE=SYSTEM;
    ssl_prefer_server_ciphers on;
    
    proxy_redirect   off;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;

    location / {
        proxy_pass "中継したいURL";
    }
}

これでHTTPSにも対応ができました。

websocketをリバースプロキシする際はlocationにwsを設定し、その中に以下のように記述しましょう。

location /ws/ {
	proxy_http_version 1.1; #デフォルトはHTTP 1.0
	proxy_set_header Upgrade $http_upgrade;
	proxy_set_header Connection "upgrade";
	proxy_pass "中継したいURL"
}

例えば、https://aaa.comにアクセスされた場合はhttp://bbb.comに、https://aaa.com/hello/worldにアクセスされた場合はhttp://ccc.com/hello/worldに振り分けたい場合もあるかもしれません。そんな時は以下のように設定しましょう。

location / {
    proxy_pass http://bbb.com/;
}

location /hello/ {
    proxy_pass http://ccc.com;
} 

リバースプロキシの際、パスが通らなくなる問題

例えば、http://hogehoge.com/subdirというURLにアクセスすることで、プライベートサーバーで稼働しているDjangoアプリ(http://123.45.678.90:9000)にリバースプロキシするように設定したとします。

この設定の場合、例えばhttp://hogehoge.com/subdir/toppageにアクセスした場合、Djangoアプリのトップページ(http://123.45.678.90:9000/toppage)にアクセスすることができます。

Djangoアプリの方ではトップページからhttp://123.45.678.90:9000/aaaにリンクを張っているのですが、リバースプロキシを行っているので、そのリンクが期待されるURLであるhttp://hogehoge.com/subdir/aaaではなく、http://hogehoge.com/aaaのようになってしまいます。これでは404エラーを吐いてしまい、正しいリンク先にアクセスできません。

そこで僕が行ったのは、Djangoアプリ側の設定を変更して以下のように常にsubdir/を挿入するようにしたことでした。

urlpatterns = [
    path('subdir/admin/', admin.site.urls),
    path('subdir/', include('hoge.urls')),
]

DjangoのURL設定は階層構造のようになっているのでこのような手が取れましたが、本来であればWebサーバー等で解決すべき問題なのかもしれません。ちなみに、railsの場合はサブディレクトリにデプロイする用の設定ができるらしく、Djangoにも同様の設定がないか探しましたが見つけられませんでした。

Webアプリではなくホームページなど静的ファイルの場合は相対パスで行けると思います。

もしより良い方法を知っている方がいらっしゃいましたらtwitter(@Ryu_programs)で教えてくださると助かります。

Webサーバって？

Webサーバとは、Webシステム上で利用者(クライアント)から要求されたHTMLファイルや画像ファイルなどのデータを、ネットワークを通じて送信するコンピュータやソフトウェアのことです。ちなみに、このやり取りの際に用いられる通信規約がHTTPやHTTPSであり、そのデータが格納されている場所の指定に用いられるのがURLやURLです。

そんなWebサーバとして有名なものが以下に紹介するNginxやApatcheです。

Nginxとは

Nginxは先ほども紹介した通り、有名なWebサーバのうちの1つです。Nginxの強みとして、以下のような点が挙げられます。

まず、1つ目の特徴は2つ目や３つ目とも関係するので、飛ばして2つ目の特徴から見ていきましょう。

そもそも、Nginxは1プロセスだけで複数のリクエストが処理できる(シングルスレッド)ように設計されていますが、Apacheは1プロセスにつき1つのリクエストしか処理できません(マルチプロセス)。従って、同時アクセスが多くなってもプロセスが立ち上がる数を抑えることができ、メモリ使用量などを抑えることができるのです。

この特徴は特に、利用した分だけ課金されるクラウドなどを利用している際に強みが発揮されます。Apacheよりもコストを大幅に少なくできるのではないでしょうか。

次に3つ目の特徴を見ていきましょう。

こちらはそのままですね。Nginxには不特定多数のクライアントのアクセスに備えて設置される、特定のサーバへのリクエストが必ず通過するように設置されたプロキシサーバであるリバースプロキシや、負荷分散装置であるロードバランサなどの機能が備わっているため、負荷に非常に強くなります。

上記のような特徴もあり、Nginxは基本的にApacheよりも処理が早く、同時アクセスなどの負荷にも強いWebサーバとなっているのです。

Apacheの強み

逆に、Apacheの強みはどのようなところなのでしょうか。以下にまとめました。

マルチプロセスの場合、動画データの処理やデータベースの処理など、重い処理を行う場合であっても他のプロセスに影響を与えないため、重い処理を行う場合はシングルスレッドであるNginxよりもApacheの方が適しています。

Apacheは、必要な機能だけを持つWebサーバを利用できるように、機能がモジュール化されています。必要な機能があればそのモジュールをインポートすることで使うことができ、一方で不必要な機能を排除することで、使用するリソースを削減することができます。

ApacheはNginxよりも前に登場し、今でも使われ続けられているので、信頼性や安全性が高いと言えます。もちろん、Nginxも何年も使われ、シェアも伸び続けているので、信頼性の面からは同じくらい高いと言えるかもしれません。

おわりに

ApacheもNginxもどちらも優れたWebサーバであり、どちらにも得意な場面と苦手な場面があります。場面に合わせて使い分けてください。

ViewsのTips

formが一つの場合、元居たページにリダイレクトさせることは簡単です。しかし、複数ページで同じviewを使う場合、元居たページにリダイレクトさせるためには少し工夫が必要になります。

まず、templateに以下のように記述します。以下の例では、inputのvalueにURLを指定しています。

<form action="{% url 'foo:bar' %}" method="post">
    {% csrf_token %}
    <input type="hidden" name="next" value="{{ request.path }}"/>
    <!--　適当なフォーム -->
    <button class="btn btn-outline-primary" type="submit">send</button>
</form>

次に、viewでその値を受け取り、受け取ったURLにリダイレクトするようにします。views.pyに以下のように記述します。

from django.http import HttpResponseRedirect
from django.shortcuts import redirect

def foo(request, foo_id):
    # 何らかの処理
    if request.method == "POST":
        next_url = request.POST.get('next', None)
        # 何らかの処理

    if next_url:
        return HttpResponseRedirect(next_url)
    else:
        return redirect('hoge:huga')   #値がうまく取れなかったときの処理

これで上手くいくはずです。試してみてください。

掲示板アプリなど、Post後に同じページに戻るようなページをDjangoで作っているとき、Postした入力値がformに残っているときがありませんか？また、Post後にF5やリロードすると、再び入力値が入っているなんてことはありませんか？

そんな時は、以下のようにviewでformをsave後にHttpResponseRedirectで同じページにリダイレクトするようにしましょう。また、このようにする場合はformが正常に処理できているか、などもユーザに通知すると良いかもしれません。

if request.method == "POST":
    form = forms.TestForm(request.POST)
        if form.is_valid():
            test = form.save(commit=False)
            test.user = request.user
            test.save()
            return HttpResponseRedirect(request.path)

FormのTips

こちらは既に素晴らしい記事が多くあるのですが、自分用に書きます。

まず、今回は0,1…のような数字でvalueを管理したいと思っているので、models.pyに以下のように記述します。

from django.db import models

class Hoge(models.Model):     
     hoge = models.IntegerField(default=0)

次に、forms.pyに以下のように記述します。

from . import models
from django import forms

hoge_choice = [
    (0, 'hello'),
    (1, 'world'),
    (2, '!!!!!'),
]

class HogeForm(forms.ModelForm):
    hoge = forms.ChoiceField(
        widget=forms.RadioSelect,
        label='hoge',
        choices=hoge_choice,
    )

    class Meta:
        model = models.Hoge
        fields = ('hoge',)
        label = {
            'hoge': 'ほげ',
        }

あとはviews.pyにこのHogeFormを渡して、以下のようにtemplateに記述すればラジオボタンが実装できるはずです。以下の例はbootstrap4を用いた例ですので、適宜修正してください。

{{ form.hoge.label_tag }}
<div class="border-top border-bottom">
{% for radio in form.hoge %}
    <div class="custom-control custom-radio pt-1 pb-1">
        {{ radio.tag }}
        <label class="custom-control-label" for="{{ radio.id_for_label }}">
            {{ radio.choice_label }}
        </label>
    </div>
{% endfor %}
</div>

templateファイルに以下のようにif文で分岐させるように記述することで実現できます。

{% for field in form %}
    {% if field.field.widget.input_type == "checkbox" %}
    	<div class="form-check">
    	    {{ field.label_tag }}
            {{ field }}
            {{ field.errors }}
        </div>  
    {% else %}
    	<div class="form-group">
    	    {{ field.label_tag }}
            {{ field }}
            {{ field.errors }}
        </div>
    {% endif %}
{% endfor %}

ただ、Bootstrapを使う場合、Djangoはulタグで囲まれたformを返してくるのでいい感じにすることができません。そのような場合はカスタムウイジェットを作ることで対応できます。

forms.py に以下のように記述します。以下の例は__init__で変更していますが、Metaやviewで変更する方法もあります。

class Meta:
    model = models.Hoge
    fields = ('hoge', 'huga')

def __init__(self, *args, **kwargs):
    super().__init__(*args, **kwargs)
    self.fields['hoge'].widget = forms.CheckboxSelectMultiple()
    self.fields['hoge'].queryset = self.fields['hoge'].queryset.filter(hoge__gte=2)

ModelのTips

Djangoの場合ベースのユーザモデルのままだと、開発している途中で「ユーザモデルに年齢や役職を持たせたい！」と思っても、データベースを初期化したり、マイグレーションをごにょごにょしたりしなければ変更できなかったりします。

そこで、カスタムユーザモデルの出番です。今回はより簡単なAbstractUserを継承して作成しましょう。models.pyに以下のように記述します。

class CustomUser(AbstractUser):
    UserAuth = [
        (0, 'student'),
        (1, 'TA'),
        (2, 'teacher'),
    ]
    user_auth = models.IntegerField(verbose_name='権限', default=0, choices=UserAuth)

今回は上のようにカスタムユーザモデルに権限のフィールドを追加しました。このように一度カスタムユーザモデルを追加しておけば、以降はそのモデルに追記していけばいいので、必ず作成しておきましょう。

また、追記していくタイプのAbstractUserだけではなく、最初から設定されている属性の削除や変更等も行うことができるAbstractBaseUserを継承してカスタムユーザモデルを作成することも出来ます。ご自身が作成したいアプリに合わせて利用しましょう。

TemplateのTips

ブラウザで検証してみましょう。

An invalid form control with name=’hoge’ is not focusable.

というエラーが出ていませんか？この場合、おそらくformの部品に　display:none;　というcssが指定されていると思います。display:none;の代わりに、以下のコードを追加しましょう。

var icon_css = {
            visibility:'hidden',
            width:'0',
            height:'0',
        }
$('div.form-group input[name="hoge"]').css(icon_css);

この場合は、jqueryを用いてcssを追加していますが、方法は何でも良いです。

おわりに

この記事は公開した後もTipsを学び次第更新していきます。もし、間違えている箇所等ありましたらTwitter(@Ryu_programs)までお願いします。

また、この記事は以前の記事の続きです。まだ読んでいない場合は、是非読んでみてください。

Django学習 ~Django紹介編~

この記事では、DjangoやWebフレームワークについて分かりやすく紹介しています。DjangoとはPythonのWebフレームワークで、利用することで簡単にWebアプリを作成できます。また、この記事の後に環境構築編や開発編などが続きます。

ryuusan.com

2020.04.06

Dockerを用いて環境構築する場合はこの記事がお勧めです。

Django学習　～環境構築編～

この記事は紹介編の続きの記事であり、DockerでPythonのWebフレームワークであるDjangoの開発環境構築を分かりやすく説明しています。Djangoを学んでみたい方、Pythonで何か作ってみたいと思っている方は読んでみてください。

ryuusan.com

2020.04.07

アプリケーションを作成する

まず、manage.pyと同じディレクトリ上で以下のコマンドを実行し、countmemoアプリケーションを作成しましょう。

$ python3 manage.py startapp countmemo

このコードはDockerを利用している場合、以下のようなコードになります。

$ docker-compose run web ./manage.py startapp countmemo

上のコードを実行すると、countmemoディレクトリが作成され、その中にmodels.pyやviews.pyが入っているはずです。以下はPaizaCloudのスクリーンショットなので、表示形式は少し違うかもしれませんが、このようなファイル構成になっていれば問題ありません。exampleはプロジェクト名です。

settings.pyを変更する

その後、settings.pyに新しいアプリを作成したことを教えてあげましょう。settings.py内のINSTALLED_APPSに以下のように’countmemo.apps.CountmemoConfig’を記述します。

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'countmemo.apps.CountmemoConfig',
]

モデルを変更する

次に、countmemoフォルダ内のmodels.pyを書き換えていきます。このmodels.pyを元にDjangoがデータベースを操作してくれるので、非常に大事なファイルです。今回は以下のように記述していきます。

from django.db import models
from django.utils import timezone

# Create your models here.
class MemoModel(models.Model):
    memo_text = models.CharField(max_length=200)
    up_date = models.DateTimeField(default=timezone.now)
    length = models.IntegerField(default=0)

    def __str__(self):
        return self.memo_text

models.pyに追記したらマイグレーションを実行しましょう。こうすることでDBに変更を加えます。models.pyを変更した場合は必ず行っておけば間違いありません。

manage.pyと同階層で以下のコマンドを実行します。

$ python3 manage.py make migrations
$ python3 manage.py migrate

Dockerの場合は、以下のようなコマンドになります。

$ docker-compose run web ./manage.py make migrations
$ docker-compose run web ./manage.py migrate

views.pyを確認用に変更する

countmemoフォルダ内のviews.pyを以下のように変更しましょう。

from django.shortcuts import render
from django.http import HttpResponse


def index(request):
    return HttpResponse("Hello, world!!!!!")

views.pyは簡単に言えばアプリの処理に関する役割を担います。今回は確認のために、Hello, world!!!!!と表示するように記述しています。

URL関連の設定を行う

views.pyを変更したら、次はurls.pyを変更してアクセスできるようにしましょう。まず、countmemoフォルダ内にurls.pyというファイルを作成し、以下のように記述します。

また、app_nameを記述することで、アプリが大量になったときにviews.pyやテンプレートファイルからアクセスしやすくなります。記述しておきましょう。

from django.urls import path

from . import views

app_name = 'countmemo'
urlpatterns = [
    path('', views.index, name='index'),
]

僕の場合は、exampleというプロジェクト名なので、exampleフォルダの中のurls.pyを変更していきます。こうすることで、countmemoアプリ内のurls.pyを読み込むようになります。

from django.contrib import admin
from django.urls import path,include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('countmemo.urls')),
]

アプリにアクセスする

runserverコマンドを実行しましょう。

Dockerの場合は以下の、以前の記事で説明したURLに、それ以外の環境を使っている場合は環境構築時にDjangoのロケットが表示されていたURLにアクセスしてみてください。

Django学習　～環境構築編～

この記事は紹介編の続きの記事であり、DockerでPythonのWebフレームワークであるDjangoの開発環境構築を分かりやすく説明しています。Djangoを学んでみたい方、Pythonで何か作ってみたいと思っている方は読んでみてください。

ryuusan.com

2020.04.07

トリミングしているため分かりづらいですが、上記のようにHello, world!!!!!と表示されていれば成功です。次のステップへと進みましょう。

base.htmlを作成する

次に、base.htmlを作成します。まず、countmemoフォルダの中にtemplatesフォルダを作成し、さらにそのtemplatesフォルダの中にcountmemoフォルダを作成しましょう。

そして、countmemoフォルダの中にbase.htmlを作成します。

現在、countmemo > templates > countmemo > base.htmlのようになっているはずです。そうであればbase.htmlに以下のように追記していきます。今回はbootstrap4を使うので、そちらもbase.htmlで読み込んでいきます。

<!doctype html>
<html lang="ja">
    <head>
        <title>{% block title %}{% endblock %}</title>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
    </head>
    <body>
        {% block content %}
        {% endblock %}

        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
        {% block extrajs %}
        {% endblock %}
    </body>
</html>

base.htmlは他のhtmlファイルのひな型のようなものです。用いることで大幅にコードを減らすことができます。

一覧表示テンプレートを作成する

countmemoフォルダ内のviews.pyを以下のように変更します。generic.ListViewはデータ一覧を表示したい時に使うと便利です。テンプレートファイルには、object_listという名前でデータが渡されます。

from django.shortcuts import render
from django.views import generic

from .models import MemoModel

class MemoListView(generic.ListView):
    model = MemoModel
　　template_name = 'countmemo/memolist.html'

views.pyを変更したので、同じくcountmemoフォルダ内のurls.pyを以下のように変更します。classベースのviewを使った場合は、以下のようにas_view()をつけるようにしましょう。

from django.urls import path

from . import views

app_name = 'countmemo'
urlpatterns = [
    path('', views.MemoListView.as_view(), name='index'),
]

MemoListViewのためのmemolist.htmlを、templateフォルダ内のcountmemoフォルダ内に作成します。object_listで渡されたデータをfor文を用いて順に取り出し、テーブルの形にまとめています。

{% extends 'countmemo/base.html' %}

{% block title %} memolist {% endblock %}

{% block content %}
    <table class="table">
        <thead>
            <tr>
                <th>#</th>
                <th>テキスト</th>
                <th>文字長</th>
                <th>作成日</th>
            </tr>    
        </thead>
        <tbody>
            {% for data in object_list %}
                <tr>
                    <th>{{ data.id }}</th>
                    <th>{{ data.memo_text }}</th>
                    <th>{{ data.length }}</th>
                    <th>{{ data.up_date }}</th>
                </tr>
            {% endfor %}
        </tbody>
    </table>
{% endblock %}

ここまで完了したら、以下のコマンドでサーバーを動かしましょう。

$ python3 manage.py runserver

Dockerの場合は次のようなコマンドになります。ただ、Dockerの場合はdocker-compose up -dで既にrunserverを実行していると思うので、必要ないかもしれません。

$ docker-compose run web ./manage.py runserver

先ほどのURLにアクセスし、以下のようになっていれば成功です。

データを追加できるようにする

まず、views.pyに次のように記述します。

from django.shortcuts import render, redirect
from django.views import generic

from .models import MemoModel

class MemoListView(generic.ListView):
    model = MemoModel
    template_name = 'countmemo/memolist.html'
    

class CreateMemo(generic.CreateView):
    model = MemoModel
    fields = ['memo_text',]
    template_name = 'countmemo/memoadd.html'
    
    def form_valid(self, form):
        memo = form.save(commit=False)
        memo.length = len(memo.memo_text)
        memo.save()
        return redirect('countmemo:index')

変更点はCreateMemo以下です。この場合、models.pyで指定したmemo_textのみを入力し、lengthに入力された値の文字列長を格納するようにしています。

form_validは入力された文字列が要件を満たすときに呼び出されます。

次に、アプリの方のurls.pyを以下のように変更します。

from django.urls import path

from . import views

app_name = 'countmemo'
urlpatterns = [
    path('', views.MemoListView.as_view(), name='index'),
    path('add/', views.CreateMemo.as_view(), name='add'),
]

こちらも、変更点はview.CreateMemo.as_view()の部分だけです。

以前作成したmemolist.htmlにデータ追加ページに遷移するためのボタンを設置します。追記する場所はどこでもいいです。僕はテーブルの下のところに設置しました。

<a class="btn btn-primary d-block d-md-inline-block mb-2 mb-md-0" 
href="{% url 'countmemo:add' %}" role="button">追加</a>

その後、memoadd.htmlをmemolist.htmlやbase.htmlと同じフォルダに作成し、以下のように記述します。

{% extends 'countmemo/base.html' %}

{% block title %} memoadd {% endblock %}

{% block content %}
    <form method="post">
    {% csrf_token %}

    {{ form }}
    <button class="btn btn-primary" type="submit">save</button>
    </form>
{% endblock %}

bootstrapを適用させるにはformの内容をひとつづつ記述し、classを追加するか、javascriptやforms.py等で自動的に追加するかなどの作業が必要なのですが、今回は省きます。また、それらの記事も書くかもしれません。

ここまで終わったら、runserverコマンドを実行してWebアプリを動かしてみましょう。先ほどの画面に追加ボタンが現れているはずです。そのボタンをクリックしてください。以下の写真のようになっていれば成功です。

上手く動いていたら適当に入力してみてください。

このように、うまくカウントできていれば成功です。

まとめ

どうでしたか？Djangoを使えば、慣れてしまえば簡単なアプリをこのように30分程度で作れてしまいます。もちろん、今回のアプリはデザインも機能も優れているとは言い難いですが、Djangoのすごさを少しでも分かってもらえたのではないでしょうか。

もし、「ここが分からない」「分かりづらい」などありましたら、Twitter(@Ryu_programs)までよろしくお願いします。

また、今回利用したPythonの学習方法などもブログに書いています。よろしければ読んでみてください。

Pythonの勉強方法

最近人気沸騰中のプログラミング言語、Pythonの紹介から、Pythonの勉強方法まで詳細に説明していきます。初学者向けの記事ですが、初学者はもちろん、プログラミング経験者でPythonをまだ勉強していない方に対してもおすすめできる内容です。

ryuusan.com

2020.03.10

また、Djangoの紹介記事やPythonの勉強方法も書いています。もしまだ読んでいない方がいれば、読んでみてください。

Django学習 ~Django紹介編~

この記事では、DjangoやWebフレームワークについて分かりやすく紹介しています。DjangoとはPythonのWebフレームワークで、利用することで簡単にWebアプリを作成できます。また、この記事の後に環境構築編や開発編などが続きます。

ryuusan.com

2020.04.06

Pythonの勉強方法

最近人気沸騰中のプログラミング言語、Pythonの紹介から、Pythonの勉強方法まで詳細に説明していきます。初学者向けの記事ですが、初学者はもちろん、プログラミング経験者でPythonをまだ勉強していない方に対してもおすすめできる内容です。

ryuusan.com

2020.03.10

また、続編であるWebアプリ作成編も公開しました。良ければ読んでみてください。リンクは最後の方にも載せておきます。

Djangoで簡単な「文字カウントメモ」を作ってみる

この記事では、「Djangoを勉強したい！」「Pythonで何か作ってみたい」という人に向けて、Djangoを用いた簡単なWebアプリ作成の方法を実際に一緒に作りながら紹介していきます。プログラミング学習の助けになれば幸いです。

ryuusan.com

2020.05.16

なぜDockerを選んだか

まず、Pythonという言語はモジュールをimportすることによって、機械学習やWebクローリング、Django開発など様々なことを行うことができます。また、所謂本家PythonであるPython3だけではなく、科学計算に強いAnacondaや、もしかするとやむにやまれぬ事情があってPython2をいまだに使われている人もいるかもしれません。

こう聞くとPythonを使ってそのまま開発していたら、ライブラリの数や環境がめちゃくちゃなことになると思いませんか？そこで登場するのが仮想マシンやDockerです。仮想マシンとDockerも仕組みが違うのですが、今回は単に僕の好きなツールであり、軽量かつ高速であるDockerを採用しました。

最初にすべきこと

まず、こちらの公式ドキュメント(https://docs.docker.com/toolbox/toolbox_install_windows/)を参考にしながら、Docker Toolboxをインストールしましょう。ちなみに、僕はWindows10 homeだったのでDocker Toolboxをインストールしたのですが、Macの場合はDocker for Macであったり、Windows10 ProであればDocker for Windowsがあるので、ご使用のPCによって変えましょう。

また、Docker Toolboxの場合はVirtualBoxを一度アンインストールしてからインストールすると良いかもしれません。Docker Toolboxをインストールすると勝手にVirtualBoxまで付いてくるので、既に存在しているとエラーが出る可能性があります。僕がインストールした時にはそこでエラーが出て躓きました。

詳しいインストール方法を紹介している記事はすでにたくさんありますし、OSによってもインストール方法が違う可能性があるのでこの記事では省略します。Docker Toolboxのインストールの際、参考になった記事を紹介しておきます。

Windows環境にDocker Toolboxをインストールする - Qiita

はじめに Docker、非常に便利ですね。Dockerを使用すればローカル環境を汚すことなく、様々なアプリケーションを実行できたりしてしまいます。Dockerに関する記事はネット上に豊富にありますが、いかんせん界隈の技術の進歩も早くすぐに情...

qiita.com

Djangoの環境構築

Dockerのインストールが終わると、次にDjangoの開発環境を整えていきます。この際、もしPycharmやVScodeなどのエディタをインストールしていない場合、しておくことをお勧めします。ちなみに僕はPythonを使うならPycharmが好きです。

PyCharm - 唯一の必携 Python IDE

ウェブ、データ、および AI/ML のプロ開発者向けに構築。 AI による IDE エクスペリエンスで強化されています。

www.jetbrains.com

Djangoプロジェクトが格納されるディレクトリを適当な場所に作成します。ただし、この時は作成するだけでそのディレクトリは空にしておきましょう。そして、Docker Toolboxを起動し、cdコマンドでそのディレクトリに移動します。

この後いくつかのファイルを作成しますが、僕はviコマンドを利用して作成しました。

次に、Dockerfileをそのディレクトリの中に作成します。Dockerfileは、そこに記述された内容に基づいてDockerイメージを作成します。Dockerfileについて、より詳しく知りたい方は以下の記事を読んでみてください。

Docker入門（第四回）～Dockerfileについて～ | さくらのナレッジ

こんにちは、Acroquest Technologyの横山です。 4/19(木)にKubernetesやDockerを中心としたコンテナ活用の現状をひとまとめにした開発者のためのイベントである「Japan Contain

knowledge.sakura.ad.jp

Dockefileには以下のように記述します。

From python:3.7
ENV PYTHONBUFFERED 1
RUN mkdir /code
WORKDIR /code
COPY requirements.txt ./
RUN pip install --upgrade pip
RUN pip install -r requirements.txt
ADD . /code

例えば、

RUN mkdir /code

というコードは、codeディレクトリをmkdirコマンドで作成しています。このようにRUNやADDなどのコマンドと、それに対応する命令を記述しています。

次に、requirements.txtを記述していきます。requirements.txtは、pipを使って指定のパッケージを指定のバージョンでインストールできる設定ファイルです。先ほど作成したディレクトリに、Dockerfileと同様にrequirement.txtを作成して以下のように記述します。

Django
psycopg2

これは、Djangoとpsycopg2をインストールするという意味です。psycopg2の後に改行しないように気をつけてください。また、これは注意点なのですが、このrequirement.txtやdockerfileを更新した場合には、以下のように実行しなければ反映されません。

$ docker-compose up --build -d

こちらも先ほどと同じく、作成したディレクトリにdocker-compose.ymlというファイルを作成して記述していきます。このファイルを作成することで、管理が非常に楽になります。内容は以下の通りです。8000ポートでアクセスできるようにしています。

version: '3'

services:
  db:
    image: postgres
    volumes:
      - poll_db_data:/var/lib/postgresql/data:Z
    ports:
      - "5432"
    environment:
      - POSTGRES_DB=postgres
      - POSTGRES_USER=postgres
      - POSTGRES_PASSWORD=mypassword
  web:
    build: .
    command: python manage.py runserver 0.0.0.0:8000
    volumes:
      - .:/code
    ports:
      - "8000:8000"
    depends_on:
      - db

volumes:
  poll_db_data:
    external: true

Dockerはコンテナを削除してしまうと、データベースの内容もすべて消えてしまうので、”poll_db_data”というvolumeを作成し、このようにZオプションをつけたり、external: trueを指定したりしています。

$ docker-compose run web django-admin.py startproject [プロジェクト名] .

このようなコマンドを実行することで、manage.pyの他プロジェクトディレクトリが作成されます。プロジェクト名は基本何でも良いです。また、docker-composeコマンドはdocker-compose.ymlが存在するディレクトリの中で実行してください。

次に、作成されたプロジェクトディレクトリの中のsettings.pyを開き、DATABASE=・・・のところを以下のように記述します。USERやPASSWORDは適当です。好きなものを使ってください。

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.postgresql',
        'NAME': 'postgres',
        'USER': 'postgres',
        'PASSWORD': 'mypassword',
        'HOST': 'db',
        'PORT': 5432,
    }
}

また、同じくsetting.pyのALLOWED_HOSTの部分を以下のように変更します。

ALLOWED_HOSTS = ["*"]

その後、以下のコマンドでDBのマイグレーションを行います。

$ docker-compose run web ./manage.py makemigrations
$ docker-compose run web ./manage.py migrate

さらに、スーパーユーザーも作成してしまいます。以下のコマンドを実行すると、ユーザ名やメールアドレス、パスワード等の入力を求められると思うので、入力してください。Djangoの管理ページにアクセスするために必要です。

$ docker-compose run web ./manage.py createsuperuser

$ docker-compose up -d

このコマンドを実行してコンテナを作成・起動しましょう。-dオプションをつけることで、コンテナ起動後もコマンドを実行できます。

そして、次のコマンドでdefaultマシンに割り振られたipアドレスを取得します。僕の場合はdefaultマシンをそのまま使っていますが、別のマシンを使っている方はそのマシンについて調べてください。何もしていなければdefaultマシンを使っているはずです。

$ docker-machine ip default

chrome等で、http://[6で調べたIPアドレス]:8000でアクセスしてみてください。(例：http://0.0.0.0:8000)この8000はdocker-compose.ymlで指定した値です。

以下のような画面になれば正しく環境構築ができています。正確には、右上のDjangoは3.0などになっているはずです。

おわりに

以上で環境構築編は終わりです。開発編に続きます。Pythonの勉強方法やDjangoの紹介、基本情報技術者試験の勉強方法なども分かりやすく書いているので、良ければ読んでみてください。

Pythonの勉強方法

最近人気沸騰中のプログラミング言語、Pythonの紹介から、Pythonの勉強方法まで詳細に説明していきます。初学者向けの記事ですが、初学者はもちろん、プログラミング経験者でPythonをまだ勉強していない方に対してもおすすめできる内容です。

ryuusan.com

2020.03.10

Django学習 ~Django紹介編~

この記事では、DjangoやWebフレームワークについて分かりやすく紹介しています。DjangoとはPythonのWebフレームワークで、利用することで簡単にWebアプリを作成できます。また、この記事の後に環境構築編や開発編などが続きます。

ryuusan.com

2020.04.06

基本情報技術者試験に合格できた勉強方法

基本情報技術者試験はエンジニアとしての基礎的な知識が問われる試験で、勉強すべき範囲が非常に広く、100時間程度の勉強が必要と言われています。その基本情報技術者試験をこれから受けようと思っている人に向けて、僕が勉強してきたことを紹介します。

ryuusan.com

2020.03.02

開発編も公開しました！

Djangoで簡単な「文字カウントメモ」を作ってみる

この記事では、「Djangoを勉強したい！」「Pythonで何か作ってみたい」という人に向けて、Djangoを用いた簡単なWebアプリ作成の方法を実際に一緒に作りながら紹介していきます。プログラミング学習の助けになれば幸いです。

ryuusan.com

2020.05.16

また、よろしければ僕のTwitter(@ryu_programs)のフォロー等もお願いします。

なお、この記事は「環境構築編」や「簡単なアプリケーション作成編」などに続いていく予定です。ぜひこの記事を読み、Djangoについて軽く理解しておいてください。

Django学習　～環境構築編～

この記事は紹介編の続きの記事であり、DockerでPythonのWebフレームワークであるDjangoの開発環境構築を分かりやすく説明しています。Djangoを学んでみたい方、Pythonで何か作ってみたいと思っている方は読んでみてください。

ryuusan.com

2020.04.07

Djangoで簡単な「文字カウントメモ」を作ってみる

この記事では、「Djangoを勉強したい！」「Pythonで何か作ってみたい」という人に向けて、Djangoを用いた簡単なWebアプリ作成の方法を実際に一緒に作りながら紹介していきます。プログラミング学習の助けになれば幸いです。

ryuusan.com

2020.05.16

また、Pythonの勉強方法については以下の記事で紹介しています。Pythonは基本的なことに関しては覚えやすく、コードも書きやすいので、「プログラミングを学習したい！」と思っている人にはお勧めの言語です。

Pythonの勉強方法

最近人気沸騰中のプログラミング言語、Pythonの紹介から、Pythonの勉強方法まで詳細に説明していきます。初学者向けの記事ですが、初学者はもちろん、プログラミング経験者でPythonをまだ勉強していない方に対してもおすすめできる内容です。

ryuusan.com

2020.03.10

Webフレームワークとは

先ほども書きましたが、DjangoとはPythonのWebフレームワークです。そもそもWebフレームワークとは、便利な機能が用意されており、利用することでWebアプリケーションを簡単に短期間で作成できるようにするといったものです。

WebフレームワークにはDjangoのほか、多くの種類があります。この記事ではその中でも有名でよく使われているWebフレームワークを簡単に紹介します。

LaravelはPHPという言語のフレームワークです。そもそも、PHPという言語自体がWeb開発に多く使われていたこともあり、LaravelやPHPのもう一つのフレームワークであるCakePHPは非常に人気のWebフレームワークです。

ちなみに、PHPがWeb開発に多く使われると書きましたが、それはPHPが動的にWebページを生成できる、サーバサイドのスクリプト言語であるからです。PHPはWordPressなどにも使われていますね。

Ruby on railsはRubyという言語のフレームワークです。僕が大学1年生の夏に初めて学習した言語がRubyでした。プログラミングの基礎知識など全くなかった僕が、1ヵ月でPaizaのスキルチェックでBランクを獲得できたのは、ひとえにRubyという言語の書きやすさであったり、分かりやすさのおかげだと思います。Ruby on railsもその特徴を受け継いでいます。

また、Rubyという言語は日本人のまつもとゆきひろさんが開発された言語であり、その影響なのか日本語の説明が多いことも特徴です。分からないことでもググったら大体日本語での解決法がヒットする、というのは安心できますよね。

Djangoの特徴

Djangoの特徴は以下の3点です。もちろんこれ以外の強みも多くあると思いますが、その中でも特に僕が便利だと感じた点を紹介しています。

まず、1つめのデータベースに強いというのは、DjangoはOracle、SQLite、MySQL、PostgreSQLなどのデータベースに対応しており、なおかつ簡単にデータベースを操作できるからです。

Djangoドキュメントのチュートリアルのような簡単なWebアプリの場合、ほとんどデータベースの知識は必要ありません。(あった方が良いのはもちろんですが。）つまり、Pythonの知識さえ最低限あれば、簡単なWebアプリが作れてしまうということです。

Djangoはログイン機能やセキュリティ対策など必要な機能が全てそろっており、基本的にはDjango単体でWebアプリを開発することができます。このようなフレームワークをフルスタック・フレームワークと呼び、DjangoのほかRuby on railsなどもこのフルスタック・フレームワークです。

一方でFlaskなどはマイクロフレームワークと呼ばれており、必要最低限の機能しか備えていません。そのため、足りない機能は拡張などで補うことになります。ただ、このようなマイクロフレームワークは小規模の開発をする際や初心者には、機能が少ないため分かりやすいというメリットもあります。

DjangoでWebアプリケーションを開発する際にはPythonという言語を使いますが、そのPythonは機械学習に強い言語です。また、Webクローリング等もPythonを使うことで簡単に行うことができます。

そのため、機械学習やWebクローリングで得られたデータをDjangoを使って表示するWebアプリケーションを、Pythonという言語だけで実装することができるのはDjangoの強みです。

例えば、InstagramやMozillaなどがDjangoを利用して開発された有名なサービスです。1度は使ったことがある人も多いのではないでしょうか。Pythonを使って、あのような素晴らしいサービスを作成することができます。

おわりに

この記事ではDjangoやWebフレームワークの紹介をしました。参考になれば幸いです。また、もしよろしければTwitter(@ryu_programs)のフォロー等もお願いします。この記事の次はDockerを利用したDjango開発環境構築の記事です。

公開しましたので、読んでみてください。

Django学習　～環境構築編～

この記事は紹介編の続きの記事であり、DockerでPythonのWebフレームワークであるDjangoの開発環境構築を分かりやすく説明しています。Djangoを学んでみたい方、Pythonで何か作ってみたいと思っている方は読んでみてください。

ryuusan.com

2020.04.07

Djangoで簡単な「文字カウントメモ」を作ってみる

この記事では、「Djangoを勉強したい！」「Pythonで何か作ってみたい」という人に向けて、Djangoを用いた簡単なWebアプリ作成の方法を実際に一緒に作りながら紹介していきます。プログラミング学習の助けになれば幸いです。

ryuusan.com

2020.05.16

この記事では、主に次のような方のために、小学校で必修になった『プログラミング』って？というテーマで小学校で学習するプログラミングについて紹介していきます。

そもそも、プログラミングって何？

プログラミングとは、コンピュータを動かすための「プログラム」を作ることを意味します。

実はコンピュータは人間の脳とは違い、0か1の信号でしか命令を理解できません。従って、コンピュータに命令して思い通りに動かすためには、0と1の羅列で表現された命令(プログラム)を作らなければいけません。

しかし、そうすると今度は人間が理解しづらくなってしまいます。そこで、命令を人間が理解しやすい形で記述できるプログラミング言語と、プログラミング言語で書かれたプログラムをコンピュータが理解できる形に変換するコンパイラが登場しました。

現在では主にこのプログラミング言語によってプログラムが作られ、様々なシステムが開発されています。プログラミング言語の例として、機械学習やIoTなどに用いられるPython、組込みシステムなどに用いられるC言語等が挙げられます。これらはまた別の記事で紹介しますね。

Pythonの勉強方法

最近人気沸騰中のプログラミング言語、Pythonの紹介から、Pythonの勉強方法まで詳細に説明していきます。初学者向けの記事ですが、初学者はもちろん、プログラミング経験者でPythonをまだ勉強していない方に対してもおすすめできる内容です。

ryuusan.com

2020.03.10

プログラミングってすごい難しそうだけど、大丈夫かな…？

リューさん

大丈夫ですよ！小学校教育はプログラマーの育成ではなく、「プログラミングの考え方」を身に付けることが目的なんです！

たしかに、プログラマーになるための教育をするのであれば、必要な知識も膨大となりますし、プログラミング言語の基本的な記述の仕方や、コンピュータの構造なども覚える必要があります。

しかし、今回のプログラミング教育では論理的な思考能力や問題解決力などの「プログラミングをすることで身につく力」を養うことが目的ですので、必要となる知識も少なくて済みます。

また、現時点では小学校の授業に新しくプログラミングという科目を作るのではなく、それぞれの科目でプログラミングを用いた授業を組み込む、といった形で学習するようです。

他にも、後で紹介しますがワイワイプログラミングであったり、LEGOの動作制御であったりと、面白くゲーム感覚でプログラミングを学ぶことができる教材も数多くあります。そのような教材を利用することで、子供たちだけでなく、大人も一緒に楽しくプログラミングを学ぶことができるのではないでしょうか。

小学校で学ぶプログラミング

小学校では主にScratchを用いて学習すると考えられます。文部科学省のページでもScratchでの教育実践事例が掲載されています。

Scratchは直感的にプログラムを作ることができるので、子供たちはもちろん、プログラミングを始めたばかりの人にもおすすめです。先ほど紹介した、NHKが作成しているワイワイプログラミングで詳しく紹介されているため、閲覧してみてください。

Scratchはブラウザ上で、この写真にあるようなブロックを組み合わせることでプログラミングを行うアプリケーションです。日本語化もされていて、尚且つ無料であるため、プログラミング教育において非常に広く使われています。タブレット端末にも対応しています。

知識などは必要ないため、プログラミングの授業が始まる前にお子様と一緒にゲームなどを作って遊んでみてはどうでしょうか。スクラッチ公式サイトで作ることができます。きっと楽しめると思いますし、お子様のプログラミングに対する忌避感を無くす手助けになるでしょう。

気を付けるべきこと

僕の考えですが、プログラミングは自分で試行錯誤する中で学習するものだと思っています。ですので、お子様と一緒にプログラミングで遊んでいるときやプログラミングを教えているとき、お子様の分からないことに対して答えを教えてしまうのではなく、ヒントを言うようにしてください。

プログラミングには決まった答えがありません。同じ処理に対して、いろいろなアプローチがあります。試行錯誤の末に思い通りの動作をした時の方が達成感が得られますし、力もつくはずです。

また、プログラミングは楽しんで勉強することが大切です。他のどの教科にも言えますが、面白くないことに対しては苦痛であるだけで、やる気は出ません。「プログラミングって面白い！」と思ってもらえるような工夫をする事が重要です。

幸いにも、プログラミングは自分の書いたプログラムの動きが目に見えて分かるため、面白いと思ってもらいやすいです。

また、プログラミング学習のための教材も多くあり、家でも楽しみながら学ぶことができます。この記事では、それらの教材の中からいくつか紹介します。

例えば、この教材はLEGOでロボットを作り、プログラミングで動かすことでモノづくりやプログラミングを学ぶことができます。自分でロボットを作り、それを動かすような経験はなかなかできないのではないでしょうか。

こちらの本は、先ほど紹介したScratchでゲームを作りながらプログラミングを学習することができます。学校の授業の予習や復習にもなりますね。

遊びながら楽しく学ぶ！小学生のScratchプログラミング [ 石戸奈々子 ] 価格:1,980円 (2020/3/12 22:17時点) 感想(0件)

このような教材を利用して、プログラミングで何かを作り上げる経験が、面白いと思ってもらうことの1番の近道なのではないかと思います。

他にも、数学や国語などにおける塾のような扱いである、プログラミングスクールを利用する方法もあります。無料体験等も行っているので、もし近くに教室があるなら参加してみてはどうでしょうか。

例えば、コンテスト実績No.1の本格スクール 小学生向けプログラミング教室【テックキッズスクール】 では、東京渋谷校や大阪梅田校など場所が限られてしまいますが、プロにプログラミングを教えてもらうことができます。また、多くのイベントやコンテストなどにも参加できることも強みですね。

おわりに

この記事では、そもそもプログラミングとは何か、という話やお子様と一緒にプログラミングを楽しみ、面白いと思ってもらうための方法などを紹介しました。

もし質問等がありましたら、僕のTwitter@Ryu_programsまで連絡をください。Twitterでも日々の気づきや情報などを発信していくので、良ければフォロー等もお願いします。