JUCE ハンズオン 2024 ～JUCEをはじめよう～

本記事は[JUCE Advent Calendar 2024](https://qiita.com/advent-calendar/2024/juce) の12月1日向けに投稿した記事です。

# はじめに

本記事は、C++言語向けマルチメディア系アプリケーションフレームワーク『JUCE』の入門者向けの記事になります。記事全体を通して、以下の内容について触れています。

- JUCEの紹介、特に技術的特徴やその背景について
- JUCEの開発環境のセットアップ手順について
- JUCEでプロジェクトを新規作成する手順について

本記事がJUCE入門者のサポートに役立つと幸いです。

本記事は過去に投稿した[JUCEハンズオン2023 〜JUCEをはじめよう〜](https://qiita.com/COx2/items/206d47529b0f0487cf6f)の改訂版になります。
過去の記事をベースに、2024年時点での情報を記載しております。
そのため、過去の記事と内容の多くが重複することをご了承ください。

# 本記事で対象とするバージョン

+ JUCE 8.0.4
+ Visual Studio 2022
+ Xcode 15.1
+ CMake 3.25以上
+ Git 2.3以上

# JUCEについて

JUCE (Jules' Utility Class Extensions) は、C++言語によるマルチメディア系アプリケーションの開発を支援するフレームワークです。
JUCEフレームワークは次の要素によって構成されます。

+ JUCEライブラリ：C++言語で記述されたAPIを提供するクロスプラットフォーム設計のライブラリ
+ Projucer：JUCE専用のプロジェクトジェネレータ、ソースファイルやビルド設定等を管理し、統合開発環境 (IDE = VisualStudio, Xcode）やビルドシステム（Makefile) 向けにプロジェクトファイルを出力する
+ CMakeモジュール：JUCEライブラリをCMakeプロジェクトにインテグレーションするためのモジュールであり、Projucerと同等の機能（リソースのバイナリ化等）も提供する

上記ライブラリ、プロジェクトジェネレータを利用してプロジェクトを構築し、各プラットフォーム用のC++開発環境でビルドすることで、ワンソースからWindows, macOS, Linux, iOS, Android で動作するアプリケーションを作成することができます。
[公式サイト](https://juce.com/)

## JUCEの特徴

JUCEの最大の特徴として、オーディオプラグインを開発するためのテンプレートが充実していることが挙げられます。VST3/AudioUnit/AAX/LV2/ARAプラグインといった、DTMユーザーにはお馴染みとなっているプラグインフォーマットをワンソースから開発することが挙げられます。効率良くオーディオプラグインを開発できることから、日本国内外で多くの採用事例があります。

[公式サイトによる採用事例の紹介](https://juce.com/discover/made-with-juce)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93566/3fa47fc9-8a6e-5960-fd43-302331dbee7e.png)

## 2024年のトピック: JUCE 8 がリリースされました

2024年6月に JUCE 8 がリリースされました。JUCE 8 は JUCE 7 から2年ぶりのメジャーアップデートとなります。
今回のアップデート内容に含まれるトピック事項は、主にGUI周辺に関するものが多く含まれます。

https://juce.com/releases/whats-new/

- WebViewベースのGUI実装を公式サポート
- Direct2Dレンダラを新規追加
- Unicode文字のサポートの強化
- フォントレンダリング・バックエンドの刷新

特にコミュニティの反響が大きい「WebView UI」については本記事の公開前から詳しく解説をしている記事があります。
[外部サイト：【最新版 / 入門】JUCEを使ってVSTプラグインを作ろう！！！！【WebView UI】](https://trap.jp/post/2307/)
特に、WebView UI をきっかけにJUCEに入門する方は上記の記事を参考にすると目的が達成できるかもしれません。

## JUCEライブラリ と Projucer

JUCEフレームワークは、各種機能のC++ APIを提供する『JUCEライブラリ』と、各種プラットフォーム向けのプロジェクトを出力するジェネレータ『Projucer』によって構成されます。
『JUCEライブラリ』には機能別に『モジュール』という単位で構成が分かれており、『Projucer』はプロジェクトに必要なモジュールを取り込んで、IDE用のプロジェクトファイルやビルドスクリプトに紐付ける作業を担当します。

![JUCE_Projucer.png](https://qiita-image-store.s3.amazonaws.com/0/93566/5c54d93e-2345-7ac9-6041-6b82d4731fd9.png)

## JUCEライブラリ と CMake

2020年にリリースされたJUCE 6から、ビルドマネジメントツール『CMake』のサポートが追加されました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93566/8d99a4ab-1834-b508-cd44-81feec04ad1d.png)

『CMake』とは、主にC言語、C++言語などC系言語のビルドにおけるクロスプラットフォームビルド環境を提供するビルドマネジメントツールの一つです。様々なプロジェクトに採用されており、大きなエコシステムを形成しています。

https://cmake.org/

JUCEがCMakeをサポートすることで以下のメリットを得ることができるようになりました。

+ ビルド設定をCMake用のフォーマットで記述することができる
+ CMakeのエコシステムの恩恵を受けることができる
+ CMakeが独自に提供する機能を利用することができる
+ CMakeに対応した他のライブラリとのインテグレーションが容易になる
+ Projucerの使い方を習得する必要がなくなる

![JUCE_CMake.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93566/401bcab6-d787-d93f-955d-61d641eb005c.png)


## JUCEモジュールについて

JUCEライブラリは、機能毎のAPIがモジュールという単位で分離されて提供されます。例えば、オーディオデバイスとの接続を処理するモジュール、オーディオプラグインフォーマットの定義を持つモジュール、オーディオファイルを読み込む機能を持つモジュール、OSC（Open Sound Control）の機能を抽象化したモジュールなどが提供されます。開発者は、JUCEライブラリから必要なモジュールだけをリンクするように制御することができ、実行環境のOSのAPIやその他ライブラリとの依存関係を制御することができます。

■ JUCEライブラリに付属するモジュール一覧(JUCE 8.0.4時点)

|モジュール名|提供する機能やクラス群|
|:------|:-----------------------|
| juce_analytics | アナリティクス機構（ユーザーの利用情報を収集する機能）を提供するクラス群 |
| juce_animation | 描画コンポーネントにアニメーション適用を実装するクラス群 |
| juce_audio_basics | オーディオバッファの操作、MIDIメッセージ処理、シンセサイザーなどのクラス群 |
| juce_audio_devices | オーディオインターフェースおよびMIDIインターフェースの制御や、再生と録音をするクラス群 |
| juce_audio_formats | 	さまざまなオーディオファイル形式を読み込み・書き込みするクラス群 |
| juce_audio_plugin_client | VST、VST3、AudioUnit、AAX、LV2、ARAプラグインを構築するためのクラス群 |
| juce_audio_processors | VST、AU、または内部で生成されたオーディオプロセッサのロードおよび再生をするクラス群 |
| juce_audio_utils | オーディオ関連のGUIおよびその他のタスク（MIDI over BLE含む）を処理するクラス群 |
| juce_box2d | 	Box2D物理エンジンといくつかのユーティリティクラス群 |
| juce_core	 | JUCEモジュールの基盤となる基本API(文字列、メモリ操作)を提供するクラス群 |
| juce_cryptography | RSA、Blowfish、MD5、SHAなどの暗号化処理の機能を提供するクラス群 |
| juce_data_structures | variantなデータ型を提供する、アンドゥ/リドゥなどを管理する、スマートなデータ構造を操作するクラス群 |
| juce_dsp | オーディオバッファ操作、デジタルオーディオ処理、フィルタリング、オーバーサンプリング、数学関数などを高速に実行するクラス群 |
| juce_events | アプリケーションのメインイベントループを実行し、メッセージ、タイマーなどを送受信するためのクラス群 |
| juce_graphics	 | 2Dベクトルグラフィックス、画像読み込み/保存、フォント処理などをするためのクラス群 |
| juce_gui_basics | 基本的なユーザーインターフェイスを作成するコンポーネントおよび関連するクラス群 |
| juce_gui_extra | 特定用途に特化したユーザーインターフェースの実装を提供するクラス群 |
| juce_javascript | Javascriptインタープリタを提供するクラス群 |
| juce_midi_ci | MIDI 2.0規格に含まれるMIDI Capability Inquiry (MIDI-CI)規格を実装するためのクラス群 |
| juce_opengl | JUCEウィンドウでOpenGLをレンダリングするためのクラス群 |
| juce_osc	 | OSC(Open Sound Control)を実装したクラス群 |
| juce_product_unlocking | プログラムに認証機構を実装するためのクラス群 |
| juce_video	 | ビデオ再生と、カメラ入力をキャプチャするためのクラス群 |

なお、JUCEモジュールのフォーマット仕様は公開されているので、ユーザーが独自のJUCEモジュール（3rd party JUCE module）を構築することができます。

## ライセンスについて

ライセンスの詳細は公式サイトのEULAをご参照ください。[公式: JUCE 8 EULA](https://juce.com/juce-8-license/)
JUCEには複数のライセンスオプションが用意されており、ユーザーの事情に応じて選択することができます。

■ライセンスオプション一覧

+ Starter
+ Indie
+ Pro
+ AGPLv3

無料で利用することができるStarterライセンスとAGPLライセンスが設定されています。一定規模以上の事業者かつ配布・商流の形態に応じて、有料のIndieライセンスまたはProライセンスを取得する必要があります。

ライセンスの選択は法的な判断を要しますが、「製品をリリースする予定が無く、JUCEを本格的に使うか否かは試用してから判断したい」という状況であれば、Starterライセンスを選択して学習目的の範囲内で使用することが提案できます。

なお、ライセンス条件は随時改定されることが有ります。使用する際には最新のライセンス条件を確認するようにしましょう。

| ライセンスタイプ| Starter | Indie | Pro | AGPLv3 |
|:------|:------|:------|:------|:------|
|年間の収入または資本金額の限度   | $20,000 | $300,000  | - |-|
|サブスクリプション最低契約期間   | -    | 1ヶ月  | 12ヶ月 |-|
|サブスクリプションライセンス料金 | -    | $40（1名1月当たり） | $175（1名1月当たり） | -|
|永続ライセンス料金              | -    | $800 | $3,500 | -| 

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93566/c9641dfa-e9a0-28ce-d0ed-5f2da699cd30.png)


## JUCEライブラリはオープンソース

JUCE は GitHub 上のリポジトリで開発が行われており、ソースコードも開示されています。Issue やPull request を送ることで不具合報告や機能改善の要望、修正の提案などのプロジェクトに貢献することができます。また、develop ブランチをチェックアウトすることで、将来リリース予定の機能を先行して試すこともできます。

[Gitリポジトリ: juce-framework/JUCE](https://github.com/juce-framework/JUCE)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93566/9cb63e26-f021-95c1-47bd-4b2ea290adf1.png)

---

# JUCEをはじめよう[Projucer版]

ここでは、パッケージに同梱されたサンプルプログラムである **JUCE DemoRunner** を、Projucerを使用する場合にビルドする手順について解説します。
**JUCE DemoRunner** をビルドできることを確認することで、JUCEフレームワークがサポートする基本的なJUCEアプリケーションの開発環境が整っていることを確認することができます。

## 開発環境をセットアップする

JUCEを使用したC++プロジェクトを実行可能なプログラムにコンパイルするには、C++言語の開発環境（コンパイラ、ビルドツール等）をセットアップする必要があります。

+ Windows
    + Visual Studio 2022をインストールする
        + IDE本体をインストールする
        + C++開発環境を追加インストールする
+ macOS
    + Xcodeをインストールする
        + AppStoreまたはDeveloper Programから入手してください

参考：[JUCEが正式にサポートする開発環境](https://github.com/juce-framework/JUCE?tab=readme-ov-file#minimum-system-requirements)
- Building JUCE Projects
  - C++ Standard: 17
  - macOS/iOS: Xcode 12.4 (Intel macOS 10.15.4, Apple Silicon macOS 11.0)
  - Windows: Visual Studio 2019 (Windows 10)
  - Linux: g++ 7.0 or Clang 6.0 (for a full list of dependencies, see here).
  - Android: Android Studio (NDK 26) on Windows, macOS or Linux
- Deployment Targets
  - macOS: macOS 10.11 (x86_64, Arm64)
  - Windows: Windows 10 (x86_64, x86, Arm64, Arm64EC)
  - Linux: Mainstream Linux distributions (x86_64, Arm64/aarch64, (32 bit Arm systems like armv7 should work but are not regularly tested))
  - iOS: iOS 12 (Arm64, Arm64e, x86_64 (Simulator))
  - Android: Android 5 - Lollipop (API Level 21) (arm64-v8a, armeabi-v7a, x86_64, x86)

## JUCEを入手する

JUCEを入手するには、大きく2つの方法があります。

+ 公式サイトからダウンロード
+ GitHub上のGitリポジトリをクローン

**上記のうち、入門者には『公式サイトからダウンロード』する方法をお勧めします。**
『GitHub上のGitリポジトリをクローン』する方法では、Projucerを自身の開発環境でセルフビルドする手順が追加される点にご注意ください。

### A. 公式サイトからダウンロードする

本記事ではStarterライセンスを選択した場合のダウンロード手順について案内します。
読者がStarter以外のライセンスを選択する場合は、選択したライセンスに対応するダウンロード手順から入手してください。

#### JUCE公式サイトのダウンロードページにアクセスする

URL: https://www.juce.com/get-juce

#### サイト内の[Download]をクリックします

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93566/8257c0e1-d70f-49e2-a86f-0b42d93b66d8.png)

#### プラットフォームごとに用意されたリンクからダウンロードします

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93566/3b3392f8-f031-ec4f-1de4-c48de3c4ecb6.png)

#### プラットフォーム用にビルド済みのProjucerが同梱されています

ダウンロードしたアーカイブファイルを展開すると、以下の画像のようにProjucer実行ファイルが同梱されています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93566/f89c541e-aa3b-8a23-02e5-dce12ff65015.png)

---

### B. GitHub上のGitリポジトリをクローンする

#### Gitリポジトリをローカル環境にクローンする

```bash

$ git clone https://github.com/juce-framework/JUCE.git

```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93566/8a39a7d4-a0e1-7553-ddd9-6680989775c6.png)


#### Projucerをセルフビルドする

以下のディレクトリに置かれたIDE向けプロジェクトから Projucer をセルフビルドしてください。
ディレクトリ: `JUCE/extras/Projucer/Builds/(プラットフォームまたはIDE名)`

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93566/42380ea6-486d-85de-3011-6fc79cde47b5.png)

---

ここからは、JUCEフレームワークによるアプリケーション開発環境を準備する手順になります。

## Projucerをセットアップする

ここでは、Projucerからアプリケーションプロジェクトを作成するまでのセットアップの手順について示します。

### Projucerを起動する

Projucerの初回起動時には、プロジェクト制作画面が表示されます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93566/b67fde29-0afd-6adf-290d-d04c960fde5f.png)


### JUCEライブラリのPathを設定する

以下の作業を実施して、ProjucerからJUCEモジュールのパスを認識できるようにします。

1. Projucerを起動する
2. [File]→[Global Paths...]メニューをクリックして『Global paths』ダイアログを開く
3. [Path to JUCE]欄にJUCEのルートディレクトリのパスを入力する（入力欄横の[...]をクリックするとファイルダイアログが開きます）
    - 公式サイトからDLした場合はアーカイブの解凍先ディレクトリ
    - git cloneした場合はリポジトリのルートディレクトリ
4. [JUCE Modules]欄にJUCEディレクトリの直下に置かれた『modules』ディレクトリのパスを入力する

■ Projucerの[File]メニューから[Global Paths...]を選択する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93566/bb50896a-4524-956c-972d-cd9fbe348fa8.png)

↓

■ JUCEのルートディレクトリとmodulesディレクトリを設定する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93566/89d74e0e-6127-2fcd-7b6b-077b95a70aeb.png)


## JUCE DemoRunnerのビルドと実行

JUCEライブラリのパッケージに含まれているデモアプリケーション『JUCE DemoRunner』をビルドすることができれば、JUCEとProjucerのセットアップは完了です。

- Projucerのメニューから[File]→[Open Example]→[Launch Demo Runner]を選択する
    - 公式サイトからDLした場合、ビルド済みのDemoRunnerバイナリが同梱されているため、ビルドをスキップしてDemoRunnerが起動します
    - git cloneした場合、DemoRunnerを新規にビルドする必要があります。この場合、Projucerのダイアログが表示されて「IDEでプロジェクトを開くか否か」を尋ねられます。それに従ってプロジェクトを開きビルドを実行します
    - JUCEライブラリへのパス設定とDemoRunnerの実行ファイルのビルドが完了している場合に上記操作によってDemoRunnerが起動します

■ Projucerのメニューから[Launch Demo Runner]を選択する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93566/bcc57e54-d9ad-e9ae-d7a2-a02b15dd996f.png)


↓ ビルド実行後に起動 or ビルド不要の場合はそのまま起動

■ JUCE DemoRunner

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93566/c40447bc-051e-fafd-ad33-761cb1b60b5c.png)

DemoRunnerのブラウジングメニューから様々なデモプログラムを起動してみましょう。
各デモプログラムからJUCEライブラリのリファレンス実装を確認することができます。

■ Audio > AudioWorkgroupDemo
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93566/d8eac96a-c372-f08c-e82a-99f50b98aa6d.png)

■ GUI > GraphicsDemo
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93566/681eb7c1-a4de-eae4-a8c2-56c6a19fef57.png)

---

# JUCEをはじめよう[CMake版]

ここでは、CMakeを使用してJUCE DemoRunnerをビルドするまでの手順について示します。
本記事では、CMake自体の使い方やAPI仕様についての詳細は解説を行わない点についてご了承ください。

## 開発環境のセットアップ

JUCEを使用したC++プロジェクトを実行可能なプログラムにコンパイルするには、C++言語の開発環境（コンパイラ、ビルドツール等）をセットアップする必要があります。

+ Windows
    + Visual Studio 2022をインストールする
        + IDE本体をインストールする
        + C++開発環境を追加インストールする
    + CMakeをインストールする
        + ダウンロードページから入手してインストールする [公式サイト](https://cmake.org/download/)
        + CMakeのパスを環境変数に追加する
+ macOS
    + Xcodeをインストールする
        + AppStoreまたはDeveloper Programから入手してください
    + CMakeをインストールする
        + Homebrewまたはダウンロードページから入手してインストールする [公式サイト](https://cmake.org/download/)
        + CMakeのパスを環境変数に追加する

## JUCEを入手する

この項目はProjucer版の説明と同じです。

+ 公式サイトからダウンロードする
+ GitHub上のGitリポジトリをクローンする

## JUCE DemoRunnerのビルドと実行

### Windows - Visual Studio 2022 の場合

コマンドプロンプトから以下のコマンドを実行してJUCE DemoRunnerをビルドします

```bat
REM JUCEディレクトリに移動する
cd (JUCEディレクトリの置かれた場所)/JUCE

REM CMakeのconfigureとgenerateを実行する
REM この時カレントディレクトリ直下に"build"ディレクトリを作成する
cmake -G "Visual Studio 17 2022" -B build -DJUCE_BUILD_EXAMPLES=ON

REM "build"ディレクトリ内に生成されたDemoRunnerプロジェクトのビルドを実行する
cmake --build build --target DemoRunner
```

`JUCE/build/examples/DemoRunner/DemoRunner_artefacts/Debug`ディレクトリに実行ファイル`DemoRunner.exe`が生成されます。この実行ファイルを起動すると、JUCE DemoRunnerが立ち上がります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93566/b158a933-4424-acd3-a4db-d19dc11d082c.png)


### macOS - Xcode の場合

ターミナルから以下のコマンドを実行してJUCE DemoRunnerをビルドします

```bash
# JUCEディレクトリに移動する
$ cd (JUCEディレクトリの置かれた場所)/JUCE

# CMakeのconfigureとgenerateを実行する
# この時カレントディレクトリ直下に"build"ディレクトリを作成する
$ cmake -G Xcode -B build -DJUCE_BUILD_EXAMPLES=ON

# "build"ディレクトリ内に生成されたDemoRunnerプロジェクトのビルドを実行する
$ cmake --build build --target DemoRunner
```

`JUCE/build/examples/DemoRunner/DemoRunner_artefacts/Debug`ディレクトリに実行ファイル`DemoRunner.app`が生成されます。この実行ファイルを起動すると、JUCE DemoRunnerが立ち上がります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93566/8b9cf240-f4a5-9948-8a08-0ec2a23ba01f.png)

---

ここからは、JUCEフレームワークでアプリケーション・プロジェクトを新規作成する手順について解説します。

# JUCEでHello Sinewave!

JUCEアプリケーションの開発環境が整ったら、簡単なアプリケーションを作成してみましょう。
今回は、サイン波を鳴らす処理を実装するオーディオプログラミング版 Hello world! を作成します。

## プロジェクト作成からコード編集まで [Projucer版]

### 新規プロジェクトを作成する

 Projucerを起動したら、[File]→[New Project...]をクリックして、新規プロジェクト作成画面を表示します。
今回は [Application]→[Audio] テンプレートを選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93566/69948eff-aa20-d933-c20e-6fcd295a39db.png)



新規プロジェクト作成画面の[Exporters]の項目を確認します。ターゲットとするプラットフォームに合わせてチェックを入れます。

- macOS向け：`Xcode` にチェックを入れます
- Windows向け：`Visual Studio`にチェックを入れます（2022, 2019をサポート）
- Linux向け：`Linux Makefile` にチェックを入れます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93566/905527b6-433e-18d0-090f-61fe1a6d7ec7.png)


新規プロジェクト作成画面の[Create Project]ボタンをクリックします。プロジェクトの保存先を選択するダイアログが開くので、保存先を選択してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93566/27f1070f-8e06-d83e-814b-512f6df37bfe.png)

新規プロジェクトを作成すると、`Main.cpp`, `MainComponent.h`, `MainComponent.cpp` の3つのソースファイルが作成されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93566/23f4d40f-ff7a-4539-9166-ecf3bb9380f6.png)


### プロジェクトの保存とIDEでプロジェクトを開く

Projucerで新規プロジェクトの保存と、IDE（VisualStudio、Xcode）でプロジェクトを開きます。

1. Projucer上部のコンボボックスから、起動したいIDEを選択します
2. IDEのアイコンが表示されているボタンをクリックします
3. プロジェクトの保存とIDEの起動が実行されます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93566/b25fd378-a292-d4c2-3004-3f89e392b7d7.png)


## プロジェクト作成からコード編集まで [CMake版]

CMakeを使用してJUCEアプリケーションを作る場合、ソースファイルの作成や、ビルド設定の記述をCMakeLists.txtに記述していく作業を開発者自身で行う必要があります。
そのため、Projucerでプロジェクトを新規作成する場合と比べると、プロジェクトの最小の構成を組み上げるまでの手順が増えることになります。
本記事ではその手順を割愛して、私が作成した最小構成のCMake向けテンプレートを使用して説明をしていきます。

### 筆者作成のテンプレートを git clone する

筆者が作成したオーディオアプリケーションのテンプレートを以下のGitリポジトリに配置しました。
コマンドプロンプトやターミナルから次のコマンドを実行して、GitリポジトリのクローンとGitサブモジュールの初期化を実行してください。
[Gitリポジトリ: juce_hands-on_2024.git](https://github.com/COx2/juce_hands-on_2024)

```bash
# Gitリポジトリのクローンと併せて内部のGitサブモジュールもクローンする
$ git clone --recursive https://github.com/COx2/juce_hands-on_2024
```

### プロジェクトのファイル構成について

このテンプレートは以下のファイル構成になっています。
`Source`ディレクトリに置かれたソースコードは、Projucer版の項目で説明したものと同一のファイルとなっています。

```
juce_hands-on_2024/
　├ External/
  │  └ JUCE/  # Gitサブモジュールとして取り込んだJUCEリポジトリ
　├ Source/   # プロジェクトのソースコードを配置するディレクトリ
  │  ├ Main.cpp
  │  ├ MainComponent.h
  │  └ MainComponent.cpp
　├ CMakeLists.txt  # CMakeで実行するビルド設定を記述するテキストファイル
　└ LICENSE
```

上記のファイルのうち、`CMakeLists.txt`は以下の記述となっています。
CMakeのプロジェクトからJUCEライブラリを取り込むことで、JUCEライブラリ内に含まれるCMakeモジュールが読み込まれ、JUCE CMake APIが使えるようになります。
JUCE CMake APIについては `JUCE/docs/CMake API.md` にドキュメントが用意されています。

```cmake
# CMakeの最低バージョンを特定する
cmake_minimum_required(VERSION 3.22)

# プロジェクト名を設定する
project(juce_hands-on_2024 VERSION 1.0.0)

# C++に関するオプション設定
enable_language(CXX)
set(CMAKE_CXX_STANDARD 17)
set(CMAKE_CXX_STANDARD_REQUIRED ON)
set(CMAKE_CXX_EXTENSIONS OFF)

# Visual Studioのコンパイラに文字エンコードをUTF-8であることを設定するコンパイルオプション
if(CMAKE_CXX_COMPILER_ID MATCHES "MSVC")
    add_compile_options(/utf-8)
endif()

# JUCEライブラリの場所を特定する
# JUCEライブラリ内に含まれるCMakeモジュールが読み込まれ、JUCE CMake APIが使えるようになる
add_subdirectory(External/JUCE)

# GUIアプリケーション版のJUCEプロジェクトを追加する
# プロジェクト名は"NewProject"にする
juce_add_gui_app(NewProject
    PRODUCT_NAME "NewProject")

# "NewProject"のソース上で"#include <JuceHeader.h>"によるJUCEライブラリのインクルードを可能にする
juce_generate_juce_header(NewProject)

# "NewProject"にC++ソースファイルを追加する
target_sources(NewProject
    PRIVATE
        Source/Main.cpp
        Source/MainComponent.h
        Source/MainComponent.cpp)

# "NewProject"に適用するコンパイル定義を設定する
target_compile_definitions(NewProject
    PRIVATE
        JUCE_APPLICATION_NAME_STRING="$<TARGET_PROPERTY:NewProject,JUCE_PRODUCT_NAME>"
        JUCE_APPLICATION_VERSION_STRING="$<TARGET_PROPERTY:NewProject,JUCE_VERSION>")

# "NewProject"にリンクするライブラリを決定する
target_link_libraries(NewProject
    PRIVATE
        juce::juce_audio_utils
    PUBLIC
        juce::juce_recommended_config_flags
        juce::juce_recommended_lto_flags
        juce::juce_recommended_warning_flags)
```

### CMakeのconfigureとgenerateを実行する

コマンドプロンプトやターミナルから次のコマンドを実行すると、CMakeのconfigureとgenerateが実行され、IDE用のプロジェクトが生成されます。
なお、`CMake --build`コマンドを実行することでコマンドラインからビルドを実行することもできます。

#### Windows - Visual Studio 2022 の場合

```bat
REM リポジトリのディレクトリに移動する
cd (リポジトリが置かれた場所)/juce_hands-on_2024

REM CMakeのconfigureとgenerateを実行する
REM この時カレントディレクトリ直下に"build"ディレクトリを作成する
cmake -G "Visual Studio 17 2022" -B build

REM "build"ディレクトリ内に生成されたプロジェクトのビルドを実行する
cmake --build build
```

#### macOS - Xcode の場合

```bash
# リポジトリのディレクトリに移動する
$ cd (リポジトリが置かれた場所)/juce_hands-on_2024

# CMakeのconfigureとgenerateを実行する
# この時カレントディレクトリ直下に"build"ディレクトリを作成する
$ cmake -G Xcode -B build

# "build"ディレクトリ内に生成されたプロジェクトのビルドを実行する
$ cmake --build build
```

### IDEでプロジェクトを開く

CMakeのconfigureとgenerateを実行すると、`juce_hands-on_2024/build`ディレクトリにIDE向けのプロジェクトファイルが生成されます。プロジェクトファイルをIDEで開くことで、IDE上でソーコードの編集を始めることができます。


## サイン波を鳴らすプログラムを実装する

プロジェクト内のソースコードを編集して、サイン波を鳴らす処理を実装してみましょう。
`MainComponent.cpp`にある関数`void getNextAudioBlock (const AudioSourceChannelInfo& bufferToFill) override`の内部実装を以下のように編集します。

```cpp
#include "MainComponent.h"

~~~中略~~~

void MainComponent::getNextAudioBlock (const juce::AudioSourceChannelInfo& bufferToFill)
{
    bufferToFill.clearActiveBufferRegion();

    const float level = 0.5f;

    auto* buffer = bufferToFill.buffer;
    for (int channel = 0; channel < buffer->getNumChannels(); channel++)
    {
        float* channelData = buffer->getWritePointer(channel);

        for (int sample = 0; sample < buffer->getNumSamples(); sample++)
        {
            channelData[sample] = std::sin(juce::MathConstants<float>::twoPi * sample / buffer->getNumSamples() * 2) * level;
        }
    }
}
~~~中略~~~

```


このソースコードを記述すると、オーディオバッファを更新する度に、オーディオバッファ全体でサイン波一周分（360°=2π）を書き込む処理が実行されます。

![juce_hands-on_2013.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93566/79451601-b768-0148-662a-b5c387d6949f.jpeg)


## ビルドと動作確認

上記のソースコードを記述したら、ビルドを実行します。
ビルドが成功したらアプリケーションを起動してみましょう。
アプリケーションを起動すると、ウインドウが表示されるとともに、オーディオデバイスとの連携が正常にできていれば、サイン波が鳴っているのが聞こえるはずです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93566/3d843dd8-c447-07e1-736f-74fb61065565.png)


### トラブルシューティング：音が鳴らない場合

プログラムとオーディオデバイスを正常に連携できていない可能性があります。
以下の記事を参考にオーディオデバイス設定の編集を試してみてください。

https://qiita.com/COx2/items/c9e87059d349aa8ff707

---

# JUCEのことをもっと知りたくなったら

## ドキュメントを読んでみよう

JUCEライブラリには沢山のAPIが用意されています。JUCE APIを理解することが快適なアプリケーション開発への近道と言えるでしょう。

・API：モジュール
https://docs.juce.com/master/modules.html

・API：クラスリファレンス
https://docs.juce.com/master/index.html


公式サイトには入門者向けのチュートリアルが提供されています。チュートリアルを一通り試してみると、JUCE APIの使い方について体系的に学習することができます。

・チュートリアル
https://juce.com/learn/tutorials


## フォーラムサイトを覗いてみよう

JUCEは公式のフォーラムサイトを設置しています。
ユーザーからの疑問・質問にJUCEのメンテナが回答してくれたり、ユーザー間で知見の共有が行われています。

・JUCEフォーラム
https://forum.juce.com/


# JUCEを利用したオープンソースプロジェクト

JUCEを利用したオープンソースなプロジェクトを紹介します。
様々なプロジェクトのソースコードから、JUCE APIの使い方やJUCEならではの実装テクニックについても触れることができるでしょう。

## Vital

GitHubリポジトリ：https://github.com/mtytel/vital

リッチなグラフィック表現を搭載したウェーブテーブルシンセサイザ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93566/0eaff160-82c2-8274-ff37-0add2746a32d.png)

## Wavetable

GitHubリポジトリ：https://github.com/FigBug/Wavetable

FigBug氏によるWavetableシンセサイザ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93566/197e6409-1aad-78ac-8ad5-7b4b4db5d0c7.png)

## CHOWTapeModel

GitHubリポジトリ：https://github.com/jatinchowdhury18/AnalogTapeModel

テープエフェクトを物理シミュレーションしたエフェクトプラグイン

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93566/6128c320-16f3-c6bd-b6c8-7fdf7464db58.png)

## Utility clone

GitHubリポジトリ：https://github.com/m1m0zzz/utility-clone

Ableton Liveの内蔵エフェクトをVST形式で再現したエフェクトプラグイン。
LiveライクなUIを表現する LookAndFeel のカスタム実装がチャレンジング。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93566/80b2d56e-e62c-d52a-326a-9874bed14ffd.png)

## Magical8bitPlug2

GitHubリポジトリ：https://github.com/yokemura/Magical8bitPlug2

8bitサウンドのクリエイターとして著名なYMCK Yokemura氏が開発した、往年の8bitゲーム機サウンドを奏でるシンプルなインストゥルメントプラグイン

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93566/e01eb414-9b64-8a94-55c7-d2847d130996.png)

## OB-Xd

GitHubリポジトリ：https://github.com/reales/OB-Xd

Oberheim OB-Xをエミュレート＆モディファイしたVAシンセサイザ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93566/efbfb035-3778-e080-85c8-16c9fbfc9e9c.png)

## tracktion_engine

GitHubリポジトリ：https://github.com/Tracktion/tracktion_engine

Tracktion社のDAW『Waveform』で使用されている、DAWの音楽演奏・再生などを司るエンジン部分
JUCEを利用して開発されており、ライセンスを取得してオリジナルのDAWを自作することができる
[こちら](https://qiita.com/atsushieno/items/ac88a544f3625e96aa52)の解説記事が参考になります

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93566/045ab3bc-0cba-8abc-c5a4-c4c289ad8d41.png)