JavaScriptってなに
JavaScriptはWebの見た目を制御したりするのに使うみたいですが、たぶん他にもいろいろなことができるプログラミング言語かと思います。Progateには残念ながら解説されてませんでした。JavaScriptとJavaはまったく無関係です。
Progateをやるなら開発環境はいらないですが、開発環境を用意するのだったらVisual StudioやEclipseやvs codeなどがあります。たぶんVisual Studioが一番手軽ではないかと思います。
Progateを使ってJavaScriptを学ぶ
プロゲートはプログラミングが学べるサービスになります。お題がだされるのでコードを手打ちしていく形ですがスライドや図で指示がでるので学びやすいですね。コース１は無料で学べるとは思いますがコース２、３の途中から有料じゃないと先へすすめなくなりますのでその点は注意してください。
本で学びたいっていう方はこちらの本をおすすめします。
サイ本という有名な本があるのですが、最初のうちは読んでもわからない可能性が高いので、「JavaScript Web開発パーフェクトマスター」のほうが図とかあってコードもみやすいですし、サンプルコードも結構のっているのでおすすめです。
それではコース１の内容をかいていきます。
JavaScriptの表示
javascriptの表示は console.log(“”);ですね。行末にはセミコロンが必要です。セミコロンはなくてもエラーにはならないのですが、セミコロンをつけないとエラーの原因になったりするのでつけておいたほうが無難かと思います。
文字列
javascriptや他のプログラミング言語もそうですが、文字列は “”ダブルクォーテーションを使って表現します。
console.log("Hello world");
console.log("にんじゃわんこ");
文字列の連結
文字列の連結は +記号を使って表現します。 PHPとかたまに.ピリオドを使って文字列連結する言語もあるのですがJavascriptの場合は + プラス記号ですね
console.log("ひつじ" + "仙人");
console.log("20" + "15");//2015
数値の計算
javascriptの数値の計算も他の言語と同じ
+,-,*,/,% → 加算,減算,掛算,割算,余りが表現できますね。
console.log(8 * 4); console.log(24 / 4); console.log(7 % 2);
変数
変数とは値を入れておける箱のようなもので、その変数に様々な値を代入し計算させることができます。javascriptの変数はES6というものから let というものが使えるようになったようです。昔は var というものをつかっていました。
この let と var の違いですがスコープレベルが違うようです。letのほうがスコープが厳格になっているようです。スコープとはなにかという話になってくるのですがここでは省略します。var と let の違いについてはここを見るといいかもしれないです。
let name = "にんじゃわんこ"; console.log(name);//にんじゃわん
変数の更新
変数の更新は再び代入を行うことによって行われます。何回でも箱の中身を入れ替えることができるイメージですね。この変数更新を省略できる数式があります。
+=, -=, *=, /=, %= などです。
これはどういうことかというと score = score + 5 わ score+=5 と同じ意味になるやつですね。
let number = 7; console.log(number); number += 3;//10 console.log(number); number /= 2;//5 console.log(number);
定数
定数はあとから変更することができないようした値で const キーワードを使って表現します↓
const language = "フランス語"; console.log(language); console.log(language + "を話せます" );
文字列の変数展開
文字列の変数展開は “←バッククォートで囲んで `${変数名}`
というようにすると変数が展開できるというものでテンプレートリテラルと言われいます。これは賛否両論あるようです。
const name = "にんじゃわんこ";
const age = 14;
console.log(`ぼくの名前は${name}です`);
console.log(`今は${age}歳です`);
条件分岐
条件分岐はある条件があっていたらこれ、間違ったらこれというように処理を分岐させるために使います。
if(条件式){
//処理
}
if文の条件式は真偽値で判断します。真偽値とはtrueやfalseのことで
trueは日本語になおすと真 (条件のとおりになっている)
faseは日本語になおすと偽 （条件とちがっている）
のように使います。if文のみのばあいは条件がtrueなら実行されますがfalseの場合はなにも実行されません。
const level = 12;
if(level > 10){
console.log("レベルが10より大きいです");
}
比較演算子
真偽値を判断するために比較演算子というものを使います。
>: 〇〇より大きい
<: 〇〇より小さい
>=: 〇〇以上
<=: 〇〇以下
===: 〇〇と等しい
!==: 〇〇と等しくない
より大きいは比較対象をどっちにおくかで表現もかわってくるとは思いますが、こういう記号を使うんだなと思っておけば大丈夫です
const password = "ninjawanko";
if(password === "ninjawanko"){
console.log("ログインに成功しました");
}
if(password !== "ninjawanko"){
console.log("パスワードが間違っています");
}
else else if
条件分岐で条件がなりたたないときにelse文が実行されます。つまり条件式がfalseのときにelse文が実行されます。else if文は複数の条件を設定したいトキに使います。↓
const age = 17;
if (age >= 20) {
console.log("私は20歳以上です");
} else if(age >= 10){
console.log("私は20歳未満ですが、10歳以上です");
}else {
console.log("私は10歳未満です");
}
論理演算子
論理演算子は複数条件をもうけたり、〇〇でないときのような表現をするときに使います
&& → 〇〇かつ
|| → 〇〇または〇〇
! → 〇〇でない
const age = 24;
if(age >= 20 && age < 30){
console.log("私は20代です");
}
switch case文
switch文は条件が多い時に使います。具体的にはswitch(){}文に値を設定してcaseで処理を振り分けます。switchに設定している値とcaseの値が合致するものが実行されます。breakはswitch文の処理をぬけるために必ず設定します。default:はcaseのどれにも条件が合致しなかったときに実行されます。
const rank = 2;
switch (rank) {
case 1:
console.log("金メダルです！");
break;
case 2:
console.log("銀メダルです！");
break;
case 3:
console.log("銅メダルです！");
break;
default:
console.log("メダルはありません");
break;
}
Progaet Javascriptコース１まとめ
ProgaetのJavascriptコース１で学んだ内容は以下のような内容でした
- 文字列
- 数値
- 変数
- 条件分岐
とくに気になることはありませんでしたが、Javascriptが新しくなって変数宣言のときにvar ではなく let がつかわれていることは驚きでした。
次の記事はProgateでJavaScriptを学ぶ【コース２は繰り返し、配列、オブジェクト】 | 初心者のプログラミング
コメント