こんにちは😊
株式会社プロドウガの@YushiYamamotoです！
らくらくサイトの開発・運営を担当しながら、React.js・Next.js専門のフリーランスエンジニアとしても活動しています❗️
この記事は JavaScript Advent Calendar 2025 の参加記事です🎄
みなさん、JavaScript書いてますか？
WebフロントエンドやNode.jsバックエンドはもちろんですが、最近は 「ノーコード/ローコードツールの中で書くJavaScript」 が熱いんです。
特に私が愛用しているワークフロー自動化ツール n8n では、「Codeノード」でJSを書くことで、ノーコードの限界を軽々と突破できます。
今回は、「ノーコードツールを使っている時によく遭遇する課題」 を、「モダンなJavaScript（ES2020+）」 でサクッと解決するパターンをいくつか紹介します。
🧩 なぜノーコードでJSを書くのか？
「ノーコードなんだからコード書きたくないよ」と思いますよね。
でも、実務ではこんな壁にぶつかります。
- APIから返ってきたJSONが複雑すぎて、標準ノードで整形するのが面倒。
- 「配列の中のオブジェクトの特定のキーだけを抽出して、カンマ区切りにしたい」みたいな微調整。
- 生成AI（ChatGPT）が返してきたテキストから、JSON部分だけを抜き出したい。
こういう時、GUIでポチポチ設定するより、JSを5行書いたほうが圧倒的に早くて確実なのです。
💡 パターン1：複雑なJSONの整形（Map & Destructuring）
APIから取得したデータが「ネストが深くて使いにくい」場合、map と 分割代入（Destructuring） でフラットにします。
課題: ユーザーリストから、必要な情報だけを抜き出してリネームしたい。
Before: 複雑なデータ構造
// APIからのレスポンス（イメージ）
[
{
json: {
id: 1,
attributes: {
fullName: "Yushi Yamamoto",
contact: { email: "test@example.com", phone: "090-xxxx-xxxx" },
status: "active"
}
}
},
// ...続く
]
解決コード:
// n8nのCodeノード内
const items = $input.all();
return items.map(item => {
// 分割代入で深層のデータを取り出す
const { fullName, contact: { email } } = item.json.attributes;
return {
json: {
id: item.json.id,
name: fullName, // リネーム
email: email, // フラット化
isActive: item.json.attributes.status === 'active' // 真偽値に変換
}
};
});
これだけで、後続のノード（Slack通知やスプレッドシート書き込み）が劇的に楽になります。
💡 パターン2：AI出力のクリーニング（Regex & JSON.parse）
最近流行りの「AI連携」。しかし、LLMは親切心でMarkdown記法を含めて返してくることがあります。これをそのまま JSON.parse するとエラーになります。
課題: ```json { "key": "value" } ``` という文字列からJSONオブジェクトを作りたい。
解決コード:
const aiResponse = $input.first().json.content; // AIの回答テキスト
// 正規表現で ```json ... ``` または ``` ... ``` の中身だけを抽出
// sフラグ（dotAll）で改行を含めてマッチさせる
const jsonMatch = aiResponse.match(/```(?:json)?\s*([\s\S]*?)\s*```/);
let result;
try {
// マッチすればその中身を、しなければ全体をパースしてみる
const jsonString = jsonMatch ? jsonMatch[1] : aiResponse;
result = JSON.parse(jsonString);
} catch (e) {
// エラーハンドリング（空のオブジェクトを返すなど）
result = { error: "Failed to parse JSON", raw: aiResponse };
}
return { json: result };
この正規表現パターンは、AIエージェント開発で必須級のテクニックです。
💡 パターン3：安全なデータアクセス（Optional Chaining & Nullish Coalescing）
外部データは常に不完全です。「あるはずのキーがない」ことでワークフローが止まるのを防ぐために、ES2020の機能をフル活用します。
課題: user.profile.sns.twitter が存在しないかもしれないが、エラーにしたくない。
解決コード:
const items = $input.all();
return items.map(item => {
const user = item.json;
return {
json: {
// ?. で安全にアクセスし、 ?? でデフォルト値を設定
twitterUrl: user?.profile?.sns?.twitter ?? "https://twitter.com/default",
// 配列があるかわからない場合のmap処理
tags: user?.tags?.map(t => t.name).join(',') ?? "no-tags"
}
};
});
if (user && user.profile && ...) と書いていた時代にはもう戻れませんね。
まとめ：JavaScriptは「最強の接着剤」
ノーコードツールは便利ですが、「あと1ミリ、ここを調整したい」 という場面でJavaScriptの知識が火を吹きます。
- データの整形は
map/filter/reduce - 安全なアクセスは
?./?? - 文字列処理は
RegExp
これらを使いこなせれば、n8nに限らず、GAS (Google Apps Script) や Zapier など、あらゆる自動化ツールで無双できます。
2025年も、「ノーコード × JavaScript」 で快適なエンジニアライフを送りましょう！🚀
最後に：業務委託のご相談を承ります
私は業務委託エンジニアとしてWEB制作やシステム開発を請け負っています。最新技術を活用したレスポンシブなWebサイト制作、インタラクティブなアプリケーション開発、API連携など幅広いご要望に対応可能です。
「課題解決に向けた即戦力が欲しい」「高品質なWeb制作を依頼したい」という方は、お気軽にご相談ください。一緒にビジネスの成長を目指しましょう！
👉 ポートフォリオ
🌳 らくらくサイト