演算子や制御構文はなんのためにあるのか

Webアプリケーションの中で、プログラミング言語がアルゴリズム的な処理を行なっていることが理解できる / アルゴリズムを実装するために、演算子や構文があることが理解できる

目次

1. なぜJavaScriptを学ぶのか

2. 初めてのJavaScript

3. 演算子や制御構文はなんのためにあるのか

4. 四則演算の演算子と変数

5. 数値と条件分岐を使って簡単なプログラムを書いてみよう

6. 繰り返し構文のwhile/for

7. JavaScriptの関数とは

8. デバッグに慣れよう

9. 簡単なイベントを実行してみよう

＊上記のリンクにアクセスすることで、続きをDIVER Learningsで確認できます。

ゴール

• Webアプリケーションの中で、プログラミング言語がアルゴリズム的な処理を行なっていることが理解できる
• アルゴリズムを実装するために、演算子や構文があることが理解できる

アルゴリズムを実現するためのプログラミング言語

プログラミング言語に必要な演算子・制御構文とは

一般的にJavaScriptはフロントエンドで使われる言語というイメージが強いですが、フロントエンドでもバックエンドでも使われるプログラミング言語です。
例えばフロントエンドで使われるJavaScriptでよく実装されるものといえば、ボタンを押すとメニューが表示されるドロップダウンメニューがあります。

ドロップダウンメニューは、ブラウザからの”クリックした”という信号を受け取り、その時メニューが開いているのか閉じているのかを判断して処理をする必要があります。
そこで重要になるのがアルゴリズムです。

アルゴリズムは「どんな処理を、どのような順番で行うのか」をまとめたものです。プログラミング言語にはアルゴリズムを実現するための構造として制御構造というものがあります。制御構造とは、条件によって実行順序を変更したり実行しなかったりするための構造です。制御構造には大きく分けて４つの分類があります。

• 順次処理
  上から順番にプログラムを実行する
• 条件分岐
  ある条件が成り立つ場合とそうでない場合で、処理を切り替える
• 繰り返し
  ある条件が成り立つ間、処理を繰り返す
• 例外処理
  何か例外的なことが起きた時にある処理をする

この制御構造を駆使することで、複雑なプログラムを実現することができます。そして制御構造を記述するための構文が制御構文です。アルゴリズムをコード上で実現するために、+や-のような演算子と制御構文を使いこなすことが必要です。
JavaScriptにも制御構文やメソッドがたくさん用意されています。

大きな卵焼き作りで例えてみると

アルゴリズムを日常の例で考えてみます。

あなたは今、卵100個を使った卵焼きを作るため、卵割りの作業をしなくてはなりません。
大きなボウルに卵を割っていきますが、用意された卵には傷んだものも混ざってしまっています。

このような状況の時の卵焼きの手順として、以下が考えられます。

大きなボウルにどんどん割っていく方法

1. 大きなボウルにどんどん卵を割り入れていく
2. 割った卵が傷んでいたら他の卵と混ざってしまい、全部使えないので卵焼きがつくれない
   終了

まず小さなボウルに卵を割っていく方法

1. 小さなボウルにまず卵を割り入れ、卵が問題なければ大きなボウルに入れる
2. もし小さなボウルに割った卵が傷んでいたら、その卵は捨てる
3. 大きなボウルの卵が100個に満たなかったら1に戻る

効率的に作業をするには後者を選択する人が多いと思います。
手順の中には、「もし小さなボウルに割った卵が傷んでいたら」というように、条件によってそのあとの処理を変えることが発生します。

もしこの手順をJavaScriptで記述するとしたらこのようになるでしょう。

for (let i; i<100個; i++;){
  小さなボウルに卵を割り入れる;
  if (卵が傷んでいたら){
    その卵は捨てる;
  }
  小さなボウルの卵を大きなボウルに移す;
}

if(){~}というのが、「もし小さなボウルに割った卵が傷んでいたら」の部分です。
for(){~}というのが、「最初に戻って繰り返す」という意味です。
このように、プログラミング言語に用意された制御構文は、アルゴリズムを実現するために用意されていることがわかります。

フロントエンド機能に置き換えた時の例

それでは実際のWebアプリケーション内で動くJavaScriptの場合はどうでしょうか。
先ほどのドロップダウンメニューで考えてみます。

1. ブラウザからの”クリックした”という信号が送られる
2. 信号を受け取り、もしメニューが開いていなければ開く
3. メニューが開いていたら閉じる

ここでも「もしメニューが開いていなければ」という条件によって処理が変わっています。
この条件部分に制御構文を使うことで、掲示板に書き込む処理のアルゴリズムを実現できます。
これからの学習で、演算子や構文を学び動かす感覚を身につけ、このような処理のアルゴリズムを実装するためのイメージを掴んでいきましょう。

まとめ

• プログラミング言語に用意された構文は、アルゴリズムを実現するために用意されている。

関連記事

次回：4. 四則演算の演算子と変数

前回：2. 初めてのJavaScript

＊上記のリンクにアクセスすることで、続きをDIVER Learningsで確認できます。