Web ブラウザで動かすプログラムの種類

Web ブラウザで動かすプログラムの種類

フロントエンドのプログラムは基本的に Web ブラウザで実行されます。 簡単に仕組みを説明すると、Web ページにアクセスした時に必要な Javascript のファイルを一緒にダウンロードするか、Javascript のコードが HTML ファイル内に含まれているので、それを Web ブラウザが実行します。

Web ブラウザが実行できるのは、基本的には、Javascript のコードです。

Web ブラウザで実行するプログラムの種類

Web ブラウザで実行されるプログラムは、基本的に Javascript のコードです。Typescript でプログラムを書いた場合は、Typescript をコンパイルして、Javascript に変換したコードを Web サーバーにおいて利用するので、Web ブラウザで実行されるコードは Javascript になります。

この中で、Javascript のプログラムは目的によって幾つかに分類されます。

＊　UI の操作に関連する処理

＊　データの処理

＊　I/O の処理

です。

UI（ユーザーインターフェース）の処理は、ボタンをクリックしたり、プルダウンメニューからメニューを選んだりなど、利用者が UI を操作した時の処理を行います。必要に応じて、画面を切り替えたり、データを読み込んだり、送ったりする操作を呼び出すための処理です。

データの処理は、入力されたデータや、ファイルやサーバーから取り込んだデータを目的に応じて処理する物です。利用者が入力したデータのチェックなどもこのデータ処理に入れる場合もありますが、UI の処理の一部とも見なせるため、その境界はハッキリしたものではありません。

I/O の処理は、ネットワークからデータを取り込んだり、ディスクドライブ（HDD や SSD)などからファイルを読み込んだりする処理がこれ相当します。

種類を区別すると良いことがある！

わざわざ分類したのには理由があります。完全に明確でなくても、上の３種類のプログラムを別々に実装しておくと、将来の管理を上手く行う事ができます。

理由は簡単で、別々に実装しておくと、それぞれを別々に管理できるので将来的な変更や拡張がより柔軟に行う事ができるからです。

もう少し具体的に言うと、例えば、UI(ユーザーインターフェース)を変更した場合は、UI に近い処理だけを変更する事が簡単にできます。しかし、プログラムの実装を区別していない場合は、変更の際に関係の無い部分に影響が出ないように慎重に変更する必要があります。

データの処理も同じです。データの処理は処理のやり方によって処理にかかる時間が大きく違うことがあります。その場合でも、処理の入力になるデータと、処理結果のデータをきちんと決めておけば、どのように、その結果を得るかは自由に変更できます。従って、性能の改善などを UI やバックエンドとは完全に別々に行う事ができます。

種類の分け方

では、どのように分けるかが問題になります。幾つか方法がありますが、管理しやすい方法は、種類ごとにプログラムのソースコードのファイルを分けてしまうことです。 UI のファイル、データ処理のファイル、I/O アクセスのファイルに分けてしまうと完全に別々に管理が可能になるので、将来的な変更や拡張、性能改善がやりやすくなります。

新しいバージョンの Javascript はオブジェクト指向（Object oriented）を取り入れた「class」を使った記述をする事ができるので、こうしたプログラムの部品化を考えた場合便利です。class を使わない場合でも、処理を記述した関数をまとめるだけでも十分効果的です。HTML のファイルにそのまま記述する方法は、規模が小さい場合は便利ですが、少しスケールの大きなアプリやサービスの場合は、ファイルを分けた方が、全体を見通しやすいのと管理が楽になります。

1 番のポイントは？

このように、機能ごとにプログラムを分けて記述して管理すると、将来的なメインテナンスの効率は格段によくなります。機能ごとに別々に変更ができるので、間違いも最小限に抑えることが可能になります。

この手法を使ってアプリやサービスを実装する場合の 1 番のポイントは

インターフェースをしっかり決めること

です。インターフェースをしっかり決めておかないと、別々に管理ができません。 インターフェースとは、「入力」と「出力」を決める事です。

関数などの場合は、処理に必要になる、どのようなデータを受け取って、処理した結果として何を返すかと言う事です。これがきちんと決まっていれば、受け取るデータと、処理の結果さえ固定しておけば、処理の中身は自由に作り直す事ができます。

逆に言うと、入力や出力の取り決めが変わると、別々に作り直すことはできなくなってしまい、相手のモジュールも変更する必要があります。

従って、どこで線を引いて、何をやり取りするかという事をしっかりと決められるかがこの実装のポイントです。サービスやアプリを設計する場合は、将来の拡張もある程度考慮した上でこのインターフェースを決めます。そこが「設計者」の腕の見せ所になります。

まとめ

Web 開発に限定した事ではありませんが、プログラムの実装を考える時には、機能をまとめて分割すると、将来の拡張や修正が楽に行えるようになります。 お互いのモジュールが受け取る情報（入力）、モジュールが渡す情報（出力）をきちんと決めることができると、各モジュールごとに別々に変更や修正ができるようになります。

このように、明確な「線を引く」ことで、プログラムの管理のやりやすさは大きく変わります。プログラムは作るだけではなく、運用して管理する事が必要なので、こうした配慮ができると、運用や管理の手間を削減できるだけではなく、トラブルも減らすことが可能です。

特に、フロントエンドのコードは、利用者直接関係する UI から、データ処理、サーバーとの通信とやることが多い部分です。こうした、分割を上手く行うことで、わかりやすく、管理しやすいプログラムにする事が可能になります！