JavaScript入門6

JavaScriptを簡単にわかりやすく、公式に則って勉強していきましょう！

シリーズ一覧はこちら。

フロントエンド開発者への道のり

JavaScriptには14のモジュールがあり、それらを学んでいきます。まず開発環境にはプロ型と没入型があり、まずは没入型についてお話していきます。

没入型とはグループやクラスみたいにみんなで作業することです。スクリンバではそういった人たちに先生として指導したり、コードをレビューしたりします。

また、毎週顔合わせをオンラインで行い、先生から直接、学ぶことができます。他の生徒とも交流できたり、先生に直接質問もできます。

これは英語ですが、英語に地震のある方はぜひ受講してみてください。

変数の特徴

変数は書いて字のごとく、中身を入れ替えることができます。では以下のコードをindex.jsにコピペしてみてください。

// document.getElementById("count-el").innerText = 5;

let count = 5;

count = 3;

console.log(count);

そしてCtrl+Alt+nでターミナルを起動します。すると3になっていることが確認できます。一度countを5と初期化しましたが、5行目で3に入れ替えています。

これが変数の特徴です。上から順番に読み込まれるため、下の列で定義したものの方が、優先度が高くなります。

ではconsole.log()の上に以下を付け足してください。

count = 1;

Ctrl+Alt+nをしてみるといかがでしょうか。「1」と出てくれば成功です。このようにletで定義された変数はいくらでも書き換えることができます。

カウントアップする方法

通行人のカウンターを作成をしたいので、カウントアップする方法を学んでいきます。以下のコードをコピペしてください。

// document.getElementById("count-el").innerText = 5;

let count = 5;

// countに数字を足す
count = count + 1;

console.log(count);

そしてCtrl+Alt+nで6と表示されれば成功です。簡単にカウントアップすることができましたね。＋３でもー４でも正常に計算をすることができます。試してみてください。

変数を用いて簡単な計算をしてみる

では以下のことに挑戦してみましょう。

1. 変数を作成し、50に初期化する。そして100まで増加させる。
2. 25まで減少させ、最終的には70まで上昇させる。
3. console.logにその値をそれぞれのステップで表示させる。

以下のコードをコピペしてください。

// document.getElementById("count-el").innerText = 5;

// let count = 5;
// count = count + 1;
// console.log(count);

// 変数を作成し、50に初期化する。そして100まで増加させる。
// 25まで減少させ、最終的には70まで上昇させる。
// console.logにその値をそれぞれのステップで表示させる。

let bonusPoints = 50;
console.log(bonusPoints);

bonusPoints = bonusPoints + 50;
console.log(bonusPoints);

bonusPoints = bonusPoints - 75;
console.log(bonusPoints);

bonusPoints = bonusPoints + 45;
console.log(bonusPoints);

Ctrl+Alt+nでやりたいことがきちんと表示されていれば成功です。

今日はここまでです。お疲れ様でした。