---
title: APIキー不要で学ぶ 開発環境構築（Docker・モック）
tags: 
author: [Yukiko](https://image.docswell.com/user/yukiko_it)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/V7N6M39V78.jpg?width=480
description: APIキー不要で学ぶ 開発環境構築（Docker・モック） by Yukiko
published: November 14, 26
canonical: https://image.docswell.com/s/yukiko_it/KX2J22-2026-11-14-200919
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/V7N6M39V78.jpg)

APIキー不要で学ぶ
開発環境構築（Docker・モック）
推し活ツール出版記念 HTML・CSS・JavaScript ツールを、模倣サーバーで動かし、試験まで行う
対象：開発を始める社員
／
所要時間：60分
／
費用：なし（APIの契約は不要）


# Page. 2

![Page Image](https://bcdn.docswell.com/page/YJ9LN92VE3.jpg)

本日のゴール
60分で、次の3つができるようになります
1．環境を作る
2．模倣で動かす
3．試験する
Docker の開発用イメージを作り、コン
テナを起動できる。Windows・WSL・
Ubuntu のどれでも手順が分かる。
模倣サーバーを起動し、画面から送っ
て結果を表示できる。APIキーは使わな
い。
単体試験と画面試験を実行し、合格を
確かめられる。失敗の案内も試験でき
る。
社内研修資料
| 2


# Page. 3

![Page Image](https://bcdn.docswell.com/page/GJ8XK9547D.jpg)

全体像：コードはホストに、実行はコンテナに
ブラウザは、画面とサーバーの両方へ、http で接続します
Docker コンテナ（web-dev）：Node.js ・ Python ・ Chromium
ブラウザ
画面の配信
模倣サーバー
Chrome / Edge
http://localhost:8000/…
を開く
python3 -m http.server 8000
HTML・CSS・JS を配る
node mock-ai-server.js
ポート 8789
APIキー不要
社内研修資料
| 3


# Page. 4

![Page Image](https://bcdn.docswell.com/page/LJL8ZWYVER.jpg)

用語の確認
初めての方に大事な言葉を、先に押さえます
用語
意味
例
コンテナ
必要な道具を入れた、実行用の箱
web-dev コンテナ
イメージ
コンテナを作る元の設計図
web-dev:1.0
模倣サーバー（モック）
本物と同じ形で答える練習用のサーバー
mock-ai-server.js
fetch
JavaScript からサーバーへ送る命令
await fetch(...)
社内研修資料
| 4


# Page. 5

![Page Image](https://bcdn.docswell.com/page/47M6V9NNJW.jpg)

環境の選び方
迷ったら、Windows で Docker Desktop と WSL 2 を使います
入口
手軽さ
本番に近さ
おすすめの人
Windows ＋ Docker Desktop
高い
中
まず動かしたい人（推奨）
WSL 2 の Ubuntu
中
高い
Linux の操作を覚えたい人
Ubuntu（ネイティブ）
中
高い
普段から Linux を使う人
注意：プロジェクトは WSL の中（/home の下）に置くと、速く安定します。
社内研修資料
| 5


# Page. 6

![Page Image](https://bcdn.docswell.com/page/P7RP2GD4J9.jpg)

初回の手順（Windows）
一度だけ行う準備です
1
2
3
4
WSL 2 を入れる
Docker Desktop を
入れる
WSL 連携を有効に
する
動作を確かめる
PowerShell（管理者）で
wsl --install -d Ubuntu
インストール時に「Use
WSL 2」を有効にする
Docker Desktop の設定で
Ubuntu を有効にする
社内研修資料
| 6
PowerShell で docker
version（Client と Server
）


# Page. 7

![Page Image](https://bcdn.docswell.com/page/PJX3DX1Z7X.jpg)

開発用コンテナを作り、起動する
プロジェクトのフォルダで実行します
① イメージを作る（初回だけ）
docker build -f docker/dev/Dockerfile -t web-dev:1.0 .
② コンテナを起動する（毎回）
docker run --rm -it --shm-size=1g -v "${PWD}:/work" \
-p 8000:8000 -p 8789:8789 web-dev:1.0 bash
-v：フォルダを見せる -p：ポートを開く --shm-size：ブラウザが落ちないための設定
社内研修資料
| 7


# Page. 8

![Page Image](https://bcdn.docswell.com/page/3JKYXW2V7D.jpg)

模倣サーバーを起動して確かめる
コンテナの中で、2つの端末を使います
端末1：模倣サーバー
node apps/memo-formatter/mock-ai-server.js
端末2：画面の配信
python3 -m http.server 8000 --bind 0.0.0.0
ブラウザで開く：http://localhost:8000/apps/memo-formatter/index.html
確かめ：送信すると、title に「テスト」が返る（応答が JSON で返る）
社内研修資料
| 8


# Page. 9

![Page Image](https://bcdn.docswell.com/page/LE3951YQE5.jpg)

ツールのファイル構成
役割を混ぜないことが、直しやすさの基本です
ファイル
役割
直すとき
index.html
画面の部品（入力欄・ボタン・結果）
文字や部品を変える
style.css
色と余白（色は変数にまとめる）
見た目を変える
app.js
ボタンの処理・送信・表示
動きを変える
config.js
サーバーの場所。APIキーは書かない
接続先を変える
mock-ai-server.js
模倣サーバー（決まったルールで整形）
応答の形を変える
社内研修資料
| 9


# Page. 10

![Page Image](https://bcdn.docswell.com/page/8EDGDX5WEG.jpg)

試験：2つの種類で確かめる
今回のツールでは、次の結果を確認しています
単体試験：6件
合格
関数1つを、速く、お金をかけずに確かめる。
実行：node --test apps/memo-formatter/test/parse.test.js
画面試験：9件
合格
ブラウザで実際に操作する。送信、分類、コピー、空入力、
404、接続不可を確かめる。
実行：python3 apps/memo-formatter/test/e2e_memo.py
注意：模倣での合格は、本物のサービスでの合格とは別です。本番の確認は、最後に少量で行います。
社内研修資料
| 10


# Page. 11

![Page Image](https://bcdn.docswell.com/page/V7P3XPGXJ8.jpg)

よくあるつまずき
困ったら、まずこの表を確認します
症状
原因
対処
docker が認識されない
Docker が未導入
Docker Desktop を入れて起動
Cannot connect to the Docker daemon
Docker Desktop が停止
起動して Running を待つ
画面が「接続できません」
模倣サーバーが未起動
node で模倣サーバーを起動
Address already in use
ポートが使用中
前の起動を止める。または PORT を変える
ブラウザが落ちる
共有メモリ不足
--shm-size=1g を付ける
社内研修資料
| 11


# Page. 12

![Page Image](https://bcdn.docswell.com/page/2JV4L2637Q.jpg)

安全のルール
社内の情報を守るための約束です
•
APIキーは config.js にだけ書く。コードや画面には書かない
•
config.js は共有しない。Git に入れない（.gitignore で除外）
•
練習は、必ず模倣サーバーで行う。本物の利用は、規程に従って承認を得てから
•
配るファイルに、APIキーや社内の情報が入っていないか確認する
•
音声や文書をサーバーへ送るときは、社内規程の範囲内で扱う
社内研修資料
| 12


# Page. 13

![Page Image](https://bcdn.docswell.com/page/5EG1XRNYJL.jpg)

まとめと次のステップ
次回は、演習で整形ルールを1つ足します
•
環境は Docker で揃える。コードはホストに置き、コンテナに
見せる
•
API は模倣で練習する。APIキーは使わない
•
失敗は種類ごとに案内する。試験で、案内も確かめる
•
試験は、単体と画面の2種類を使い分ける
社内研修資料
| 13
次のステップ
・演習1：整形ルールを1つ足す
・演習2：空入力の案内を変える
・Udemy 講座で、復習する