JavaScriptでプログラミング文法練習

JavaScriptでプログラミング文法練習準備

node -v

console.log("VS CodeでJavaScript実行成功");

node main.js

この章の練習では、今後 main.js にコードを記述し、ファイルを保存し、下記のコマンドを実行して進めてください。

node main.js

1 変数の基本表示

constは「変えない前提の箱」です。console.logはConsoleに表示して動作確認するために使います。

const city = "東京";
console.log(city);

2 変数の書き換え

letは「あとで中身を変える箱」です。最初に1を入れて表示し、次に2に変えてもう一度表示しています。

let count = 1;
console.log(count);

count = 2;
console.log(count);

3 数値の計算

数値同士は四則演算できます。ここでは単価×個数で合計を計算しています。

const price = 120;
const quantity = 3;

console.log(price * quantity);

4 文字列と数値をつなげる

+は「文字列をつなげる」動きにもなります。数値も文字列に変換されてつながります。

const name = "あかり";
const age = 28;

console.log(name + "は" + age + "歳です");

5 テンプレートリテラルの基本

`（バッククォート）で囲むと、${}の中に変数を入れて文章を作れます。文字列を作るときに便利です。

const animal = "ねこ";
console.log(`私は${animal}が好きです`);

6 計算結果を埋め込む

${}の中は「計算」もできます。a+bの結果がそのまま文章に入ります。

const a = 10;
const b = 5;

console.log(`合計は${a + b}です`);

7 自己紹介文を作る

複数の変数を使って文章を作る練習です。テンプレートリテラルを使うと読みやすくなります。

const name = "あかり";
const hobby = "読書";

console.log(`私の名前は${name}で、趣味は${hobby}です`);

8 if文の基本

ifは「もし〜なら」を表します。isLoginがtrueなら上、falseならelse側が実行されます。

const isLogin = true;

if (isLogin) {
  console.log("ログイン中");
} else {
  console.log("ログアウト中");
}

9 数値の条件分岐

>= は「以上」です。temperatureが30以上なら「暑い」、それ以外なら「普通」になります。

const temperature = 30;

if (temperature >= 30) {
  console.log("暑い");
} else {
  console.log("普通");
}

10 複数条件のif文

else ifを使うと、条件を段階的に分けられます。上から順に判定され、最初に当たったものが実行されます。

const score = 85;

if (score >= 90) {
  console.log("とても優秀");
} else if (score >= 70) {
  console.log("合格");
} else {
  console.log("不合格");
}

11 偶数・奇数判定

%は「割った余り」です。2で割った余りが0なら偶数、そうでなければ奇数です。=== は「型も含めて一致」です。

const number = 7;

if (number % 2 === 0) {
  console.log("偶数");
} else {
  console.log("奇数");
}

12 配列を作る

配列は複数のデータをまとめる箱です。[]の中にカンマ区切りで入れます。

const colors = ["赤", "青", "黄"];
console.log(colors);

13 配列から要素を取り出す

配列は0から数えます。colors[1]は2番目の「青」です。

const colors = ["赤", "青", "黄"];
console.log(colors[1]);

14 配列の長さを確認

lengthは「要素の数」です。3つ入っているので3が表示されます。

const colors = ["赤", "青", "黄"];
console.log(colors.length);

15 配列に要素を追加

pushは配列の末尾に追加します。追加後の配列をconsole.logで確認します。

const colors = ["赤", "青"];
colors.push("緑");

console.log(colors);

16 for文で繰り返す

forは繰り返しの基本です。iはカウンターで、1から5まで増やしながら表示します。

for (let i = 1; i <= 5; i++) {
  console.log(i);
}

17 forEachで配列を回す

forEachは配列専用の繰り返しです。配列の要素が1つずつanimalに入って処理されます。

const animals = ["ねこ", "いぬ", "うさぎ"];

animals.forEach((animal) => {
  console.log(animal);
});

18 index付きで表示

forEachは「要素」と一緒に「何番目か（index）」も受け取れます。indexは0から始まります。

const animals = ["ねこ", "いぬ", "うさぎ"];

animals.forEach((animal, index) => {
  console.log(index + ":" + animal);
});

19 配列の合計を計算

合計用の変数totalを0で用意し、配列の数字を順番に足していきます。total += num は total = total + num と同じです。

const numbers = [10, 20, 30];
let total = 0;

numbers.forEach((num) => {
  total += num;
});

console.log(total);

20 関数の基本

functionは処理をまとめる仕組みです。sayHelloという名前をつけて、呼び出すと中のconsole.logが実行されます。

function sayHello() {
  console.log("こんにちは");
}

sayHello();

21 引数を使う関数

引数は「関数に渡す材料」です。greet(“あかり”)の”あかり”がnameに入って文章が作られます。

function greet(name) {
  console.log(`こんにちは、${name}さん`);
}

greet("太郎");

22 戻り値のある関数

returnは「結果を返す」です。multiply(3,4)の計算結果が返り、console.logで表示できます。

function multiply(a, b) {
  return a * b;
}

console.log(multiply(3, 4));

23 条件を含む関数

関数の中でもifが使えます。年齢によって返す文字を変えています。関数を呼ぶと判定結果が返ります。

function checkAge(age) {
  if (age >= 20) {
    return "大人";
  } else {
    return "未成年";
  }
}

console.log(checkAge(18));

24 アロー関数の基本

アロー関数は関数を短く書く方法です。const sayHi に「関数そのもの」を入れています。

const sayHi = () => {
  console.log("やあ");
};

sayHi();

25 引数ありのアロー関数

(name)のように引数を受け取れます。returnで作った文字列を返しています。

const greet = (name) => {
  return `こんにちは、${name}`;
};

console.log(greet("太郎"));

26 アロー関数の省略形

処理が1行なら、{} と return を省略できます。numを2倍して返します。

const double = (num) => num * 2;

console.log(double(5));

27 アロー関数と配列の組み合わせ

forEachの中でアロー関数を使うのは定番です。配列の各要素を10倍して表示しています。

const numbers = [1, 2, 3];

numbers.forEach((num) => {
  console.log(num * 10);
});