この記事の目次
jQueryとは？
jQueryとは、JavaScriptでできることを、より簡単に少ない記述でできるようにした、JavaScriptのライブラリのことです。
jQueryはJavaScriptを使いやすいように拡張したものです。例えば、1つの機能を実現するためにはJavaScriptだと10行ほどのコードが必要だった場合、jQueryを使用すれば1～2行ほどで済んでしまいます。
jQueryの登場によって開発が効率化され、JavaScriptを使用した複雑な記述が無くなったため、プログラミング初心者でもエンジニアとして活躍できるようになりました。
jQueryでできること
jQueryの主な特徴は、以下の3つができるところです。 1.ブラウザの違いを意識しなくても良い 2.HTMLのDOM操作が簡単に行える 3.Ajax処理が簡単に書けるブラウザの違いを意識しなくても良い
jQueryでは、ブラウザの違いを意識する必要はありません。 JavaScriptでは、Chrome、FireFox、Internet Explorer、Safariなど、各ブラウザで使用可能なメソッドや記述方法が異なる場合があり、ブラウザの違いを意識する必要がありました。 しかし、jQueryでは、ブラウザの違いを自動で吸収してくれるので、ブラウザの違いを意識せずにプログラミングが可能になります。HTMLのDOM操作が簡単に行える
jQueryでは、DOMの操作が簡単に実現できます。 DOMとは、「Document Object Model」の略で、プログラムからHTMLやXMLを自由に操作するための仕組みです。以下のような操作があり、jQueryではこれらの操作が簡単に実現できます。 1)テキストボックスの中身を取得したり変更できる 2)画面部品の表示をボタン一つで非表示できる 3)ユーザー操作に合わせてCSSを変更できるAjax処理が簡単に書ける
jQueryでは、Ajax処理を簡単に記述できます。 Ajaxとは、「Asynchronous JavaScript And XML」の略で、非同期通信のことを指します。HTMLとは無関係に裏方のJavaScriptプログラムだけでサーバと通信できるので、サーバとクライアントが通信中でも、ユーザーはHTML画面の操作が可能となります。jQueryでできないこと
jQueryでは、JavaScript内部における処理はできません。 jQueryは基本的にはHTMLのDOM操作やAjaxの記述するためのもので、JavaScript内部の処理はできません。JavaScript内部の処理は、JavaScriptコードで記述する必要があります。 例えば次のような処理です。 1.変数同士のたし算をする 2.配列データを操作する 3.オブジェクト型データを操作する 4.JavaScript内でループをするSalesforceでjQueryを使用する
SalesforceのVisualforceページでjQueryを使用できます。
静的リソースを使用することでjQueryをSalesforceのVisualforceページで参照できます。静的リソースとは、アーカイブ(zip、jarファイルなど)、画像、スタイルシート、JavaScript、その他のファイルをSalesforceのVisualforceページで使用できるようにしたものです。
静的リソースの作成
SalesforceのVisualforceページでjQueryを使用する場合、静的リソースを作成しアップロードします。 その手順を以下に説明します。 1.jQuery JavaScriptライブラリの最新版をダウンロードします。 2.Salesforceの「設定」→「クイック検索」ボックスに「静的リソース」と入力し、「静的リソース」を選択して「新規」を選びます。 3.「名前」には「jQuery」を入力します。 4.「ファイル選択」でダウンロードした最新版のjQueryを選択します。 5.「キャッシュコントロール」が表示される場合は「公開」を選択します。 6.「保存」します。 これで、jQueryを「{! $Resource.jQuery }」などの式で参照できます。また、静的リソースの参照を更新すれば、Visualforceページを変更することなく最新のjQueryに更新することが可能です。静的リソースをVisualforceページに追加
SalesforceのVisualforceページにjQueryを追加する方法を説明します。 「$Resource」グローバル変数と「.」表記で参照します。その手順を以下に説明します。 1.Salesforceの「File」→「New」→「Visualforce Page」を選択し、ページ名は「Hello JQuery」とします。 2.エディタで次のようなプログラムを記載します。<apex:page>
<!-- Add the static resource to page's <head> -->
<apex:includeScript value="{! $Resource.jQuery }"/>
<!-- A short bit of jQuery to test it's there -->
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery("#message").html("Hello from jQuery!");
});
</script>
<!-- Where the jQuery message will appear -->
<h1 id="message"></h1>
</apex:page>圧縮された静的リソースの作成
圧縮された静的リソースを作成して、関連ファイルをグループ化しておけば扱いが便利になります。 関連するアプリケーションアイコンやjQueryなどをグループ化し、ZIPファイルを作成しておけば、そのZIPファイルをアップロードすることで関連ファイルが使用できます。 その手順を以下に説明します。 1.jQuery Mobile JavaScriptライブラリの最新版をZIP形式でダウンロードします。 2.ZIPファイルを開いて「/demos/」ディレクトリとその中身を削除します。 3.フォルダを圧縮して「jquery.zip」という名前にします。 4.Salesforceの「設定」→「クイック検索」ボックスに「静的リソース」と入力し、「静的リソース」を選択して「新規」を選びます。 5.「名前」には「jQueryMobile」を入力します。 6.「ファイル選択」でjquery.zipを選択します。 7.「保存」します。圧縮された静的リソースをVisualforceページに追加
SalesforceのVisualforceページに圧縮された静的リソースを追加する方法を説明します。 圧縮された静的リソース内の参照は、「$Resource」グローバル変数と「URLFOR()」関数を使用します。以下はサンプルコードです。<apex:page showHeader="false" sidebar="false" standardStylesheets="false">
<!-- Add static resources to page's <head> -->
<apex:stylesheet value="{!
URLFOR($Resource.jQueryMobile,'jquery/jquery.mobile-1.4.5.css')}"/>
<apex:includeScript value="{! $Resource.jQueryMobile }"/>
<apex:includeScript value="{!
URLFOR($Resource.jQueryMobile,'jquery/jquery.mobile-1.4.5.js')}"/>
<div style="margin-left: auto; margin-right: auto; width: 50%">
<!-- Display images directly referenced in a static resource -->
<h3>Images</h3>
<p>A hidden message:
<apex:image alt="eye" title="eye"
url="{!URLFOR($Resource.jQueryMobile, 'jquery/images/icons-png/eye-black.png')}"/>
<apex:image alt="heart" title="heart"
url="{!URLFOR($Resource.jQueryMobile, 'jquery/images/icons-png/heart-black.png')}"/>
<apex:image alt="cloud" title="cloud"
url="{!URLFOR($Resource.jQueryMobile, 'jquery/images/icons-png/cloud-black.png')}"/>
</p>
<!-- Display images referenced by CSS styles, all from a static resource. -->
<h3>Background Images on Buttons</h3>
<button class="ui-btn ui-shadow ui-corner-all
ui-btn-icon-left ui-icon-action">action</button>
<button class="ui-btn ui-shadow ui-corner-all
ui-btn-icon-left ui-icon-star">star</button>
</div>
</apex:page>SalesforceでjQueryを活用しよう！
今回は、jQueryの概要と、SalesforceでjQueryを使用する方法について説明しました。
jQueryを使用すれば、複雑なJavaScriptコードを記述することなく、比較的簡単に開発を進められます。ぜひこの機会に理解しておきましょう。]]>
この記事の監修者・著者
-
未経験からITエンジニアへのキャリアチェンジを支援するサイト「キャリアチェンジアカデミー」を運営。これまで4500人以上のITエンジニアを未経験から育成・排出してきました。
・AWS、salesforce、LPICの合計認定資格取得件数：2100以上（2023年6月時点）
・AWS Japan Certification Award 2020 ライジングスター of the Year 受賞
最新の投稿
- 2023年11月21日キャリア・転職ITエンジニアへのキャリアチェンジに多い理由は？
- 2023年11月20日キャリア・転職フリーターからの就職でおすすめの職業は？
- 2023年11月20日キャリア・転職経理へのキャリアチェンジ転職・志望動機は？
- 2023年11月20日キャリア・転職法務からのキャリアチェンジおすすめの業界は？
