JavaScriptによるプログラミングの基礎部分を学びましょう。
まずはGoogle Chromeを起動し、新しいタブを開きます。
Windowsの人は Ctrl + Shift + J 、Macの人は Option + Command + J を押し、JavaScriptコンソール (以下「コンソール」) を開きましょう。
コンソールに数値や数式を入力すると、計算結果が表示されます。試しに 3 と入力してエンターキーを押してみましょう。
次は 2 + 2 を試してみましょう。
プログラミングの世界では、一般的な数学とは演算子の表記が一部異なります。JavaScriptにおける基本的な演算子は以下の通りです。
| 記号 |
意味 |
利用例 |
+ |
加算（たしざん） |
2 + 2 // => 4 |
- |
減算（ひきざん） |
5 - 3 // => 2 |
* |
乗算（かけざん） |
2 * 3 // => 6 |
/ |
除算（わりざん） |
4 / 2 // => 2 |
% |
剰余（あまり） |
11 % 3 // => 2 |
以下の計算をしてみましょう。
- 2 たす 2
- 3 かける 5
- 9 わる 4
- 19 を 7 でわったあまり
- 半径 3cm の円の面積 (円周率は
3.14 とする)
JavaScriptにおいても一般的な数学と同じように、演算子には優先順位があります。乗算除算は加算減算より先に行われ、() によって順番を優先させることができます。
1 + 2 * 3 と (1 + 2) * 3 をコンソールで実行し、想像通りの結果になっているか確認してみましょう。
プログラム言語によっては、数値を整数と実数で区別するものがあります。いっぽう、JavaScriptでは数値はすべて実数です。この違いは特に、除算をするときの挙動に差が出てきます。
たとえば 9 / 4 という計算は、JavaScriptでは実数同士の除算なので 2.25 という結果になります。しかし、整数と実数を区別する言語では 9 / 4 は整数どうしの除算と見なされ、小数部分を切り捨てた 2 が結果となります。
JavaScriptでは、' (シングルクオート) もしくは " (ダブルクオート) で囲むと文字列を作ることができます。 どちらでも違いはないのですが、HTMLと一緒に使う場合などに無用の混乱を避けるため、' を使うほうがよいでしょう。
きちんと囲まれていない場合はエラーが出ます。
> 'こんにちは'
<･ "こんにちは"
> 'Hello, world!'
<･ "Hello, world!"
> さようなら
❌ Uncaught ReferenceError: さようなら is not defined
' で囲んだ文字列の中で ' を使いたい時は \ (バッククオート / 環境によっては ¥ マーク)を直前に置く必要があります。これを「エスケープ」と呼びます。
> 'I\'m happy.'
<･ "I'm happy."
文字列は + 記号で連結できます。
> 'こんにちは、' + 'いい天気ですね。'
<･ "こんにちは、いい天気ですね。"
> '今日は' + 4 + '月' + 17 + '日です'
<･ "今日はは4月17日です"
以下の文字列を入力してみましょう。
- おはようございます
- It's time to coding!
- 私の所属は
** です
- ** の部分には自分が所属する会社を入力し、
+ 記号を使って連結しましょう。
- 私は
** 歳です
** の部分には自分の年齢を数値で入力し、 + 記号を使って連結しましょう。
console.log() という命令を使うと、コンソールに任意の値を出力することができます。
> console.log(3.14)
3.14
<･ undefined
> console.log('こんにちは')
こんにちは
<･ undefinedconsole.log() を実行すると、次の行に () 内の値が出力されているのがわかります。 よく見ると、数字の場合は青字で、文字列の場合は黒字で表示されています。 出力された値の次の行に表示されている <･ undefined は、console.log(...) 自体を評価した結果の表示です。 数値や文字列の例では、値を評価した結果として数値や文字列そのものが表示されていましたが、console.log(...) というコードを自体を評価した結果は undefined という値なのだということがわかります。 undefined とは、値が未定義であるということを表す値です。
以下の文字列をコンソールに表示してみましょう。
- 私の身長は
h cm、体重は w kg です。
h には身長、 w には体重を入力しましょう。- 架空の値でかまいません。
var というキーワードを使うと「変数 (へんすう)」を定義することができます。
コンソールに h と打ち込んでみましょう。
h
❌Uncaught ReferenceError :h is not defined
「 h は定義されていない」というエラーが表示されました。では h を定義してみましょう。
> var h = 177
<･ undefined
h という変数を定義し、値として 177 を代入しました。もう一度 h を打ち込んでみましょう。
h を評価し、値である 177 が表示されました。
以下の操作をしてみましょう。
h に別の値を代入し、評価してみましょう。w という変数を定義し、 60 を代入してみましょう。h を身長(m)、 w を体重(kg)として、BMI値を計算し、 bmi という変数に代入してみましょう。
- BMI とは身長と体重から算出される肥満度を表す指数で、
体重(kg) / 身長(m)の二乗 で計算できます。
- コンソールに「身長160cm、体重60kgの場合、BMIは23.4375です。」と表示してみましょう。
それぞれの数値は先ほど代入した変数を使い、
+ 演算子と console.log() 命令を使います。
ある条件を判定し、それによって異なる処理を行うのは、プログラミングの重要な要素のひとつです。そのために必要な「条件分岐」と「真偽値」について学びます。
BMIは18.5未満が「低体重」、25以上が「肥満」、その間が「普通体重」と定義されています。これをプログラムで表現してみましょう。
var bmi = 75 / (177 / 100 * 177 / 100)
if (bmi < 18.5) {
console.log('あなたは低体重です')
} else if (bmi >= 25) {
console.log('あなたは肥満です')
} else {
console.log('あなたは普通体重です')
}このような処理を「条件分岐」と呼び、JavaScriptでは if 文を使って表現します。
if 文の直後にある () の中が条件を満たす（真 / true）ならばそれに続く処理が行われ、条件を満たさない（偽 / false）ならば次の処理に移ります。 else if は続けて条件判定を行い、 else は条件判定を行わずに続く処理を行います。
上記のサンプルをコンソールで実行し、 bmi の値を変化させて想定したメッセージが出力されるかを試してみましょう。
条件を満たすならば真（true）、満たさないならば偽（false）になるような値を真偽値（boolean / ブーリアン）と呼びます。必ず true / false のいずれかになり、他の値は存在しません。
先ほどのサンプルですと、 bmi < 18.5 を評価した結果が真偽値となり、 bmi が18.5未満ならtrue、そうでない（18.5以上）ならfalseになります。
真偽値は組み合わせて使うこともできます。たとえば、先ほどのサンプルで「普通体重」に注目すると、その条件は「BMIが18.5以上かつ25未満」である、と言えます。これをJavaScriptで表現してみましょう。
if (bmi >= 18.5 && bmi < 25) {
console.log('あなたは普通体重です')
}また、「普通体重ではない」という条件は、「BMIが18.5未満もしくは25以上である」と言えます。これをJavaScriptで表現すると以下のようなコードになります。
if (bmi < 18.5 || bmi >= 25) {
console.log('あなたは普通体重ではありません')
}また、真偽値には ! をつけるとtrue / falseが反転します。「BMIが18.5未満でないならば」という条件をJavaScriptで書いてみます。
if (!(bmi < 18.5)) {
console.log('あなたは低体重ではありません')
}このように、真偽値どうしを組み合わせたり反転したりすることを「論理演算」と呼びます。
JavaScriptで論理演算に使える演算子は以下の通りです。
| 記号 |
意味 |
解説 |
&& |
論理積（かつ / AND） |
左右がいずれも真なら真 |
| || |
論理和（または / OR） |
左右いずれかが真なら真 |
! |
論理否定 |
真の値につけると偽、偽の値につけると真 |
値の大小や等しいかどうかを比較し、その結果を真偽値として返す演算子を「比較演算子」といいます。条件を満たせば true 、満たさなければ false と評価されます。
JavaScriptで使うことができる比較演算子は以下の通りです。
| 記号 |
意味 |
解説 |
> |
大なり |
左辺が右辺より大きければ真 |
>= |
大なりイコール |
左辺が右辺より大きいまたは等しければ真 |
< |
小なり |
左辺が右辺より小さければ真 |
<= |
小なりイコール |
左辺が右辺より小さいまたは等しければ真 |
=== |
等しい |
左辺と右辺が等しければ真 |
!== |
等しくない |
左辺と右辺が異なれば真 |
JavaScriptでは、 === と !== を使うと厳密な比較をします。サンプルを見てみましょう。
> 1 === '1'
<･ false
> 1 == '1'
<･ true
== != という比較演算子も用意されており、サンプルのように文字列と数値をよしなに比較して真偽値を返してくれます。しかし、意図せぬ「よしなな比較」は思わぬバグを作り出すことになりますので、たいていの場合 === !== で比較することを推奨します。
似たような処理を繰り返し行うのは、コンピューターが得意とする仕事の一つです。人間と違って同じことを繰り返しても文句は言いませんし、間違えることもありません（正しく命令できていれば）。
JavaScriptで繰り返し処理をするためにはいくつか方法がありますが、まずはいちばん基本的な for 文を使った方法を学びましょう。
九九の3の段を console.log() で出力するプログラムを書いてみます。
for (var i = 1 ; i <= 9 ; i ++) {
console.log('3 * ' + i + ' = ' + i * 3)
}for の直後のカッコの中が ; （セミコロン）で区切られて3つに分かれていることに注目してください。
ここは「初期化」です。繰り返し処理の1回目の前に、1度だけ実行されます。サンプルコードでは i という変数を定義し、初期値として 1 を代入しています。
この場合の i のような、ループの回数を数えるために使う変数を「ループカウンタ」と呼ぶこともあります。
ここは「継続条件」です。繰り返し処理を行う直前に条件をチェックし、偽（false）になるとループは終了します。サンプルコードでは i の値が 9 以下のあいだは処理を行い、 9 より大きくなると終了します。
ここは「増減処理」です。繰り返し処理を行ったあと毎回実行され、通常はループカウンタの増減を行います。サンプルコードの i ++ は、「 i の値を1増やす（インクリメント）」という処理を行っています。
JavaScriptをはじめいくつかの言語では、変数の値を1増やす「インクリメント」を ++ という演算子で、変数の値を1減らす「デクリメント」を -- という演算子で記述することができます。
九九の7の段を逆順に（ 7 x 9 ... 7 x 1 の順で） console.log() を使ってコンソールに出力してみましょう。
FizzBuzzという処理があります。ある正の整数について、以下の条件で出力します。
- 3で割り切れる場合 :
Fizz
- 5で割り切れる場合 :
Buzz
- 3でも5でも割り切れる場合 :
FizzBuzz
- それ以外の場合 : その数
1 〜 100 までのFizzBuzzを出力するプログラムを書いてみましょう。
配列とは、数値や文字列などのデータがリスト状に格納されたものです。 [ ] で囲み、 , で区切って表現します。
var friends = ['serval', 'racoon', 'fennec']
配列の各要素にアクセスするには、 [] に要素の番号（インデックス / 添え字）を与えます。先頭の要素は 0 であることに気をつけましょう。
friends の中から serval をコンソールに表示してみましょうfor 文を使って friends をすべてコンソールに表示してみましょう
プログラムを効率的に書いたり読みやすいものにしたりするためには「構造化」が欠かせません。JavaScriptにはそのために「関数」や「オブジェクト」といった仕組みが用意されています。
ここからはそうした仕組みの基礎について学んでいきましょう。
ここまで出てきたプログラムのうち、 console.log() や Math.floor() のような、何か値を受け取って処理し、何か値を返すものを「関数」と呼びます。ただし、値を受け取らないこともありますし、値を返さないこともあります。
JavaSriptでは function というキーワードを使うと関数を定義することができます。以下のコードをコンソールに入力してみましょう。
function hello() {
console.log('Hello!')
}これだけではなにも起こりません（ コンソールには undefined と表示されるはずです）。しかし、このコンソールでは hello() という関数が定義されています。
それではこの関数を呼び出してみましょう。
コンソールに Hello! という文字が表示されたでしょうか。関数は何度でも呼び出すことができます。
関数に渡す値を「引数（ひきすう）」、関数から戻ってくる値を「返り値（かえりち）」もしくは「戻り値（もどりち）」と呼びます。
console.log() を使う場合、コンソールに表示させたい文字を () の中に記入します。これが「引数」です。引数は , で区切って複数渡すこともできます。
また、 Math.floor() の引数に小数を渡すと、小数点以下を切り捨てた数値が返ってきます。これが「返り値」です。
今まで学んできた関数の引数と処理、返り値をまとめてみましょう。
| 関数 |
引数 |
処理 |
返り値 |
console.log() |
文字列 |
引数の文字列をコンソールに表示する |
なし |
Math.floor() |
数値 |
引数の数値の小数点以下を切り捨てる |
数値 |
hello() |
なし |
コンソールに Hello! という文字列を表示する |
なし |
コンソールで関数を実行した場合、その関数の返り値が表示されます。 console.log() や hello() を実行した時に
<･ undfined
と表示されていたのは、返り値が定義されていないからなのです。
JavaScriptの処理系で用意されている関数以外にも、独自の処理をする関数を function キーワードを使って自分で作る（定義する）ことができます。
自分で定義した関数では return キーワードを使って呼び出し側に返り値を渡すことができます（渡さないと undefined になります）。
身長（cm）と体重（kg）を引数に取り、BMIを戻る関数を書いてみましょう。
function calcBmi(height, weight) {
var bmi = weight / (height / 100 * height / 100)
return bmi
}calcBmi() という関数を定義してみました。この関数は、利用者が引数として身長（cm）と体重（kg）を渡すと、BMIを計算して戻してくれます。
コンソールから呼び出してみましょう。
いままで書いてきたプログラムを関数にしてみましょう。
- BMI判定
- 名前 :
bmiStatus
- 引数 : BMI（実数）
- 返り値 : 文字列
- 仕様
- BMIの値によって以下の文字列を返す
- BMIが18.5未満なら '低体重'
- BMIが18.5以上25未満なら '普通体重'
- BMIが25以上なら '肥満'
- FizzBuzz
- 名前 :
fizzBuzz
- 引数 : 数値
- 返り値 : 文字列
- 仕様
- 入力された数値によって以下の文字列を返す
- 3で割り切れる場合 :
Fizz
- 5で割り切れる場合 :
Buzz
- 3でも5でも割り切れる場合 :
FizzBuzz
- それ以外の場合 : その数
さきほどの fizzBuzz 関数を使って、 1〜100までのFizzBuzzをコンソールに出力してみましょう。
JavaScriptによるプログラミングをする上で「オブジェクト」という概念を避けて通ることはできません。ここでは、この先プログラミングを学んでいく上で最小限の知識を学びましょう。
JavaScriptの値には、「型」というなにが格納されているかの区別があります。このテキストでは「文字列（string）」「数字（number）」などを紹介してきましたが、それ以外にも「オブジェクト」が登場しています。
JavaScriptの型には「プリミティブ型（基本型）」と「オブジェクト」の2種類が存在します。 string number などの数種類は「プリミティブ型」ですが、それ以外のほとんどの型はオブジェクトに分類されます。
typeof 演算子を使うと、値がどのタイプなのかを知ることができます。
> typeof 1
<･ "number"
> typeof console
<･ "object"
オブジェクトとはプロパティの集合です。プロパティとは、名前（key）と値（value）の組み合わせです。プロパティにアクセスするときは、オブジェクトと . で繋げてプロパティの名前を記述します。
先ほど作った配列もオブジェクトです。型を確認し、 length というプロパティを参照してみましょう。
var friends = ['serval', 'racoon', 'fennec']
console.log(typeof friends)
console.log(friends.length)
関数は function （関数オブジェクト）という型に分類され、名前の通りオブジェクトに分類されます。関数を定義し、関数オブジェクトを変数に代入してみましょう。
var testFunction = function() { console.log(1) }
console.log(typeof testFunction)testFunction という変数には関数（function）が代入されました。値として評価する / 関数として呼び出す、を試してみましょう。
testFunction
testFunction()
違いがわかりましたか？変数に格納された関数オブジェクト（function）は、 () をつけると関数として呼び出すことができます。
オブジェクトのプロパティも同様です。関数オブジェクトが格納されたプロパティは、 () をつけると関数として呼び出すことができます。関数が格納されたプロパティを「メソッド」と呼びます。
先ほど変数 friends は配列というオブジェクトであることを説明しました。配列には末尾に要素を追加する push() というメソッドがあります。これを呼び出してみましょう。
friends.push('backpack')
console.log(friends)
console.log(friends.length)末尾に backpack という文字列が追加され、長さが 4 に増えたのが確認できます。
ここまでに出てきた Math.floor() は Math オブジェクトの floor メソッドを呼び出すことだ、ということが理解できたでしょうか。 console.log() も同様に、 console オブジェクトの log メソッドを呼び出しています。
オブジェクトは自分で作ることもできますし、JavaScriptの処理系やブラウザが用意しているものを使うことも多々あります。オブジェクトから値を取り出すためにプロパティを参照したり、オブジェクトを操作するためにメソッドを呼び出すことは頻繁に発生しますから、使い方を覚えておきましょう。
2 + 23 * 59 / 419 % 73 * 3 * 3.14
'おはようございます''It\'s time to coding!''私の所属は' + '株式会社ドワンゴ' + 'です。''私は' + 44 + '歳です。'
console.log('私の身長は' + 177 + 'cm、体重は' + 75 + 'kgです。')
var h = 177h = 160
var w = 60var bmi = w / (h / 100 * h / 100)console.log('身長' + h + 'cm、体重' + w + 'kgの場合、BMIは' + bmi + 'です。')
for (var i = 9 ; i >= 1 ; i --) {
console.log('7 * ' + i + ' = ' + i * 7)
}for (var i = 1 ; i <= 100 ; i ++) {
if (i % 3 === 0 && i % 5 === 0) {
console.log('FizzBuzz')
} else if (i % 3 === 0) {
console.log('Fizz')
} else if (i % 5 === 0) {
console.log('Buzz')
} else {
console.log(i)
}
}// `serval` を表示
console.log(friends[0])
// すべての `frineds` を表示
for (var i = 0 ; i < 3 ; i ++) {
console.log(friends[i])
}function bmiStatus(bmi) {
if (bmi < 18.5) {
return '低体重'
} else if (bmi >= 25) {
return '肥満'
} else {
return '普通体重'
}
}function fizzBuzz(num) {
if (num % 3 === 0 && num % 5 === 0) {
return 'FizzBuzz'
} else if (num % 3 === 0) {
return 'Fizz'
} else if (num % 5 === 0) {
return 'Buzz'
} else {
return num
}
}for (var i = 1 ; i <= 100 ; i ++) {
console.log(fizzBuzz(i))
}