# Salesforce AppExchangeアプリ開発：Hello World編

> SalesforceのAppExchangeアプリ開発に関する基本的なガイドで、Hello Worldコンポーネントの作成からデプロイ、Lightning App Builderを使った組み込みまでのステップを詳しく説明しています。

- 公開日: 2024-12-26
- 著者: 村井 謙太
- タグ: Salesforce, AppExchange
- URL: https://tech.anycloud.co.jp/articles/appexchange-helloworld

---

最近SalesforceのAppExchangeアプリを開発する機会があったので、備忘録として残しておきます。

## **AppExchangeとは？**

SalesforceのAppExchangeは、Salesforceにインストールできるサードパーティアプリが集まるマーケットプレイスです。

<div class="link-card-wrap"><a class="link-card" href="https://appexchangejp.salesforce.com" target="_blank" rel="noopener noreferrer"><span class="link-card-body"><span class="link-card-title">is now AgentExchange - Japan</span><span class="link-card-description">Salesforce AppExchangeは、Salesforceを拡張するAI搭載アプリや連携ソリューションが見つかるマーケットプレイスです。業務効率化、CRM活用、データ連携、導入支援サービスまで幅広く検索・導入できます</span><span class="link-card-meta"><img class="link-card-favicon" src="./linkcard-01-favicon.ico" alt=""><span class="link-card-domain">appexchangejp.salesforce.com</span></span></span></a></div>

<figure><img src="./image-001.webp" alt="" width="2854" height="1684"></figure>

AppExchangeの人気アプリ

AppExchangeアプリ開発は誰でも作成できますが、特に自社SaaSとSalesforceを連携させてユーザーに提供したいような場合におすすめです。

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

ローカル環境で開発環境をセットアップすることもできますが、今回は最も簡単な方法であるCode Builderを紹介します。

Code BuilderはSalesforce公式のクラウドベースのVS Code拡張IDEで、Salesforce CLIがデフォルトでインストールされていたり、手軽に開発を始められるので初心者の方にはおすすめです。

<figure><img src="./image-002.webp" alt="" width="2902" height="1978"></figure>

Code Builder

**Code Builderのセットアップ手順**

1.  **Code Builderを有効化**:
    
    1.  Salesforceの「Setup」から「Code Builder」を検索し、有効化します。
        
        <figure><img src="./image-003.webp" alt="" width="2892" height="1400"></figure>
        
    
    Code Builderの有効化
    
2.  **Code Builderを起動**:
    
    1.  開発したい組織にログインし、「App Launcher」からCode Builderを選択して起動
        
        <figure><img src="./image-004.webp" alt="" width="2868" height="1304"></figure>
        
    
    Code Builder起動画面
    

## **Lightning Web Components (LWC) でHelloWorldを作成**

**Lightning Web Components (LWC)** は、Salesforceが提供するJavaScriptのフレームワークであり、これを開発するとSalesforceの画面に独自コンポーネントを配置することができます。

使い方を見ていきましょう。

1.  **LWCを作成**:
    1.  force-app/main/default/lwc というフォルダを右クリックして、Create Lightning Web Componentを選択
    2.  コンポーネント名をHelloWorldとします
2.  コードを記述
    1.  HelloWorld.js
        
        ```javascript
        import { LightningElement } from 'lwc';
        export default class HelloWorld extends LightningElement {
            message = 'Hello, World!';
        }
        ```
        
    2.  HelloWorld.html
        
        ```html
        <template>
            <div>
                <h1>{message}</h1>
            </div>
        </template>
        ```
        
    3.  HelloWorld.js-meta.xml
        
        ```xml
        <?xml version="1.0" encoding="UTF-8"?>
        <LightningComponentBundle xmlns="<http://soap.sforce.com/2006/04/metadata>"
                                  fqn="HelloWorld">
            <apiVersion>58.0</apiVersion>
            <isExposed>true</isExposed>
            <targets>
                <target>lightning__AppPage</target>
                <target>lightning__RecordPage</target>
                <target>lightning__HomePage</target>
            </targets>
        </LightningComponentBundle>
        ```
        
3.  **デプロイ**:
    1.  Code Builder内で、force-appディレクトリを選択し、右クリックして「SFDX: Deploy Source to Org」を実行。

## **Lightning App BuilderでHelloWorldを組み込む**

アプリをデプロイすると、組織内でカスタムコンポーネントを組み込めるようになります。

組み込み方法はいくつかありますが、今回は Lightning App Builder を使って組み込んでみましょう。

1.  **Lightning App Builderを開く**:
    
    1.  Salesforce組織で「ホーム」右上の歯車アイコンから「このページを編集」を開く
        
        <figure><img src="./image-005.webp" alt="" width="2902" height="2022"></figure>
        
    
    Lightning App Builder
    
2.  **HelloWorldコンポーネントを追加**:
    1.  左側のコンポーネントリスト「Custom Components」に「HelloWorld」が表示されているはずです
    2.  ドラッグ＆ドロップでページに配置します
3.  **プレビューと保存**:
    1.  「保存」をクリックし、「アクティブ化」を選択
    2.  ページをプレビューして「Hello, World」が表示されることを確認
        
        <figure><img src="./image-006.webp" alt="" width="2890" height="1710"></figure>
        

## **まとめ**

このガイドでは、Lightning Web Componentsを使った基本的な開発プロセスと、AppExchangeアプリの最初のステップを学びました。

AppExchangeアプリをリリースする部分ところはまた別の記事で書けたらなと思っています！