# CoffeeScript 業務運用マニュアル

## 目次

**【基本操作】**
1. [システム概要](#1-システム概要)
2. [アクセス手順](#2-アクセス手順)
3. [トップページ（TOP画面）](#3-トップページtop画面)

**【業務フローに沿った機能】**
4. [【STEP1】ドキュメント参照機能（学習・リファレンス）](#4-step1ドキュメント参照機能学習リファレンス)
5. [【STEP2-3】Try CoffeeScript機能（コードの入力・実行）](#5-step2-3try-coffeescript機能コードの入力実行)
6. [【STEP3-4】コード例機能（サンプルの確認・実行）](#6-step3-4コード例機能サンプルの確認実行)
7. [【STEP4-5】テストスイート機能（動作検証）](#7-step4-5テストスイート機能動作検証)

**【サポート機能】**
8. [Annotated Source機能](#8-annotated-source機能)
9. [バージョン別ドキュメント機能](#9-バージョン別ドキュメント機能)
10. [外部リソース・統合機能](#10-外部リソース統合機能)

**【運用ガイド】**
11. [日常業務の流れ](#11-日常業務の流れ)
12. [よくある質問と対処法](#12-よくある質問と対処法)
13. [トラブルシューティング](#13-トラブルシューティング)

---

## 1. システム概要

### 1.1 CoffeeScriptドキュメントサイトとは

CoffeeScriptドキュメントサイトは、CoffeeScript言語を学習・使用する開発者のための公式ドキュメントポータルです。CoffeeScriptは「Unfancy JavaScript」をコンセプトに、より簡潔で読みやすい構文でJavaScriptを記述できるプログラミング言語です。

本サイトでは以下の機能を提供します：
- CoffeeScript言語リファレンスの参照
- ブラウザ上でのリアルタイムコード実行（Try CoffeeScript）
- インタラクティブなコード例の確認
- ソースコードの解説（Annotated Source）
- テストスイートによる動作検証

### 1.2 本システムで行う主要業務

本システムは、主に以下の業務を支援します：

| 業務カテゴリ | 具体的な業務内容 |
|------------|----------------|
| **学習** | CoffeeScript言語の構文・機能の学習、コード例の確認 |
| **リファレンス** | 言語仕様の参照、オプション・APIの確認 |
| **コード実行** | ブラウザ上でのCoffeeScriptコードの試行・実行 |
| **動作検証** | テストスイートによるコンパイラ動作の確認 |
| **開発支援** | Annotated Sourceによる内部実装の理解 |

### 1.3 業務フロー概要

本システムにおける業務は、以下の流れで進行します：

```
+---------------------------------------------------------------------+
|                        業務フロー                                    |
+---------------------------------------------------------------------+
|                                                                     |
|  【STEP 1】ドキュメントサイトにアクセスし、目的の情報を検索          |
|      |                                                              |
|  【STEP 2】言語リファレンスを参照し、構文・機能を確認                |
|      |                                                              |
|  【STEP 3】Try CoffeeScriptでコードを入力・実行して動作を確認        |
|      |                                                              |
|  【STEP 4】コード例を参照し、実際の使用方法を学習                    |
|      |                                                              |
|  【STEP 5】必要に応じてテストスイート・Annotated Sourceを確認        |
|                                                                     |
+---------------------------------------------------------------------+
```

**役割別の業務概要：**

| 役割 | 主な業務 |
|------|---------|
| **開発者（初学者）** | 言語リファレンスの参照、Try CoffeeScriptでの試行、コード例の学習 |
| **開発者（経験者）** | 特定機能のリファレンス参照、オプション確認、新機能の確認 |
| **コントリビューター** | Annotated Sourceの参照、テストスイートの実行、内部実装の理解 |

### 1.4 主な機能

| 機能 | 説明 | 業務フローでの位置 |
|------|------|------------------|
| ドキュメント参照 | 言語リファレンス・インストール方法・使用方法の参照 | STEP 1-2 |
| Try CoffeeScript | ブラウザ上でのリアルタイムコード実行 | STEP 3 |
| コード例 | インタラクティブなサンプルコードの確認・実行 | STEP 3-4 |
| Annotated Source | ソースコードの解説ドキュメント | STEP 5 |
| テストスイート | ブラウザベースの自動テスト実行 | STEP 5 |
| バージョン別ドキュメント | v1/v2それぞれのドキュメント参照 | 随時参照 |

### 1.5 ユーザー種別

システムには以下のユーザー種別があります：

| ユーザー種別 | 説明 |
|-------------|------|
| 一般ユーザー | CoffeeScriptを学習・使用するすべての開発者 |
| コントリビューター | CoffeeScriptの開発・改善に貢献する開発者 |

※本システムは認証なしで公開されており、すべてのユーザーが全機能にアクセス可能です。

### 1.6 対応ブラウザ

推奨ブラウザ：
- Google Chrome（最新版）
- Microsoft Edge（最新版）
- Safari（最新版）
- Firefox（最新版）

※ES Module対応のモダンブラウザを推奨します。レガシーブラウザ向けには自動フォールバックが提供されます。

---

## 2. アクセス手順

### 2.1 サイトへのアクセス方法

1. ブラウザを起動します
2. アドレスバーに `https://coffeescript.org/` を入力します
3. Enterキーを押すと、トップページが表示されます

### 2.2 ページ内ナビゲーション

トップページは**シングルページアプリケーション（SPA）形式**で構成されています。

**ナビゲーションバー**（画面上部固定）:
- 「Try CoffeeScript」：インタラクティブエディタを開く
- 「Language Reference」：言語リファレンスセクションへ移動
- 「Integrations」：外部ツール連携セクションへ移動
- 「Resources」：リソースセクションへ移動
- 「GitHub」：GitHubリポジトリへ移動（外部サイト）

**サイドバー**（画面左側）:
- 各セクションへのリンクが一覧表示されています
- クリックすると対応するセクションへスムーズスクロールします

### 2.3 バージョン別ドキュメントへのアクセス

- **v1ドキュメント**: サイドバーの「Version 1.x Documentation」をクリック
- **v2ドキュメント**: トップページがv2相当のドキュメントです

---

## 3. トップページ（TOP画面）

### 3.1 トップページの構成

トップページは以下のセクションで構成されています：

| セクション | 内容 |
|-----------|------|
| Introduction | CoffeeScriptの紹介 |
| Overview | 概要説明 |
| CoffeeScript 2 | バージョン2の特徴 |
| Installation | インストール方法 |
| Usage | 使用方法（CLI、Node.js API） |
| Language Reference | 言語仕様リファレンス |
| Type Annotations | 型注釈の説明 |
| Literate CoffeeScript | Markdown形式での記述方法 |
| Source Maps | ソースマップの説明 |
| Cake | ビルドツールの説明 |
| Scripts | ブラウザでの実行方法 |
| Integrations | 外部ツール連携 |
| Resources | 関連リソース |
| Unsupported | 非サポート機能 |
| Breaking Changes | 破壊的変更点 |
| Changelog | 変更履歴 |

### 3.2 ページ内の移動方法

1. **サイドバーを使用する方法**
   - 画面左側のサイドバーから目的のセクション名をクリックします
   - 対応するセクションへスムーズスクロールします

2. **URLハッシュを使用する方法**
   - URLの末尾に `#セクション名` を追加してアクセスします
   - 例: `https://coffeescript.org/#installation`

---

## 4. 【STEP1】ドキュメント参照機能（学習・リファレンス）

> **業務フローでの位置**: ドキュメントサイトにアクセスし、CoffeeScript言語の機能・使用方法を学習するステップです。

### 4.1 言語リファレンスを参照する

**業務シーン**: CoffeeScriptの特定の構文や機能について調べたい場合

**操作手順**:
1. トップページにアクセスします
2. サイドバーから「Language Reference」をクリックします
3. 目的の機能（Functions、Strings、Classes等）のサブセクションをクリックします
4. 説明とコード例を確認します

**Language Referenceの主なサブセクション**:

| サブセクション | 内容 |
|--------------|------|
| Functions | 関数定義（アロー関数、デフォルト引数） |
| Strings | 文字列（補間、複数行文字列） |
| Objects and Arrays | オブジェクトと配列（リテラル、分割代入） |
| Conditionals | 条件分岐（if/else、後置if） |
| Loops | ループ（for...in、for...of、内包表記） |
| Classes | クラス定義（継承、super） |
| Operators | 演算子（存在演算子、範囲演算子） |
| Async Functions | 非同期関数（async/await） |
| Modules | モジュール（import/export） |

### 4.2 インストール方法を確認する

**業務シーン**: CoffeeScriptを開発環境にインストールしたい場合

**操作手順**:
1. サイドバーから「Installation」をクリックします
2. インストールコマンドを確認します

**主なインストール方法**:

```shell
# プロジェクトローカルにインストール
npm install --save-dev coffeescript

# グローバルにインストール
npm install --global coffeescript
```

### 4.3 使用方法を確認する

**業務シーン**: CoffeeScriptコンパイラの使い方を調べたい場合

**操作手順**:
1. サイドバーから「Usage」をクリックします
2. CLI使用方法またはNode.js API使用方法を確認します

**主なCLIオプション**:

| オプション | 説明 |
|-----------|------|
| `-c, --compile` | JavaScriptにコンパイルして保存 |
| `-p, --print` | コンパイル結果を標準出力に表示 |
| `-o, --output [DIR]` | 出力ディレクトリを指定 |
| `-b, --bare` | 即時実行関数ラッパーなしでコンパイル |
| `-m, --map` | ソースマップを生成 |
| `-w, --watch` | ファイル変更を監視して自動コンパイル |

---

## 5. 【STEP2-3】Try CoffeeScript機能（コードの入力・実行）

> **業務フローでの位置**: ブラウザ上でCoffeeScriptコードを入力し、リアルタイムでコンパイル結果を確認・実行するステップです。

### 5.1 Try CoffeeScriptを開く

**業務シーン**: 環境構築なしにCoffeeScriptコードを試したい場合

**操作手順**:
1. ナビゲーションバーの「Try CoffeeScript」をクリックします
2. インタラクティブエディタパネルが表示されます

### 5.2 コードを入力・コンパイルする

**操作手順**:
1. 左側のテキストエリア（CoffeeScript入力欄）にCoffeeScriptコードを入力します
2. 入力に応じて、右側のテキストエリアにJavaScriptコンパイル結果がリアルタイムで表示されます

**コード例**:
```coffeescript
# CoffeeScript入力
square = (x) -> x * x
console.log square(5)
```

**コンパイル結果（JavaScript）**:
```javascript
var square;
square = function(x) {
  return x * x;
};
console.log(square(5));
```

### 5.3 コードを実行する

**操作手順**:
1. CoffeeScriptコードを入力します
2. 右下の「実行」ボタン（再生アイコン）をクリックします
3. 実行結果がブラウザのコンソールまたはalertで表示されます

**注意点**:
- `console.log` の出力はブラウザの開発者ツール（F12キー）のコンソールで確認できます
- `alert` を使用すると、ダイアログで結果を確認できます

### 5.4 Try CoffeeScriptを閉じる

**操作手順**:
1. パネル外の領域をクリックします
2. またはナビゲーションバーのロゴをクリックします
3. パネルが閉じ、トップページに戻ります

---

## 6. 【STEP3-4】コード例機能（サンプルの確認・実行）

> **業務フローでの位置**: ドキュメント内のインタラクティブなコード例を確認し、CoffeeScriptの実際の使用方法を学習するステップです。

### 6.1 コード例を確認する

**業務シーン**: 特定の構文や機能の使用例を確認したい場合

**操作手順**:
1. サイドバーから目的のセクション（例: Functions）をクリックします
2. セクション内のコード例エリアを確認します
3. 左側にCoffeeScriptコード、右側にJavaScriptコンパイル結果が表示されます

### 6.2 コード例を編集する

**操作手順**:
1. コード例のCoffeeScript側（左側）のテキストエリアをクリックします
2. コードを編集します
3. 編集に応じて、JavaScriptコンパイル結果がリアルタイムで更新されます

**活用例**:
- サンプルコードの値を変更して動作を確認する
- 条件を追加してコンパイル結果の違いを確認する
- エラーを発生させてエラーメッセージを確認する

### 6.3 コード例を実行する

**操作手順**:
1. コード例エリアの「Run」ボタンをクリックします
2. コンパイル済みJavaScriptコードが実行されます
3. 実行結果がコンソールまたは画面に表示されます

---

## 7. 【STEP4-5】テストスイート機能（動作検証）

> **業務フローでの位置**: CoffeeScriptコンパイラの動作をテストスイートで検証するステップです。

### 7.1 テストスイートにアクセスする

**業務シーン**: コンパイラの動作を検証したい、またはコントリビュートの前にテストを確認したい場合

**操作手順**:
1. サイドバーの「Browser-Based Tests」をクリックします
2. テストスイートページ（test.html）が表示されます

### 7.2 テストの実行と結果確認

**操作手順**:
1. テストスイートページにアクセスすると、自動的にテストが開始されます
2. 各テストケースの結果が画面に順次表示されます
3. テスト完了後、サマリーが表示されます

**結果の読み方**:

| 表示 | 意味 |
|------|------|
| 緑色の表示（good） | テスト成功 |
| 赤色の表示（bad） | テスト失敗（エラー詳細が表示される） |
| サマリー | 「passed X tests in Y.ZZ seconds」形式で結果を表示 |

### 7.3 v1/v2テストスイート

- **v1テストスイート**: v1ドキュメント内の「Browser-Based Tests」からアクセス
- **v2テストスイート**: メインサイトの「Browser-Based Tests」からアクセス

---

## 8. Annotated Source機能

### 8.1 Annotated Sourceとは

Annotated Sourceは、CoffeeScriptコンパイラのソースコードに解説を付けたドキュメントです。Doccoツールを使用して自動生成されており、左側にコメント（解説）、右側にソースコードが表示されます。

### 8.2 Annotated Sourceにアクセスする

**操作手順**:
1. サイドバーの「Annotated Source」セクションを確認します
2. 目的のファイル（例: CoffeeScript、Lexer、Nodes）をクリックします
3. 解説付きソースコードが表示されます

**主要なファイル**:

| ファイル | 内容 |
|---------|------|
| CoffeeScript | メインコンパイラモジュール |
| Lexer | 字句解析器 |
| Nodes | 構文木ノード定義 |
| Grammar | 文法定義 |
| Rewriter | トークン書き換え |
| Command | CLIコマンド処理 |
| Browser | ブラウザ向け拡張 |
| Cake | ビルドツール |

---

## 9. バージョン別ドキュメント機能

### 9.1 v1ドキュメントにアクセスする

**業務シーン**: CoffeeScript 1.x系の仕様を確認したい場合

**操作手順**:
1. サイドバーの「Version 1.x Documentation」をクリックします
2. v1ドキュメントページが表示されます

### 9.2 v2（現行版）ドキュメント

メインサイト（coffeescript.org）がv2相当のドキュメントです。CoffeeScript 2の新機能（ES6+出力、async/await対応等）が含まれています。

### 9.3 CoffeeScript 2発表ページ

**操作手順**:
1. v2ドキュメント内から「Announcing CoffeeScript 2」にアクセスします
2. CoffeeScript 2の新機能・変更点の詳細を確認できます

---

## 10. 外部リソース・統合機能

### 10.1 GitHubリポジトリ

**操作手順**:
1. ナビゲーションバーの「GitHub」をクリックします
2. CoffeeScriptのGitHubリポジトリが新しいタブで開きます

**リポジトリURL**: https://github.com/jashkenas/coffeescript

### 10.2 外部ツール連携（Integrations）

**操作手順**:
1. サイドバーから「Integrations」をクリックします
2. エディタプラグイン、ビルドツール連携などの情報を確認します

### 10.3 リソース（Resources）

**操作手順**:
1. サイドバーから「Resources」をクリックします
2. 書籍、チュートリアル、コミュニティリソースなどの情報を確認します

---

## 11. 日常業務の流れ

本セクションでは、業務フローに沿った日常業務の流れを説明します。

```
業務フロー概要（再掲）
======================================================================
【STEP 1】ドキュメントサイトにアクセスし、目的の情報を検索 → 4章参照
    |
【STEP 2】言語リファレンスを参照し、構文・機能を確認 → 4章参照
    |
【STEP 3】Try CoffeeScriptでコードを入力・実行して動作を確認 → 5章参照
    |
【STEP 4】コード例を参照し、実際の使用方法を学習 → 6章参照
    |
【STEP 5】必要に応じてテストスイート・Annotated Sourceを確認 → 7-8章参照
======================================================================
```

### 11.1 【開発者】STEP1-2: ドキュメント参照

CoffeeScriptの機能を調べる際の基本的な流れです。

**操作手順**:
1. https://coffeescript.org/ にアクセスします
2. サイドバーから目的のセクションを探します
3. セクションをクリックして内容を確認します
4. コード例があれば、CoffeeScriptとJavaScriptの対応を確認します

### 11.2 【開発者】STEP3: コードの試行

新しい構文や機能を試す際の流れです。

**操作手順**:
1. ナビゲーションバーの「Try CoffeeScript」をクリックします
2. 試したいCoffeeScriptコードを入力します
3. 右側でJavaScriptコンパイル結果を確認します
4. 「実行」ボタンで動作を確認します
5. 必要に応じてコードを修正して再確認します

### 11.3 【開発者】STEP4: コード例の学習

特定の機能の使い方を学ぶ際の流れです。

**操作手順**:
1. サイドバーから目的の機能（例: Classes）をクリックします
2. コード例を確認します
3. コード例を編集して、挙動の違いを確認します
4. 「Run」ボタンで実際の動作を確認します

### 11.4 【コントリビューター】STEP5: 動作検証・内部実装確認

CoffeeScriptの開発に貢献する際の流れです。

**操作手順**:
1. テストスイートで現在の動作を確認します
2. Annotated Sourceで内部実装を確認します
3. GitHubリポジトリでIssue/PRを確認します

---

## 12. よくある質問と対処法

### 12.1 ドキュメント参照に関するQ&A

**Q: 特定の機能を検索する方法はありますか？**

A: 以下の方法で検索できます：
- ブラウザの検索機能（Ctrl+F / Cmd+F）を使用する
- サイドバーから該当するセクションを探す
- URLハッシュを直接指定する（例: `#classes`）

**Q: v1とv2の違いはどこで確認できますか？**

A: 以下のセクションで確認できます：
- 「CoffeeScript 2」セクション
- 「Breaking Changes」セクション
- v2ドキュメントの「Announcing CoffeeScript 2」ページ

### 12.2 Try CoffeeScriptに関するQ&A

**Q: 実行結果が表示されません**

A: 以下を確認してください：
1. `console.log` を使用している場合は、ブラウザの開発者ツール（F12）のコンソールを確認してください
2. `alert` を使用すると、ダイアログで結果を確認できます
3. 構文エラーがある場合は、JavaScriptエリアにエラーメッセージが表示されます

**Q: コンパイルエラーが発生しました**

A: エラーメッセージを確認し、以下を確認してください：
- インデントが正しいか（CoffeeScriptはインデントで構造を判断します）
- 括弧やブラケットの対応が正しいか
- 予約語を変数名に使用していないか

### 12.3 テストスイートに関するQ&A

**Q: テストが失敗しました**

A: 以下を確認してください：
1. ブラウザのバージョンが最新か確認してください
2. 開発者ツールのコンソールで詳細なエラー情報を確認してください
3. 既知の問題の場合、GitHubのIssueを確認してください

---

## 13. トラブルシューティング

### 13.1 エラーメッセージと対処法

| エラーメッセージ | 原因 | 対処法 |
|----------------|------|--------|
| SyntaxError: unexpected ... | CoffeeScript構文エラー | インデント、括弧、予約語を確認 |
| Unexpected TERMINATOR | 不正な行終端 | 前の行の構文を確認 |
| Unexpected INDENT | 不正なインデント | インデントレベルを確認 |
| undefined is not a function | 実行時エラー | 関数定義や変数宣言を確認 |

### 13.2 よくあるトラブルと解決方法

**トラブル1: コンパイル結果が更新されない**

**解決方法**:
1. ブラウザのキャッシュをクリアしてください（Ctrl+Shift+R / Cmd+Shift+R）
2. ページをリロードしてください
3. 別のブラウザで試してください

**トラブル2: Try CoffeeScriptが開かない**

**解決方法**:
1. JavaScriptが有効になっているか確認してください
2. ブラウザのポップアップブロックを無効にしてください
3. URLに直接 `#try` を追加してアクセスしてください

**トラブル3: テストスイートが停止した**

**解決方法**:
1. ページをリロードしてください
2. ブラウザの開発者ツールでエラーを確認してください
3. ブラウザのメモリ使用量を確認してください

### 13.3 サポートへの連絡方法

問題が解決しない場合は、以下の方法でサポートを受けることができます：

1. **GitHub Issues**: https://github.com/jashkenas/coffeescript/issues
   - バグ報告や機能リクエストを投稿できます
   - 既存のIssueを検索して同様の問題がないか確認してください

2. **GitHub Discussions**: GitHubリポジトリのDiscussionsタブ
   - 質問や議論を行うことができます

3. **Changelog**: https://coffeescript.org/#changelog
   - 最新の変更点や修正を確認できます

---

## 改訂履歴

| 版数 | 改訂日 | 改訂内容 |
|-----|--------|---------|
| 1.0 | 2026-02-19 | 初版作成 |

---

*本マニュアルは、CoffeeScriptドキュメントサイトのエンドユーザー向け業務運用マニュアルです。*
*システムの更新により、画面や操作方法が変更される場合があります。*
