APIってなんなんすか！？
APIを作ってみたい！
APIって作るのむずかしいんでしょ？
エーピーアイ！エーピーアイ！
ダイジョーブキミニモツクレルヨ
速攻でAPIが作れるStrapi
StrapiというHeadless Cmsとかってのを使うとコード書かなくてもAPIが作れるんす。
用意しておくこと
docker-composeが使えるようにしておくこと
dockerやdocker-composeがよくわからなくてもいいです
環境構築
docker-compose.ymlで作りますよっと
適当なところでstrapiみたいな適当な名前のフォルダ作って、その中に下記のコードのdocker-compose.ymlを入れます。
version: '3'
services:
strapi:
container_name: strapi
image: node:13.3.0
environment:
- DATABASE_CLIENT=postgres
- DATABASE_HOST=db
- DATABASE_PORT=5432
- DATABASE_NAME=strapi
- DATABASE_USERNAME=strapi
- DATABASE_PASSWORD=strapi
ports:
- 1337:1337
volumes:
- ./app:/srv/app
working_dir: /srv/app
tty: true
depends_on:
- postgres
postgres:
container_name: postgres
image: postgres
restart: always
volumes:
- ./db:/var/lib/postgresql/data
environment:
POSTGRES_USER: strapi
POSTGRES_PASSWORD: strapi
POSTGRES_DB: strapi
作ったらターミナルでdocker-compose.ymlと同階層に移動して、
$ docker-compose up -d
環境構築してくれます。
※ -dオプション付けるとバックグラウンドでコンテナ起動します。
Strapiを作成
次にstrapiという名前のコンテナにはいりますよって
$ docker-compose exec strapi /bin/bash
コンテナに入ったらStrapiを作成するコマンドを実行します。
$ npx create-strapi-app strapi-dev
※strapi-devがアプリ名になります。名前はなんでもいいっす。
ターミナルで下記のことを聞かれます。
Choose your installation type
❯ Quickstart (recommended)
Custom (manual settings)
Quickstart (recommended)を選択しましょう。
strapiを勝手に作成してくれます。
10分ぐらいはかかります。待ちましょう。
ログが止まって途中であれ？っと思ってもしっかり待ちましょう。
腰を据えて待ちます。
こんなのがでてきたらOK
ログに出ているhttp://localhost:1337/adminへアクセスしてみましょう。
こんな画面が出てきたら成功です。
情報を打ち込んでReady to startを押します。
※一番下のチェックボックス入れるとstrapiの最新の情報をメールへお届けしてくれます。
さて、そんなこんなでこんな画面へきましたかね。
次にコンテンツタイプを作成するを押しましょう。
こんな画面へ遷移します。
一言で言えばDBのテーブル名を作成するところです。
DBはpostgresSQLを使うようにdocker-compose.ymlに記述されています。
今回は東京都の地区別の犯罪指数を作ることにします。
名前にcrimerateと入力して、接続はデフォルト、説明文を入れてあげます。
そしてdoneをクリック
次はフィールド(カラム)のデータ型を決める画面に遷移します。
地区名が入るのでStringを選択します。
カラム名をareaとしてdoneをクリック
画面が遷移してAreaというフィールド（カラム）が追加されたのが分かります。
もう一つ犯罪指数のフィールドを作るのでAdd Another Fieldをクリック
指数は数値なのでNumberをクリック
名前（カラム名）にexponentsと入力して、数値形式はそのままでdone
exponentsのフィールドが追加されました。
右上の保存をクリックします。
保存処理を待ちます。
と、でればOK
少し待つと...
画面が表示されます。
左のサイドバー(ダッシュボード)の上を見るとCrimerateと追加されました。
さて次は作ったフィールドに実際に値を入れよう
左のサイドバー(ダッシュボード)のCrimeratesを押します
右上の "+ Crimerateを追加"をクリック
ここでareaと指数に値を入れて保存をクリックします。
反映されました。
いくつかデータを入力しておきます。
お次は左のサイドバー(ダッシュボード)のロールと権限をクリック
publicを選択
権限のcreateとfindにチェックを入れて保存
※createやfindを誰でも使えるように許可するということをしています。
Strapiで作成したAPIを叩いてみる
さてAPIを叩きましょう。
もう一度ロールと権限のpublicをクリックしてfindの歯車をみつけてクリック
すると右の方に"Bound route to Crimerate.find"とある下に
GET /crimerate とあります。
GETでcrimerateをfindする。取得するということ。
とにかくhttp://localhost:1337/crimeratesにアクセスしよう！
さきほど入力したデータをfind(取得)して表示されています。
ちなみにjsonviewってchromeの拡張ツール入れると...
いい感じに整形して表示してくれる
axiosを利用してAPIを叩いてデータを登録
さて今度はPOSTでデータを登録するぞー。
POSTするにはブラウザからリクエストというのを想定するので...
axiosというライブラリを使ってサクッとPOSTしてやりましょう。
index.htmlをどこでもいいので作って以下のコードを貼っつけてファイルを保存しよう。
※areaに葛飾区、exponentsに4260という値がPOSTされるように記述しています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>axios post</title>
</head>
<body>
<h1>axiosでPOST</h1>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
// POST通信
axios({
method : 'POST',
url : 'http://localhost:1337/crimerates',
data : { area : '葛飾区', exponents : '4260' }
}).then(response => console.log(response.status));
</script>
</body>
</html>
保存できたらブラウザに読み込ませて検証ツールを開いてconsoleを見てみよう。
200はHTTPのステータスコードでOK的なこと。
つまりaxiosによるPOSTのHTTPリクエストが成功したということ。
というわけでstrapiの管理画面でデータが入ったか確認しよう。
POSTしたデータはareaに葛飾区、exponentsに4260
おー入ってます入ってます。
お疲れさまでした。
おわりに
Strapiを使うと簡単にAPIを作ることができる。
今回はお試しハンズオンでした。高度な設定や、カスタムをすると結構いろんなことができるので、個人的にはプロトタイプの作成や簡易なものであればStrapiを利用したりします。
フロントをvue.jsで作成してStrapiでAPIを作成してSPAでRESTfulな開発もサッサとできてしまいます。
ドキュメントもどんどん充実していってるので使えるものは使っときましょう。