---
layout: "@/layouts/MarkdownLayout.astro"
---

export const title = "プログラミングで扱うもの";

# {title}

このページはプログラミング初学者に向けた内容です。  
不要な方は読み飛ばしてください。

このページで紹介しているソースコードは全てJavaScriptで書かれています。

## TOC

## コメント

ソースコードを書いていくわけですが、そこに書くすべてのものがプログラムの動作に関係するわけではありません。  
誰であってもメモくらい書き残したいものです。

JavaScriptでは、以下のようにコメントを書くことができます。

```js
// パターン1のコメント
// ← この後ろは、その行の終わりまでがコメントです

/* パターン2のコメント */
/* ← この2つの間は、全てコメントです → */
/*
パターン1で
できなかった
改行も
できます
*/
```

## 関数とは

足し算を考えてみましょう。

`1 + 2`

これの答えは、もちろん`3`ですね。

この行為を、ちょっと日本語にしてみましょう。  
日本語だといろいろな表現ができますが、プログラミング的なには以下のように言えます。

`足すという行為を、1と2に対して行う`

この`足すという行為`の部分が、プログラミングでいうところの**関数**です。  
この関数に、`1`と`2`という対象(=**引数**)を渡すと、`3`という結果(=**戻り値**)が返ってきます。

具体的に、2つの数を足すと関数をJavaScriptで書くと、以下のようになります。

```js
function add(a, b) {
  return a + b;
}
```

これを日本語で説明すると、以下のようになります。

`足すという行為`に対して、`add`という名前をつけた。  
この`add`は2つの数字を受け取り、各々とりあえず`a`と`b`という名前をつける。  
その結果は、この2つを使った`a + b`をしたものだ。

ちなみに人が手で計算をするとき、筆算をすることがあります。  
数学的な意味での関数はこの計算結果だけを考えますが、プログラミングにおける関数は**その計算過程も含めて**定義することができます

極端に言えば、計算するために紙とペンを用意することも、関数のなかで行って良いのです。  
`1 + 2`を計算するのであれば、結果が`3`であればなんでも良いのです。

```js
function add(a, b) {
  // ペンと紙を用意して・・・
  // 1の位から順に足して・・・
  // 繰り上がりを考慮して・・・

  return 計算結果
}
```

<br />
<br />

実際に`add`を使った`足すという行為`は、以下のように書きます。

```js
add(1, 2); // 結果: 3
```

<br />
今回自分でこの`add`という関数を定義してみました。  

ところで冷静に考えて、こういった関数を全て自分で定義するのは大変です。  
ですがあなたがやりたいことは、**基本的にすでに誰かがそのための関数を用意してくれています。**

実際にプログラミングするということは、**すでにあるものをどのように組み合わせて、やりたいことを実現するか**ということです。

今の`add(1, 2)`も、実行しただけでは本当に`3`になったのかが確認できません。  
この確認のために、例えばJavaScriptが最初から用意してくれている`alert`という関数を使って、結果を目に見えるようにしてみましょう。

```js
alert(add(1, 2)); // 3とメッセージが表示される
```

`add(1, 2)`の結果である`3`が`alert`関数に渡されて、メッセージとして表示されます。

目に見えるようにするという意味では、`console.log`という関数もあります。

```js
console.log(add(1, 2));
// => 3 がコンソールに表示される
```

## 変数とは

変数とは、ある値に名前をつけて保存しておくためのものです。  
初めてその変数を作るときに、以下のように書きます。

```js
// let 値につける名前 = 値;

let name = "もつに";
let age = 18;
let wallet_amount = 1500;
```

一度変数を作ると、その名前を使って値を取り出したり、変更したりすることができます。

```js
// 変数nameの値を取り出して表示する
console.log(name); // => もつに

// 変数ageの値を変更する (再代入)
age = 20;

// 誕生日を迎えて、年齢が1増えることを表現する
age = age + 1;  // -> age = 20 + 1 と解釈される

// 別の方法で、変数wallet_amountの値を変更する
wallet_amount += 300; // -> wallet_amount = wallet_amount + 300 と解釈される
wallet_amount -= 500; // -> wallet_amount = wallet_amount - 500 と解釈される
```

<br />

変数を宣言するキーワードには、`let`の他に`const`もあります。  
これは日本語でいうところの「定数」を表し、一度値を設定したら、その変数の値を変更できなくなります。

```js
const pi = 3.14;

// pi から値を取り出すことはできる
console.log(pi); // => 3.14

// エラー: constで宣言された変数は値の変更ができない
pi = 3.14159;
```

`let`に比べて`const`は制約が多いですが、値が変わらないことが保証されるためソースコードを読みやすくなるという利点があります。

実は変数に再度代入しなければいけないパターンはほとんどありません。  
最初のうちは`let`を使い、慣れてきたら`const`を使うようにすると良いでしょう。

## 変数の値

変数に入れられる値には、いくつか種類があります。  
値がどんな種類なのかということを、**データ型**と呼びます。

このデータ型によって、どのようなプログラムを書くことができるのかが決まります。

### 数字 (Number型)

数字を扱うデータ型です。

```js
const age = 18;        // 整数
const tax_rate = 0.1; // 小数
const golf_score = -5;  // 負の数
```

### 文字列 (String型)

文字の並びを扱うデータ型です。

シングルクォート(`'`)や、ダブルクォート(`"`)などで囲むことで表現します。

```js
const name = "もつに";        // ダブルクォートで囲む
const greeting = 'こんにちは'; // シングルクォートで囲む
```

<br />

余談ですが、`も`、`つ`、`に`と、それぞれの文字を`もつに`と1つにまとめるような書き方を採用しています。  
これは文字を1列に並べていることから、**文字列**と呼ばれています。

### 構造 (Object型)

なにかを管理しようとしたときに、人の目にはある程度まとまりがあったほうが便利です。  
これをプログラミング的に表現したものが、**オブジェクト**です。

これは、`{` と `}`で囲まれた中に、`キー: 値`の組み合わせを並べて表現します。

```js
const 変数名 = {
  [キー名1]: 値,
  [キー名2]: 値,
  [キー名3]: 値,
  ...
}
```

```js
const person = {
  // 文字列
  name: "もつに",

  // 数字
  age: 18,

  // 関数を値として持つこともできる
  greeting: function() {
    console.log("こんにちは！");
  }
};
```

値を取り出すときは、以下のように書きます。

```js
// 変数名.キー名

person.name; // "もつに"
person.age;  // 18

// 関数なので、末尾に()をつけて実行することもできる
person.greeting(); // => こんにちは！
```

<br />

他の変数と同様、別の値を代入して変更することもできます。

```js
// nameの値を"たろう"に変更
person.name = "たろう";

// ageの値を20に変更する
person.age = 20;

// addressという新しいキーを追加して値を設定
person.address = "東京都";
```

### 配列

数字の連番や、例えばクラスの生徒リストなど、同じ種類のものをまとめて扱いたいことがあります。  
このようなときに使うのが、**配列**です。

配列は、`[` と `]`で囲まれた中に、値をカンマ(`,`)で区切って並べて表現します。

```js
const 変数名 = [値1, 値2, 値3, ...];
```

<br />

```js
const numbers = [10, 20, 30, 40, 50];

const names = ["もつに", "たかし", "なおき"];

const students = [
  { name: "もつに", age: 18 },
  { name: "たかし", age: 20 },
  { name: "なおき", age: 19 },
];
```

<br />

この配列には、先頭から順に`0`、`1`、`2`、...という番号(=**index、添字**)が自動的に振られます。  
値を取り出す方法の1つとして、このインデックスを使う方法があります。

```js
const names = [
  "もつに",   // 0番
  "たかし",   // 1番
  "なおき",   // 2番
];

names[0]; // "もつに"
names[1]; // "たかし"
names[2]; // "なおき"


const students = [
  { name: "もつに", age: 18 },  // 0番
  { name: "たかし", age: 20 },  // 1番
  { name: "なおき", age: 19 },  // 2番
];

students[0].name; // "もつに"
students[0].age;  // 18

```

### 関数

実は、JavaScriptでは3種類の関数の書き方があります。  
変数の中身を関数にする書き方があるので、併せて覚えておきましょう。

厳密な違いはありますが、いくつか書き方があるということだけ押さえておけば大丈夫です。

```js
// 通常の関数の書き方
function 関数名(引数1, 引数2, ...) {
  // 処理内容
  return 戻り値;
}

// 無名関数方式
const 関数名 = function(引数1, 引数2, ...) {
  // 処理内容
  return 戻り値;
}

// アロー関数方式
const 関数名 = (引数1, 引数2, ...) => {
  // 処理内容
  return 戻り値;
}
```

やっていることは結局、関数に対して別の名前をつけていることと同じです。

```js
function subtract(x, y) {
  return x - y;
}

const sub = subtract;

// 内部的には完全に同じもの
sub(5, 3);      // 2
subtract(5, 3); // 2
```

以下の3つは同じ動作をします。

```js
function add(x, y) {
  return x + y;
}
```

<br />

```js
const add = function(x, y) {
  return x + y;
};
```

<br />

```js
const add = (x, y) => {
  return x + y;
};
```