n8nを"ガチ"開発環境にする方法 2025.11.19 

本日のアジェンダ 1 作ったもの 2 n8n開発の「よくある悩み」 3 解決策：オフライン開発と同期 4 なぜこれが重要か：n8nの内部構造 5 まとめ © Synergy Marketing, Inc. 1 

01 1. 作ったもの © Synergy Marketing, Inc. 2 

1. 作ったもの © Synergy Marketing, Inc. 3 研修の受講者からの質問の回答案を生成するツールを作成 受講者を選ぶと、過去の質問傾向などを裏側で参照 質問を投げると、公式のマニュアルを参照してAIが回答を生成 裏側はもちろんn8nのワークフローが動作している ...と、ここまではよくあるn8nの活用事例 今日は「何を作ったか」よりも、「どうやって開発したか」が本題です 

02 2. n8n開発の「よくある悩み」 © Synergy Marketing, Inc. 4 

2. n8n開発の「よくある悩み」 n8nの標準エディタでの開発体験（DX）の問題 編集しづらい HTMLノードやCodeノードのエディタが小さく、シンタックスハイライトや補完が弱い バージョン管理しづらい コードの変更履歴をGitで管理しにくい（巨大なJSON全体の差分になってしまう） ノードが探せない、使い方が分からない 最近 AI Workflow Builder が提供されたが、クラウド版のみ © Synergy Marketing, Inc. 5 

03 3. 解決策：オフライン開発と同期 © Synergy Marketing, Inc. 6 

3. 解決策：オフライン開発と同期 n8nをCursorを使って開発→サーバに同期 開発者 (Cursor + n8n-mcp) src/html （HTMLファイル） src/javascript （JSファイル） src/workflows （JSON/YAML） ビルド＆同期 (ローカル) Makefile (make build) Pythonスクリプト edenreich/n8n-cli 実行環境 (n8nサーバ) n8nサーバ （ビルド後の巨 大JSONがデプロイされる） © Synergy Marketing, Inc. 7 

3. 解決策：オフライン開発と同期 キー・テクニック：独自のプレースホルダーとビルドスクリプト ソースJSON (src/workflows) HTMLノードの `html` パラメータに `{{ include html:file.html }}` と記述 HTMLファイル (src/html) `` タグ内に `{{ include js:file.js }}` と 記述可能 ビルドスクリプト (build_workflow.py) `{{ include ... }}` を正規表現で探し、実ファイ ルの中身に置換 ビルド後のJSON (workflows/*.json) すべてのHTML/JSがインライン展開された、 n8nが直接読める形式 © Synergy Marketing, Inc. 9 

04 4. なぜこれが重要か：n8nの内部構 造 © Synergy Marketing, Inc. 10 

4. なぜこれが重要か：n8nの内部構造 ワークフローのスキーマそのものが「コード」である © Synergy Marketing, Inc. 12 コピー＆ペースト 

05 5. まとめ © Synergy Marketing, Inc. 13 

5. まとめ n8nで複雑なWebアプリを"本気で"開発するための手法 2. 独自ビルドシステムを構築する `{{ include }}` 等の独自ディレクティブを定義し、PythonスクリプトでHTML/JSをJSONに埋め込む 1. n8n-cli でオフライン開発とGit管理を実現 分離したソースコード（src）をGit管理し、「ビルド後のJSON」をCLIで同期する ※n8n-mcpでもワークフローの更新ができるようですが、失敗する場合があったので © Synergy Marketing, Inc. 14 3. 手作業の修正や小規模な実験は必須 AIはノードの使い方に詳しくない(n8n-mcpを使っても)ので、手で修正するのは避けられない ※外部サービスを呼び出すノードの出力は実行してみないと分からないので、小さく実験するのが良い 

No content