jQuery初心者のための書き方講座その4【変数の代入と表示】

jQuery

Javascript
プログラミング言語

公開日時: 2020-04-20 　更新日時: 2022-06-13

この記事でわかること

jQueryにおいても、ほかのプログラム言語同様に変数を扱うことが多々あります。取得した情報の処理や演算結果をページ内に反映するなど、より複雑な処理を行う上で変数の存在は欠かせません。

プログラマー: jQueryでも変数を使っていろいろ処理したいのですが、扱い方はどうすれば良いですか？

プロジェクト リーダー: 変数が扱えるようになると、やれることが増えるので使いこなしたいところですね！さっそく見ていきましょう。

変数とは

変数は様々な情報を入れるための箱のような存在で、ページ内にある情報を一時的に保持したり、指定した処理を加えて変更したりするために利用します。例えば、Aという箱の中に情報Bを入れたとして、ほかの情報Cとの差を比較することが可能です。

また、よく使う設定値をコード上にそのまま入力していた場合、修正する際に手間がかかりますが、変数を用いていればその設定値を変えるだけで済みます。

変数の宣言

変数の宣言は「変数の種類＋変数名」で行います。jQueryにおいてはこの宣言子としてconst、let、varの3種類が用意されています。

constは定数を扱う場合に利用し、変数名の後に続いて初期値を設定します。これで指定した変数の中身を書き換えられることなくコード上で利用できます。

letとvarはほぼ同じで、宣言子の後に変数名を指定しますが、初期値を必ずしも指定する必要はありません。またコード上で利用するにあたり、変数の中身を変更することができます。varには同じ変数名を指定するとエラーとして検出できない不具合があり、これを回避するためにletの利用が推奨されています。

変数の代入と表示

変数への代入例を解説します。まず、操作対象となる変数を宣言し、操作したい変数の設定値を入れてみましょう。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>sample html</title>
</head>
<body>
<ul id="first">
  <div id="second">これはテスト用のページです。</div>
  <div id=".third">このidはピリオドを含んでいます。</div>
</ul>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function() {
  // 変数宣言
  let input_text;
  // 「id="second"」のテキストを取得
  input_text = $('#second');
  // 取得したテキストの内容を追記
  input_text.append('テストテスト');
});
</script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>sample html</title>

</head>

<body>

<div id="second">これはテスト用のページです。</div>

<div id=".third">このidはピリオドを含んでいます。</div>

</ul>

$(function() {

// 変数宣言

let input_text;

// 「id="second"」のテキストを取得

input_text = $('#second');

// 取得したテキストの内容を追記

input_text.append('テストテスト');

});

</script>

</body>

</html>

実行結果

変数の命名規則

変数の名前を付けるにあたって利用できる文字が決まっています。利用できる文字は、半角英数字と_（アンダースコア）、$（ダラー）です。
変数の初めの1文字は数字以外の文字から始まるものとし、プログラム上で利用される識別子や予約語と被らないものである必要があります。
また、変数の名前は、変数の動作に準じたものにすることが推奨されています。

プログラマー: 変数を利用すればいろんなデータの入れ物として使えるんですね。

プロジェクト リーダー: その通りです。使い方次第でメンテナンスもしやすくなるので、しっかり覚えてくださいね。

変数を利用してデータの加工を自由自在に

変数を扱えると、ページ内の可変データを自由に操作することが可能になります。特に動的ページを作る際には、変数の扱い1つで挙動が大きく変わります。上手に使いこなすことでメンテナンス性も段違いに上がるため、変数の扱い方をしっかりマスターしておきましょう。

FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。

株式会社オープンアップシステムはこんな会社です

秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。

スマホアプリから業務系システムまで

スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
充実した研修制度

毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
資格取得を応援

スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
東証プライム上場企業グループ

オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。

安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

株式会社オープンアップシステムに興味を持った方へ

株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

株式会社オープンアップシステムへ応募する
会員登録不要! カンタン45秒!

jQuery初心者のための書き方講座その4【変数の代入と表示】