ここ数年でWebプログラミングに注目が集まっています。

Webプログラミングとは、ホームページ上で動作するプログラムを設計・開発することです。

最近のホームページ開発にはWebプログラミングは必須の技術になっており、Web技術の中でもその重要性が高まっています。

今後もWeb技術が発展していくことから、Webプログラミングができるエンジニアにも注目が集まっています。

そこでここでは、WebプログラミングやWebサービスの技術、エンジニアになるための学習方法等についてご紹介していきます。

Webプログラミングとは

Webプログラミングではホームページ上で動作するプログラムを設計・開発します。

例えば、画像をクリックしたら画像を大きく表示したり、郵便番号を入れたら住所の候補が自動的に表示したり、動きがあるページを作るのにWebプログラミングが使われています。

また、ホームページは見た目で分かる処理だけでなく、裏方で動いているデーター処理もWebプログラミングで作られています。

例えば、会員制サイトでの会員情報の表示・変更処理、通販サイトでの商品在庫表示、注文処理、クレジットカードの決済処理などはデーターベースなどを使って画面では見えないところで処理が行われます。

このように、現在のホームページではWebプログラミングがあらゆるところで使われており必須の技術になっています。

Web開発とは

Web開発は、ホームページ全体がうまく動作するよう設計・開発することです。

Web開発には、Webプログラミング以外に次の設計・開発も含まれます。

・画面レイアウトのデザイン
・ユーザインタフェースの設計(画面の操作性を設計)
・コンテンツ作成(企画、記事、データ作成)
・データーベース設計
・他サービスとの連携処理(決済処理など)

Web開発では、デザインやコンテンツ作成などの担当者と、プログラマーが一致団結して、1つのホームページを作っていくのです。

Webサービスのプログラミングとサービスの種類

Webサービスとは、ホームページ上で情報を表示するだけでなく、データー入力やデーター処理などができるサービス(サイト)のことです。

例えば、Googleのメールサービス「Gmail」がWebサービスの1つです。Gmailではホームページにログインすれば、メールの読み書きが行なえます。スマホのGmailのアプリとほぼ同等の機能がホームページ上に実現されているのです。

このようにWebサービスはパソコンやスマホにアプリをインストールせずに、ホームページ上だけでデーター処理ができる点が特徴と言えます。

最近ではWebサービスのことを「Webアプリ」とも呼んでいます。

そこで、Webサービスの仕組みなどについてご紹介していきます。

Webの仕組み

Webの仕組みは、一般的には次のように構成され動作します。

・フロントサイド(ブラウザ)
・サーバーサイド(Webサーバー)
-データーベース
-セキュリティー

ホームページ上にある文字や画像、プログラムなどはすべてWebサーバーに保存されています。

インターネットのサイトを見るソフト「ブラウザ」を開くと、ブラウザはWebサーバーからホームページの情報をダウンロードして表示します。

(ブラウザとは、Google Chrome、Apple Safari、Microsoft Edge・インターネットエクスプローラーなどのソフトのこと。)

このとき、

ブラウザ上で表示・動作するファイルやプログラムを「フロントサイド」

Webサーバー上で動作するプログラムを「サーバーサイド」

と呼びます。

ホームページを作るには、フロントサイドとサーバーサイドが連携して動作するよう設計します。

フロントサイド

フロントサイドのプログラムは、ブラウザの画面制御や操作による動きのある処理などを行います。

ブラウザに表示される画像や文字、アニメーション、プログラムなどは全てブラウザで制御・処理されます。

例えばウィンドウを閉じるのを禁止したり、メッセージボックスを表示したりするなどの動きは、フロントサイドのプログラムによるものです。

フロントサイドは、ホームページの操作性などを考慮する必要があり、企画・設計時から重要なポイントになります。

サーバーサイド

サーバーサイドのプログラムは、ホームページに表示するデーターを適切に加工・整形する処理を行います。

サーバーサイドのプログラムは、ブラウザからの指示に基づき、表示するデーターをブラウザで表示できる形式(HTML)にしてブラウザに渡します。

例えば、会員制サイトの場合、ログインした会員に合った名前・住所などの情報をデーターベースから取得し、HTMLに加工・整形してブラウザに渡します。

複数のユーザーが同時にアクセスした場合でも、適切な情報をそれぞれのブラウザに渡すように処理を作る必要があります。

そのため、サーバーサイドのプログラムはブラウザごとに処理を分け、各ブラウザに応じたユーザーの情報をデーターベースから取得して、それぞれのブラウザに渡しているのです。

また一度に多くの人が会員情報の変更をしてもデーターに矛盾がないよう整合性を保つよう設計します。

このようにサーバーサイドでは、ユーザー認証やデーターベースへのアクセスなどフロントサイドでは難しい処理を行っています。

データーベース

会員情報などのデーターは、Webサーバー側にあるデーターベースに保存されています。

サーバーサイドのプログラムは、ログインした会員に一致する名前や住所などの情報をデーターベースから取得し、表示データーを作成します。

このような処理により、ログインした会員に合ったユーザー情報をホームページに表示できます。

データーベースへのアクセスは、ブラウザとのセッション(接続)が切れてもデーターの一貫性が保てるよう設計します。

Webアプリケーションのためのフレームワークを学習する

会員制ホームページなどのサイトを作るのに、プログラムをいちから作るとかなりのコストがかかってしまいます。

そこで、ログイン認証など共通の処理が組み込まれている「フレームワーク」(プログラムの骨組み・枠組み)が使われることがあります。

フレームワークを使うと、基本的な処理は作れているため、個別で追加・変更したい処理だけを作ればホームページ全体(Webアプリケーション)が出来てしまうのです。

特にWeb開発では、共通処理が多いためフレームワークを利用することが多いです。

ただし、フレームワークの開発では、フレームワークに従った開発ルールでプログラミングをするため、そのフレームワークの使い方・作り方を学ぶ必要があります。

大きなWebアプリケーションでは、フレームワークが使われていることが多く、プログラミング言語だけでなくフレームワークの勉強もしておくと良いです。

セキュリティー

データーベースには、個人情報などの重要なデーターがあるため、Webサーバーのセキュリティー対策は最重要の課題です。

個人情報の漏えいや、他人になりすましてクレジットカードを使用するなど被害が起きると、Webサービス自体の存続が危うくなるためです。

Webサービスでは、不正な第三者によるアクセスから情報漏えい・なりすましなどを防ぐセキュリティー対策が行われます。

セキュリティーは1つでも脆弱性(ぜいじゃくせい:弱点、弱いところ)があれば、そこから大規模なセキュリティー事故につながる可能性があります。

そのため、Webサービス全体のセキュリティーの脆弱性をなくすよう細心の注意を払って設計されます。

大規模なサイトでは、セキュリティー対策専門の部門がありリスクを分析することが多いです。

最近ではセキュリティー対策を専門にする人材も重宝されるようになっています。

Webサービスの開発に必要な学習時間や学習方法

Webサービスの開発をするのに必要な学習内容は次の通りです。

・プログラミング言語の学習
・フレームワークの学習
・Webサービスに関する基礎知識の学習(Webサーバーの知識など)
・開発環境の学習(Githubなど)

プログラミング言語の学習だけでなく、フレームワークやWebサービス全般の知識、開発環境についても勉強が必要です。

これら全てをいっぺんには勉強できないので、1つずつ目標を決めて勉強していくことが大切です。

Webサービスの開発に必要な学習時間

Webサービスの開発が業務レベルまで出来るようになる学習時間は、約1000時間必要とされています。

1日2時間勉強するなら、約1年半かかります。

ただ、約1000時間というのは、何かを学習する一般的な目安で、効率的な学習をすれば200時間程度まで短縮可能です。

特に○○を作りたいといった目標があれば、それを目指して勉強していくと効率的に勉強ができます。

プログラミングは、楽しみながら勉強するのがコツです。

ここでは実際に個人でWebサービスをいちから開発した方の事例をご紹介します。

Webサービス「クラウド型の勤怠管理サービス」を開発できるようになるために必要な時間と言語

クラウド型の勤務管理サービス「OFFICELOCK」は、Webで入社時間・退社時間が記録できるWebサービスです。

ネット経由で出退勤を記録できるので、外出先で勤務した時間も記録できるのが便利ですね。

「OFFICECLOCK」の開発期間は、約4ヶ月間です。

開発言語はサーバーサイドがPHP、フロントサイドはJavaScript(JQuery、AngularJS)です。

開発期間の4ヶ月は仕事の合間に作っていて、ずっと作っていたわけでないようですが完成度はかなり高いWebサービスです。

開発者の方は、元々プログラミング知識があったようなので、初心者の方ならもう少し開発期間がかかるかもしれません。

参考:https://qiita.com/Yuta_Fujiwara/items/a195adbd70f0d08cc3d4

Webサービス「tag-chat チャットメインのSNS」を開発できるようになるために必要な時間と言語

tag-chatは、チャットメインのSNSで、自動でチャット相手を見つけてフリーチャットなどができるWebサービスです。

開発期間は、約9ヶ月。

開発言語は、PHP、JavaScriptです。

開発者の方は、もともとは技術が詳しいわけでなく、PHPを新たに勉強しながら開発したそうです。

Facebook CEOのザッカーバーグを目指して、SNSを作りはじめたとのこと。

ネット上の色々な人といつでもチャットできるSNSを作りたい!と思って、勉強&開発を初めたようですので、かなり効率的に勉強していますね。

勉強したことをすぐに実践できると、かなり早く上達することが分かります。

何かを作りたいというモチベーションも、知識や技術が早く身につきやすいです。

参考:https://programming-study.com/trouble/service/ のNo10の項目

Webプログラミングの独学の学び方

Webプログラミングを独学で学ぶには、まず1つの学習サイトをやりきることが大事です。

途中で分からないことがあっても、止まらず先に進んでプログラムを動かしてみると良いです。

前に分からないことも、色々試していたら分かってくることもあります。

プログラミングの勉強は、分からないと途中で投げ出したくなるかもしれませんが、あきらめないでやってみてくださいね。

Webプログラミングを学ぶためにおすすめの学習サイト「ドットインストール」

「ドットインストール」は、Webプログラミングに必要な基礎的なプログラム言語の学習から、Webサイトの作成までカバーしている学習サイトです。

サイトにあるテキストと動画にて勉強を進めていくタイプの学習サイトです。

レッスンは、300以上あり、自分の興味があるものから学習できるのが良いです。

無料講座もあるので、お試ししてからはじめられます。

Webプログラミングを学ぶためにおすすめの学習サイト「Progate」

Progateは、Webサービスを作成するなどの目標別に学習講座が選べる学習サイトです。

プログラミングがはじめての方なら「初めてのプログラミング」コース、本格的なWebサービスを作る「Ruby On Rails」コースなどがあります。

学習は、要点がまとまったスライドを使い、読みながら進められます。

スキマ時間にスマホなどで勉強したい方に向いています。

基礎編は無料、応用編は有料です。

Webプログラミングを学ぶためのスクール

Webプログラミングをスクールで学ぶには、先生とたくさん話ができるスクールを選びたいです。

先生に遠慮して質問できないと、聞いているばかりになり、せっかくスクールに行っている意味がありません。

疑問点だけでなくプログラミングに関することを何でも聞けるスクールだと、学習効率も上がりやすいです。

Webプログラミングを学ぶためにおすすめのスクールは「CodeCamp」

CodeChampは、オンラインのマンツーマン形式のプログラミングスクールです。

2012年以来2万人以上の受講生がいて満足度が高いです。

オンラインは住んでいる場所に関係なく勉強ができるのが良い点と言えます。

また、マンツーマンで自分のペースで教えてくれるのも、より深い理解に繋がります。

プログラミングの書籍などで勉強していても、なかなか続かない、といった方に向いています。

Web開発に必要な言語

Web開発に必要な主なプログラミング言語は、次のものがあります。

・HTML(エイチ・ティー・エム・エル)、CSS(シー・エス・エス)
・PHP(ピーエイチピー)
・JavaScript(ジャヴァ・スクリプト)
・Ruby(ルビー)

Web開発では上記のどれも利用されることが多いです。

特に、HTML・CSS、JavaScriptは必ず抑えておきたいです。

PHPとRubyは、開発プロジェクトによって使うことがあります。概要レベルは抑えておきましょう。

HTML,CSSはWeb開発の基本

HTML、CSSは、ホームページを表示するためのマークアップ言語で、Web開発では必須の知識です。

HTMLは、ホームページの構造やコンテンツ内容を記述し、CSSには、表示する条件(色や大きさなど)を指定します。

どちらも基礎的な部分なら、難しくなくすぐに勉強できます。

PHP

現在サーバーサイドで使われているプログラム言語で最も多いのが、PHPです。

PHPは、ここ10年間くらいでWebサイトの立ち上げが増えた時期に広まりました。

そのため長年続いているWebサーバーのプログラムは、PHPで作られていることが多いです。PHPができるエンジニアも多いです。

PHPは、構文はそれほど難しくないため、勉強はしやすいです。

Javascript

JavaScriptは、フロントサイド・サーバーサイドどちらでも使える言語として人気です。

フロントサイドとしては、これまでJQueryなどのライブラリで画面操作などの処理を担当することが多かったです。

最近は、JavaScriptを使ったフレームワーク(Vue.js、React.jsなど)での開発が行われるようになっています。

またサーバーサイドでは、フレームワーク「Node.js」などを使ったプログラミングが盛んになっています。

JavaScriptは、構文が難しくないため、プログラミング初心者でも取り組みやすい言語です。

これからJavaScriptを始めるなら、言語とセットでフレームワークの勉強もすると役立つでしょう。

Ruby

Rubyは、Web開発フレームワーク「Ruby On Rails(ルビー・オン・レイルズ)」で注目された言語です。

大規模サイトは、PHPかRubyで作られることが多かったですが、最近はやや人気が下がっている傾向があります。

Rubyはオブジェクト指向型プログラム言語で、複雑な処理が簡単に記述できるため根強い人気があります。日本人が開発した言語としても有名です。

Ruby学習の難易度は、やや難しいですが、プログラミングを本格的に初めたいなら勉強するのに適しています。

Webプログラミングは、これから伸びていく市場ですので、興味がある方は始めてみてはいかがでしょうか。