[基礎]javascript
JavaScriptとは
JavaScriptは、プログラミング言語の1つで、HTML／CSSでは実現できない「動きの変化」を設定できます。
例えば「イイね」ボタンでは、ハートアイコンをクリックする動作（イベント）をきっかけに、色が変わったり文言が変わったりします。
JavaScriptの基本文法
変数の書き方
JavaScriptでは、変数名の前にletを付けることで、変数を宣言できます。
let hello = "Hello World"
let "変数名" = "内容" ;
alertで出力すると下記のように記述します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
</head>
<body>
<script src="app.js"></script>
</body>
</html>
scriptタグとは
「SCRIPT」とはJavaScriptやVBScriptなどのスクリプトを文書内に埋め込んだり外部スクリプトを読み込んだりするために使用するタグです。
スクリプトの言語のタイプを示すtype属性の値には、JavaScript、VBScriptなどのスクリプト言語名を指定します。
なお、type属性は必須属性です。
また、script要素が長くなってしまう場合はソースが複雑になる場合、ユーザーからスクリプト部分を隠したい場合には、スクリプト部分を外部ファイルにしてsrc属性で読み込むことも可能です。
// 整数を代入する
let int1 = 1;
// 負数を代入する
let int2 = -10;
// 小数点を代入する
let float1 = 3.14;
// 文字列を代入する
let str1 = 'JavaScriptを覚えよう';
alert(init1);
上記のようにalert(init1)でアラートウィンドウ上に「1」が表示されます。
四則演算と文字列の結合の記述方法も載せておきます。
// 足し算
alert(4 + 3);
// 引き算
alert(8 - 5);
// 掛け算
alert(2 * 6);
// 割り算
alert(10 / 2);
alert('Hello' + 'World');
let str1 = 'Hello';
let str2 = 'World!!';
alert(str1 + str2);
条件分岐
条件分岐でできることは、Rubyと同じですが書き方だけ違うのでそこだけ注意します。
if(条件1){
処理1
}
// 条件1を満たすときは、処理1を実行
if(条件1){
処理1
} else{
処理2
}
// 条件1を満たすときは処理1、満たさないときは処理2を実行
2つの条件式で処理を分ける場合を具体例を用いて記述します。
let orange = 100;
let apple = 120;
if(orange < apple){
alert('みかんの値段がりんごより安い');
} else if(orange == apple){
alert('みかんとりんごが同じ値段');
} else{
alert('みかんの値段がりんごより高い');
}
結果として'みかんの値段がりんごより安い'がアラートウィンドに表示されます。
繰り返し処理
JavaScriptで繰り返し処理を行うには、「while文」と「for文」の2つの方法があります。
- While文は、条件式が真（true）ならば制限なく繰り返します。
- for文は、決められた回数だけ繰り返します。
while
「1」を基準に「2」を掛け続けた場合、何回で「100」を超えるかを測定する記述をします。
//whileの記述方法
// 引数の条件がtrueの間、波括弧内部の処理が繰り返される。
while(条件){
処理
}
let max = 100;
let num = 1;
let count = 0;
while(num < max){
num = num * 2;
count = count + 1;
}
alert('2を掛け続けて' + max + 'を超えるのに必要だった回数は' + count + '回です');
結果としてアラートウィンドに2を掛け続けて100を超えるのに必要だった回数は7回ですと表示されます。
do...while文
while文にはもう1つ、「do...while文」があります。
while文では、条件式がtrueの間は、制限なく繰り返し処理が行われました。
一方、do...while文では、条件式のtrue／falseに関わらず、最初の1回だけは必ず処理が行われます。
その後、条件式を評価して、繰り返し処理を続けるか／抜けるかを決めていきます。
do{
最低1回は行われる処理
}while(条件式);
for文
「for文」は、決められた回数の処理を繰り返すときに使います。
for文を書くときは、以下の部分に注意する必要があります。
「繰り返す回数」を初期値で設定する
「条件を満たす場合の処理」を記述する
for文は、「10回まで繰り返し」などのように、決められた回数内で繰り返し処理を行いたい場合に使われます。
数字を「1」から「10」まで足し算を行い、その結果を表示する処理を記述します。
//for文の記述
for ( 初期値; 条件式; 増減値 ){
繰り返し処理
}
let i;
let num = 0;
for(i = 1; i < 11; i++){
num = num + i;
}
alert('1から10まで足し算した結果は' + num + 'です');
結果として1から10まで足し算した結果は55ですが表示されると思います。
変数宣言について
変数宣言を説明する前に関数の記述方法に触れておきます。
JavaScriptでは、functionに続けて関数名を書き、{ }内に処理内容を記述します。
関数に引数を渡したいときは、( )内に引数を書きます。
引数は「,」でつないで複数の指定も可能です。複数指定すると、それぞれ順番に引数が格納されていきます。
この関数の結果を出力したいときは、return内に戻り値を渡します。
こうすると、関数の処理結果が呼び出し元から利用できるようになります。
function 関数名(){
処理内容
return 戻り値;
}
JavaScriptの変数宣言は3種類あります。
- var
- let
- const
現在varを使用する場面は今では、ほとんどなくletとconstを基本的に使用します。
それぞれの特徴を簡単にまとめたものが以下になります。
| var | let | const | |
|---|---|---|---|
| 再宣言 | 〇 | × | × |
| 再代入 | 〇 | 〇 | × |
| スコープ | 関数 | ブロック | ブロック |
表で出てきた再宣言``再代入``スコープについて説明していきます。
再宣言
一度、宣言した変数名で再度、変数宣言を行うことを再宣言といいます。
再宣言を行うことができるのはvarのみとなります。
letやconstでは再宣言はできず、エラーになります。
//varで再宣言
var nickname = "taro"
console.log(nickname)
var nickname = "ichiro"
console.log(nickname)
// letは同じ変数を呼び出すことはできないのでエラーが発生する
let nickname2 = "taro"
console.log(nickname2)
let nickname2 = "ichiro"
console.log(nickname2)
// consoleは同じ変数を呼び出すことはできないのでエラーが発生する
const nickname3 = "taro"
console.log(nickname3)
const nickname3 = "ichiro"
console.log(nickname3)
// var以外は同じ変数を呼び出すことはできない
再代入
変数に値を代入した後で、別の値を代入することを再代入と言います。
再代入はvarとletで、可能です。constでは再代入ができません。
// varは再代入が可能
var nickname = "taro"
console.log(nickname)
nickname = "jiro"
console.log(nickname)
// letは再代入が可能
let nickname2 = "taro"
console.log(nickname2)
nickname2 = "jiro"
console.log(nickname2)
// constは再代入が不可
const nickname3 = "taro"
console.log(nickname3)
nickname3 = "jiro"
console.log(nickname3)
スコープ
変数にはスコープ（有効範囲）というものがあります。
定義した変数の有効範囲になります。
スコープには
1 グロバルスコープ
2 ローカルスコープ
ローカルスコープには以下のものがあります。
- 関数スコープ
- ブロックスコープ
グローバル変数はどこからでも参照できる変数です。
一方、ローカルスコープは特定の場所でないと参照できない範囲を持っている変数です。
varのスコープ
varでは関数スコープ（ローカルスコープ）、グローバルスコープの変数を宣言できます。
var str = "webcamp" //グローバルスコープ
function foo() {
console.log(str)
var y = "hello" //関数スコープ
}
foo()
console.log(y)
10行目のconsole.log(y)で「Uncaught ReferenceError: y is not defined」というエラーが発生しています。
内容は、yという定義がされていない。参照エラーというものです。
yはfooという関数の中でvarによって宣言された、関数スコープになります。
この場合、関数の外からyを参照しようとしても有効範囲外となりエラーになります！
letのスコープ
letではブロックスコープ（ローカルスコープ）の変数を宣言することができます。
ブロックとは() 、{}の組で区切られたものを指します。
function foo() {
let x = "webcamp"
{
let y = "hello webcamp"
}
console.log(x)
console.log(y)
}
foo()
「Uncaught ReferenceError: y is not defined」と、参照エラーが起きています。
yという変数は3~5行目の{ }のブロック内でletによって宣言されたものです。
ブロック外から参照したためエラーになりました。
for (let i = 0; i < 10; i++) {
console.log(i)
}
console.log(i)
「Uncaught ReferenceError: i is not defined」と、参照エラーが起きています。
iという変数はfor句の（）ブロック内でletによって宣言されたものです。
ブロック外から参照したためエラーになりました。
letによる変数宣言では宣言されたブロック内が有効範囲となります。
constのスコープ
constのスコープはletと同じブロックスコープになります!!
変数宣言の使い分け方
変数宣言の際に意識すべきことはスコープと、再代入です。
できる限り、変数のスコープは使用される箇所で局所的であることが望ましいとされています。
その為、スコープと、再代入が広い範囲で使用できるvarは今はほぼ使われていないです。
なので基本的にletとconstを変数宣言に使用していくことになります。
letとconstの違いはletは再代入が可能であり、constは再代入が不可能な点です。
constで宣言した変数に値を格納した場合、新たに値を代入することはできません。
基本的に、新たに値を代入する必要のないものに関してはconstで宣言していくことになります。
ループのための変数等やむを得ない場合にletを使用する以外はできる限りconstを使った方が良いという考え方が主流になってきています。
constを使っていれば、長いコードでも宣言部分だけを見れば、ずっとそのコード中ではその値を保持していると分かり、保守や機能追加のコストが下がるためです。
letを使っていると、どこかで値が変わっていないかをチェックするために、全てのコードを確認する必要が出てきてしまいます。
まとめ
JavaScriptの基礎について、ざっくりですがメモをとりながら学びました。
ほぼ復習のような感じでしたが、知らなかったこともたくさん出てきました！
この基礎を使って次回は簡単なサイトを作ってみます！
Discussion