Phase 1: 環境構築しよう

今回の研修では、匿名掲示板Webアプリケーションを題材にしていきます。

テンプレートリポジトリのクローン

これに沿って実装を進めていきます。

テンプレートのリポジトリを自分のGitHubアカウント以下にForkしてください。

Forkした先のリポジトリを

$ git clone https://github.com/<あなたのGitHubアカウントのユーザID>/web-training-2026-template

($はシェルの入力部分ですよという意味で書いているので打たなくて大丈夫ですよ。今後も同様の表記が出てきたら$より後ろをターミナルに打ち込んで、最後にEnterで実行してください)

というようにcloneしてローカルに持ってきましょう。

cloneしたリポジトリを眺めてみると、

backend/ # バックエンドのテンプレート。
  main.go
  go.mod
  ...
frontend/ # バックエンドに対応したフロントエンドのテンプレート。検証に使える。
  src/
    main.tsx
    ...
  package.json
  ...

というようにbackend/, frontend/の主に2つのディレクトリが入っているのが分かります。

backend/はgo.modと.goのコードがあるGoのプロジェクト、 frontend/はpackage.jsonがありsrc/内にTypeScriptのコードがある、Bunで動かすプロジェクトです(それぞれ独立しています)。

backend/ をよく見てみると、 Dockerfile, docker-compose.yml, .dockerignoreなどとあり、Dockerというキーワードがあるようです。これは何でしょうか?

調べると出てくると思いますが、 Dockerというのは「コンテナ」と呼ばれる種類の仮想化技術の実装の1つです。

コンテナというのはLinuxのOSの機能で実現される隔離空間で、 任意のLinuxマシンの上で、LinuxをOSまるごと固めたものを持ってきて動かせるという技術です¹。

OSが丸ごと動くタイプの仮想マシン(VM)と概念的には近いです²。

OS丸ごと固めたものを持ってきて動かせるので、(一度Dockerなどのコンテナエンジンを用意できれば) 環境構築が楽で再現性がそれなりにある、という便利さから、 Webアプリケーションの開発現場や、ソフトウェアサービスをホストする際に³、近年多く使われている技術です。

なんで今回これが出てくるのかというと、バックエンドを動かすために必要な登場人物

の環境を、簡単に、そしてお手元のPC1台で動くようにしたいからです。そのために、複数の「サーバ」を仮想的に動かすのにコンテナ技術が丁度良いわけです⁴。

説明はこれまでにして、Dockerを入れていきましょう。

時間的にすべての環境でのインストール方法を書けなかったので、周りのTAに聞いてください。

Windows をお使いの方

Docker Desktop というものを入れます。コンテナはそもそもLinux上で動くものなので、 Docker Desktopが仮想的にLinuxを立ててそのうえでよしなにコンテナを立ててくれます。

Windows向け環境構築ガイドを参考にすると良いです。

NOTE: WSL も入れたほうが良いです。
macOS をお使いの方

OrbStack というものを入れます。 Docker Desktop の代わりになる、macOS向けの軽くて速いツールです。 Windowsの説明と同様に、仮想的にLinuxを立ててそのうえでよしなにコンテナを立ててくれます。

公式サイトからダウンロードしてインストールし、初回起動の選択画面では「Docker」を選べばOKです。
Linux をお使いの方

素晴らしいですね! あなたのPCには真のネイティブなDockerが入ります。

フロントのテンプレートを動かしたい場合、 Bun が必要です。

すでに他で入れている or フロントエンドコースの説明が参考になると思うので、割愛します。