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が使えるってことがわかりました。

おしまい