はじめに
ここでは、JavaScriptの基本的な文法をざっくりとまとめてみます。
変数とデータ型
変数は、var 変数名 = 値で宣言します。letやconstを使うこともできます。
各行の最後には、セミコロン;を書くようにします（セミコロンがなくても動作しますが、書いた方が良いです）。//以降は、その行の最後までコメントと認識され、プログラムの実行範囲から除外されます。
複数行にわたってコメントアウトしたい場合は、/* */を用います。
varstr='文字列';// 文字列console.log(str);varnum=12345;// 数値console.log(num);varisBool=true;// 真偽値console.log(isBool);vararr=['Python','R','JavaScript','PHP'];// 配列console.log(arr);varobj={'Python':'AI','R':'statistics','JavaScript':'web','PHP':'WordPress'};// オブジェクトconsole.log(obj);なお、オブジェクトの値を出力するときには、console.log(オブジェクト)を用います。
制御文
条件分岐
if文
if文は、if (条件) {処理}と記述します。
さらに場合分けするときは、elseやelse ifを使います。
varnum=3;if(num==1){console.log('1');}elseif(num==2){console.log('2');}elseif(num==3){console.log('3')}else{console.log('1でも2でも3でもない')}switch文
if文で場合分けが多くなる場合は、switch文を使うと簡単に書けます。switch (変数) {case 値: 処理; ・・・}と記述します。
varnum=3;switch(num){case1:console.log('1');break;case2:console.log('2');break;case3:console.log('3');break;default:console.log('1でも2でも3でもない');break;}なお、breakを書かないと、条件にあった場合でも後続のcaseの処理が走ってしまうので注意が必要です。
反復処理
for文
一定回数だけ繰り返し処理を実行する（繰り返し回数があらかじめ分かっている）ときは、for文を用います。
for文は、for (var 変数名 = 初期値; 変数 < 最大値 + 1; )と記述します。
for(vari=1;i<5;i++){console.log(i);}また、for (var 変数名 in 配列) {処理}と書くこともできます。
vararr=['Python','R','JavaScript','PHP'];for(varkeyinarr){console.log(key);// キーを出力console.log(arr[key]);// 値を出力}さらに、配列の代わりにオブジェクトを対象とする場合は、以下のようになります。
varobj={'Python':'AI','R':'statistics','JavaScript':'web','PHP':'WordPress'};for(varkeyinobj){console.log(key);// キーを出力console.log(obj[key]);// 値を出力}while文
ある条件を満たす間だけ処理を繰り返す場合は、while文を用います。while (条件) {処理}と記述します。
varnum=1;while(num<5){console.log(num);num++;}以下のように、do whileを使うと、必ず1回は処理が実行されます。
varnum=1;do{console.log(num);num++;}while(num<1);関数
関数は、function 関数名(引数){処理}とすることで作成できます。
functioncopyNumber(num){returnnum;}console.log(copyNumber(123));以下のように書くこともできます。
varmyFunc=functioncopyNumber(num){returnnum;};console.log(myFunc(123));オブジェクト
オブジェクトは、var オブジェクト名 = {キー: 値, ・・・}とすることで作成できます。
varhuman={name:'Yukiya',age:31,introduceMyself:function(){return'I am '+human.name+' and '+human.age+' years old. ';}};console.log(human.introduceMyself());以下のように書くこともできます。
varhuman={};human.name='Yukiya';human.age=31;human.introduceMyself=function(){return'I am '+human.name+' and '+human.age+' years old. ';}console.log(human.introduceMyself());new演算子を用いることで、新しいインスタンスを作成できます。
varhuman=function(name,age){this.name=name;this.age=age;this.introduceMyself=function(){return'I am '+this.name+' and '+this.age+' years old. ';}};varhuman1=newhuman('Yukiya',31);console.log(human1.introduceMyself());JavaScriptを記述する場所
JavaScriptは、.jsが拡張子の外部ファイルを作成するか、HTMLファイルに<script>タグを作って記述するかのどちらかで利用することが多いです。
上では、外部ファイルとしてJavaScriptファイルを作成することを前提に解説してきました。
外部ファイルをHTMLに読み込むには、以下のようにします。
<!DOCTYPE html><html><head><script type="text/javascript"src="sample.js"></script></head><body></body></html>HTMLファイル中に直接記述する場合は以下のようになります。
<!DOCTYPE html><html><head><metacharset="utf-8"><title>サンプルページ</title><linkrel="stylesheet"href="style.css"></head><body><script>console.log("JavaScript")</script></body></html>まとめ
ここでは、JavaScriptの基本的な文法について解説しました。
Webページのソースコードを見るときに役立ちます。