基礎を見直そう!まずは変数!【JavaScript入門】
2017/12/04
先日の記事にも書いたとおり、jQueryなどのフレームワーク・ライブラリによりJavaScriptが身近なものになっています。
嬉しい反面、いつか自分の地位が脅かされるのではないかとひやひやしています(笑)
さて、今回はプログラミングのもっとも基礎的な部分を取り上げようと思います。
今回はあくまでコアな部分、すなわち特定の言語に依存しない部分を紹介していきます。
他の言語でも利用できる知識なのでしっかり理解しましょう。
変数とは
まずは以下のプログラムをご覧ください。
プログラミング初心者の方はとりあえず見るだけでOKです。
(サンプルを実行したい場合はbody要素またはhead要素内にscript要素を入れ、そこにコピペしてくださいね。)
var price = 2000; //価格(税抜き) var discount = 0.3; //割引率 var tax = 0.05; //消費税率 var discountedPrice = price - ( price * discount); //割引後の価格 var result = discountedPrice + ( discountedPrice * tax ); //消費税を含めた最終的な価格 alert(result); //結果を出力
プログラミング初心者の方でもどういう処理をしているかなんとなく想像がつくかと思います。
プログラムの内容は「価格に割引率と消費税率を適用したものを出力」というシンプルなものです。
var ○○となっている部分の○○が変数です(ちなみにvarはvariableの略ですね)。
変数はデータを格納しておく為の箱のようなものです。上記のコードを見れば分かりますが変数は使いまわすことが出来ます。
「べつに変数なんて無くてもよくない?」って思う人もいるかもしれません。それでは上記コードを変数を使用せず書き換えたものをご覧ください。
var result = (2000 - ( 2000 * 0.3 )) + ( (2000 - ( 2000 * 0.3 )) * 0.05 ); //消費税を含めた最終的な価格 alert(result); //結果を出力
いかがでしょうか? 数字の羅列ばかりでどれがどれを指しているか分からないですよね。こういう数値のことをマジックナンバーと言います。魔法のように不思議なものに見えるということですね。
alert()よりもconsole.log()を利用しましょう
alert()の部分はconsole.log()に置き換えることでGoogle Chromeなどのデバッグコンソールに出力させることが可能です。alert()よりも便利なので是非活用してください。デバッグコンソールの使い方はこちらのページをご覧ください。
ただ、1点注意があります。IE8以下のブラウザではconsoleが実装されていない為エラーになります。公開前は必ず該当箇所を削除しましょう。
変数名に使用可能な文字
変数名に使用できる文字は限られています。使用可能文字は下記の通り(いずれも半角のみ使用可能)。
- a から z
- A から Z
- 0 から 9
- $
- _(アンダーバー)
また、変数名は数字以外の文字から始める必要があります。
また変数名に予約語を使用することは出来ません。予約語とは元々プログラム言語の仕様で定められた単語のことで上記のコードではvarがそれに当たります。
変数に代入可能な値
変数には上記のような数値の他にもさまざまな値を入れることが可能です。値には以下のようなものが存在します。
- 数値
- 上記の例でも使われている半角の数字です。全角の数字は文字列として扱われます。数値は加算・減算などの演算を行うことができます。
- 文字列
- 数値以外の文字です。文字列をプログラム内に記述する場合は「”(ダブルクォーテーション)」か「’(シングルクォーテンション / アポストロフィー)」で囲う必要があります。
- ブール値
- 「true」もしくは「false」。条件分岐やループの条件判定に使用されます。なお、ブール値は文字列でない為、ダブルクォーテーションなどで囲う必要はありません(囲うと文字列として認識されます)。
- 配列
- 今回説明は割愛します。気になる方はこちらを参照ください。
- オブジェクト
- 今回説明は割愛します。気になる方はこちらを参照ください。
まとめ
変数はデータを分かりやすく整理したり、計算の途中過程を記憶したり、それを使いまわしたりと最も有用な機能です。しっかり理解しましょう!
次回はプログラミングの肝である関数を取り上げようかと思います。お楽しみに!