【入門】jQueryの変数の使い方

2020.02.15
2022.05.04
jQuery

jQueryの勉強を始めたばかりの学生です。
jQueryの変数の使い方がわからないので、わかりやすく教えてほしい！

こう言った疑問に答えていきます。
本日の内容は下記です。

変数とは？
jQueryの変数の書き方
jQueryの変数の使い方

この記事を読みば、初心者の方でも「jQueryの変数の使い方」がわかるようになります！

「変数」って聞くと、ぶっちゃけ難しそうに聞こえますよね？
しかも、「変数」って必ずと言っていいぐらい使われますし、コード読むときにも必要になってきます。
僕も始めの頃は、「変数」って聞くとちょっと抵抗があったりもしました。

しかし実際に勉強してみると、案外簡単だったりします！
今回は、この「jQueryの変数の使い方」について、初心者の方にもわかりやすく解説していきますね。

では実際にやっていきましょう！

1. 変数とは？
- 1.1. 変数を使うメリット
2. jQueryの変数の書き方
3. jQueryの変数の使い方
4. まとめ

変数とは？

そもそも変数とは何かと言うと、Wiki先生ではこのように解説されています。

プログラミングにおける変数（へんすう、英: variable）とは、高水準言語のプログラムのソースコードにおいて、扱うデータを読み書きする記憶域 (storage) のことであり、固有の名前（識別子）によって識別される。変数を用いることで、データを一定期間記憶し必要なときに利用することができる。高水準言語において、変数は記憶装置（メモリ）を抽象化する役割を果たす。
https://ja.wikipedia.org/wiki/変数_(プログラミング)

もう頭が痛くなるようなワードばかりですね。

簡単に説明すると、「同じコードを複数回使用するときに、１つの名前として定義しておけば、その名前を使うだけでいいですよ。」と言うのが変数です。

例えば、「AAAAA」という文字列を何回も書くとなると、ものすごく面倒なので、「AAAAA」は「A」と書くだけでいいですよ、と定義すれば、毎回「AAAAA」と書かずに、「A」と書くだけで済むことになるんです。

これが変数になります。

変数を使うメリット

変数を使うメリットとしては、「コードが見やすくなる」「処理が高速化される」と言ったメリットがあります。

変数を使わずに、そのまま書いても処理はされますが、コードの量が増えるので単純に見ずらくなります。また、書いたコードを他の人に見せたり見たりするときがあるので、変数として定義しておくといいでしょう。

処理速度も、単純にコードの量が多くなるとその分処理も遅くなるでの、変数で定義しておくのが一般的です。

では実際に、jQueryの変数の書き方について見ていきましょう！

jQueryの変数の書き方

基本的な書き方は下のように書いていきます。

var $変数名 = 値;

「$変数名」の$は、無くても問題はないのですが、通常jQueryを書くときは$(‘セレクタ’)と書くので、$が無い場合だと「変数名.メソッド」になるのでわかりにくくなります。$をつけてあげると「$変数名.メソッド」となるのでコードを見たときにわかりやすくなります。

【入門】jQueryの書き方　〜 jQueryの基本〜

jQueryの変数の使い方

では実際に、変数の使い方について見ていきましょう！
今回は例として、下のコードを使っていきます。

<body>
<p>HelloWorld</p>

<script>
$(function(){

   $('p').css('color','white')
   $('p').css('background','pink')

});
</script>
</body>

今回は「$( ‘ p ‘ )」を変数として定義していきます。
書き方は下のように書いていきます。

<body>
<p>HelloWorld</p>

<script>
$(function(){
  var $p = $('p')
   $p.css('color','white')
   $p.css('background','pink')

});
</script>
</body>

「$p」を変数名として定義していきます。
あとは「$( ‘ p ‘ )」の部分を「$p」に変更するだけです！

では実際にブラウザで確認して見ましょう。

うまく反映されていますね。
このように変数を使うことで、コードをスッキリまとめることができます。

まとめ

今回は「jQueryの変数の使い方」について解説してきました。
変数は、jQuery以外のプログラミング言語でも活用されるものなので、書き方は違えど、変数の意味についてはしっかりと覚えましょう！

では本日は以上になります。

オススメの教材

前の記事
【入門】jQueryの書き方〜 click( )イベントの使い方〜 2020.02.11
次の記事
【CSS入門】displayプロパティの使い方 2020.02.16