— JavaScript, tutorials — 1 min read
説明を簡潔にするため
説明を簡潔にするため、「現時点では重要でない概念」「初学者のうちは気にしなくて良い情報」という部分はあえて飛ばしています。正確な内容については、書籍か MDN web docsを参照してください。
コードが出てきたら「必ず」1日目に使用したデベロッパー・ツールのコンソールタブで実行する癖をつけてください。これは必ず実施してください。
サンプルコードが出てきたら「必ず」1日目に使用したデベロッパー・ツールのコンソールタブで実行する癖をつけてください。 JavaScript習得のためにやっていただきたいトレーニングの一環ですので、必ず実施してください。
そして、「質問」を積極的にしてください。
と言うプロセスが必要で、このプロセスが学習には効果的です。積極的に質問しましょう! どんな些細な質問でも大丈夫です。安心して質問してください!
データを一時的に保管しておくための「箱」のような物をイメージして下さい。変数には好きな「名前」をつけることができます。変数を「識別子」と呼ぶこともありますので覚えておいてください。
https://media.prod.mdn.mozit.cloud/attachments/2016/07/12/13506/fff6c759c689be5d4d25f35f7e6f0e5a/boxes.png (参照元:MDN web docs)
変数を使用するためには、まずは変数を作ります。より正確には、「変数を宣言する」といいます。そのためには var
キーワードに続けて変数名を書きます。
1var a = 100; // a という名前の変数を宣言し 100 という値を入れる
_
(アンダースコア) $
(ダラー) の記号_
(アンダースコア) $
(ダラー) から始めること以下のように書きます
1var hoge = 500 // hoge という変数に 500 という値を格納2var $a = 1000 // $a という変数に 1000 という値を格納3var _abc = 999 // _abc という変数に 999 という値を格納
1var a = 1002var A = 2003// a と A は別の変数として宣言される
よくある間違い(エラーになることをコンソールで確認してください)
1var myFirstName = 1002console.log(myFirstname) // N -> n と打ってしまい、エラーになる
試しにコードを書くような場合は上記の例のように適当な(意味のない)変数名をつけても問題ありません。ただし、通常は出来るだけ意味のある変数名をつけたほうが良いでしょう。 名前があるとコードの意味を理解しやすくなります。どんな値が格納されているかの説明にもなるので、変数にはパッと見たときにそのデータが何か分かる名前をつけるようにしましょう。
1var price = 500 // 値段2var age = 34 // 年齢3var box_count = 5 // 箱の数
格納(= 保持)です。箱にデータを入れるイメージなので、変数にデータを入れることを「格納」と表現することが多いです。
true
・false
などの「真偽値」も格納できます1var name = 松田信介 // 文字2var age = 34 // 数値3var is_programmer = true // 真偽値4var favorite_foods = ['焼肉', '寿司'] // 配列5var result = 79 * 38 / 0.5 // 計算結果
JavaScriptの構文に違反したコードを書いてみましょう。
1var a =; alert // ;(コロン)がおかしな所に入っている2var 1_name = 100 // 変数名のつけ方がおかしい
JavaScript構文として解釈できないコードが実行されると、下記のようなエラーが出ます。このエラーは単純な書き間違いが原因です。コードをよく見て冷静に間違いを見つけ修正しましょう。
宣言と値の格納は分けることもできます
1var name2var age3name = '松田信介'4age = 34
カンマ記号で区切ることで複数の変数を一度に宣言できます。
1// この書き方もOK2var name, age, job_name, company_name, birthday
1// こちらの書き方もOK 宣言と同時に初期化(値のセット)しています2var name = '松田信介', age = 34, company_name = '株式会社X-HACK', birthday = '1985-04-13'
var
で宣言した変数の中身は他のデータで書き換えることも可能です。
1var price = 500 // 値段2var tax = 0.10 // 消費税3var postage = 120 // 送料4price = price + (price * tax) // 消費税込みの値段を計算した結果を price へ再度格納5price = price + postage // 送料込みの値段を計算
var
・let
・const
について変数を宣言するキーワードはvar
以外にもlet
・const
などのキーワードがあります。それぞれ使い方が異なります。変数のスコープを説明する会で触れますので、今の時点では「var
以外にもlet
とconst
で変数を宣言してもいいんだなー」くらいに理解しておいてください。
データには「型」があります。数値や文字列、配列などのデータ型があり、それぞれ扱いが異なります。まずは「数値」と「文字」はデータ型が違うと覚えておいてください。
var
とは何か?var
は変数
を宣言するためのキーワード
var
以外にもlet
やconst
というキーワードがあるvar
を使って宣言した変数の中身は書き換えることができるvar
についての詳しい解説はこちら変数についてより正確な内容を知りたい場合、下記の二つの記事を参考にしてください