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サーバーからホームページの情報をダウンロードして表示します。
エンジニア ブラウザとは、Google Chrome、Apple Safari、Microsoft Edge・インターネットエクスプローラーなどのソフトのことだよ。
このとき
- ブラウザ上で表示・動作するファイルやプログラム：フロントサイド
- Webサーバー上で動作するプログラム：サーバーサイド
と呼びます。
フロントサイド
フロントサイドのプログラムは、ブラウザの画面制御や操作による「動きのある処理」などを行います。
ブラウザに表示される画像や文字、アニメーション、プログラムなどは全てブラウザで制御・処理されます。
例えば
- ウィンドウを閉じるのを禁止する
- メッセージボックスを表示する
などの動きは、フロントサイドのプログラムによるものです。
サーバーサイド
サーバーサイドのプログラムは、ホームページに表示するデーターを「適切に加工・整形する処理」を行います。
例えば会員制サイトの場合、ログインした会員の名前・住所などの情報をデーターベースから取得します。
それをHTMLに加工・整形してブラウザに渡すのです。
複数のユーザーが同時にアクセスした場合でも、適切な情報をそれぞれのブラウザに渡すように処理を作る必要があります。
そのためサーバーサイドのプログラムは、ブラウザごとに処理を分け、各ブラウザに応じたユーザーの情報をデーターベースから取得し、それぞれのブラウザに渡しているのです。
また一度に多くの人が会員情報の変更をしても、データーに矛盾がなく整合性を保つよう設計します。
データーベース
会員情報などのデーターは、Webサーバー側にある「データーベース」に保存されています。
上記でも述べたようにサーバーサイドのプログラムは、ログインした会員に一致する名前や住所などの情報をデーターベースから取得して表示データーを作成します。
このような処理により、ログインした会員に合ったユーザー情報をホームページに表示できます。
Webアプリケーションのためのフレームワークを学習する
会員制ホームページなどのサイトを作るのに、プログラムをいちから作るとかなりのコストがかかってしまいます。
フレームワークでは、すでに基本的な処理は作られています。
そのため「個別で追加・変更したい処理だけ」を作れば、ホームページ全体（Webアプリケーション）が出来てしまうのです。
エンジニア 特にWeb開発では、共通処理が多いからよくフレームワークを利用します。
大きなWebアプリケーションでは、フレームワークが使われていることが多いです。
セキュリティー
データーベースには、個人情報などの重要なデーターがあります。
「個人情報の漏えい」や「クレジットカード利用のなりすまし被害」が起きると、Webサービス自体の存続が危うくなるためです。
Webサービスでは、不正な第三者によるアクセスから情報漏えい・なりすましなどを防ぐセキュリティー対策が行われます。
セキュリティーは1つでも脆弱性（ぜいじゃくせい：弱点、弱いところ）があれば、そこから大規模なセキュリティー事故につながる可能性があります。
大規模なサイトでは「セキュリティー対策専門の部門」があり、リスクを分析することが多いです。
最近ではセキュリティー対策を専門にする人材も重宝されるようになっています。
Webサービスの開発に必要な学習時間や学習方法
Webサービスの開発をするのに必要な学習内容は次の通りです。
- プログラミング言語の学習
- フレームワークの学習
- Webサービスに関する基礎知識の学習（Webサーバーの知識など）
- 開発環境の学習（Githubなど）
プログラミング言語の学習だけではありません。
これら全てをいっぺんには勉強できないので、1つずつ目標を決めて勉強していくことが大切です。
Webサービスの開発に必要な学習時間
Webサービスの開発が業務レベルまで出来るようになる学習時間は、約1000時間必要とされています。
ただ約1000時間というのは、何かを学習する一般的な目安で、効率的な学習をすれば200時間程度まで短縮可能です。
プログラミングは、楽しみながら勉強するのがコツです。
ここでは実際に個人でWebサービスをいちから開発した方の事例をご紹介します。
Webサービス「クラウド型の勤怠管理サービス」を開発できるようになるために必要な時間と言語
クラウド型の勤務管理サービス「OFFICELOCK」は、Webで入社時間・退社時間が記録できるWebサービスです。
ネット経由で出退勤を記録できるので、「外」出先で勤務した時間も記録できるのが便利ですね。
「OFFICECLOCK」の開発期間は、約4ヶ月間です。
開発期間は仕事の合間に作り、ずっと作っていたわけでないようですが、完成度はかなり高いWebサービスです。
ただし開発者の方は元々プログラミング知識があったようです。
そのため初心者の方ならもう少し開発期間がかかるかもしれません。
参考：独りでWebサービスを開発・リリースするまでのTips
Webサービス「tag-chat チャットメインのSNS」を開発できるようになるために必要な時間と言語
Webサービスのtag-chatは、チャットメインのSNSです。
自動でチャット相手を見つけて、フリーチャットなどができます。
開発期間は、約9ヶ月。
開発者の方は、もともとは技術が詳しいわけでなく、PHPを新たに勉強しながら開発したそうです。
「Facebook CEO」のザッカーバーグを目指して、SNSを作りはじめたとのこと。
ネット上の色々な人といつでもチャットできるSNSを作りたい！と思い、勉強＆開発を初めたようです。
かなり効率的に勉強していますね。
勉強したことをすぐに実践できると、かなり早く上達することが分かります。
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開発では上記のどれも利用されることが多いです。
「PHP」と「Ruby」は、開発プロジェクトによって使うことがあります。
概要レベルは抑えておきましょう。
HTML,CSSはWeb開発の基本
HTML、CSSは、ホームページを表示するためのマークアップ言語です。
「HTML」には、ホームページの構造やコンテンツ内容を記述します。
そして「CSS」では、表示する条件（色や大きさなど）を指定します。
どちらも基礎的な部分なら難しくなく、すぐに勉強できます。
PHP
現在サーバーサイドで使われているプログラム言語で最も多いのが「PHP」です。
PHPは、ここ10年間くらいでWebサイトの立ち上げが増えた時期に広まりました。
PHPができるエンジニアも多いです。
PHPの構文はそれほど難しくないため、勉強はしやすいです。
Javascript
「JavaScript」はフロントサイド・サーバーサイドどちらでも使える言語として人気です。
フロントサイドとしては、これまでJQueryなどのライブラリで、画面操作などの処理を担当することが多くありました。
またサーバーサイドでは、フレームワーク「Node.js」などを使ったプログラミングが盛んになっています。
JavaScriptは、構文がそれほど難しくありません。
エンジニア これからJavaScriptを始めるなら、言語とセットでフレームワークの勉強もすると役に立ちます。
Ruby
Rubyは、Web開発フレームワーク「Ruby On Rails（ルビー・オン・レイルズ）」で注目された言語です。
以前は大規模サイトは、PHPかRubyで作られることが多くありました。
ですが最近はやや人気が下がっている傾向があります。
Rubyはオブジェクト指向型プログラム言語です。
日本人が開発した言語としても有名です。
Ruby学習の難易度は、やや難しいです。
以上、Webプログラミング開発に必要な、言語や学習方法等をご紹介させていただきました。
Webプログラミングはこれから伸びていく市場ですので、興味がある方は始めてみてはいかがでしょうか。
プログラミングを始めようか迷っていませんか？
プログラミングを始めてみようと思っても学習で挫折しないか
職業として生計を立てていけるか不安ですよね。
プログラミングジャパンでは全くの初心者でも最速で安定した収入を得るプログラマーになる為に必要なステップをLINE＠で配信しています。
