Newer
Older
hello-programmer-world / src / pages / js / 011-what-program-do.mdx
@h.sakamoto h.sakamoto 20 days ago 4 KB commit
---
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;
```

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

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

// 変数ageの値を変更する
age = 20;

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

<br />

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

```js
const pi = 3.14;

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

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