ランサーズ（Lancers）エンジニアブログ > Salesforce > 自作のLightningコンポーネントをリファレンス化

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

masaaki｜2018年08月24日
Salesforce

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

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

No related posts.