Phase 1: 環境構築しよう

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

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

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

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

Forkした先のリポジトリを

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

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

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

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

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

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

どちらもpackage.jsonがありsrc/内にTypeScriptのコードがある(それぞれ独立した)Node.jsプロジェクトであるのが分かります。

Docker の導入

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

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

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

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

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

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

バックエンドサーバ (Web API, アプリケーション自体, 今回はTSで書かれている)
データベース (今回はMySQL)

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

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

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

Windows をお使いの方

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

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

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

Windows同様、Docker Desktop というものを入れます。

https://docs.docker.jp/desktop/install/mac-install.html が参考になるかもしれません。
Linux をお使いの方

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

フロントのテンプレートを動かすために

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

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

まあ、固めているのはファイルシステムでOS(カーネル)はホストのものそのものだという難しい話題は今回は省きます。 ↩
OSが丸ごと動くタイプのと言ったのは、JVMのような言語を動かすためのVMなどがあるからです。 ↩
いわゆる、クラウドネイティブってやつですね。 ↩
そういうわけで、多くのWebアプリケーションの開発現場で使われています。 ↩

Phase 1: 環境構築しよう

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

Docker の導入

フロントのテンプレートを動かすために

Footnotes