LWCでJQueryを使ってみた

LWCでもJQueryが使用できるらしい。

やり方は簡単。

まず、以下のサイトからファイルをダウンロードします。
https://jquery.com/download/

右クリック→名前を付けてリンク先を保存

ダウンロードしたファイルを静的リソースに追加します。

jsファイルに以下の処理を記載します。
・先ほど追加した静的リソースのimport
・loadScriptメソッドのimport
・JQueryファイルの読み込み

import { LightningElement } from 'lwc';
import jQuery from '@salesforce/resourceUrl/JQuery';
import { loadScript } from 'lightning/platformResourceLoader';

export default class LwcJquery extends LightningElement {

    renderedCallback(){
        loadScript(this, jQuery)
        .then(() => {
            console.log('読み込み完了');
        })
        .catch(error=>{
            console.log('読み込み失敗 : ' + error);
        });
    }

}

これだけどす。

準備が整ったので、こちらの記事を参考に、JQueryを使用した画面を作成してみました。
niksdeveloper.com

lwcJquery.html

<template>
    <lightning-card title="LWCでJQueryを使ってみた">
        <div class="slds-m-around_medium">
            <div class="flip" onclick={slideIt}>下または上にスライドするには、ここをクリックしてください</div>
            <div class="panel">
                <p class="innerDiv" onclick={slideRight}>
                    右へ移動
                </p>
            </div>
        </div>
    </lightning-card>
</template>

lwcJquery.js

import { LightningElement } from 'lwc';
import { loadScript } from 'lightning/platformResourceLoader';
import jQuery from '@salesforce/resourceUrl/JQuery';

export default class LwcJquery extends LightningElement {

    renderedCallback(){
        loadScript(this, jQuery)
        .then(() => {
            console.log('読み込み完了');
        })
        .catch(error=>{
            console.log('読み込み失敗 : ' + error);
        });
    }

    slideIt(){
        $(this.template.querySelector('.panel')).slideToggle("slow");
    }

    slideRight(){
        $(this.template.querySelector('.innerDiv')).animate({left: '1300px'});
    }
}

lwcJquery.css

.panel, .flip {
    padding: 5px;
    text-align: center;
    background-color: #427ddb;
    border: solid 1px #2d2c33;
    color: white;
    cursor: pointer;
}
  
.panel {
    padding: 50px;
    display: none;
}

.innerDiv {
    position: absolute;
}

実際の動きはこんな感じ。

青い棒をクリックすると・・・

下ににゅっ

そこからさらに「右へ移動」をクリックすると・・・

ぎゅん！！！

とりあえず、LWCでもJQueryが使えるってことがわかりました。

おしまい

エクスペリエンスビルダーで作成したサイト上にLWCを追加する方法

エクスペリエンスビルダーで作成したサイト上にLWCを配置したいときが誰しもきっとありますよね？

LWC自体は作成したのに、コンポーネント一覧に出てこない・・・

そんな時はこうすれば・・

LWCのXMLファイルにlightningCommunity__Pageを追加

選択可能になります。

ドラッグ&ドロップで配置します。

おしまい

LWC setterがいつ動くのかよくわからないから試してみた

いつまでたってもgetterとsetterがよくわからない・・

のに、LWCでの使い方とかもっとわからない・・

から、試してみた。

今回は3つのコンポーネントを組み合わせています。

完成形態

初期表示

入力フォームになんか入れて

ボタンを押すと、setterを使って値が表示されます

parentSetter.htmlの中に2つのコンポーネントが含まれています。

ソース

わたしまじで命名もへたくそで本当萎える（；；）

parentSetter.html

<template>
    <lightning-card>
        <c-action-setter onsend={putValueSetter}></c-action-setter>
        <c-set-setter receive-value={value}></c-set-setter>
    </lightning-card>
</template>

parentSetter.js

import { LightningElement } from 'lwc';

export default class ParentSetter extends LightningElement {
    value;

    putValueSetter(evt){
        this.value = evt.detail;
    }
}

setSetter.html

<template>
    <div>displayValue：{displayValue}</div>
</template>

setSetter.js

import { LightningElement,api } from 'lwc';

export default class SetSetter extends LightningElement {
    displayValue;

    set receiveValue(val){
        if(this.displayValue === undefined){
            this.displayValue = '初期表示';
        }else{
            this.displayValue = val;
        }
    }

    @api get receiveValue(){

    }
}

actionSetter.html

<template>
    <lightning-input label="せったーにせっとしたいあたいをいれてね" value={inputValue} onchange={changeInputValue}></lightning-input>
    <lightning-button label="せったーうごかすぼたん" onclick={buttonClick}></lightning-button>
</template>

actionSetter.js

import { LightningElement } from 'lwc';

export default class ActionSetter extends LightningElement {
    inputValue;
    changeInputValue(event) {
      this.inputValue = event.target.value;
    }

    buttonClick(){
        const event = new CustomEvent('send',{
            detail: this.inputValue
        });

        this.dispatchEvent(event);
    }
}

setterを使って値を入れるまでの挙動

①入力フォームに値を入れる

②onchangeでchangeInputValueに入り、this.inputValueに入力した値が入る（actionSetter.js）
参考：LWC onchangeはいつ動いている？ - ぽっさむのプログラミングまじでわかんないブログ

③ボタンを押す

④onclickでbuttonClickに入り、detailプロパティにthis.inputValueをセットしたイベントを作成してディスパッチする（actionSetter.js）
参考：LWC 子から親へイベント伝達してみた - ぽっさむのプログラミングまじでわかんないブログ

⑤sendにonを付けたonsendが反応して、putValueSetterが呼び出される（parentSetter.js）

⑥this.value = evt.detail;でthis.valueにdetailプロパティにセットした値（フォームに入力した値）が入り、receiveValueに値がセットされた状態になる

receive-value={value}のvalueに値が入るということは、receiveValueという変数に値がはいることなんだってぇ～！！（多分）

なのでここで、
⑦セッター（set receiveValue(val){・・・）が動く。valは、this.value。

setSetter.js

import { LightningElement,api } from 'lwc';

export default class SetSetter extends LightningElement {
    displayValue;

    set receiveValue(val){
        if(this.displayValue === undefined){
            this.displayValue = '初期表示';
        }else{
            this.displayValue = val;
        }
    }

    @api get receiveValue(){

    }
}

⑧this.displayValueには'初期表示'が入っているため、elseに入って、this.displayValueに値が入り、表示される。

ちなみに、読み込んだだけで’初期表示’って表示されてるから、読み込んだ瞬間にsetterは動いてることが分かった。
知らなかった・・。※displayValue;って宣言しただけの場合の中身はundefined。

ここまで書いたけど、setterってあんまり使わないらしいね。

いまんとこ、こういう風に値渡すのもどこが便利なのかいまいちピンとこない。

でも、親から子どもに対して値が渡せるんだ～っていうのは分かった。

ちなみに、setterを使うときは@apiをつけなきゃいけないらしいよ。しかも謎にgetterのほうにつけろって書いてあった。

作法的な？あと、setterはgetterがないとエラーになる。だからgetterは空だけど置いておきました。

やっぱりプログラミング全然わからなくて草。

おしまい

LWC 違うPCから同じ組織で開発するときのセットアップ

VSCodeインストール

↓

拡張機能から 「Salesforce Extention Pack」を検索してインストール

↓

SalesforceCLIインストール
Salesforce CLI

↓

GitHubからクローンする
VSCode を使用して GitHub リポジトリをクローンする - Azure | Microsoft Docs

↓

必要に応じてcheckoutする

左下のブランチ名をクリック

ブランチを選択するとcheckoutできる

↓

組織を承認する
SFDX: Authorize an Org (SFDX: 組織を承認)

それからまた違うPCでソースをいじりたいときは、最新のソースをpullする。

git pull origin [ブランチ名]

pullしても下記のようなエラーが出てしまった場合は・・

error: Your local changes to the following files would be overwritten by merge:
        *****/*****/*****/*****/*****/*****.*****
Please commit your changes or stash them before you merge.

変更を退避すればおkらしい。今現在のローカルにあるソースを残したいときはコミットしてください。

git stash -u

これで再度pullすればできると思います。

おしまい

LWC onchangeはいつ動いている？

onchangeがいつ動いているのか気になったので調べてみました。

ソース

onChangeCheck.html

<template>
    <lightning-card>
        <lightning-input label="onchangeかくにん" value={inputValue} onchange={changeInputValue}></lightning-input>
        <div>{onChangeCheckValue}</div>
    </lightning-card>
</template>

onChangeCheck.js

import { LightningElement } from 'lwc';

export default class OnChangeCheck extends LightningElement {
    inputValue = 'あ';
    onChangeCheckValue = '読み込み完了';
    changeInputValue(event) {
      this.inputValue = event.target.value;
      this.onChangeCheckValue = 'onchange入った';
    }
}

初期表示

onchangeが動けば、’読み込み完了’が’onchange入った’に変わります。

入力欄の文字を変えてみよう。

と思ったら消しただけでonchange動いた。

こういうのって普通は入力値変更してフォーカスが外れたら動くんじゃないの？？

もう一度初期表示に戻して「あ」を消さずに上から「あ」を入力したら・・

onchangeには入らない。

消すだけでonchangeに入るから、普通に消してからもう一度初期表示されている文字「あ」を入力してももちろんonchangeには入ってしまう。

こんな挙動なんだ。

ふーん・・

おしまい

GitHub git push --forceは危険

ハッシュ値で特定のコミットに戻ってから、変更を加えて再びプッシュしようとしたら・・

 error: failed to push some refs to 'https://github.com/***/***.git'
hint: Updates were rejected because the tip of your current branch is behind
hint: its remote counterpart. Integrate the remote changes (e.g.
hint: 'git pull ...') before pushing again.
hint: See the 'Note about fast-forwards' in 'git push --help' for details.

って出たから、適当に

git push --force

って打ったら戻ったコミットから後のコミットが全部消えてた・・

怖いコマンドだ。もう使いません多分

おしまい

GitHub 特定のコミットまで戻す

#ハッシュ値を確認するためにログを開く
git log

#commit  [ハッシュ値]と出てくるのでハッシュ値をコピーしてコマンドに続いて貼り付ける
git reset --hard [ハッシュ値]

ハッシュ値はWebからでも確認できる

この短いハッシュ値でも戻せる

おしまい