ランサーズ等のサービスを開発・運用する中で得た知識やノウハウを紹介しています。

Labels:  Salesforce 投稿者:masaaki

自作のLightningコンポーネントをリファレンス化

Summer ’18でLightning Component Library(コンポーネントライブラリ)が正式リリース

全国のSalesforce Lightningコンポーネント職人待望の「Lightning Component Library(コンポーネントライブラリ)」が正式リリースされました。

Salesforce Summer ’18 リリースノート

Lightningコンポーネント開発に特化したリファレンスのようです。
いままでLightningコンポーネントの情報っていろんなところに分散してて散らかっている印象があったのですがこれはすばらしい。

既存のリファレンスとの比較表はこちらにありました。
その他のドキュメントサイトとの違い

Salesforce組織にログインしていないときはこちらで見れます。
https://developer.salesforce.com/docs/component-library

ログインしたときは以下で接続可能です。後述しますが基本こちらを見るのをおすすめします。
https://<myDomain>.lightning.force.com/componentReference/suite.app

リファレンスとしての機能

リファレンスがビジュアル化されているので仕様やサンプルソースといった欲しい情報まですぐたどり着けます。

自分が作ったコンポーネントもリファレンス化

組織にログインした状態だと、自分でつくったコンポーネントもリファレンス化されます。
https://<myDomain>.lightning.force.com/componentReference/suite.app

名前空間cからたどれます。

DOCUMENTATIONに記載したExampleが表示されます。

コンポーネント概要とドキュメンテーションの記載

各Attributesの記載も可能です。

今回使用したサンプルコードは以下のとおりです。

SampleComponent.cmp

<aura:component implements="flexipage:availableForAllPageTypes" access="global" controller="SampleController" 
                description= "コンポーネントの説明">

    <aura:attribute name="nickname" type="String" default="World" description="変数の説明"/>

    <lightning:layout class="slds-page-header slds-page-header--object-home">
        <lightning:layoutItem padding="horizontal-small">
            <div class="page-section page-header">
               <h1 class="slds-text-heading--label">Sample</h1>
            </div>
        </lightning:layoutItem>
    </lightning:layout>
   {!v.nickname}
    <ui:button label="btn" press="{!c.myAction}"/>

</aura:component>

SampleComponentController.js

({
	myAction : function(component, event, helper) {
		var action = component.get("c.helloWorld");
        action.setParams({name: component.get("v.nickname")});

        action.setCallback(this, function(res) {
            var state = res.getState();
            if(state === "SUCCESS") {
                component.set("v.nickname", res.getReturnValue());
            }
        });
        $A.enqueueAction(action);
	}
})

SampleComponent.auradoc

<aura:documentation>
    <aura:description>Documentation デスクリプション
        <p>
          <code>サンプルソース</code>
        </p>
    </aura:description>
    <!-- 本来はrefにExample用コンポーネントを指定する?! -->
	<aura:example name="SampleComponent1" ref="c.SampleComponent" label="ラベル名1">
        <p>
            オプションの説明1
        </p>
    </aura:example>
	<aura:example name="SampleComponent2" ref="c.SampleComponent" label="ラベル名2">
        <p>
            オプションの説明2
        </p>
    </aura:example>
    
</aura:documentation>

Lightning Component Library まとめ

Lightningコンポーネント開発に関わる情報が一元化されました。
自分で作ったコンポーネントもリファレンス化されるのでコメント記法も統一化できそうです。

いいんじゃないですか。これからコンポーネント開発が捗りそうです。

ランサーズではサービスを成長させてくれるエンジニア、デザイナーを募集しています!
ご興味がある方は、以下URLよりご応募ください。


【中途採用】
サービスリードエンジニア
テックリード(アーキテクト)
フロントエンドエンジニア
サーバーサイドエンジニア
業務エンジニア(社内システム基盤・基幹システム)

【インターン・学生バイト】
19新卒対象サマーインターン
エンジニアインターン

その他採用情報

関連記事

関連記事はありませんでした