【保存版】Javascriptの基礎をサラッと復習できる記事

プログラミング
難易度:★☆☆☆☆

対象読者は、次のような方を対象としています。

Javasciptの基礎をサラッと復習用のページが欲しい

第一章の学習お疲れ様でした!

第一章の内容は、プログラミングの基礎、土台となる部分です。

どんな難しいプログラミングも、全ては一章の基礎から成り立っています。

とても大事な部分なので今回は復習タイムといきましょう!

特に大切なことを抜粋してまとめました。

 

さらっと復習がしたい方にオススメです。

メッセージ表示

まずは、画面表示時にメッセージを表示するところから始まりましたね。

文字列、数値、変数など様々なものをメッセージ表示しました。

alert("Hello!");
alert(3 + 2);

変数とは

変数という大切な概念がありました。

変数とは、データ(値)の入れ物です。

var name = "太郎";
alert(name);

変数のメリットは以下の3つです!

  • 同じ値を繰り返し使える
  • 変更に対応しやすい
  • 値の意味が分かりやすくなる

コンソール出力


コンソールに途中経過やエラーを表示しましたね

コンソール出力により、プログラムがどこでバグっているかすぐに見つけれるようになります。

GoogleChromeというブラウザのChrome Developer Toolsを利用してログを見てきました。

Windowsの場合は「F12」を押してください。

Macの場合は、「Opt + Cmd + I」を押してください。

var number = 10;
console.log(number);
number = number + 5;
console.log(number);
number = number - 3;
console.log(number);
number = number * 4;
alert(number);
  • エラー(バグ)の発見
  • プログラムの途中経過を見る

コンソール出力は、プログラムが難しくなるほど真価を発揮してきます。クセ付けておこう!

偽値と比較演算子

真偽値には『true』と『false』という2つの値しか存在しません。

trueは真(正しい)falseは偽(間違っている)を意味します。

 

比較演算子とは、2つの値を比較するための記号です。

『a === b』はaとbが等しければtrue、等しくなければfalseになります。

『a !== b』は逆で、等しくない場合にtrueになります。

var number = 20;
console.log(number === 30);
console.log(number !== 30);

var name = "Goku";
console.log(name === "Goku");
console.log(name !== "Goku");var number = 20;
console.log(number === 30);
console.log(number !== 30);

『かつ』と『または』もありましたね!

『&&』と『||』で複数条件を指定できました。

条件分岐

『ある条件が成り立つときだけある処理を行う』ことを条件分岐と呼びます。

例: もし晴れたら、外で遊ぼう。雨が降れば、中でゲームしよう。

var age = 23;

if(age >= 20){
    console.log("お酒が飲めます");
}else{
    console.log("お酒は二十歳になってから!");
}

3条件以上の分岐は、 else if か switch文を使いましたね!

else if を使って3つに分岐させる

if(age >= 20){
    console.log("cccccc");
}else if(age < 20 && age >=10){
    console.log("お酒は二十歳になってから!");
}else{
    console.log("10歳未満はミルクでも飲んでてね♪");
}

20歳以上なら『お酒が飲めます

20歳未満かつ10歳以上なら『お酒は二十歳になってから!

10歳未満なら『10歳未満はミルクでも飲んでてね♪

switch文を使って3つに分岐させる

switch(dream){
    case "火影":
        console.log("ナルトです。");
        break;
    case "海賊王":
        console.log("ルフィです");
        break;
    case "新世界の神":
        console.log("夜神月です");
        break;
    default:
        console.log("その夢は却下します");
}

1行目のdreamの値によって、処理が分岐します。

例えば、変数dreamに”海賊王”が入っている場合、case “海賊王”の処理を通ります。

caseごとに breakするのを忘れずに!

ループ処理

while文for文により、決まった処理を繰り返し行うことができましたね。

 

var number = 1;
while(number <= 10){
    console.log(number);
    number = number + 1;
}

for文の場合は↓と書くと、↑のwhile文と同じ意味になります。

for(var number = 1; number <= 10; number++){
    console.log(number);
}
if文やfor文の書き方を丸暗記する必要は全くありません。『何ができるか』を理解する方が大切です。

配列

複数の値をまとめて1つの変数に入れることができましたね。

var hero = ["アンパンマン", "ウルトラマン", "ジャガポテ仮面"];
console.log(hero);

配列の中身を1つだけ取り出すには↓

var hero = ["アンパンマン", "ウルトラマン", "ジャガポテ仮面"];
console.log(hero[0]);
console.log(hero[1]);

インデックス番号は0から始まるので、最初の値は0、2番目の値は1で取り出せましたね!

配列を便利に扱う技術が2つありました

lengthは、配列の要素の数を取得できます

var hero = ["アンパンマン", "ウルトラマン", "ジャガポテ仮面"];
console.log(hero.length);

pushは、配列の後ろに値を追加出来ます。

var hero = ["アンパンマン", "ウルトラマン", "ジャガポテ仮面"];
console.log(hero);
hero.push("ジャコピーマン");
console.log(hero);

連想配列

連想配列は、配列と同じく複数のデータをまとめて管理することに用いられます。

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

var human = {"name":"Taro", "sex":"male"};
console.log(human.name);
console.log(human["name"]);
『 human.name 』も『 human[“name”] 』も同じ意味でしたね。

また、連想配列の更新は↓のように『配列名.キー名 = 値』または『配列名[“キー”] = 値』とするとできました。

var human = {"name":"Taro", "sex":"male"};
human.name = "Saki";
console.log(human.name);
human["sex"] = "female";
console.log(human["sex"]);

関数

関数とは、処理を1まとめに入れたものでしたね。

↓関数の作り方 『function 関数名(){}』

function eat(){

    console.log("お箸をもつ");
    console.log("食べ物を掴む");
    console.log("口に入れる");
    
}

↓関数の呼び出し 『関数名()』

function eat(){

    console.log("お箸をもつ");
    console.log("食べ物を掴む");
    console.log("口に入れる");

}

eat();
関数は作っただけでは処理が実行されません。呼び出して初めて実行されます。

変数のスコープ

スコープとは変数が使える範囲を決定するものです。

スコープには、ローカルスコープグローバルスコープがあります。

関数内で定義された変数(ローカル変数)は、ローカルスコープを持ちます

ローカル変数foodの有効範囲↓

関数外で定義された変数(グローバル変数)は、グローバルスコープを持ちます

グローバル変数foodの有効範囲↓

関数へ引数を渡す

引数(ひきすう)とは、関数に与える追加情報のようなものでしたね。

下のように、関数呼び出し時に、()内に追加情報を入れる事ができました。

引数を使えば、1つの関数でいろいろな事ができます!

関数で戻り値を使う

関数は、処理結果を呼び出し元で受け取ることができます。

その処理結果を戻り値(もどりち)と呼び、このことを「関数が戻り値を返す」と言います。

return 値』と書くことで、関数はその値を戻り値として返します。

 

戻り値がある場合、関数の呼び出し部分が、そのまま戻り値に置き換わりましたね!

1章で身に付けた知識を実践で使おう!

ここまで理解できれば、アイディア次第で結構なものを作れます。

 

力がついた!と実感が湧かない人は、

実際に、一章の実践編をやってみてください。

一章の内容だけで、様々なものが作れます!

不安な方は、Javascriptの知識本を1冊持っておくのも良いでしょう!

コメント