feature image

2022年3月23日 | ブログ記事

GoでToDoリストを作ろう ! (Day-2)

前回 → https://trap.jp/post/1515/
次回 → https://trap.jp/post/1517/
Github → https://github.com/Irori235/ToDoList-Server/tree/day-2


この記事は新歓ブログリレー13日目になるはずだった記事です。
担当者が体調を崩したため、なくなく延期することになりました。私のことです。traPでは主にグラフィック班とSysAd班に所属し、イラストとweb開発をしています。

この記事はサーバー編2日目です。

目次

  1. 今日やること
  2. ToDoリストの要件定義
  3. データベース(DB)設計
  4. WebAPIの仕様策定
  5. Postmanのインストール
  6. 作業ディレクトリを作成
  7. Dockerで環境構築

1. 今日やること

まず前回やったことを復習しましょう !

前回やったことの復習

  1. Goをダウンロードした
  2. Goの開発を始めるための諸設定をした
  3. 「Hello World!」を通して、開発の流れをざっくりと理解した

これを踏まえて、今日やることはこちらです。

今日やること

  1. ToDoリストの設計を考える
  2. PostmanとDockerをインストールする
  3. Docker関連ファイルをコピペして、Docker環境を整える

2. ToDoリストの設計

早速ToDoリストを作ってみましょう !  ... といいたいのですが、作るためにはアプリの設計を考えることが必要です。まずはそこからはじめましょう。

ToDoリストの要件定義

まず最初に、ToDoリストに必要な機能を書き出し、整理します。これを要件定義と言います。
ToDoリストとして必要な機能と、一つ一つのタスクについて要求されることを書き出します。

必要な機能
タスク

今回は最低限の機能を持つToDoリストを作ります。作り終わったら、自分なりの機能を追加してみても楽しいですね。例えば、タスクの期限を設定できるようにしたり、タグ付けができるようにしたり。

3. データベース(DB)の設計

データベースにはExcelのようなものが入っていると考えれば良いでしょう。画像はスプレッドシートのものですが...
material_db-1

用件定義に従って、タスクのパラメーターを以下のようになります。


ここで、型を決めておく必要があります。型を決めておかないと、文字の「1」と数字の 1 を足そうとして、エラーが出たりします。型は以下のように決めました。

idについては、uuidという少々特殊な型を使います。 これは自動的に相異なる16進数32桁の文字列を振ってくれる型のことです。

4. Web APIの仕様策定

要件定義に従って、APIを設計していきます。
最初に、タスク一覧を取得しなければいけないことに注意しましょう。

GET /tasks

タスク一覧をサーバーのデータベース上から取得する

※ 図中では、長さの問題から uuidを8桁にしています

POST /tasks

タスクをサーバーのデータベース上に追加する

taskの名前をbodyに入れて送ります。bodyはjsonデータでこのような形になります。

{
    "name": "クリップを買う"
}

PUT /tasks/:id

指定のidのタスクをサーバーのデータベース上で完了にする

:id の部分には、タスクの idを入れて送ります。
例の場合だと PUT tasks/93bdb52a ですね。

DELETE /tasks/:id

指定のidのタスクをサーバーのデータベース上から削除する

PUTの時と同じように、タスクの idを入れて送ります。
例の場合だと DELETE tasks/93bdb52a となります。

5. Postmanのインストール

[Day-1のWebAPIとは]でやったように、バックエンドの動作は、フロント側からAPIを送信することから始まるのでした(このことをAPIを「叩く」と言ったりします)。

その際に、簡単にAPIを叩けるアプリがあると便利ですね。そういったアプリの一つがPostmanです。

下のリンクからインストールしてください。

Download Postman | Get Started for Free
Try Postman for free! Join 17 million developers who rely on Postman, the collaboration platform for API development. Create better APIs—faster.

6. 作業ディレクトリを作成する

ターミナル(WSL2)を開きます。今後はターミナル表記に統一するため、Windowsの人はWSLに読み替えて下さい。

  1. ホームディレクトリに移動します。

    $ cd 
    
  2. Day1のGOPATHで指定した、goディレクトリに移動します。ホームディレクトリの直下に go ディレクトリを置いている場合は

    $ cd go
    
  3. /go/srcに移動し、 その下に今回のプロジェクトディレクトリ(ToDoList-Server)を作成します。

    $ cd src
    $ mkdir ToDoList-Server
    

この後は、~/go/src/ToDolistに作成されているものとして進めます。GOPATHをそれ以外で設定した場合は、go mod tidy {package名}の部分や、DockerfileWORKDIRのパスを変えてあげる必要があります。

コマンドの説明は[WSL をインストールしよう! ] のシェルの簡単な使い方に書いてあります。

VSCodeで開く

VSCodeを起動します。
上部の ファイル → Open から、プロジェクトフォルダ(go/src/ToDolist-Server)を開きます。
material_vscode_open

次に、main.goを作成します。ここにgoの処理を書いていきます。今は何も書かずに、次に進みます。

Macの場合

ターミナル → New Terminalでターミナルを開き、
material_vscode_newterminal
下部にターミナルが開きます。ここに表示されているのがプロジェクトのルート(ディレクトリ)であり、今後ここで作業します。

Windowsの場合

VSCodeの拡張機能である、Remote Development をダウンロードします。

その後、ctrl + shift + pでコマンドパレットを開き、「Remote-WSL」と入力します。Remote-WSL: New Window からWSLを開きます。[Linux 用 Windows サブシステムで Visual Studio Code の使用を開始する |Microsoft]に画像付きで説明されています。

Go Modules

ターミナル(WSL)のプロジェクトのルートで、下のコマンドを打ちます。

$ go mod init  {package名}

今回はpackage名のところは空白にします。するとgo mod tidyを打ってくださいと出るので、打ちます。

$ go mod tidy

で、go.modファイルが作成されます。

7. Dockerで環境構築

Dockerとは

Dockerは、作業環境の差異を吸収するサービスです。

化学の実験を行うことを考えてみてください。化学の実験の際に同じ手順を踏んだとしても、室温が違ったり、日光のあたりが違ったりすれば当然結果は変わってくるでしょう。

しかし、全く同じ条件下の実験室で、完全に同じ手順を再現して実験すれば、同じ結果が得やすくなります。まさにこのことをDockerコンテナではやっているのです。

私のPCには便利なWeb開発アプリや独自のカスタマイズがいろいろ入っています。そのような私のPCと、今これを読んでいるあなたのPCの状態はおそらく違うでしょう。ですからその差異を吸収するためにDockerを使用します。

DockerはPCから隔離された、コンテナを作成します。イメージは輸送船に載っているアレです。同じ状態のコンテナの中で作業することで、同じ実行結果が得られるというわけです。

Dockerのダウンロード

Docker Desktopをダウンロードします。下のリンクからダウンロードします。

Docker Desktop - Docker

Docker拡張機能をダウンロード

VSCodeにdocker拡張機能をダウンロードします。

Docker環境の構築

Dockerコンテナは、最初の状態ではただの空の箱(コンテナ)があるのみです。

そこに、docker-compose.ymlで各コンテナの初期状態を指定し、必要ならその後に実行するコマンドをDockerfileに記述してあげます。

今回は記事の目的はロジックを書くことなので、Dockerfiledocker-compose.ymlの書き方の説明は省略します。とりあえずDockerを弄って遊んでみたい方には、マンガでわかるDockerがとても分かりやすいのでおすすめです。

プロジェクトのルートに Dockefile を作成し、以下をコピペします。

# ベースとなるDockerイメージ指定
FROM golang:1.17-alpine as server-build

# コンテナ内の作業ディレクトリを作成し、そこを指定
WORKDIR  /go/src/ToDoList-Server
# ローカルの現在のディレクトリから、コンテナの作業ディレクトリにコピー
COPY . .
# alpineパッケージのアップデート
RUN apk upgrade --update && \
    apk --no-cache add git

Ctrl+S (macならcmd+S)で保存します。このようになります。

次に、プロジェクトのルートに docker-compose.yml を作成し、以下をコピペします。

version: '3'

services:
  server:
    build:
      context: .
      dockerfile: ./Dockerfile
    container_name: server
    environment:
      TZ: Asia/Tokyo
      DB_USERNAME: root
      DB_PASSWORD: password
      DB_HOSTNAME: mysql
      DB_PORT: 3306
      DB_DBNAME: todolist
    tty: true
    volumes:
      - ./:/app/ToDoList
    ports:
      - "8000:8000"
    depends_on:
      - mysql

  mysql:
    image: mysql:latest
    container_name: mysql
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: password
      MYSQL_DATABASE: todolist
    command: mysqld --character-set-server=utf8mb4 --collation-server=utf8mb4_general_ci
    volumes:
      - ./mysql/data:/var/lib/mysql
    expose:
      - "3306"

  phpmyadmin:
    image: phpmyadmin/phpmyadmin
    container_name: phpmyadmin
    environment:
      PMA_ARBITRARY: 1
      PMA_HOST: mysql
      PMA_USER: root
      PMA_PASSWORD: password
    ports:
      - "4040:80"
    volumes:
      - ./phpmyadmin/sessions:/sessions

保存します。最終的にこのようになります。

今日はここまでです。お疲れ様でした!


明日は、@ebiさんの記事と ToDoリストを作ろう ! のDay-3 です。お楽しみに~ !

irori icon
この記事を書いた人
irori

グラフィック班とsysAd班(とサウンド班)で活動しています

この記事をシェア

このエントリーをはてなブックマークに追加
共有

関連する記事

2022年4月7日
traPグラフィック班の活動紹介
annin icon annin
2021年8月12日
CPCTFを支えたWebshell
mazrean icon mazrean
2021年5月19日
CPCTF2021を実現させたスコアサーバー
xxpoxx icon xxpoxx
2022年4月5日
アーキテクチャとディレクトリ構造
mazrean icon mazrean
2022年3月29日
課題・レポートの作成、何使う?【新歓ブログリレー2022 21日目】
aya_se icon aya_se
2021年5月16日
CPCTFを支えたインフラ
mazrean icon mazrean
記事一覧 タグ一覧 Google アナリティクスについて