海未「では今回は、JavaScriptの基本文法を見てみましょう・・・といっても、極めて簡単なのですが」
穂乃果「簡単なの？よしっ！」
|
1 2 3 4 5 6 7 8 9 10 |
/* * 引数で与えられたメンバーが自己紹介する */ function introduce(name) { console.log("μ'sの" + name + "です！"); } // 海未の自己紹介 introduce("園田海未"); |
海未「こんなコードがあるとしましょう。まだ内容を読める必要はありません」
ことり「前回見たやつと似てるね」
海未「このコードで、introduce("園田海未");のような部分が文です。JavaScriptの文は必ず;で終わることになっています」
穂乃果「とりあえず;つけて書いていけばいいのかな」
海未「文と、functionで始まる部分のようなブロックは区別しないといけません。後で出てくるifやforなどもそうですが、複数の文を{}でまとめるブロックには;は使いません」
穂乃果「めんどくさいよー」
海未「そのくらいは覚えてください！だいたい穂乃果はいつもいつもやる気というものが・・・」
ことり「まあまあ、海未ちゃん・・・」
海未「・・・はあ。ともかくJavaScriptのコードは、文とブロック、それとコメントで成り立っていると考えていいでしょう」
ことり「コメントっていうのは？」
海未「/* */で囲まれたり//で始まる部分です。ここはプログラムとしては無視される部分で、コードを読む人向けの情報を書いておくためのものですね」
海未「JavaScriptでは全てにおいて大文字と小文字が区別されます。ですから、kotoriとKotoriとKOTORIは全て異なるものとして認識されますし、関数定義をするfunctionをFunctionと書いてしまうと動きません」
ことり「さっきのコード見ると、基本的には小文字で書く文化なのかな？」
海未「そうですね。複数の単語がつながる場合は、キャメルケースといってloveArrowShootのように単語の頭を大文字にする記法が主流です」
穂乃果「あ、開き直った」
ことり「開き直ったね」
海未「・・・私は強く生きようと思うのです」
海未「先に進む前に、console.log();を覚えておきましょう。これを使うとFirerfoxであればWebコンソールに、文字列を出力することができます」
|
1 2 |
console.log("ファイトだよっ！"); |
ファイトだよっ！
海未「さて、今回は変数の話までしておきましょう。変数というのは値を一時的に格納しておく領域のことですが、まずJavaScriptでは変数に型はありません」
穂乃果「型っていうのは？」
海未「これから、数値型や文字列型などのデータ型が出てきます。変数には、どんな型のデータでも代入することができるのです」
|
1 2 3 4 5 |
var nico; nico = "nico"; nico = 25; nico = function() { console.log("にー☆"); } |
海未「これらはいずれも有効です」
ことり「にこちゃんの汎用性・・・」
海未「言語によっては、例えばJavaやC++などは変数にも型がありますから、JavaScriptは自由度が高いと言えるでしょう」
海未「変数の宣言の仕方はいくつかあります」
|
1 2 3 4 |
var kosaka = "honoka"; minami = "kotori"; let sonoda = "umi"; |
海未「varを使うのが最も一般的です。2番目のキーワードを使わないものは行儀が悪いとされています」
穂乃果「何が違うの？」
海未「詳しくは、関数のあたりでスコープの話をしますが・・・varを使う場合は、書いた場所に応じてローカル変数かグローバル変数かが決定されます。varを使わないと常にグローバル変数になります」
ことり「まだ、よくわからないかな」
|
1 2 3 4 5 6 7 8 |
var msg = "ファイトだよっ！"; function hello() { var msg = "ちゅんちゅん"; console.log(msg); } hello(); console.log(msg); |
ちゅんちゅん
ファイトだよっ！
海未「最初の”ファイトだよっ！”を代入しているmsgはグローバル変数です。関数の外で宣言されているからですね」
ことり「一番最後のconsole.log(msg);で出力してる変数だよね」
海未「はい。ところで、関数helloの中にもmsgという変数があります。こちらは関数の中でしか有効でないローカル変数なので、関数の外のグローバルなmsgには影響しないのです」
ことり「それで、var msg = "ちゅんちゅん";ってした後でも最後は”ファイトだよっ！”が出力されるんだね」
海未「もしこれを、varを使わずに書いてしまうと・・・」
|
1 2 3 4 5 6 7 8 |
msg = "ファイトだよっ！"; function hello() { msg = "ちゅんちゅん"; console.log(msg); } hello(); console.log(msg); |
ちゅんちゅん
ちゅんちゅん
海未「関数の中でグローバル変数を上書きしてしまいますから、最後の行も”ちゅんちゅん”になってしまいます」
穂乃果「じゃあletは？」
海未「letはブロックスコープといって、関数以外のブロック、後ほど出てきますがifやforのブロック内でのみ有効な変数を宣言するのに使います」
|
1 2 3 4 5 6 7 |
var msg = "ファイトだよっ！"; if(true) { let msg = "ちゅんちゅん"; console.log(msg); } console.log(msg); |
ちゅんちゅん
ファイトだよっ！
海未「これがvarだと」
|
1 2 3 4 5 6 7 |
var msg = "ファイトだよっ！"; if(true) { var msg = "ちゅんちゅん"; console.log(msg); } console.log(msg); |
ちゅんちゅん
ちゅんちゅん
穂乃果「うーむ・・・」
海未「このあたりは、後ほどブロックを扱う構文が出てきたときにもう一度おさらいしましょう」
海未「最後に定数です。宣言時にconstを付けると定数になって、その値は後から変更できなくなります」
|
1 2 3 |
const nico = 71; nico = 74; |
Assignment to const
穂乃果「やめてあげて！」
ことり「にこちゃんとか凛ちゃんを見て優越感に浸るのはどうかと思うな・・・」
海未「穂乃果やことりに私の気持ちは分からないのです！」
海未「こんなところで、JavaScriptの基本文法と変数についてはおしまいです。次回からはデータ型の解説に入りますね」
