はじめに
先日、Ruby on RailsでWebアプリケーションを作成したのですが画面に動きを付けるところまでは知識不足で出来なかったので、しっかり学習したいと思いJavaScriptを１から勉強しています。
そこで、自らの備忘録も兼ねてこちらへ学習したことをまとめてみようと思いました。
本記事は、変数、関数、配列までに絞っています。
読みにくい部分、もしくは間違っている部分ありましたら、コメントにて教えて頂けると幸いです。
JavaScript とは
ブラウザ以外にも行えることは色々とあるようなのですが、まずはブラウザ上で様々な処理を行う言語として認識していて問題なさそうです。
ブラウザ上で動くプログラミング言語、JavaScriptが唯一だそうです。
Webページを作る言語としてセットで頭に浮かぶHTMLは、マークアップ言語と呼ばれ、CSSはスタイルシート言語と呼ばれますのでこれらはプログラミング言語では無いとのこと。
では、JavaScriptの基本的な書き方などを以下に記述していきます。
※ GoogleChromeブラウザを使用していますが、ブラウザ上のコンソールの出し方はWebページ上で右クリックのメニューから検証をクリックし、Consoleというタブを開くとあります。
変数の定義方法
JavaScript には、変数を定義する際に演算子が 3つあります。
varとletとconstになります。
実際に変数を定義する時には以下のような記述になります。
let num = 10;
const str = 'sample';
var boo = false
letなどの演算子を先頭に書き、その後に変数名(中にどんな値が入っているのか、どんな役割をする変数なのかが簡潔に分かる名前を付けるのが良いです。)を記述し、＝の右側に変数へ代入する値を書きます。
ただし、varは以前使われていた演算子とのことで、今はletとconstを用いるのが一般的だそうです。
これら定義方法の違いですが
letは、値を更新(上書き)できる変数を定義します。
constは、値を固定させて更新は出来ない変数を定義します。
ちなみに、JavaScriptの特徴として変数のデータ型は代入する値によって動的(柔軟)に変化します。
これを、動的型付(どうてきかたづけ)言語と言います。
データ型
プログラミング言語が変数の中のデータ(値)を解釈する為に、どのジャンルのデータなのかを区別してあげる必要があります。
JavaScriptでは、主に以下のデータ型があります。
- データ型の種類
- Number：整数または浮動小数点数。例えば 10 や 3.14159 など。
- String：テキストの値を表す連続した文字。"sample" など。
- Boolean：真偽値。
trueかfalseのみ入ります。 - Undefined：値が何も入っていない、未定義の変数。
- Null：値が何も入っていない部分が
Undefinedと混在しますが、Nullは意図的に値が無いことを示します。
関数の定義方法
関数を定義し実行するには、以下のように記述します。
function hello(name, age) {
console.log('hello' + name + age);
}
hello('sample', 20);
関数を定義するには、functionを先頭にして次に関数名を記述し{}で処理を囲みます。
定義した関数を実行するにはhello();と記述します。関数名に()を付けることで関数を実行する意味になります。
その()の中に、'sample'と20が書かれていますがこれを引数と呼びます。
引数は、実行する関数に値を渡す役割を担います。
hello('sample', 20);
ここでは、function hello(name, age)のnameとageにそれぞれ'sample'と20が代入されてhello関数内で使用できるようになります。
この時、各引数の呼び方はnameを第1引数ageを第2引数となります。
行われる処理としては
console.log('hello' + name + age);
の部分で、console.log();がブラウザ上のコンソールに結果を表示する動作をしますので、文字列である'hello'と引数で渡ってきたsampleと20が組み合わさってコンソール上にはhellosample20と表示されます。
そして、hello関数内を以下のように書き換えた場合
function hello(name, age) {
return name + age;
}
const returnvalue = hello('returnSample', 50);
hello関数は、実行した結果を受け取って新しい変数へ代入しています。これは、hello関数内の
return name + age;
の部分が関係しています。
returnと記述すると、関数から呼び出し元へ結果を返してあげる処理を行いますのでhello('returnSample', 50);がnameとageをくっつけた実行結果returnSample50を受け取って、変数returnvalueへと格納することができます。
引数が関数へ渡すデータ、戻り値が関数が処理したデータと覚えておくと分かりやすいかもしれないです。
変数名や関数名は、同じ名前でも大文字と小文字で区別すれば複数定義することが出来ますが、バグの原因となる ＆ Arrayなどのコンストラクタ関数と呼ばれるJavaScriptが元々持っている関数があり名前が被ってエラーを起こすなどあるので小文字で統一するなどした方が良いです。
無名関数
関数を定義する記述は他にもあり
const hello = function(name, age) {
console.log('hello' + name + age);
}
として、変数を定義し関数を代入する形で書くこともできます。
この時、functionの後に関数名がありませんが、これを無名関数と呼びます。
アロー関数
関数を定義する際、無名関数の場合にアロー関数を用いると記述を簡略化できます。
上記の無名関数をアロー関数に変換すると
const hello = (name, age) => console.log('hello' + name + age);
こうなります。
アロー関数にするには、
-
functionを消す - 引数の右側に
=>を付ける -
{}を消す
以上で、 アロー関数が出来上がります。
その上で、もし引数が１個だった場合は
const hello = name => console.log('hello' + name);
と、引数を囲んでいた()も消せるのでだいぶ記述を簡略化できます。
ただ、注意点がありまして{}を消せる場合は、関数内の記述が1行のみの時です。
2行以上あった場合は、{}が必要です。
同じく、引数が2個以上だった場合は、()で引数を囲わなくてはいけません。
アロー関数のメリットとしては
- 無名関数の場合にいちいち functionを書かなくて済む
- 関数の中身が1行であれば
{}も削除できる - 引数が1個であれば
()も削除できる - 記述を簡略化できる。
まとめると以上です。
メソッドとプロパティー
JavaScript内で、データを取得したり処理する時にメソッドとプロパティーが出てきます。
違いとしては
- メソッド：末に
()が付いているもの - プロパティ：ついてないもの
で、判断すると分かりやすいです。
例えば、helloという変数に文字列が入っていたとすると
console.log(hello.length);
上の記述では、変数helloにlengthが.でくっついていますがこれは文字数を取得するプロパティになります。
また、
console.log(hello.toUpperCase());
こちらは、変数helloに格納されている文字列を全て大文字で表示する処理を行うメソッドとなります。
このように、メソッドは特定の処理を行うもの。プロパティは特定の値を保持するものとして役割の違いがあります。
配列の定義方法
const arry = new Array(1, 2, 3, 4, 5, 6, 'moji', false);
配列を定義するには、変数の定義と同様にconstやletなどの演算子を用いて配列名を書き=を挟んだらnew Array()で囲みます。
JavaScriptの特徴として上記のように、様々なデータ型の値をひとつの配列に格納することができます。
各々の値は配列の要素と呼びます。
配列の特定の要素を取得して表示するには
console.log(arry[3]);
と、配列名の後ろの[]に要素のインデックスを入れます。
同じく、配列の要素を書き換えるには
arry[3]=10;
と記述することで、値が更新されます。
インデックスとは、要素毎に割り振られた番号ですが０から始まるので数え方に注意が必要です。
実際に、配列全体を表示したコンソール画面を見ると
要素毎に、0から始まる番号が割り振られています。この紫色の番号がインデックスで青色の数字が値になります。
配列を定義した際に、constを使っていますが配列に関しては変数を固定するconstを使っても要素を書き換えることが可能です。
ただし、以下のように
const arry = 10;
const arry = new Array(1, 2);
constで一度定義した変数を、再定義することは出来ないので注意が必要です。