Zenn
💪

Djangoでシンプルなapiを作成してpostmanでテストしてみた

2024/08/05に公開
1件
django
GitHub
Python
API
Postman
tech

元美容師のDjangoポートフォリオリニューアル日記Part.2

はじめに

こんにちは！前回の記事で紹介した「SalonLink」リニューアルプロジェクトを本格的に開始したので少しずつアウトプットとして記事にしていきます！
まずDjangoとReactの基本をインプットするためにデータベースの登録、表示、編集、削除機能について美容室を登録するところから始めていこうと思います！
これらの実装が完了次第、本格的にログイン画面から実装をしていきます！

今回は、GitHubにリポジトリを作成するところからバックエンドを担うDjangoのセットアップ、シンプルなAPIを作成、そして作成したAPIをPostmanでテストするところまで記載します！

なぜこの開発を始めたかはPart.1をご覧ください。

また記事についてですが、知識のある方なら当たり前と思うような説明も記載しておりますがご了承下さい。
これは、僕自身がプログラミング学習を始めた当初、色々な記事を参考にさせて頂いたのですが、その際に「当たり前に書かれていることが理解できない」という壁にぶち当たりましたw
この記事を読んでくださる方がその様なことにならない為にも、なるべくわかりやすい説明を意識して記事を書きたいと思います。

読んでいてわからない部分や間違っている箇所があれば是非是非コメントでご指摘下さい。

それでは開発開始！

GitHubリポジトリの作成

今回のプロジェクトはGithubでコード管理をしていこうと思います。
そのためまずはGitHubでリポジトリを作成しました。
リポジトリはプロジェクトのコードを保管する為の保管庫のようなものです。
githubを使用することで、コードの修正や更新が管理しやすくなります！
例えばコードを更新したけど、前の状態に戻したい。そんな時にgithubなら履歴からコードを復元出来たりします。
YouTubeなどで沢山情報がでているので是非ご覧ください。

それではリポジトリを作ります！

  1. GitHubにログインし、リポジトリ→「New」ボタンから新規リポジトリを作成。
  2. リポジトリ名は「newsalonlink-react-django」として説明欄には「美容室の空き席と美容師をマッチングするサービス」と記載しました。
  3. パブリック、プライベートはまだ公開しないのでプライベートリポジトリとして設定。コードを公開したい場合はパブリックを選択します。
  4. READMEファイルとgitignoreファイル(python)を追加。READMEファイルはこのプロジェクトの紹介文、gitignoreファイルはgithub上で管理しないデータを指定しています。
  5. ライセンスはMITを選択しました。ライセンスはこのプロジェクトにライセンスを付与します。

無事リポジトリが完成しました。

お恥ずかしいのですがこの辺の設定は今まではなんとなくでやっていました...
とりあえず名前いれて緑のボタン押せばできるんやろ。くらいのノリでやっていたのでw
まず英語力が乏しいので何言ってるか意味わからないんですよねw

ただ今回は曖昧な知識で進めることをなるべく少なくするためそれぞれ設定の意味なども調べました。
ライセンスを設定するのは初めてでしたが、後々のことを考えると設定したほうがいいですね。

ローカル環境へのクローンとプロジェクト構造の設定

続いて作成したリポジトリをローカル環境にクローンして、プロジェクトディレクトリで操作をしていきます。クローンはコピーのようなイメージです。

今回フロントエンド側はReact、バックエンド側はDjangoで作成するため、それぞれのディレクトリをプロジェクトディレクトリに作成します。
またそれぞれにDockerで使用するDockerfileを作成します。Dockerについては使用する際に詳しく書きたいと思います。

ターミナルに以下のコマンドを入力します

git clone https://github.com/ユーザー名/newsalonlink-react-django.git #リポジトリをローカルにクローン
cd newsalonlink-react-django #プロジェクトディレクトリに移動
mkdir backend frontend #backend frontendディレクトリを作成
touch backend/Dockerfile frontend/Dockerfile docker-compose.yml #backend frontendにdockerファイルを作成

これでバックエンド（Django）とフロントエンド（React）を分離し、後々追加するDocker環境での開発準備も整えることができました。

Django環境のセットアップ

バックエンド側のDjango環境をセットアップしていきます。
ここでは仮想環境を作り、その中でDjangoをインストールしていきます。仮想環境を使用することでPCの環境に依存することなくプロジェクトを進めることができます。
今回はvenvという仮想環境作成ツールを使用します。

コマンドはこちら

python -m venv venv #venvという仮想環境を作成
source venv/bin/activate #仮想環境を起動

仮想環境に入っているかどうかを判断するには、ターミナルのユーザ名の左に仮想環境名が出力されていればOKです。今回はvenvという名前で仮想環境を作成したので
(venv) (base) PC名：現在の位置 ユーザ名$
と表示されます。

続いてDjangoをインストールしていきます。今回は「django rest framework」を使用します。
インストールが完了したら、backendディレクトリに移動し、バックエンドで動作させるAPIアプリをDjangoで作成します。まずは大枠のDjangoプロジェクトを作成します。名前はsalonlink_apiとします。

コマンドはこちら

pip install django djangorestframework　#Djangoをインストール
cd backend #backendディレクトリに移動
django-admin startproject salonlink_api . #Djangoプロジェクトを作成

Djangoプロジェクトを作成すると以下のファイルがディレクトリに追加されます

backend/
    manage.py
    salonlink_api/
        __init__.py
        asgi.py
        settings.py
        urls.py
        wsgi.py

さらにプロジェクトにAPIを作成するためのアプリを作成します。
api(api部分のアプリ名)いう名前で作成しました。

コマンドはこちら

python manage.py startapp api #プロジェクト内にapiというアプリを作成

ここでプロジェクトとアプリがごちゃごちゃになりそうですよねw
先に作成したプロジェクトはアプリ全体の大枠です。
次に作成したapiというアプリはプロジェクトの中でAPIのみを作成する場所といった感じです。
後々API以外の機能も追加したい場合は、apiアプリと同じようにプロジェクト内に追加することで機能を拡張できます。説明が下手ですみません...

次にsalonlink_api/settings.pyを開いて、rest_frameworkとapiをINSTALLED_APPSに追加します。これで先ほど作成したプロジェクトとapiが使用できます。

INSTALLED_APPS = [
    ...
    'rest_framework',　#追加
    'api',　#追加
]

さて、これで基本的なDjangoのセットアップが完了しました。
マイグレートして、正しくDjangoが動作するか開発サーバーを起動してテストします。
マイグレートについては後ほど、モデル(データベースのテーブル)を追加した際に説明します。

コマンドはこちら

python manage.py migrate　#マイグレートを実行
python manage.py runserver　#開発サーバーの起動

ターミナルに表示されるURLをブラウザに入力してロケットが飛んでいれば無事Djangoが動いています！

シンプルなAPIを作成してみる

無事にDjangoが起動したので、まずシンプルなAPIを作成したいと思います。
今回は美容室をPOSTで登録、登録した美容室をGETで取り出すAPIを作成します。
美容室には、名前(name)、住所(address)、説明文(description)のフィールドを持たせます。
それでは作成していきましょう！

美容室(salon)モデルの作成

まずは美容室(salon)のモデルを作成します。
api/models.pyに以下のコードを入力します。

from django.db import models

class Salon(models.Model):
    name = models.CharField(max_length=100)
    address = models.CharField(max_length=200)
    description = models.TextField()

    def __str__(self):
        return self.name

ここでsalonモデルにname,address,descriptionのフィールドを持たせます。
モデルはデータベースのテーブルと考えてもらえればOKです。

def str(self):とはなにか

ここで今までなんとなく書いていたコードが出てきましたw

def __str__(self):
        return self.name

これです。
説明が難しいのですが
このモデルで作成されるsalonオブジェクト自体の名前をnameで設定した名前にしています。さらにnameを必須入力として設定します。

例えば田中美容室のオブジェクトを作成するとしたら
nameに"田中美容室"
addressに"東京都中央区〇〇x-x-x"
descriptionに"銀座の田中美容室です"
とします。

そして今後このオブジェクト自体の名前はnameで設定した"田中美容室"としてね。と言った感じです。
nameを"鈴木美容室"に変更したらこのオブジェクトの名前も鈴木美容室になります。

シリアライザーの作成

次にシリアライザーを設定します。
シリアライザーは、APIを使用する際にpythonで指定した値をjson形式に変換してくれるものです。逆にjson形式で受け取った値をpythonで読み取れるように変換もしてくれます。

今回はSalonモデルで作成されたインスタンスをid、name、address、description、を持つjsonに変換してくれる役割を持ちます！

apiディレクトリの中にserializers.pyを作成し以下のコードを書いてください

from rest_framework import serializers #シリアライザーをインポート
from .models import Salon #Salonモデルをインポート

class SalonSerializer(serializers.ModelSerializer):
    class Meta:
        model = Salon
        fields = ['id', 'name', 'address', 'description']

これでシリアライザーの設定はOKです

ビューの作成

続いてビューの作成です。
ビューは受け取ったリクエストに対して適切なレスポンスを返してくれます。
受け取ったレスポンスの内容からgetなのかpostなのかを判断してくれます。

今回はGETでリクエストを受け取った際に登録された美容室リストをレスポンスとして返し、POSTでリクエストを受け取った際は新しく美容室を登録するSalonListCreateというビューを作成します！

api/views.pyに以下のコードを書きます

from rest_framework import generics #ビューを作成するためのツールセット
from .models import Salon #Salonモデルをインポート
from .serializers import SalonSerializer #salonシリアライザーをインポート

class SalonListCreate(generics.ListCreateAPIView): #genericsのListCreateAPIViewを継承して作成
    queryset = Salon.objects.all() #扱うクエリセットをSalonオブジェクト全てとして設定
    serializer_class = SalonSerializer #シリアライザーを設定

これでビューの設定は完了です！
このビューを呼び出すためのURLを次は設定します！

URLの設定

URLの設定ですが、今回は2つ設定します。
１つはsalonlinkプロジェクトにアクセスするためのURL、2つ目はプロジェクトから先程viewsで設定したAPIにアクセスするためのURLです。

まずはプロジェクトにアクセスするためのURLを設定します。
salonlink_api/urls.pyに以下のコードを書きます

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

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/', include('api.urls')), #追加
]

続いてviewsで作成したAPIにリクエストするためのURLを設定します。
apiディレクトリにurls.pyを作成して以下のコードを書きます

   from django.urls import path
   from .views import #viewsをインポート
SalonListCreate #viewsで作成したSalonListCreateをインポート

   urlpatterns = [
       path('salons/', SalonListCreate.as_view(), name='salon-list-create'),
 ] #SalonListCreateを呼び出すためのurlを設定

これでURLの設定は完了です！

マイグレーションを実行

Djangoプロジェクトを作成した際にマイグレーションをしたのを覚えていますでしょうか。
マイグレーションは設定した新たに設定したモデルの変更をDB(データベース)構造に反映する機能です。
DBの構造を変更するため、既存のデータに影響を与える可能性があります。この先注意したいと思います。

ターミナルに以下のコマンドを入力します

python manage.py makemigrations
python manage.py migrate

これでマイグレーションが完了し、新たに作成したSalonモデル(テーブル)がDBに反映されました！

以上でapiを作成するための設定が完了しました！

サーバーを起動してURLにアクセス！

ではいよいよサーバーを起動して設定したURLにアクセスしてみましょう！

ターミナルに以下のコマンドを入力します

python manage.py runserver

ターミナルにURLが表示されるので、そのURLの末尾にapi/urls.pyで設定したapi/salons/を追加してブラウザに入力します

今回は
http://localhost:8000/api/salons/をブラウザに入力します

無事にAPIインターフェースが表示されました！！！！

postmanでapiテストをしてみる

APIのが正しく動作をするか確認するため、Postmanを使用してテストを行いました。

postmanはAPIテストを実施できる無料のツールです。
実は僕がこの業界に転職して初めての現場でこのツールを使用しましたw

参画時のキックオフで当たり前のように
「APIテストはpostmanで実施して下さい」
と言われてポストマン？api？と訳がわからず青ざめた記憶があります。
その現場は美容師時代に培ったコミュ力でキャッチアップをしまくりなんとか乗り切りましたw

postmanをダウンロード

postmanは公式サイトからダウンロード出来ます
https://www.postman.com/

テスト実行！

まずはGETリクエストでサロン一覧の取得をしてみます！postmanに以下のURLを入力してメソッドはGETを選択し、Sendボタンをクリック。これでリクエストが実行されます。

http://localhost:8000/api/salons/

現時点ではまだ美容室の登録がされていない為空のリストが返却されました。ステータスに201 Createdが表示されているためAPIは問題なく動作していそうです！

続いてPOSTリクエストで新しいサロンを作成してみます。URLはそのままでメソッドをPOSTに変更します。

そしてリクエストする際にJSONでオブジェクトを一緒に渡します。このJSON形式のオブジェクトをシリアライザーがpythonでも読み取れる形に変更してくれます。

jsonは以下のように入力しました。

{
  "name": "テストサロン1",
  "address": "東京都中央〇〇x-x-x",
  "description": "APIテストで作成したサロンです"
}

ステータスに201 Createdが表示され、作成されたサロンの情報が返されました！！
これで無事サロンを1店舗登録することが出来ました。

再度GETでリクエストしてみます。登録した店舗がリストとして返却されるはずです。

無事に店舗のリストが表示されました！！！
かなり嬉しいです！！！！！

NGのテストも念のため

さて、無事にAPIの動作確認は済みました。
ただ念のため無効なデータでエラーがでるかのテストもしておきましょう！
以前の僕だとNGテストなんてしなかったと思いますが、これはテスターとして現場に出ているからこそですねw

メソッドをPOSTにしてオブジェクトの中身を全て空文字でリクエストしてみます。エラーが出力されるはずです。

ステータスが400 Bad Requestとなりエラーメッセージが返されました。
このテストにより、バリデーションが正しく機能していることが確認できました。

次は存在しないエンドポイントを指定してリクエストしてみます。URLを以下のように存在しない値にします。メソッドはGETにします。
http://localhost:8000/api/aaaaaaa

404 Not Foundが返却されました。これも正しい挙動ですね。

実際は他にもテストが出来ますが、今回はこれで良しとしましょうw

長くなりましたがこれで、APIを作成して動作確認も完了しました！！！
ただこれは今回のプロジェクトの僅かな一歩です。引き続き長い目で見守って下さいw

まとめと次回予告

今回は、Djangoを使ってシンプルなAPIを構築し、Postmanでテストを行いました。基本的なCRUD操作の中でCreate, Readが実装でき、エラーハンドリングも適切に機能していることが確認できました！

さて次回は以下の内容に取り組む予定です！

・データベースの更新と削除(Update, Delete）の実装

・より詳細なAPIの作成(サロンの詳細情報を登録して取得してみようと思います）

記事のボリュームをみてフロントエンドとの連携も少しだけやるかもしれません
今回の記事量少し多すぎてしまった気がするのですがどうでしょうか...

今回のAPI構築は順調に進みましたが、どこで壁が待っているのやら....笑
次回の記事もお楽しみに！！

質問やフィードバックがあれば、コメント欄でお待ちしています！
皆さんと一緒により良い開発が出来れば幸いです。

やぎ

Discussion

MeguriMeguri

シンプルなAPI構築にPostmanを使ったテスト、すごくわかりやすかったです！APIテストって、Postmanで直感的に実行できるのは便利ですよね。ちなみに、私最近VS CodeでECHOAPIっていうプラグインを使い始めました。タブを切り替えずにAPIを直接VS Code内でテストできるので効率がアップしてます。