JavaScript

JS(JavaScript)の書き方基本 ~初心者向け~

書き方

HTML上で動かす場合

  • HTML上で読み込む
example.html
<script type = "text/javascript">
// ここにコードを書く
</script>
  • 外部ファイルとして読み込む
example.html
<script src = "JavaScriptのファイルパス" > </script>

基本

  • コンソールに出力
example.js
console.log('Hello World');
console.log("Hello World");

//文字列は、シングルorダブルクォーテーションで囲む

https://gyazo.com/e709323c915b22c41e8850f7a1fc0181

  • ダイアログに出力
example.js
alert("Hello World!!"); 

https://gyazo.com/8f3d23a191c852f79558241676969ee9

  • コメントアウト
example.js
//これは例です

数値と文字列の出力

example.js
console.log(5 + 3); //出力結果:8
console.log(5 - 3); //出力結果:2
console.log(4 * 2); //出力結果:8
console.log(4 / 2); //出力結果:2
console.log(9 % 2); //出力結果:1 ※余りの計算
console.log("5 + 3"); //出力結果:5 + 3
console.log("5" + "3"); //出力結果:53
console.log("あい" + "うえお"); //出力結果:あいうえお
console.log("A" + "B" + "C"); //出力結果:ABC

変数

変数とはプログラミング言語における値を入れておく箱のこと。「var」はvariable(ヴェアリアブル)のことで、日本で変数という意味。変数を宣言するときに使用する。

example.js
var name = "tanaka"; //変数名はtanaka
console.log(name); //出力結果:tanaka
example.js
var name = "tanaka";
console.log(name + tarou); //出力結果:tanakatarou
example.js
var x = 1 + 100;
alert(x); //出力結果:101

変数名にはルールがあり「数字開始・アンダーバー・ローマ字・日本語」は、エラーが出るので望ましくない。

変数の更新

変数は一度代入した値を変更することができる

example.js
var x = 1 + 100;
alert(x); //出力結果:101
x = 2; //変数を更新する時は「var」はつけない
alert(x); //出力結果:2
example.js
var x = 1 + 100;
alert(x); //出力結果:101
x = x + 2;
alert(x); //出力結果:103

計算式の省略

計算式は、下記のような省略した書き方もできる。

example.js
省略前    省略後
x = x + 1  x += 1
x = x - 1  x -= 1
x = x * 1  x *= 1
x = x / 1  x /= 1
x = x % 1  x %= 1

真偽値

「true(真)」と「false(偽)」2つの値がある

example.js
a === b //aとbが等しければtrue
a !== b //aとbが等しくなければtrue
a < b   //aの方がbより小さいときtrue
a <= b  //aの方がbより小さいまたは等しいときtrue
example.js
&& = かつ

x2のとき
x > 1 && x < 3 //複数の条件がすべて真だからtrue
example.js
|| = または

x2のとき
x < 1 && x < 3 //複数の条件のうち1つでも真だからtrue

条件分岐(if文)

if文を用いると「もし○○ならば○○を行う」という条件分岐が可能になる。elseは「もし○○なら○○を行う、そうでなければxxを行う」という処理ができるようになる。elseは日本語で「別の方法で、他に」の意味を持つ。

example.js
if (条件式) {
    処理 //条件式がtrueのとき実行
} else {
    処理 //条件式がfalseのとき実行
}
example.js
if (条件式1) {
    処理 //条件式がtrueのとき実行
} else if ( 条件式2 ) {
    処理 //条件式1がfalseで、条件式2がtrueのとき実行
} 
else  {
    処理 //条件式1と2両方ともfalseのとき実行
}

条件分岐(switch文)

switch文はif文よりも記述量が少ないため、見た目がシンプルになる

example.js
switch (対象) {
    case 値1: //式の結果が値1に等しい場合に実行
          break;
    case 2: //式の結果が値2に等しい場合に実行
          break;  
    default: //式の結果がどれにも該当しない場合に実行
         処理
}
example.js
var food = "チョコレート"; //food === "チョコレート"のとき
switch (food) {
    case "チョコレート":
        console.log("チョコレートは食べ物です"); //実行される
          
        bleak;
    case "コーラ":
        console.log("コーラは飲み物です");  //実行さない
          
        bleak;
    default:
        console.log("食べ物でも飲み物でもありません");
}

//bleakがあるのでswitch文を抜ける
//bleakがないと他のcase内の処理も実行される

繰り返し処理(while文・for文)

繰り返し処理とは、一定の処理を自動で繰り返し行う処理のこと。JSでループ(繰り返し)処理をおこなうときは、while文とfor文の2種類がある。

while文

example.js
while (条件式) { 
    処理
}
example.js
var x = 1; //変数の定義
while (x <= 5) { //条件(条件式の真偽が判定される)
    console.log(x); //繰り返す処理(条件式がtrueのとき処理が実行、falseのとき繰り返しが終了)
    x = x + 1; //変数の更新(変数の値が更新され、再び条件に戻る)
}

for文

example.js
for(変数の定義;条件式;変数の更新){
 処理
}
example.js
for (var x = 1; x <= 1; x += 1) {
    console.log(x); 
}

配列

配列を使うと複数の値をまとめて書くことができる。

example.js
//例えば、名前の値がいくつもある場合、配列を使うとシンプルになる
var name1 = "tanaka";
var name2 = "sasaki";
var name3 = "yamada";

//配列の出力
var name = ["tanaka","sasaki","yamada"]
console.log(name);

//配列の要素を取り出す(インデックス番号:「0=tanaka」「1=satou」「2=yamada」)
var name = ["tanaka","sasaki","yamada"]
console.log(name[0]); //出力結果:tanaka

lengthメソッド

配列には要素の数を数えるlengthメソッドがある。length(レングス)は日本語で「長さ」を意味する。

example.js
var name = ["tanaka", "sasaki", "yamada"]
console.log(name[0]); //出力結果:tanaka

pushメソッド

配列に要素を追加する

example.js
var name = ["tanaka","sasaki","yamada"]
name.push("suzuki")
console.log(name); //出力結果:tanaka,sasaki,yamada,suzuki

連想配列

配列は複数の値を並べて管理するのに対して、連想配列はそれぞれの値にキーと呼ばれる名前をつけて管理する。

example.js
[1, 2] //配列
{
    キー1: 1,
    キー2: 2
} //連想配列
example.js
var fruit = {
    "name": "banana",
    "color": "yellow"
};
console.log(fruit.name); //出力結果:banana

関数

関数とは、ある処理をまとめたプログラムのこと。同じ処理をまとめて定義し、何度も使い回しができるかたちにしたもの。

関数の呼び出し

example.js
function hello() {                //hello = 関数名
    console.log("こんにちは")   //console.log("こんにちは") = 実行される処理
}
hello(); //出力結果:こんにちは

スコープ

スコープとは変数名や関数名の有効範囲のこと。変数はどの範囲からアクセスできるかによって、グローバル変数・ローカル変数の2種類のスコープ(範囲)をもつ。

関数の外側で宣言した変数はグローバル変数として扱われ、プログラムのどこからでもアクセスすることができる。一方、関数の内側で宣言された変数はローカル変数として扱われ、宣言された関数内からのみアクセスできる。

例1

example.js
var x = "tanaka"; 
var x = "sasaki";
alert(x); //出力結果は後に書かれた「sasaki」

例2(スコープの範囲を確認する)

example.js
var x = "tanaka"; //グローバル変数
function name() {
    var x = "sasaki"; //ローカル変数
    alert(x); //出力結果:sasaki
}
console.log(x); //出力結果:tanaka
name();

サンプル2では「sasaki」は関数nameの中で宣言されているローカル変数のため、関数nameの中でのみ有効。よってconsole.log(x)で表示される文字列は、グローバル変数の「tanaka」が表示される。

引数

引数(ひきすう)とは関数に与える追加情報のようなもの。関数を呼び出すときに一緒に引数を渡すことで、関数の中でその値を利用することができる。

メールを例に出すと、関数は同じ処理を何度も繰り返すことができる(同じメールを何通も送れる)が、宛名だけ変えたい場合もある。そこで使われるのが引数。

example.js
function 関数名(引数名) { 
    処理
}
関数名(); //関数の呼び出し
example.js
function introduce(name) { 
    console.log(name);
}
intoroduce("tanaka"); //出力結果:tanaka

複数の因数を受け取る関数の呼び出し

example.js
function introduce(name, age) { 
    console.log("名前は" + name + "です"); 
    console.log(age + "歳です");
}
introduce("田中", 20); //出力結果:名前はtanakaです。20歳です。

戻り値

関数の処理結果を呼び出し元で受け取る方法。呼び出し元で受け取る処理結果を戻り値と呼び、このことを「関数が戻り値を返す」と言う。

example.js
function 関数名(){
 return 値; //「return 値」と書くことで、関数はその値を戻り値として返す。
}

下の図では、add関数が1と3を受け取り、処理結果の4を呼び出し元に返している。この4が戻り値にあたる。

example.js
function add(a, b) { 
    return  a + b;
}
sun = add(1, 3) //呼び出し部分
console.log(sun);

以上。