Language
日本語
English

Caution

JavaScript is disabled in your browser.
This site uses JavaScript for features such as search.
For the best experience, please enable JavaScript before browsing this site.

JavaScript
Beginner

  1. What is JavaScript? - Japanese Only
  2. Where to Write JavaScript - Japanese Only
  3. Comments and alert() - Japanese Only
  4. The Handy Developer Tools and console.log - Japanese Only
  5. Using Variables (Part 1) - Japanese Only
  6. Using Variables (Part 2) - Japanese Only
  7. Using Variables (Part 3) - Japanese Only
  8. Strings, Numbers, and Booleans - Japanese Only
  9. Basic Arithmetic with Operators - Japanese Only
  10. What are Arrays? - Japanese Only
  11. How to Use Arrays - Japanese Only
  12. Accessing Elements by ID and Manipulating Attributes - Japanese Only
  1. Changing Element Content with innerHTML - Japanese Only
  2. Functions and Arguments (Part 1) - Japanese Only
  3. Functions and Arguments (Part 2) - Japanese Only
  4. Event Handling (Part 1) - Japanese Only
  5. Event Handling (Part 2) - Japanese Only
  6. Comparison Operators and Booleans - Japanese Only
  7. The if Statement: Conditional Execution - Japanese Only
  8. About Logical Operators - Japanese Only
  9. Branching with the switch Statement - Japanese Only
  10. Writing for Loops - Japanese Only
  11. Indefinite Loops: while and do...while - Japanese Only
  12. JavaScript Beginner Summary - Japanese Only
シェアするシェアする
このエントリーをはてなブックマークに追加
  1. Home
  2. JavaScriptBeginner - Using Variables (Part 1)

Using Variables (Part 1) - Japanese Only

みなさまどうもこんにちは。

続きまして『変数』について勉強していきましょう。

『変数』は様々なプログラム言語において実装されている根本的な概念になりますので超重要項目です。しかし慣れないうちは概念が中々理解できないかもしれません。

プログラミングの勉強をし始めた初心者の方が
「変数が理解できないよぉ！！(；´Д｀)」
と叫んでいるのをよく見かけます。ちょっとしたプログラミングの壁みたいになっちゃっていますが、時間がかかってしまっても理解できれば結果は同じですので気合で頑張っていきましょう。

今回の記事では変数を宣言するところまで解説していきたいと思います。次の記事で変数に代入するところまで進み、その次で実際に変数を使用してみて変数の概念や便利さを理解して頂ければと思います。

ではいきましょう。

まず変数というのは『加工や複製が可能で固有の名前を持つ一時的にデータが記録された領域』って感じです。この『固有の名前を持つ』という事と『加工や複製ができる』というのが非常に強力です。

数学で方程式ってありましたよね。『x』とか『y』とかいう文字を使ったあれです。

x + y = 3

この『x』とか『y』とかっていう概念と非常に近いです。

変数と検索してみると変数のイメージは「データを入れる箱のようなもの」と色々な所で解説されているようです。箱で例えるとするならば『データを入れられて加工や複製ができる名前をつけた箱』ってところですかね。ちょっと言葉にするのは難しいのですが実際に使ってみると変数がどんなものか掴めてくると思います。

というわけで今回は練習がてら外部のjsファイルを呼び出して実行してみます。

HTMLファイルを用意します。中身はこんな感じです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>JavaScript練習中！</title>
</head>
<body>

<script src="./script.js"></script>
</body>
</html>

そんでもって同じディレクトリ階層に『script.js』と名前をつけたJSファイルを用意します。文字エンコーディングに注意してください。『utf-8』で記述します。あとは普通にJavaScriptを記述していけばOKです。

外部JavaScriptファイルがちゃんと読み込みできているかどうか確認したい場合は外部JavaScriptファイルに適当にアラート関数なんかを書いてブラウザで確認してみると良いです。アラートダイアログが出てくればしっかり読み込みできている証拠になります。

さて外部ファイルでの読み込みの準備はよろしいでしょうか。

じゃあ記述していきましょう。

まず変数を使用するまえに『変数宣言』をしなくてはいけません。

『変数宣言』とは変数本体を作成するような感じです。コンピューターに「これは変数だよ！」と事前に教えてあげる必要があるのです。

JavaScriptでの変数宣言は『var』と記載し半角スペースを一つあけて『変数名』を記述します。

『変数名』とはその名の通り変数の名前のことです。『var』の後に任意の『変数名』を記述すればその変数名を持った変数を宣言することができます。

以下の様な感じですね。今回は数学を思い出して『x』という変数名で変数を作ります。

var x;

これで『x』という変数名の変数ができあがりました。これで変数宣言はOKです。

ちなみに半角スペースを一つあけて、と書きましたが半角スペースとタブ文字と改行はいくら追加しても問題ないです。

var     
                          x;

まあ実際は意味もないし、見づらいだけなので

var x;

と書くようにしましょう。

逆に半角スペースをあけないとダメです。

varx;

単語の区切りがなくなってしまい、ブラウザが変数宣言文だと判断してくれなくなってしまいます。

そして変数宣言は複数同時に行うことができます。複数同時に宣言する場合は変数ごとに『,』を使って区切ります。

var x, y, z;

これは変数『x』,『y』,『z』を同時に宣言しています。文末の『;』は忘れないようにしてくださいね。

『変数名』は『識別子』(しきべつし)と呼ばれたりすることがあります。

会話などでは『変数名』と呼ばれることがほとんどですが、ちょっと難しめの参考書などでは『識別子』と書いてあったりします。

ただし『識別子』は集合の中から識別できる名前、という意味になるので変数名に限らず関数名や仮引数名なども全て『識別子』となり、変数名よりも広義なものを指す言葉です。こちらも覚えておきましょう。

JavaScriptにおいては変数宣言を必ずしなくてはいけない、というわけではありません。変数宣言を行わずにいきなり変数として使用することができます。

// こういう感じでいきなり変数に代入することができます
a = "test";

ただしその場合は変数の扱いがローカル変数ではなくグローバル変数として扱われてしまい、予期せぬバグの原因になるためJavaScriptでは必ず『var』を使って変数宣言を行うのが暗黙の了解となっています。実は『var』を使用した変数宣言の真の目的は『ローカル変数として宣言する』という事だったりします。

ちょっとむずかしいのでこの辺の解説は先の記事で解説していきます。皆さんはあまり気にせず『var』を使ってちゃんと変数宣言するべきである、という事だけ忘れないようにしていきましょう。

ここまでは大丈夫でしょうか。

さて変数名についてちょっと注意すべき事があります。JavaScriptでの変数名は何でもかんでも好きな名前を付けられるというわけではありません。ネーミングルールが存在しますので要注意です。JavaScriptにおけるネーミングルールは以下の様な感じです。

  • 使用できる文字はUnicode(ユニコード)文字と『$』(ダラー)『_』、(アンダーバー)
  • 先頭文字に数字は使用不可
  • 大文字小文字は区別される
  • 予約語は使用不可

具体的にみていきましょう。

最初の使用できる文字についてですが、『_』(アンダーバー)、『$』(ダラー)はOKですね。これはそのままこの記号は使っちゃってOKですよという意味です。

あまり聞いたことないのは『Unicode文字』ってやつかと思います。Unicode文字とはこの世界で使われる全ての文字を共通の文字集合として実装したもので、要するに普段使っている英語とか日本語とかのことです。普通に『utf-8』あたりでタイピングすればそれがUnicode文字なのでJavaScriptを書く際は特に気にしなくてOKです。

続いて先頭文字についてですね。これは例えば

var 8test;

とかはダメってことです。最初に数字が入っちゃってるのでNGです。ちなみに『_』と『$』は最初の文字として使用できます。

var _x;
var $;

上記みたいなやつは使っちゃってOKです。ただし上記のような『$』という変数名は『jQuery』(ジェイクエリー)という超有名なライブラリで関数名として使用していますので名前の衝突が起こる可能性があります。なので避けたほうが無難です。

続いて大文字小文字についてです。こんな感じですね。

var oBj;
var obJ;

JavaScriptではこの『oBj』と『obJ』は別の変数として扱われますよということです。この大文字小文字が区別されるかされないかについては言語によって違うので注意が必要です。例えばデータベースの一種である『MySQL』などでは特別な事をしない限り大文字小文字は区別されません。色々な言語をかけるようになるとこんがらがってしまうことが多いので注意してください。私もよく間違えます。

最後に予約語についてですね。予約語とは将来そのプログラミング言語に実装する可能性がある関数名や変数名のことです。全ての予約語は前もって変数名などの識別子としての使用は不可にしておかないといけません。

これはどういう事かというと、例えばJavaScript以外の他のオブジェクト指向型の言語に必ずといっていいくらい存在する『継承』という機能があります。その『継承』という機能を実装する際に記述する単語は総じて『class』という文字列です。この『継承』という機能を将来JavaScriptに組み込みする予定がある、ということは前もって『class』という名前を使用不可にしておかないと古いJavaScriptファイルを最新の環境で実行すると当時想定していた処理と違う処理が実行されてしまい古いJavaScriptファイル全般が使えなくなってしまいます。これが予約語を変数名として使用できない理由です。

JavaScriptでの予約語は以下の様なものがあります。これらは使えません。あ、全部じゃないので注意してくださいね。

  • class
  • enum
  • export
  • extends
  • import
  • super

予約語全般を調べたいときはここをみるといいかもです。Firefoxを開発しているMozillaさんの公式サイトです。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Reserved_Words

予約語を間違えて使わないようにするためには変数を作る前に軽くgoogle先生に聞いてみたりすると良いですね。そのうちこれはOKでこれはダメっていうのが掴めてくるかと思います。メモとか取っておくと良い感じです。

JavaScriptは変数名をUnicodeで記述しますが、Unicode文字には日本語も含まれます。

というわけであまり知られていませんが、なんとJavaScriptでは日本語が使えちゃいます。

var 変数;

これ、問題なく動きます。

ただし、日本語でのJavaScriptはイロモノ扱いなので変数名は半角英数字を使うようにしましょう。取引先とかに日本語で作られたJavaScriptを納品したら多分怒られちゃいます。ちょっとした小ネタに使うぐらいにしておきましょう。

というわけでとりあえず変数宣言までやってきました。長くなりましたのでここで一旦切ります。次は変数の概要について勉強していきたいと思います。

ではではこの辺で。またお会いしましょう。

This article was written by Sakurama.

Author's beloved small mammal

桜舞 春人 Sakurama Haruto

A Tokyo-based programmer who has been creating various content since the ISDN era, with a bit of concern about his hair. A true long sleeper who generally feels unwell without at least 10 hours of sleep. His dream is to live a life where he can sleep as much as he wants. Loves games, sports, and music. Please share some hair with him.

If you find any errors or copyright issues, please .

シェアするシェアする
このエントリーをはてなブックマークに追加