Javascript のプログラムの流れの作り方

Javascript のプログラムの流れの作り方

プログラムで重要なのは、「流れ」という話をしました。今回は、プログラミング言語を Javascript に絞って、どのように流れを作るかを考えてみました。

「入口」と「出口」を決める

Javascript のプログラムは、関数（function）を使わなくても記述できます。しかし、関数（function）を意識した方が入口と出口がハッキリしやすいので、関数を意識したコーディングをすることをお勧めします。

あとは、関数を呼び出す事で処理をするようなスタイルにします。

関数の入口は引数と呼ばれるもので、関数を呼び出す際に一緒にデータを渡すようになっています。 出口は関数が返してくる処理結果です。関数によっては、値を返さないで処理だけを行うこともあります。例えば、Web ページのボタンが押された場合の処理の場合、一連の処理を行なって終了という場合が殆どなので、値を返しません。例としては、ボタンを押したら別の表示に切り替えるという場合、呼び出し元に結果を返す必要がありません。このような関数はボイド（void）型、要は返り値がない関数として定義されます。その場合は、コメントに処理結果などを描いておくと、開発後や開発者以外の人がソースコードを見たときに内容の理解の助けになります。

これが決まると、最初に関数に渡す物と処理結果が何なのかがハッキリするので、関数が何をするのかの方向が決まります。 あとは、必要な結果を得るための流れをプログラムとして記述すれば良いことになります。

流れを作る「構造」は２種類で OK

プログラムの基本は「上から下」なので、それ以外の流れを作る場合は、意図的にそれを示す記述が必要になります。

先日も紹介した通り、基本は、「繰り返し（ループ）」と「条件分岐」の二つです。

Javascript の場合、どちらも色々な書き方がありますが、最初は二つだけで十分です。

＊　for ループ

＊　if / else if / else

この二つだけ、基本的な書き方を理解していれば大抵のプログラムを書くことができます。

繰り返し処理（ループ）の場合、いつ繰り返し処理から抜けるかがポイントです。たまに、特殊なプログラムの場合は、ループから抜けないように作る事もありますが、通常のプログラムではループから抜ける必要があります。そうしないと出口に辿り着かないからです。 最初は、ループから抜けないプログラムを書くケースは殆どないと思いますので、ループを作る時はループから抜け出る条件を決めて抜けられるようにすると考えて良いかと思います。他に「while」など別の書き方もできますが、基本的に For ループだけで問題ありません。

条件分岐は、条件によって処理を変える方法です。これも、「if」「if else」「else」の構文で全て対応できます。他にも「switch」などを使うと、プログラムが読みやすくなる場合もありますが、機能的には、「if」系の構造で全てをカバーできます。

この二つの基本だけを使いこなせれば良いので、本当に最小限の学習でもプログラムの流れを作れます。

もう一つのポイント「流す物」

プログラムで流すのは、水ではなくて「データ」です。このデータも基本はシンプルです。

＊　数字（整数、実数）

＊　文字（文字列）

です。あとは、これを一つの変数で扱うか、纏めたグループ、配列（array）で扱うかという事で十分です。

通常の変数は、「箱」のようなもので、一つの箱に一つの「値（数字や文字・文字列）」を入れますが、同じような形のデータをグループで扱う場合、引き出しのように、箱を連結して複数の「値」を一緒に扱えるようにしたものが配列です。

簡単なプログラムの場合は、この数字、文字・文字列とそれに対応した配列があれば大抵のプログラムを書くことができます。

もう少し複雑な処理になると、必要なデータを寄せ集めてグループにして扱う事ができます。 例えば、あるひとの成績を科目ごとに点数を入れた箱を一つのグループにして扱うこともできます。Javascript の場合 JSON(JavaScript Object Notation )という形でこれを扱う事ができます。

{

    english: 90,

    math: 99,

    history: 89,

    ....

}

これを使えば殆どのデータを効率的に扱う事ができます。関数に処理するデータを渡す場合、バラバラに個別に渡すより、関係したデータをまとめて渡す方が、見やすいプログラムを書けるので、複雑な処理をする場合には、利用頻度が増えます。

流れを混乱させる例外「非同期処理」

Javascript はもともと Web ブラウザで動かす事を前提に設計されたプログラミング言語です。 従って、基本はシングルスレッドという「一本道」のプログラムです。他の言語の場合、スレッドを分けて別々に処理したりすることもありますが、Javascript は違ったんだ方針で設計されています。 一本道だと、「時間のかかる処理」が途中にある場合、その処理が終わるまでプログラムの実行が待たされてしまう場合があります。 これは、荷物の配送をする場合を例に挙げるとわかりやすいですが、何軒かの家に荷物を届けれう場合に、ある家が留守の場合を考えます。留守の人が帰ってくるのを待って、次の家に行く場合、待っている人がなかなか帰ってこないこともあります。こうした場合、先に別の家を回ってから留守の家に行く方が時間を有効に使えます。

プログラムも同じで、動作しているコンピュータやスマホのメモリ上にあるデータはすぐに処理できますが、ディスクドライブにあるデータやネットワーク（インターネット上にあるデータなど）からデータを持ってくる場合には、データが届くまで時間がかかります。

こうした待ち時間を減らせるように、すぐにできる処理を先に行うことができるようになっています。

この場合、プログラムで行う処理の順番が「上から下ではない」場合が起こります。 これが Javascript を最初に習うときにちょっと混乱する部分です。

「非同期処理」と呼ばれています。これに対する言葉、上から順番に行う処理を「同期処理」と呼んでいます。同期処理は一つ一つの仕事（処理）が終わった事を確認しながら進めます。この確認を行う事を「同期」と呼んでいます。非同期処理の場合は、処理が終わっていない場合は、次に行っても良いという書き方をして、待ち時間を減らしています。

初心者の場合は、この非同期処理を除いてプログラムを書いたほうがわかりやすいですし、簡単ですが、実は結構非同期で行う処理が必要になる場合があります。

＊　ファイルを読み込む処理

＊　ネットワークアクセスの処理

Web 開発では、ファイルを読んだりすることも多いですし、インターネットを利用する前提があるのでどうしても非同期処理が入ってきてしまいます。この部分は、わかりにくい部分なので、誰かに教えてもらえる場合は教わってしまった方が早く理解で s きます。独学だとつまづきやすい部分です。

この問題を克服できると、Javascript で殆どの処理のプログラムは上に挙げた最小限の知識で十分に対応ができます。

まとめ

初心者がプログラミングを Javascript を通して学習する場合、必要な事を絞る事ができます。

＊　For ループ

＊　if-else if-else 文

＊　数字と文字・文字列

＊　配列

＊　できれば JSON

この五つをカバーできれば基本的なプログラム開発はできます。 これに加えて、誰かに非同期処理を丁寧に教わることができれば、最初の段階はクリアできます。

時間にしても、非同期処理の対応ができれば、1 ヶ月あれば十分に立派な Web 開発者になれます。