ひらめきの瞬間 | 無料研修

🎬 Story — Introduction

沖縄の那覇市。あなたは地元のカフェでアイスコーヒーを飲みながら、ノートPCの画面を見つめていた。

最近、地元の個人店がSNSだけに頼った集客に限界を感じているという話をよく聞く。予約管理もメモ帳、メニュー更新もバラバラ。「もっとシンプルに、地元のお店をオンラインで輝かせるサービスがあれば——」

そのとき、隣の席から声をかけられた。

Yuki: 「面白いこと考えてるみたいだね。何を作ろうとしてるの？」

あなた: 「えっと…沖縄のローカルビジネス向けのプラットフォームみたいなものを考えてて。でも、正直プログラミングはほとんどやったことなくて…」

Yuki: 「大丈夫。私はフリーランスのエンジニアで、ちょうど沖縄に移住してきたところ。メンターになるよ。」

あなた: 「本当ですか？でも、何から始めればいいのか全然…」

Yuki: 「まずはね、開発の”ホームベース”を作るところからだよ。ターミナルの使い方、最初のWebページ、そしてコードを安全に管理する方法。この3つが最初の一歩。」

こうして、あなたのスタートアップ 「ShimaLink（しまリンク）」 の物語が始まった。

沖縄の島々（しま）をテクノロジーでつなぐ——その夢に向かって、まずは開発環境の構築から。

ターミナル — 開発者の司令塔

Yukiがまず見せてくれたのは、真っ黒い画面——ターミナルだった。

「GUIで右クリックしてフォルダ作るのもいいけど、ターミナルなら一瞬でできるよ。開発者はターミナルを”司令塔”として使うんだ。」

ターミナルとは？

ターミナル（端末）は、コンピューターにテキストで命令を出すためのツールです。マウスの代わりにキーボードだけで操作できます。

Mac: 「ターミナル」アプリ（Cmd + Space → 「Terminal」で検索）
Windows: 「PowerShell」または「Windows Terminal」
Linux: 端末エミュレータ（Ctrl + Alt + T）

基本コマンド — 5つ覚えればOK

コマンド	意味	使用例
`pwd`	今いる場所を表示	`pwd` → `/Users/you`
`ls`	ファイル一覧を表示	`ls` → `Desktop Documents ...`
`cd`	ディレクトリ移動	`cd Desktop`
`mkdir`	新しいフォルダ作成	`mkdir shimalink`
`touch`	空ファイル作成	`touch index.html`

実際にやってみよう

ShimaLinkプロジェクトのフォルダを作ってみましょう：

# 今いる場所を確認
pwd

# デスクトップに移動
cd ~/Desktop

# プロジェクトフォルダを作成
mkdir shimalink

# フォルダに移動
cd shimalink

# 確認
pwd
# → /Users/you/Desktop/shimalink

パスの読み方

パス（path）とは、ファイルやフォルダの「住所」です。

絶対パス: /Users/you/Desktop/shimalink — ルート（/）から始まるフルアドレス
相対パス: Desktop/shimalink — 今いる場所からの道順
~: ホームディレクトリの省略記号（/Users/you と同じ）
..: 一つ上のディレクトリ（cd .. で戻れる）

Yuki: 「パスは住所みたいなもの。絶対パスは郵便番号付きのフル住所、相対パスは『隣の部屋』みたいな案内だよ。」

ポイント

ターミナルは怖くない。間違えても Ctrl + C でキャンセルできる
コマンドはすべて小文字で入力する
Tab キーでファイル名を自動補完できる（超便利！）
上キー（↑）で前のコマンドを再利用できる

HTML — ShimaLinkの最初のページ

Yuki: 「フォルダができたね。次は、ShimaLinkの”顔”を作ろう。Webページの基本言語、HTMLだよ。」

HTMLとは？

HTML（HyperText Markup Language）は、Webページの骨格を作る言語です。人間の体に例えると：

HTML = 骨格（構造）
CSS = 外見（見た目・デザイン）
JavaScript = 筋肉（動き・機能）

最小限のHTMLファイル

テキストエディタ（VS Codeがオススメ）で index.html を開いて、こう書きます：

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ShimaLink - 島をつなぐ</title>
</head>
<body>
  <h1>ShimaLink へようこそ</h1>
  <p>沖縄のローカルビジネスをテクノロジーでつなぐプラットフォーム</p>
</body>
</html>

タグの仕組み

HTMLはタグで情報を囲みます。ほとんどのタグは 開始タグ と 終了タグ のペアです：

<h1>これは見出し</h1>
<p>これは段落</p>

タグ	役割	例
`<h1>`〜`<h6>`	見出し（h1が最大）	`<h1>タイトル</h1>`
`<p>`	段落	`<p>文章です</p>`
`<a>`	リンク	`<a href="url">リンク</a>`
`<img>`	画像（終了タグなし）	`<img src="photo.jpg" alt="説明">`
`<ul>` / `<li>`	箇条書きリスト	`<ul><li>項目</li></ul>`
`<div>`	グループ化用の箱	`<div>中身</div>`

ShimaLinkのランディングページを作ろう

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ShimaLink - 島をつなぐ</title>
  <style>
    body {
      font-family: sans-serif;
      max-width: 800px;
      margin: 0 auto;
      padding: 2rem;
      background: #f0f9ff;
    }
    h1 { color: #0369a1; }
    .feature {
      background: white;
      padding: 1rem;
      margin: 1rem 0;
      border-radius: 8px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
  </style>
</head>
<body>
  <h1>🏝️ ShimaLink</h1>
  <p>沖縄のローカルビジネスをテクノロジーでつなぐ</p>

  <div class="feature">
    <h2>📋 かんたん予約管理</h2>
    <p>メモ帳での予約管理から卒業。オンラインで一元管理。</p>
  </div>

  <div class="feature">
    <h2>🌐 お店のWebページ</h2>
    <p>SNSだけでは届かないお客様に、あなたのお店を紹介。</p>
  </div>

  <div class="feature">
    <h2>📊 アクセス分析</h2>
    <p>どんな人が見に来ているか、シンプルなダッシュボードで確認。</p>
  </div>
</body>
</html>

ブラウザで確認する方法

ターミナルで以下を実行するだけ：

# macOS
open index.html

# Windows
start index.html

# Linux
xdg-open index.html

Yuki: 「おめでとう！これがShimaLinkの最初の一歩だよ。見た目はまだシンプルだけど、全てのWebサイトはここから始まるんだ。」

ポイント

HTMLはプログラミング言語ではなく、マークアップ言語（構造を定義する言語）
インデント（字下げ）を使うとコードが読みやすくなる
<style> タグの中にCSSを書いて見た目を変えられる
ブラウザの「開発者ツール」（F12）でHTMLの構造を確認できる

Git — コードの保険証券

Yuki: 「今のページを保存しておきたいよね？でも普通の”保存”だけじゃ足りない。バージョン管理を学ぼう。」

Gitとは？

Gitは、コードの変更履歴を管理するツールです。タイムマシンのように：

いつでも過去のバージョンに戻れる
誰が何を変えたか記録される
複数人で同時に作業しても混乱しない

Yuki: 「Gitは保険証券みたいなもの。何か壊しても、いつでも元に戻せるから安心して挑戦できるよ。」

Gitの3つのエリア

Gitには、ファイルが通過する3つのエリアがあります：

ワーキングディレクトリ → ステージングエリア → リポジトリ
   (作業場)              (出荷準備室)         (倉庫)

ワーキングディレクトリ: 普通にファイルを編集する場所
ステージングエリア: 「次のコミットに含める」と決めたファイルの待機場所
リポジトリ: 変更履歴が永久保存される場所

ShimaLinkをGitで管理しよう

# ShimaLinkフォルダにいることを確認
cd ~/Desktop/shimalink

# Gitリポジトリを初期化
git init

# ファイルの状態を確認
git status
# → Untracked files: index.html (まだ管理されていない)

# ファイルをステージングエリアに追加
git add index.html

# 状態を再確認
git status
# → Changes to be committed: index.html (コミット準備OK)

# 最初のコミット（保存ポイントを作成）
git commit -m "ShimaLinkの最初のランディングページを作成"

よく使うGitコマンド

コマンド	意味	場面
`git init`	リポジトリ初期化	プロジェクト開始時に1回
`git status`	状態確認	こまめに確認する癖をつけよう
`git add ファイル名`	ステージング	コミットする前に必ず
`git add .`	全ファイルをステージング	まとめて追加したい時
`git commit -m "メッセージ"`	コミット（保存）	区切りのいいところで
`git log`	履歴を見る	過去のコミットを確認
`git diff`	変更差分を表示	何を変えたか確認

コミットメッセージのコツ

良いコミットメッセージは「何をしたか」を短く書きます：

# 良い例
git commit -m "ランディングページに機能紹介セクションを追加"
git commit -m "予約フォームのバリデーションを修正"

# 悪い例
git commit -m "更新"
git commit -m "修正した"
git commit -m "あれこれ変更"

.gitignore — 管理しないファイルを指定

パスワードや一時ファイルなど、Gitに含めたくないものがあります：

# .gitignore ファイルを作成
touch .gitignore

# .gitignore の中身
node_modules/
.env
.DS_Store
*.log

Yuki: 「.gitignore は “ここには入れないで” っていうリスト。特に .env ファイル（パスワードなどを保存する場所）は絶対にGitに入れちゃダメだよ。これはセキュリティの基本中の基本。」

ポイント

Gitはほぼすべてのソフトウェア開発で使われる必須ツール
こまめにコミットする習慣をつけよう（1機能 = 1コミット）
git status を頻繁に打って、今の状態を把握しよう
パスワードや秘密情報は絶対にGitに含めない

Webの仕組み — データの旅路

あなた: 「ページはできたけど、これってどうやったらネットで見られるの？」

Yuki: 「いい質問だね。ShimaLinkをお客さんに届けるために、Webの裏側で何が起きてるか知っておこう。」

URLを入力すると何が起きる？

ブラウザで https://shimalink.com と入力した瞬間、裏ではこんなことが起きています：

1. 名前解決 (DNS)
   ブラウザ → DNSサーバー: 「shimalink.com のIPアドレスは？」
   DNSサーバー → ブラウザ: 「203.0.113.42 だよ」

2. 接続 (TCP/TLS)
   ブラウザ → サーバー: 「接続させて！」
   サーバー → ブラウザ: 「OK、暗号化通信(HTTPS)で始めよう」

3. リクエスト (HTTP)
   ブラウザ → サーバー: 「GET / トップページをください」

4. レスポンス
   サーバー → ブラウザ: 「はいどうぞ（HTMLファイル）」

5. 描画
   ブラウザ: HTMLを解析 → CSSを適用 → 画面に表示

DNS — インターネットの電話帳

DNS（Domain Name System）は、人間が読める名前（shimalink.com）を、コンピューターが理解できるIPアドレス（203.0.113.42）に変換するシステムです。

ドメイン名 = 人間用の住所（「沖縄県那覇市〇〇」）
IPアドレス = コンピューター用の住所（「26.2194° N, 127.6809° E」）

HTTP — Webの共通言語

HTTP（HyperText Transfer Protocol）は、ブラウザとサーバーが会話するためのルールです。

リクエスト（お願い）

GET /menu HTTP/1.1
Host: shimalink.com

レスポンス（返答）

HTTP/1.1 200 OK
Content-Type: text/html

<html>...(ページの中身)...</html>

よく見るステータスコード

コード	意味	覚え方
`200`	成功	OK！問題なし
`301`	引っ越しました	新しいURLへリダイレクト
`404`	見つからない	ページが存在しない
`500`	サーバーエラー	サーバー側の問題

Yuki: 「404エラーを見たことあるでしょ？あれは『そのページ、うちにはないよ』っていうサーバーからの返答なんだ。」

HTTP vs HTTPS — 「S」の重要性

HTTP	HTTPS
暗号化なし	TLS/SSLで暗号化
データが丸見え	データが暗号化される
`http://`	`https://`
危険	安全

Yuki: 「HTTPはハガキ、HTTPSは封筒に入った手紙みたいなもの。ShimaLinkではユーザーのデータを扱うから、絶対にHTTPSを使うよ。これもセキュリティの基本。」

クライアントとサーバー

Web開発では、よく「クライアント」と「サーバー」という言葉が出てきます：

クライアント（フロントエンド）: ユーザーのブラウザ側。HTMLを表示する
サーバー（バックエンド）: データを処理して返す裏方

ShimaLinkでは：

フロントエンド = お店のページ、予約フォーム（ユーザーが見る部分）
バックエンド = 予約データの保存、分析処理（裏で動く部分）

ポイント

Webは「リクエスト → レスポンス」の繰り返し
DNSはドメイン名をIPアドレスに変換する電話帳
HTTPSの「S」はセキュリティ。個人情報を扱うサイトでは必須
ステータスコードを覚えると、エラーの原因がすぐわかる

📖 Story — Conclusion

あなたはターミナルの画面を見つめる。ShimaLinkのプロジェクトフォルダが作られ、最初のHTMLページが完成し、Gitで記録された。

$ git log --oneline
a1b2c3d ShimaLinkの最初のランディングページを作成

たった1行のログ。でも、これがすべての始まりだ。

あなた: 「おお、いいじゃん！これ、もうネットに公開できるの？」

Yuki: 「まだまだ。今はローカル（自分のPCの中）で見えてるだけ。でも、大事なのは最初の一歩を踏み出したこと。」

あなた: 「ターミナルって、思ったより怖くなかったです。」

Yuki: 「でしょ？明日はもう一歩進もう。実は今朝、面白いメールが来てて——」

Yukiがスマホの画面を見せる。そこには地元のカフェオーナー・Mikaからの問い合わせがあった。

件名: お店のWebサイトを作りたいです 「はじめまして。友人から聞いて連絡しました。うちのカフェ “海風テラス” のWebサイトを作っていただけませんか？予約も受けられるようにしたいのですが…」

あなた: 「これ、ShimaLinkの最初のクライアントじゃない!?」

Yuki: 「チャンスだね。でも、クライアントのサイトを作るには、もっと知識が必要になるよ。次はCSSでデザインを整えることと、JavaScriptでページに動きをつけることを学ぼう。」

次のチャプター: Chapter 2: 最初のクライアント — Mikaのカフェ「海風テラス」のWebサイト制作が始まる。CSSでデザインし、JavaScriptで予約カレンダーを実装する…？

🧠 理解度チェック

Q1.ターミナルで今いるディレクトリを確認するコマンドはどれ？

💡 ShimaLinkのフォルダを作る前に、Yukiが最初に教えてくれたコマンドを思い出そう。

Q2.HTMLで最も大きな見出しを表すタグはどれ？

💡 ShimaLinkのランディングページで「ShimaLink へようこそ」と大きく表示したタグだよ。

Q3.Gitで変更をコミットする前に必要なステップは？

💡 Yukiが「保険証券にサインする前に、何を保証するか選ばないとね」と言っていたのを思い出そう。

Q4.HTTPステータスコード 404 の意味は？

💡 YukiがWebの仕組みを説明した時に出てきた、あの有名なエラーコードだ。

Q5.HTTPとHTTPSの違いで正しいのは？

💡 ShimaLinkではユーザーの個人情報を扱うから、HTTPSは必須だとYukiが強調していたね。

Q6..gitignore ファイルの役割は？

💡 Yukiが「.envファイルは絶対にGitに入れちゃダメ」と言っていた、あのセキュリティの話を覚えてる？

Q7.DNSの役割として正しいのは？

💡 ブラウザでURLを入力した時、最初に起きる「名前解決」のステップだね。

Q8.パス ~/Desktop/shimalink の ~ が意味するのは？

💡 ターミナルの基本で、Yukiが「住所の省略記号」と教えてくれたやつだ。

❓ よくある質問

HTMLファイルをブラウザで開いても何も表示されない

以下を確認してください： 1. **ファイル拡張子**が `.html` になっているか（`.txt` や拡張子なしではないか） 2. **`<html>`, `<body>` タグ**が正しく閉じているか 3. ブラウザのアドレスバーが `file:///...` で始まっているか確認 4. ファイルを**ダブルクリック**で開くか、ブラウザにドラッグ＆ドロップしてみる ```html  <!DOCTYPE html> <html> <head><title>テスト</title></head> <body> <h1>Hello!</h1> </body> </html> ```

ターミナルで「command not found」と表示される

このエラーは入力したコマンドが見つからないという意味です。 **よくある原因：** - コマンドの**スペルミス**（`lss` → `ls`、`pws` → `pwd`） - **大文字・小文字の間違い**（Macのターミナルでは区別される） - そのコマンドが**インストールされていない** ```bash # まず基本コマンドが動くか確認 pwd ls echo "Hello" ``` これらが動かない場合は、ターミナルアプリ自体に問題がある可能性があります。

mkdirでフォルダを作ったのに見つからない

**`pwd` で今いる場所を確認**してください。フォルダは「現在のディレクトリ」に作られます。 ```bash # 現在地を確認 pwd # → /Users/yourname # フォルダを作成 mkdir shimalink # 確認 ls # → shimalink が表示されるはず ``` **Finderで見たい場合：** ```bash open . ``` このコマンドで現在のディレクトリをFinderで開けます。

Gitで「not a git repository」エラーが出る

このエラーは、**現在のディレクトリがGitリポジトリではない**という意味です。 ```bash # 解決方法1: git init で初期化する git init # 解決方法2: 正しいディレクトリに移動する cd ~/shimalink git status ``` **チェックポイント：** - `git init` を実行したディレクトリにいるか？ - `.git` フォルダが存在するか？（`ls -la` で確認）

CSSを書いたのにスタイルが反映されない

以下の順番でチェックしてください： 1. **`<link>` タグ**がHTMLの `<head>` 内にあるか ```html <head> <link rel="stylesheet" href="style.css"> </head> ``` 2. **ファイル名**が正確に一致しているか（`Style.css` ≠ `style.css`） 3. **ファイルの場所**が同じフォルダにあるか 4. **ブラウザのキャッシュ**をクリアする（`Cmd + Shift + R`） 5. CSSの**構文エラー**がないか（閉じ中括弧 `}` の漏れなど）

HTTPリクエストとレスポンスの違いがわからない

レストランに例えると分かりやすいです： | 概念 | レストランの例 | |------|---------------| | **リクエスト** | 「カレーライスください」と注文 | | **レスポンス** | カレーライスが運ばれてくる | | **ステータスコード 200** | 注文通りの料理が来た | | **ステータスコード 404** | 「そのメニューはありません」 | | **ステータスコード 500** | 「厨房で火事です！」 | **ブラウザ**がリクエストを送り、**サーバー**がレスポンスを返す。この往復がWebの基本です。

git addとgit commitの違いは？

引っ越しの荷造りに例えると： | コマンド | 引っ越しの例 | |---------|-------------| | `git add` | 段ボールに荷物を入れる（ステージング） | | `git commit` | 段ボールにラベルを貼って封をする（記録） | ```bash # 1. ファイルをステージング（段ボールに入れる） git add index.html # 2. コミット（ラベルを貼って封をする） git commit -m "トップページを作成" ``` `git add` は**何を記録するか選ぶ**作業、`git commit` は**実際に記録する**作業です。

ターミナルの文字が文字化けしている

**エンコーディングの問題**です。 **Macの場合：** 1. ターミナル → 設定 → プロファイル → 詳細 2. 「テキストエンコーディング」を **UTF-8** に設定 **VS Code内蔵ターミナルの場合：** - 通常はUTF-8が標準。ファイル自体のエンコーディングを確認 ```bash # エンコーディングを確認 locale # LANG=ja_JP.UTF-8 と表示されればOK ```

VS Codeのインストール方法がわからない

**macOSの場合：** 1. [code.visualstudio.com](https://code.visualstudio.com) にアクセス 2. 「Download for Mac」をクリック 3. ダウンロードした `.zip` を展開 4. `Visual Studio Code.app` をアプリケーションフォルダにドラッグ **ターミナルから `code` コマンドを使えるようにする：** 1. VS Codeを開く 2. `Cmd + Shift + P` でコマンドパレットを開く 3. `shell command` と入力 4. 「Shell Command: Install 'code' command in PATH」を選択 ```bash # 確認 code --version ```

ポート番号って何？localhost:3000の意味は？

**マンションの部屋番号**のようなものです。 - `localhost` = 自分のパソコン（マンション自体） - `:3000` = 3000番の部屋（ポート番号） 1つのパソコンで**複数のサーバー**を同時に動かせます： | アドレス | 用途の例 | |---------|----------| | `localhost:3000` | Webアプリ | | `localhost:5432` | データベース | | `localhost:8080` | APIサーバー | 「ポートが既に使われています」エラーが出たら、その部屋番号で別のプログラムが動いています。