JavaScript を使った「電卓Webアプリ」の作り方を中３の息子に教えてみた！（プログラミング初心者向け）

# JavaScript を使った「電卓Webアプリ」の作り方を中３の息子に教えてみた！

最後には、こんな感じ👇になる「電卓Webアプリ」の作り方を解説します。

![WebCalc.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/107592/35ff07c1-5c31-c5ec-410a-dcaa3ab6576e.gif)

[プログラミング]初心者でもわかるように書いたつもりだけど、実際には[JavaScript]　[プログラミング]の話は少なくて、その前提となる [HTML] とか [ブラウザ]とか、OSとかの基礎知識が多く必要だよね、、、という記事になった気がします。

2020年、あけましておめでとうございます。

息子が「[JavaScript]で電卓アプリを作ってみたい！作り方を教えて！！」というので。
正月早々ではあるが、まとまった時間がとれたので、Qiitaの記事にしてみた。

## 1. 雛形となるHTML ファイルを用意する

### はじめの一歩

[HTML]ファイルを作って[ブラウザ]で開いてみます。手順は以下。

[Visual Studio Code] をインストールして、空のフォルダを作って、作った空のフォルダを [Visual Studio Code] で開きます。

[Visual Studio Code]:https://code.visualstudio.com/download
[HTML]:https://developer.mozilla.org/ja/docs/Web/HTML
[JavaScript]:https://developer.mozilla.org/ja/docs/Web/JavaScript

WebCalcという空のフォルダを[Visual Studio Code]で開いたところ↓。
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/107592/5bdfb1f8-00cc-e5c0-fad8-74a5f86721de.png)

### 新しいHTMLファイルを作る

ファイル名はなんでもよいのだけど、「なんでもいい」と言われると選択肢が広がりすぎて逆に困るのが世の常なので、ここでは「Calc.html」としましょう。

WebCalcフォルダに「Calc.html」というファイルを新規作成したところ↓。
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/107592/dd466259-da4b-f483-e0cb-5fec00c20bc7.png)


以下のコードを入力。

```HTML:Calc.html
<!DOCTYPE html>
<meta charset="UTF-8">
<html><body>
    <div>Hello world!</div>
</body></html>
```

[HTML]ファイルはテキストファイルで作られています。[タグ](要素＝エレメント)を基本に表示したいことがらを書いていきます。ここでは、[JavaScript]での[プログラミング]の話がメインになるので、[HTML]　[タグ]についての詳細は、他のページで学んでください。

ここまでで、出てきた[タグ]は
- html
- body
- div
の３つ。
このあと出てくる[タグ]は
- [input]
- [button]
- script
- style
の４つ。
この記事で出てくる[HTML]　[タグ]は合計で７種類なので、[Webアプリ]としてはとても少ないと思います。

追記：
Windows デフォルトのブラウザ「Microsoft Edge」では `<meta charset="UTF-8">`の記述が無いと文字化けする（Shift_JISだと思うの？）ということなので追加させていただきました。

（[Webアプリ]とは言っても、クライアント側だけで閉じていて、サーバー側はHTMLファイルを送り出しているだけで、サーバーとの通信などはなにもしていない簡素なアプリなので、[Webアプリ]と名乗るにはちょっとおこがましいかもしれません。）

[Webアプリ]:https://ja.wikipedia.org/wiki/%E3%82%A6%E3%82%A7%E3%83%96%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3

[タグ]:https://developer.mozilla.org/ja/docs/Glossary/Tag

入力ができたら、いったん保存（Ctrl+s）して、そのファイルを[ブラウザ]で開いてみます。
OSの機能、Windowsなら[エクスプローラ]、MacOSなら[ファインダ]から、Calc.htmlファイルのアイコンをダブルクリックすることでデフォルトの[ブラウザ]で開くはず↓。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/107592/c6e51fa7-91ce-ec5e-7d91-aa549963f589.png)

[ブラウザ]:https://ja.wikipedia.org/wiki/%E3%82%A6%E3%82%A7%E3%83%96%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6

[エクスプローラ]:https://ja.wikipedia.org/wiki/Windows_Explorer

[ファインダ]:https://ja.wikipedia.org/wiki/Finder

ここまでが最初のステップ。

いったんまとめると。[プログラミング]の前知識として、

・[HTML]ファイルを作る。なぜなら、[ブラウザ]に [JavaScript] を実行する機能が入っているので、[HTML]ファイルの中に [JavaScript] のコードを書いて、[ブラウザ]で開くと、書いた [JavaScript] のコードが実行される。すなわち、[プログラミング]ができる。

・[HTML]ファイルを作るには、[テキストエディタ]の知識が必要。ここでは、プロも使っている高機能な[テキストエディタ]「[Visual Studio Code]」を使う。理由は、無料だし、コードに色が付いて、わかりやすい（間違いに気がつきやすい）から。

・OSの仕組み。ファイルとか、フォルダとか、[ブラウザ]とか、[エクスプローラ]とか、起動とか、終了とか、この辺りの知識は前提として必要。[プログラミング]そのものよりも、まずは「コンピューターシステムとはどういうものなのか？」を知ることが大切だと思う。

[テキストエディタ]:https://ja.wikipedia.org/wiki/%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%82%A8%E3%83%87%E3%82%A3%E3%82%BF

[プログラミング]:https://ja.wikipedia.org/wiki/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0

## 2. HTMLファイルにコードを書いていく

```HTML:Calc.html
<!DOCTYPE html>
<meta charset="UTF-8">
<html><body>
    <div>Hello WebCalc!</div>
    <input />
    <button >123</button>
</body></html>
```

World! を WebCalc! に変えて、'[input]' と '[button]'[タグ]を追加して、いったん保存（Ctrl+s）。[HTML]ファイルを[ブラウザ]で開いてみよう。なにか変わったかな？

[input]:https://developer.mozilla.org/ja/docs/Web/HTML/Element/Input
[button]:https://developer.mozilla.org/ja/docs/Web/HTML/Element/button

（[HTML]は[タグ]の種類や意味によって、`<xxx>, <xxx/>, </xxx>` という書き方があります。それぞれ理由があって、このような書き方になっています。ここでは詳しくは解説しないので、知りたい方は、他のページを検索してください。）

以降、
コードを書く→保存する→[ブラウザ]で開いて動きを確認する→
コードを書く→保存する→[ブラウザ]で開いて動きを確認する→
・・・・
この作業をひたすら繰り返します。
この作業のことを「[プログラミング]」といいます。「コードをすべて一気に書いて、最後に確認すればよい」という考え方もあるけどおすすめしないです。その理由は、どこで間違えたのかわからなくなってしまう（探す範囲が広くなるほど探しにくくなる）からです。

では、いよいよ [JavaScript] コードを書いていきます。

```HTML:Calc-step1.html
<!DOCTYPE html>
<meta charset="UTF-8">
<html><body>
    <div>Hello WebCalc!</div>
    <input />
    <button onclick="document.querySelector( 'input' ).value = '123' " >123</button>
</body></html>
```
呪文のように長くなりました。しっかり入力できたでしょうか？ 入力したら、保存して、動作確認を繰り返します。

<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="result" data-user="yamazaki3104" data-slug-hash="VwYMRgj" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="WebCalc - step1">
  <span>See the Pen <a href="https://codepen.io/yamazaki3104/pen/VwYMRgj">
  WebCalc - step1</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

入力はコピペしてもいいけど、[プログラミング]を覚えるには自力でキーボードから打ち込んだほうが早く覚えられる。なぜなら、シングルクォート「'」とか、ダブルクォート「"」の違いとか、そのキーがどこにあるのか、どうやったら入力できるのかなどなど、細かい操作は、実際にやってみて、間違えてみないと覚えられないから。「急がば回れ」の精神です。

この呪文、、、いやコードの意味を日本語で解説すると、「[HTML]ドキュメントから '[input]'[タグ]を探してきて、その'[input]'[タグ]にある `value` というメンバに `'123'` という値（文字列）を上書きする（「変更する」「入れる」「代入する」ともいいます）」という意味になります。'[input]'[タグ]の `value` に入れた値は[ブラウザ]の機能によってそのまま表示されます。ここでは、123という文字を入れているので、`123`が表示されます。まとめると、「123」[ボタン]を押すと、'[input]'[タグ]に123の文字が表示されるはずです。

[ブラウザ]には、[querySelector()](https://developer.mozilla.org/ja/docs/Web/API/Document/querySelector)のように、便利な機能([API]とも言われます)がたくさん用意されています。ホントにたくさんあります。たくさんありすぎて、すべてを完璧に覚えているひとはいないと思われます。

このように、[プログラミング]とは、用意されているたくさんの機能を選んで組み合わせて、自分がやりたいことを実現することに等しくなります。なので、自分のやりたい機能を探し出す能力が常に問われていると思ってください。

[API]:https://ja.wikipedia.org/wiki/%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%95%E3%82%A7%E3%83%BC%E3%82%B9

## 3. ボタンを増やしてみる

```HTML:Calc-step2.html
<!DOCTYPE html><meta charset="UTF-8">
<html><body>
    <div>Hello WebCalc!</div>
    <input />
    <button onclick="document.querySelector( 'input' ).value += '1' " >1</button>
    <button onclick="document.querySelector( 'input' ).value += '2' " >2</button>

    <button onclick="document.querySelector( 'input' ).value = '' " >CLR</button>
</body></html>
```

'[button]'[タグ]をコピペして、123 を書き換えて、1と２とCLRの[ボタン]を作ります。
1と2 は `+=`。 CLR は `=` と書いているところに注意してください。

`+=`は「追加」。 `=` は「上書き」「更新」の意味になります。
なので、`+= '1'`と書くと、[ボタン]がクリックされるたびに`1`の文字が追加され、`= ''`と書くと、valueがクリアされ、表示内容が空っぽになります。

ここでまた保存して、確認してみます。

<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="result" data-user="yamazaki3104" data-slug-hash="QWwqoYx" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="WebCalc -step2">
  <span>See the Pen <a href="https://codepen.io/yamazaki3104/pen/QWwqoYx">
  WebCalc -step2</a>.</span>
</p>

## 4. コードをまとめて関数（[サブルーチン]）にしてみる

```HTML:Calc-step3.html
<!DOCTYPE html>
<meta charset="UTF-8">
<html><body>
    <div>Hello WebCalc!</div>
    <input />
    <script>
    function update( _v ) // input tag を更新する関数
    {
        document.querySelector( 'input' ).value = _v
    }

    function append( _v ) // 数字ボタンが押されたので数字を後ろに追加する
    {
        document.querySelector( 'input' ).value += _v
    }
    </script>
    <button onclick="append( '1' )" >1</button>
    <button onclick="append( '2' )" >2</button>

    <button onclick="update( '' ) " >CLR</button>
</body></html>
```

<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="result" data-user="yamazaki3104" data-slug-hash="PowJLgJ" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="WebCalc - step3">
  <span>See the Pen <a href="https://codepen.io/yamazaki3104/pen/PowJLgJ">
  WebCalc - step3</a>.</span>
</p>

`<script>` と `</script>` の間に書いたのが、[JavaScript]のコード。
あと、`onclick=" ... "` の ... の部分も[JavaScript]のコードです。

`onclick=" ... "`にすべてのコードを書いてもいいけど、コードが長くなるし、見にくくなって間違いやすくなるから、なるべくシンプルになるように工夫する。長いコードをまとめて短い名前をつけて使う。ここでの長いコードとは`document.querySelector( 'input' ).value += '1'`のことで、短い名前とは`append`や`update`のこと。

[プログラミング]の世界では「関数 function にする」といいます。古い言い方だと「[サブルーチン]にする」と言っていました。関数にするメリットは、同じコードをまとめることで、見た目をスッキリさせる効果があります。見た目がスッキリすると、思考もスッキリして、間違いにくくなります。ごちゃごちゃしていると、どこが間違えているのかわからなくなるからね。整理整頓は大切です。

[サブルーチン]:https://ja.wikipedia.org/wiki/%E3%82%B5%E3%83%96%E3%83%AB%E3%83%BC%E3%83%81%E3%83%B3


## 5. 計算するコードの実装（「=」ボタンを作る）

```HTML:Clac-step4.html
<!DOCTYPE html>
<meta charset="UTF-8">
<html><body>
    <div>Hello WebCalc!</div>
    <input />
    <script>
    function update( _v ) // input tag を更新する関数
    {
        document.querySelector( 'input' ).value = _v
    }

    function append( _v ) // 数字ボタンが押されたので数字を後ろに追加する
    {
        document.querySelector( 'input' ).value += _v
    }

    function calc() // 「＝」ボタンが押されたので計算する
    {
        const v = document.querySelector( 'input' ).value
        const f = new Function( 'return ' + v )
        update( f().toString() )
    }
    </script>
    <button onclick="append( '1' )" >1</button>
    <button onclick="append( '2' )" >2</button>
    <button onclick="append( '3' )" >3</button>
    <button onclick="append( '+' )" >+</button>
    <button onclick="append( '-' )" >-</button>

    <button onclick="calc()" >=</button>

    <button onclick="update( '' ) " >CLR</button>
</body></html>
```

<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="result" data-user="yamazaki3104" data-slug-hash="PowJLMO" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="WebCalc - step4">
  <span>See the Pen <a href="https://codepen.io/yamazaki3104/pen/PowJLMO">
  WebCalc - step4</a>.</span>
</p>

どうでしょう？　「＝」[ボタン]で計算できたかな。

試しに、`1` `+` `2` `=` と順番に押してみましょう。

軽く解説すると、`const f = new Function( 'return ' + v )`この行で関数 f を作っています。
標準ビルトインオブジェクトの [Function] を使って、'[input]'[タグ]に書かれている文字列を実行する関数 f を作成しています。
一般的に、こんなふうに文字列を関数にして実行してしまうのは、「なにを実行されるかわからない」という危険性を持つので避けるべきコードです。特に、サーバー側で動かすようなプログラムでは、脆弱性に直結するので、絶対に使わないでください。

`update( f().toString() )`この行で作った関数 f を実行して、実行結果を文字列に変えて`toString()`、さらに '[input]'[タグ]を更新`update()`しています。

この２行で、電卓アプリの心臓部はできています。[Function] は便利で強力な反面、理解して使わないと脆弱性にもなりえるという「諸刃の刃」なんですね。

[Function]:https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function


## 6. 必要な[ボタン]を揃ていく

ここまでできたら[JavaScript]のコードを追加する必要はもうありません。あとはもう、[タグ]を好きなように追加するだけです。[ボタン]を 0〜9 まで用意して、四則演算や小数点演算、二乗や平方根（ルート）なんかもできちゃいます。

```HTML:Clac-step5.html
<!DOCTYPE html>
<meta charset="UTF-8">
<html><body>
    <div>Hello WebCalc!</div>
    <input />
    <script>
    function update( _v ) // input tag を更新する関数
    {
        document.querySelector( 'input' ).value = _v
    }

    function append( _v ) // 数字ボタンが押されたので数字を後ろに追加する
    {
        document.querySelector( 'input' ).value += _v
    }

    function calc() // 「＝」ボタンが押されたので計算する
    {
        const v = document.querySelector( 'input' ).value
        const f = new Function( 'return ' + v )
        update( f().toString() )
    }
    </script>
    <button onclick="append( '1' )" >1</button>
    <button onclick="append( '2' )" >2</button>
    <button onclick="append( '3' )" >3</button>
    <button onclick="append( '4' )" >4</button>
    <button onclick="append( '5' )" >5</button>
    <button onclick="append( '6' )" >6</button>
    <button onclick="append( '7' )" >7</button>
    <button onclick="append( '8' )" >8</button>
    <button onclick="append( '9' )" >9</button>
    <button onclick="append( '0' )" >0</button>
    <button onclick="append( '.' )" >.</button>
    <button onclick="append( '+' )" >+</button>
    <button onclick="append( '-' )" >-</button>
    <button onclick="append( '*' )" >*</button>
    <button onclick="append( '/' )" >/</button>
    <button onclick="append( '**' )" >^</button>
    <button onclick="append( '**0.5' )" >√</button>

    <button onclick="calc()" >=</button>

    <button onclick="update( '' ) " >CLR</button>
</body></html>
```

<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="result" data-user="yamazaki3104" data-slug-hash="zYxEXGY" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="WebCalc - step5">
  <span>See the Pen <a href="https://codepen.io/yamazaki3104/pen/zYxEXGY">
  WebCalc - step5</a>.</span>
</p>

一通り、計算できるようになりました。
機能としてはこれで十分ですね。

## 7. エラー処理を追加する

あとは、エラー処理とデザインですね。

エラー処理は、[プログラミング]でも大切なところです。[プログラミング]のプロを目指すのならば、ここはしっかりおさえておきましょう。

エラーを出さない工夫も大切ですが、避けきれない時は、 [try-catch] 文を使います。
[try-catch]:https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/try...catch

```JS:try-catch構文
try {
  ...
} catch( _error ) {
  ...
}
```

```HTML:Clac-step6.html
<!DOCTYPE html>
<meta charset="UTF-8">
<html><body>
    <div>Hello WebCalc!</div>
    <input />
    <script>
    function update( _v ) // input tag を更新する関数
    {
        document.querySelector( 'input' ).value = _v
    }

    function append( _v ) // 数字ボタンが押されたので数字を後ろに追加する
    {
        document.querySelector( 'input' ).value += _v
    }

    function calc() // 「＝」ボタンが押されたので計算する
    {
        const v = document.querySelector( 'input' ).value
        try {
            const f = new Function( 'return ' + v )
            update( f().toString() )
        } catch( _error ) {
            update( _error ) // 計算に失敗した場合は、そのエラーの内容を表示する
        }
    }
    </script>
    <button onclick="append( '1' )" >1</button>
    <button onclick="append( '2' )" >2</button>
    <button onclick="append( '3' )" >3</button>
    <button onclick="append( '4' )" >4</button>
    <button onclick="append( '5' )" >5</button>
    <button onclick="append( '6' )" >6</button>
    <button onclick="append( '7' )" >7</button>
    <button onclick="append( '8' )" >8</button>
    <button onclick="append( '9' )" >9</button>
    <button onclick="append( '0' )" >0</button>
    <button onclick="append( '.' )" >.</button>
    <button onclick="append( '+' )" >+</button>
    <button onclick="append( '-' )" >-</button>
    <button onclick="append( '*' )" >*</button>
    <button onclick="append( '/' )" >/</button>
    <button onclick="append( '**' )" >^</button>
    <button onclick="append( '**0.5' )" >√</button>

    <button onclick="calc()" >=</button>

    <button onclick="update( '' ) " >CLR</button>
</body></html>
```

<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="result" data-user="yamazaki3104" data-slug-hash="dyPVLJz" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="WebCalc - step6">
  <span>See the Pen <a href="https://codepen.io/yamazaki3104/pen/dyPVLJz">
  WebCalc - step6</a>.</span>
</p>

## 8. 最後にデザインを調整する

それでは最後に、[CSS]でデザインを調整して終わりましょう。[CSS]に関しては、[HTML]の機能なので、ここでは深く掘り下げないですが、「ひとは見た目が９割」とも聞きますし。同じ機能でも、デザインによって評価が大きく変わるので、デザインも大切ですよ。

[CSS] には、[タグ]の style[アトリビュート]に記述する方法と、まとめてstyle[タグ]に記述する方法の２種類があります。

[アトリビュート]:https://developer.mozilla.org/ja/docs/Web/HTML/Attributes

[CSS]:https://developer.mozilla.org/ja/docs/Web/CSS

```HTML:styleアトリビュート
<button style="width:40px;" >123</button>
```

```HTML:styleタグ
<style>
button
{
    width: 40px;
}
</style>
```

個別に指定するなら、style[アトリビュート]。
まとめて指定するなら、style[タグ]を使うとよいでしょう。

デザインを調整すると完成です。

```HTML:Calc-step7.html
<!DOCTYPE html>
<meta charset="UTF-8">
<html><body>
    <style>
    button
    {
        width: 50px;
        height: 50px;
    }
    </style>
    <div>Hello WebCalc!</div>
    <input style="font-size: 28px; text-align: right;" /><br />
    <script>
    function update( _v ) // input tag を更新する関数
    {
        document.querySelector( 'input' ).value = _v
    }

    function append( _v ) // 数字ボタンが押されたので数字を後ろに追加する
    {
        document.querySelector( 'input' ).value += _v
    }

    function calc() // 「＝」ボタンが押されたので計算する
    {
        const v = document.querySelector( 'input' ).value
        try {
            const f = new Function( 'return ' + v )
            update( f().toString() )
        } catch( _error ) {
            update( _error ) // 計算に失敗した場合は、そのエラーの内容を表示する
        }
    }
    </script>
    <button onclick="append( '1' )" >1</button>
    <button onclick="append( '2' )" >2</button>
    <button onclick="append( '3' )" >3</button>
    <button onclick="append( '4' )" >4</button>
    <button onclick="append( '5' )" >5</button><br />
    <button onclick="append( '6' )" >6</button>
    <button onclick="append( '7' )" >7</button>
    <button onclick="append( '8' )" >8</button>
    <button onclick="append( '9' )" >9</button>
    <button onclick="append( '0' )" >0</button><br />
    <button onclick="append( '.' )" >.</button>
    <button onclick="append( '+' )" >+</button>
    <button onclick="append( '-' )" >-</button>
    <button onclick="append( '*' )" >*</button>
    <button onclick="append( '/' )" >/</button><br />
    <button onclick="append( '**' )" >^</button>
    <button onclick="append( '**0.5' )" >√</button>

    <button onclick="calc()" style="width:105px;">=</button>

    <button onclick="update( '' ) " >CLR</button>
</body></html>
```

<p class="codepen" data-height="365" data-theme-id="default" data-default-tab="result" data-user="yamazaki3104" data-slug-hash="OJPxGdr" style="height: 365px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="WebCalc - step7">
  <span>See the Pen <a href="https://codepen.io/yamazaki3104/pen/OJPxGdr">
  WebCalc - step7</a>.</span>
</p>

以上で [JavaScript]を使って「電卓[Webアプリ]」を作ってみる！の解説を終わります。

# まとめ

息子に[プログラミング]を教えてみたら、逆に教わったことがあった。

[JavaScript]の[プログラミング]に関して教えるつもりで書き始めたものの、[JavaScript]のコードを教えるというよりは、コンピュータとはなにか？　OSとはなにか？　[ブラウザ]とはなにか？　[HTML]とはなにか？ [タグ]とはなにか？　[API]とはなにか？　といった前提の解説が多く必要になるといった現実と向き合った時間になりました。

そういうことなんですよ。[プログラミング]とは、「いかにしていまある[API]を組み合わせて、やりたいこと、実現したいことにつなげていくか？」なんですね。要するに「つなげ方」です。

[プログラミング]とは「現実と未来をつなぐことだ」ってことを。そんなことに気付かされた時間でした。

いかがでしたでしょうか。コメントなど、ございましたら、ガンガンお願いいたします。

みなさまの[プログラミング]ライフの一助になれば幸いです。

# 追記(2021-02-16)：相互リンク追加

同じような JavaScript プログラミングの記事なのに、View 数がめっちゃ偏っているので相互リンクしてみる。タイトルの問題なのかなぁ？？🤔

- [JavaScript を使った「電卓Webアプリ」の作り方を中３の息子に教えてみた！（プログラミング初心者向け）](https://qiita.com/yamazaki3104/items/b5351f589fb6644bf910)　←この記事

- [『こんにちはPython』のスカッシュゲーム（壁打ちテニス）を JavaScript に写経してみた！（前編、プログラミング初心者向け）](https://qiita.com/yamazaki3104/items/b6d567e76e81ea658ff5)


- [『こんにちはPython』のスカッシュゲーム（壁打ちテニス）を JavaScript で写経してみた！（後編、プログラミング玄人向け）](https://qiita.com/yamazaki3104/items/ce89373fa862e4f3f439)

よろしくお願いいたします。🙇‍♂️