2019/07/08

【初心者必見】Webプログラミングで知っておくべきこと【現役エンジニアが解説】

PROGRAM

これからWebプログラミングを学ばれる方に。

この記事を読まれている方は、

Webプログラミングと非Webプログラミングの違いを知りたい
Webプログラミングで押さえておくべきことを知りたい
Webプログラミングで必要な言語や知識を知りたい

おそらくこのように考えている方が多いと思います。

この記事を書いている私は、
プログラミング未経験から転職を果たした現役のWeb系エンジニアです。
エンジニア歴は３年ですが、本業とは別にフリーランスの副業で月１０万円ほど、多いときで２０万円ほどの収入があります。

この記事では、現役のエンジニアが、初心者の方向けにWebプログラミングで知っておくべきことについて解説します。

Webプログラミングとは何か

まず「Web」ですが、ここではネットワークという意味で使われています。
したがって、Webプログラミングとは、ネットワーク上で使われるアプリケーションやサービスを開発することを表しています。

Webプログラミングと非Webプログラミングの違い

この意味から考えれば、少しでもネットワークが絡んでくるプログラミングであれば、Webプログラミングと言えなくもないのですが、この業界では、特にブラウザ上で利用するアプリケーションやサービスの開発を指すことが多いです。

例えば、ヤフオクはオークション形式でユーザー同士が売買できるサービスを提供していますが、ブラウザ上で使いますので、これはWebプログラミングと言えます。
一方で、例えば電卓アプリは、ネットワークは関係ないですし、ブラウザで動作するプログラムでもないため、非Webのアプリ系プログラミングと言えます。

本記事では、以降、WebプログラミングをWeb系プログラミング、非Webプログラミングをアプリ系プログラミングと呼びたいと思います。

Webプログラミングで押さえておくべきこと

Web系プログラミングとアプリ系プログラミングとでは内容が結構違ってきますので、
押さえておくべきWeb系プログラミングの特徴をまとめておきます。

コンテンツは中央集権型
データのやり取りはリクエストとレスポンスの対話式
フロントとサーバーサイドの2つのプログラミングが要求される

順番に解説します。

コンテンツは中央集権型

Web系プログラミングでは、ソースコードは全てWebサーバー側にあって、ブラウザがWebサーバーにリクエストを投げることで全てを取得しに行きます。

ソースコードの全てをサーバー側（中央）で一括管理しているため、運用する側にとってはメンテナンスが非常に容易です。

これがもしアプリ系プログラミングであれば、アプリを全てのユーザーに配布しなければならず、手間もかかりますし、メンテナンス性も悪くなります。

データのやり取りはリクエストとレスポンスの対話式

Web系のアプリケーションやサービスの仕組みとしては、まずユーザーがブラウザ等のクライアントからURL(Webサーバー側)に対してGETやPOSTリクエストをかけます。
次にWebサーバーはそのリクエストに対してブラウザ等のクライアントに結果(コンテンツ)をレスポンスとして返します。

このように、Web系のアプリケーションやサービスでは、対話式でデータのやり取りを行っています。

このデータのやり取りの方法は、主に２つに大別され、画面遷移の伴う通信と伴わない非同期の通信があります。
前者は通常のリンク遷移やフォームデータの送信で利用され、後者はJavaScriptのAjaxを利用し実装されます。

JavaScriptが発展してきた最近においては、後者のAjaxがよく使われています。

フロントとサーバーサイドの2つのプログラミングが要求される

Web系プログラミングは、フロントサイドとサーバーサイドのプログラミングに分けられます。

ブラウザ側の表示や処理のためのプログラミングがフロントサイドプログラミングと呼ばれ、サーバー側の処理のためのプログラミングはサーバーサイドプログラミングと呼ばれています。

フロントサイドのプログラミングは、HTMLとCSSとJavaScriptの3つが代表的です。昔はVScriptなんていうものも使われていましたが、今ではほとんど利用されることはありません。
HTMLとCSSは画面設計・デザインなどの装飾のためのマークアップ言語で、JavaScriptは処理を実装するプログラミング言語です。

一方、サーバーサイドプログラミングとは、PHPやJava Servlet、Rubyなどの言語でプログラミングすることです。
こちらはブラウザ上で動作するものではなく、サーバー側で動作するプログラムなので、データベースへのアクセスや他システムのWebAPIなどの連携が伴います。

ややこしいところは、フロントサイドプログラミングもサーバーサイドプログラミングも開発はサーバー側で行うというところです。
イメージとしては、サーバーサイドプログラミングの中にフロントサイドの部分も入れてしまうイメージです。

例えば、PHPで言えば以下のイメージです。

<?php
    echo '<span style="color:red;" onclick="alert();">Hello World!</span>';
?>

こちらの例では、echoはサーバーサイドプログラミングですが、出力しているものはspanというHTMLの要素で、さらにそのspan内の文字色を赤に装飾するためのスタイル(CSS)やクリック時のアラート表示のJavaScriptなど、フロントサイドプログラミングも一緒に組み込まれています。

最初は理解がしにくいかと思いますが、サーバーサイドのプログラミングの中でフロントサイドのプログラムも一緒に組み込む、ということを覚えておけば今は問題ないかと思います。

Webプログラミングで必要な言語

Web系のプログラミングで必要とされる言語は以下のとおりです。

HTML・・・画面設計のためのマークアップ言語
CSS・・・画面装飾のためのマークアップ言語
JavaScript・・・画面処理のためのプログラミング言語
PHP/Java Servlet/Rubyなど・・・サーバー側のプログラミング言語

HTML

小さい頃にHTMLを書いてブログをやっていたなんて方も決して少なくないんじゃないかと思います。その時に使用した言語がHTMLと呼ばれる言語です。これは画面を作るためのマークアップ言語であり、タグで囲むことで画面を作っていくことが可能です。

ブロック形式で画面を作っていくため、コツを覚えるまでは思い通りに画面が作れず、難しく感じるかもしれません。

HTMLとCSSだけでも一つの職業が存在するほどですので、初心者のうちは全部をきちんとやろうとは思わないことが大事です。

CSS

CSSはスタイルシートであり、画面装飾のためのマークアップ言語です。
HTMLだけでは味気ないデザインとなってしまいますが、CSSを使うことで色を変えたり、配置を変えたりなど、画面をちょっとリッチに装飾することができます。

ブラウザごとにスタイルが効く効かないなどの問題があるため、結構苦労させられるところでもあります。

プロと呼ばれる方は、CSSだけでモンスターボールやマリオなどの絵が描けたりします。興味があれば調べてみて下さい。

JavaScript

JavaScriptはフロントサイド(ブラウザ側)の処理を実装するためのプログラミング言語です。
ページ遷移なしに動的にブラウザ側で処理をしたり、HTMLの各要素に動きを付けたりしたい場合がありますよね？
その際に活躍するプログラミング言語が、このJavaScriptになります。

HTMLとCSSはマークアップ言語であったのに対し、JavaScriptはれっきとしたプログラミング言語なので、分野が異なります。
実際、HTML/CSSコーダーとJavaScriptコーダーは別々にいることも多く、開発現場でも分業されているケースが多いです。

JavaScriptにはライブラリやフレームワークが多く、有名なものにjQueryやReact、Angularなどがあります。
実務ではjQueryを使うことが多いですが、初心者のうちはまずは純粋なJavaScriptを勉強されることをオススメします。

PHP/Java Servlet/Rubyなど

これらはサーバーサイドの処理を実装するためのプログラミング言語です。

ブラウザ上の表面的な処理とは異なり、サーバー側のプログラミングのため、データベースの読み書きや他システムとの連携などを行ったりします。

Web系プログラミングと言うと、フロントサイドプログラミングよりは、これらサーバーサイドプログラミングを指すことが多いのが一般的です。

初心者にとってはPHPがこれらの言語の中では最も易しく学習コストが低いと言われます。実際にレンタルサーバーなどではPHPかPerlのいずれかが採用されることが多いです。

これらの言語も、フロントサイドのJavaScript同様、実務ではフレームワークが使われることが多いですが、初心者のうちは純粋に言語そのものを学んでいくことをオススメします。

まとめ：Webプログラミングは要求スキルが多い

いかがでしたか？
Web系プログラミングは要求されるスキルや言語が多いことがわかったかと思います。

しかし、アプリ系でも同じように、画面とプログラミングの設計を別々に行わなければいけないことがほとんどなので、手間はそこまで変わらないと思います。

HTMLやCSSを少しでもかじっていれば楽な部分も多いのですが、もし独学に限界を感じるならば、プログラミングスクールで学ぶという手段もあります。

実際にWeb系プログラミングに全くの初心者が入っていくのは覚えることも多くなかなか大変です。いくらPHPは参入コストが低いとされていても、学ぶべきことはPHPのみではないですからね。

プログラミングスクールについては別の記事でまとめていますので、検討されている方はぜひ読んでみて下さい。