JSDocを使用したCodeノードのTypeScriptインテリセンス対応 - n8n ワークフロー

上級n8nユーザー: カスタムロジックのためにn8nのCodeノードを頻繁に使用する開発者
自動化スペシャリスト: 高度なデバッグツールを必要とする複雑なn8nワークフローシステムを構築している方
技術系コンテンツ制作者: 効率的なn8n開発に関するベストプラクティスを文書化または共有している方
その他: n8nテンプレート内のコード品質を向上させ、エラーを減らしたいと考えているすべての方

n8nのJavaScript Codeノードを扱う際、適切なオートコンプリートがないと、デバッグや複雑な入力オブジェクト（n8nノードやAPI操作から返されるものなど）へのアクセスが困難になることがあります。この特定のn8nワークフローは、JavaScriptエコシステムで広く使われているJSDocアノテーションを活用することで、この問題を解決します。

n8n APIノード経由で取得するWorkflowオブジェクトなど、オブジェクトの期待される構造を定義することで、n8nエディタの標準のコード機能に強力な型ヒントを提供できます。これによりTypeScriptレベルのインテリセンスが実現し、n8nワークフロー内での複雑なカスタムスクリプトの記述、保守、デバッグが大幅に効率化され、信頼性が向上します。このテクニックは、堅牢なn8nテンプレートの開発速度を向上させるために非常に価値があります。

この実演用n8nワークフローは、インテリセンス技術を説明するために4つの主要なステップを利用します。

1. トリガー (On form submission): テスト用にn8nワークフローを手動で開始できるようにする基本的なForm n8nトリガーを使用してプロセスを開始します。


2. ワークフローデータの取得 (Get This Workflow): n8nノードがget操作を使用するように設定され、現在実行中のn8nワークフローの完全なメタデータ構造を取得します。この複雑なJSONオブジェクトは次のn8nノードに渡されます。


3. インテリセンスの適用 (Code With Intellisense): このCode n8nノードが中核的なデモンストレーションです。2つのJSDoc型定義（@typedef {Object} Node および / @typedef {Object} Workflow /）を定義します。次に、インラインJSDocコメント（/ @type {Workflow} /）を使用して受信JSONを変数 wf にキャストします。この操作により、Code n8nノード内で wf.id や wf.name などのプロパティへのアクセスや wf.nodes の反復処理に対して完全なインテリセンスが提供されます。


4. 結果の表示 (Display Results): 最後のForm n8nノードが、新しく有効化されたインテリセンスを使用して抽出された解析済み出力を整理されたHTML形式で表示し、先行するn8nノードの機能を証明します。

この強力な開発テクニックを独自のn8nテンプレートにインストールして使用するには：

1. インポート: 提供されたn8nワークフローJSONをコピーし、「JSONからインポート」オプションを介してn8nインスタンスに貼り付けます。


2. n8n API認証情報: 'Get This Workflow' n8nノードは、n8n unio API v1 という名前で設定された有効なn8n API認証情報を必要とします。n8nにアクティブなAPIキーが設定されていることを確認してください。


3. 実行: 'On form submission' n8nトリガーを実行するか、n8nワークフローを手動でテストします。編集時に 'Code With Intellisense' n8nノードを観察してください。オブジェクトプロパティ（wf.など）にカーソルを合わせたり入力したりすると、役立つコードサジェストが表示されるようになります。

On form submission (n8nトリガー): このn8nワークフローのテスト開始点として機能します。標準的なHTTP n8nトリガーメカニズムです。
Get This Workflow (n8nノード): 内部のn8n APIを使用して、現在実行中のn8nワークフローの完全なJSON表現を取得します。これはJSDocの例に必要な複雑なオブジェクト構造を提供します。
Code With Intellisense (Code n8nノード): 中核となるコンポーネントです。JSDocを使用して複雑な型、具体的にはWorkflow型とNode型を定義します。主要な設定はインラインキャストである const wf = / @type {Workflow} / ($input.first().json); にかかっており、これはn8nテンプレート内でコーディングする際に強力なインテリセンス機能を有効にするために不可欠です。

• Display Results (Form n8nノード): Code n8nノードの実行結果をきれいに整形されたHTMLページに出力し、n8nワークフローロジックの成功に関する即時的な視覚的フィードバックを提供します。