Webプログラミングの学習は大変か？
記事IT・テクノロジー
Webプログラミングの学習は大変か？
Web プログラミングをするには、Javascript の他に、HTML や CSS の知識が必要になります。Javascript のプログラミングの学習だけでも大変なのに、さらに HTML や CSS というのは大変に見えます。この記事では、その辺について考えてみました。
他の言語の場合は？
他のプログラミング言語の場合はどうでしょうか？ 全ての言語はカバーできませんが、よく利用されるプログラミング言語である、Java と Python の場合を考えてみると状況は似ています。
Java の場合は、ユーザーインターフェースを作るためのライブラリ（swing など）を学習する必要があります。Java のライブラリなので Java で書かれていますが、やっていることは、HTML と殆ど同じような事をやっています。例えば、Java の場合は、ボタンのクラスのオブジェクトを作成してレイアウトするようなプログラムが必要になります。
Python の場合は、Django のようにバックエンドのアプリケーションとして利用する場合には、同じように HTML・CSS を使ったテンプレートを利用する場合が多いので、基本的な違いはありません。デスクトップアプリを使う場合は、ユーザーインターフェースは Python の Tk ライブラリを使う場合が多いかと思いますが、これも Java の Swing のライブラリと似ていて、ボタンのオブジェクトを作成するような感じで使うので大きな差はありません。
データの処理は殆ど同じ
殆どのデータの処理は、パターンがあって基本的なアルゴリズムを理解していれば、あとは、それぞれのプログラミング言語で書くだけなので殆ど違いがありません。最近のプログラミング言語は標準で基本的な文字列処理や数学関数のライブラリを持っている場合が殆どなので、それらを上手く利用すれば、余り苦労する事なく、基本的な処理は可能です。
古いコンピュータの場合は、現在のようなグラフィックベースのユーザーインターフェース（GUI）を持っていなかったため、コマンドラインと呼ばれるインターフェースを利用して、主にデータ処理のプログラムを作る場合が殆どだったために、プログラミングというとこのデータ処理が中心でした。
ところが、現在のようなグラフィックベースのユーザーインターフェースが主流になったために、このユーザーインターフェースを行う部分が新たに必要になったというのが現在の基本的なプログラミングのスタイルです。Web プログラミングとデスクトップ系のアプリの違いは、この UI を Web ブラウザで動かすか、プログラムのライブラリで作るかの違いです。
バックエンドの処理のようにデータ処理が中心のプログラムの場合は、この UI のプログラミングは必要ありません。（システム全体としてはフロントエンドが UI を担当する事になります）
UI のプログラミングの特徴
データの処理の基本は、プログラムに「データを入れて」、「処理したデータを取り出す」というパターンになっています。 つまりプログラムの基本はデータの流れで、条件によって違う処理をする場合はありますが、プログラムの流れは、プログラムの上から下というパターンになります。
しかし、UI のプログラミングはデータの処理とは違います。 UI のプログラミングは「イベント」をベースに動作します。
「ボタンをクリックする」「文字を入力する」「データを選択する」「ファイルを選択する」のようにユーザーが行う動作によって別の処理が起動されるという方式になっています。これらのユーザーの処理が「イベント」というわけです。
イベントによって、データ処理のプログラムを呼び出したり、UI の状態を変えたり、画面を書き換えたりなどの処理を行うので「イベント・ドリブン(event driven)」のプログラムと呼ばれる場合もあります。
プログラムのスタイルも、イベントハンドラと呼ばれる関数をイベントが発生した場合に呼び出すという形になります。 あとは、利用する UI の部品（ボタンや文字フィールド）ごとにイベントが決められていて、それに合わせた記述でイベントハンドラを指定するようになっています。
HTML と Javascript では以下のような感じのプログラムになります。 ボタンのクリックのイベントが起きたら「buttonClicked()」という関数を呼び出すように指定して、あとは Javascript でこの関数の処理を記述するという感じになっています。
<button onclick="buttonClicked()">Click</button>
<script>
function buttonClicked() {
console.log("Button is clicked!");
}
</script>
Java の Swing の場合は、ボタンのオブジェクトを作ったら、その設定を行う必要があります。 その上で、イベントを検出する設定（ActionListener）を指定してイベントの発生をモニターするようにします。
JButton btn = new JButton("Click")；
btn.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent e) {
buttonClicked();
}
});
新しいバージョンの Java では、簡素化されて以下のように記述ができるようになりました。（Lambda Expression）
JButton btn = new JButton("Click")；
btn.addActionListener(e -> {
buttonClicked();
}
});
のようになるので Java の方がプログラム上は少しだけ面倒です。
UI の部品のレイアウトは？
実際の部品の部分の記述は余り大きな違いはないのはお分かりかと思いますが、部品のレイアウトはどうでしょうか？
最初に基本的なレイアウトの方法を考えると：
Web プログラミングの場合は、Web ブラウザ上に並べるので、CSS でレイアウトが可能です。
一方で、一般的なプログラミング言語の場合は、プログラムで部品の位置を指定する必要があります。 これが意外に面倒で、慣れてしまえば CSS の方が簡単なような気がします。
プログラムで部品の位置の微調整をするのは面倒なので、各言語共に IDE(統合開発環境)で、部品を UI 上でマウスなどで位置を決めて自動的にプログラムのコードを生成するというようなサポートツールが利用される場合が多くなっています。
Web プログラミングでも、実際の UI の作成は、HTML・CSS を直接書くというよりは、ある程度の規模のアプリの場合は、React や Vue などのフレームワークを利用する場合の方が多くなります。
こうした事を考えると、両者の違いは余りない事になります。
まとめ
Web プログラミングでは、基本的に、HTML/CSS/Javascirpt の知識が必要になりますが、一般的なプログラミング言語の場合は、GUI 作成のためのライブラリを利用して GUI を作るので、同じプログラミング言語で賄うことができます。一見、一般的なプログラミング言語の方が便利に見えますが、中身を見てみると実は大差はありません！
むしろ、プログラムの配布や更新を考えると、Web アプリにして Web サーバー側で管理できるようにすると、配布や更新、不具合の修正をより効率的に簡単に行えるので、多くのアプリが Web アプリとして配信されています。 個人でプログラムを開発して広く利用してもらう場合、学習の手間が余り変わらないとすると Web プログラミングの方が有利な点が多いのが現状です。
