こんにちは。プロクラスの吉田です。
今回のブログは、小規模なWeb サービスを自分ひとりで企画・開発・運用できるようになるにはどうすればいいかの道筋が分からないという方の疑問を簡単に説明していきますので、参考になれば幸いです。
やったことないけど「これからwebのプログラミングの学習をやってみたい！」という方に是非読んでいただければと思います。
目次
■webプログラミング
webプログラミングを学習するには、
・プログラミングで扱う基本的な概念を理解すること
・プログラミングをするためのコンピューターの知識を得ること
・開発環境の概念を理解すること
・開発環境を準備すること
・インターネットやSNSなどで調べ方を知ること
・他社の意見から考え方を知り、学ぶこと
が必要です。
そらそうだ、とツッコミの声を感じますが、上記の内容が分かってしまえば、Web サービス以外のプログラミングであっても自分で取り組むことができるようになります。
■コンピューターとプログラミング
「プログラミング」というのは、コンピューターに対して命令を与えることです。
日進月歩の発達を遂げる現代のコンピューターは、とても速い計算能力や正確な情報取得と出力が可能です。
そんなコンピューターに「あなた自身が命令を与えることができる」これがプログラミングです。
プログラミングができるようになると例えば、以下のようなものに関連した仕事に携わることができます。
・スマートフォン、PC、ゲーム機などに入っているデジタルゲーム
・スマートフォンアプリやwebブラウザで動くアプリケーションサービス
・銀行や企業、官公庁の情報を扱うシステム
・ロボットや機械に組み込まれている組み込み系アプリケーション
・AIやデータマイニングなどのビッグデータ分析システムやデータ分析処理
などなど、挙げると枚挙に遑がないくらいです。
プログラミングができるということは、
エンターテイメントや、社会基盤となる仕組みを担うシステム、ロボットのコントロール、情報処理などの領域においても役に立つ技術であり、人類の知的で生産的な活動の価値を高める役割となります。
まずは、Webプログラミングを理解する前にwebサイトの構造を知る意味も含めて、
・HTML（10時間〜）
・CSS（10時間〜）
・JavaScript（10時間〜）
※）プロクラスでも上の３つの授業を学習していただけます。（リンクをクリック！）
の基礎を知っていただく必要があります。
（）の時間は理解の目安です。コーディングや応用はそれ以上必要ですが、内容理解とコーディングで体感してもらうのには個人差はありますが妥当な時間になると思います。
これは、プログラミングの基礎として、Web ページを作成する言語である HTML と CSS の理解は必須です。さらに、JavaScript を学ぶことで、動きのある Web ページを作成できるようになります。
HTML / CSS / JavaScript は単に Web ページを作成するだけに留まらず、本格的な Web プログラミングにも役立ちますし、必要となる知識です。
■OSと開発環境
次に、学ぶ必要があるのが、「Linux」というOSでの開発環境の構築です。
ここで必要なのは、LinuxというOSを操作するコマンドとプログラムのソース（プログラムを書いたファイル）のバージョンを管理するための仕組みである「Git / GitHub」の概念と使い方を理解することが必要です。
・Linux（リナックスと読みます）の理解と操作（4時間〜）
・Git / GitHub（ギット／ギットハブと読みます）（4時間〜）
これはプロのエンジニアが使うものと同じ開発環境です。ここでのコンピューターの仕組みなどの理解も重要です。そして、最近のエンジニアには必須とされている Git というバージョン管理ツールや、GitHub というソースコード共有サイトの使い方も知っておかなければなりません（開発者には必須のツールです！）。
■サーバーサイドプログラミング
続いて、webサービスを作る上で必要なのが、サーバーサイドプログラミングです。
これは、手元のPCで動作するプログラムと違って、インターネット上にあるサーバー（サーバーサイドといいます）で動くプログラムを作るための仕組みを知る必要があります。色々なものがあるのですが、主に理解しておくべきこととしては、
・Node.js／Express.js（ノードジェイエス／エクスプレスジェイエスと読みます）（※1）（10時間〜）
・Heroku（ヘロクと読みます）（※2）（10時間〜）
・MySQL（マイエスキューエルと読みます）（※5）（10時間〜）
・OAuth（オーオースと読みます）（※6）（4時間〜）
【以下は対策方法】
・XSS（クロスサイトスクリプティング）対策（※3）（4時間〜）
・CSRF（クロスサイトリクエストフォージェリ）対策（※4）（4時間〜）
Node.js を用いて効率よくメッセージキュー（一つ一つのサーバーへの要求を貯める仕組み）をベースとしてWebサービスの開発を行うことでインターネット上に公開することができます。
Heroku（要はレンタルサーバーです）にて公開準備を整え、MySQLを使ってデータを効率よく取り出したり、格納するデータベースを扱い、作ったWebサービスにログインが必要な場合は、OAuthで誰もが持っているSNSアカウントを使ってすぐにログインできる仕組みを組み込めます。
また、公開するにあたって、XSS や CSRF と呼ばれる攻撃から Web アプリを守る方法も理解が必要です。
あとは、テストの方法やCI（継続インテグレーション（※7））といわれる手法を実践を交えながら学んでいくことになります。
※1）Node.jsとは、一言でいうと『サーバーサイドのJavaScript』です。普通JavaScriptはクライアントのパソコン上にあるウェブブラウザ（IEとか GoogleChromなど）で実行しますが、Node.jsはサーバーサイド（インターネットサーバー側）でJavaScriptを実行する違いがあります。ノンブロッキング（処理を待たない）のが特徴のサーバープログラムでJavaScriptのエンジンである、Googleの「V8」を採用しており処理速度が高速です。
そして、ExpressはそのNode.jsでの王道的な開発をスピードアップするためのフレームワークです。
※2）Herokuとは、PaaS（Platform as a Service）と呼ばれるサービスで、Webサービスを公開するために必要なものを全て、予め用意してくれるというサービスです。
具体的には、本来Webサービスを公開するためには、サービスの開発以外にも上記のようなものを準備しなければいけません。それを肩代わりしてくれるのが、「PaaS」と呼ばれるサービスです。
ボタン１つで「サーバー」「OS「データベース」「プログラミング言語の実行に必要な環境」を稼働させることができます。
※3）クロスサイトスクリプティング（XSS）とは、サイトにユーザーがアクセスする時に表示内容が生成される「動的Webページ」の脆弱性やその脆弱性を利用した攻撃方法のことです。動的Webページの表示内容生成処理の際に、Webページに任意のスクリプトが紛れ込み、Webサイトを閲覧したユーザ環境で紛れ込んだスクリプトが実行されてしまい、データが抜き出されたりします。
※4）クロスサイトリクエストフォージェリ（CSRF）とは、Webアプリケーションに存在する脆弱性、もしくはその脆弱性を利用した攻撃方法のことです。例えば、掲示板や問い合わせフォームなどを処理するWebアプリケーションが、本来拒否すべき他サイトからのリクエストを受信し処理してしまいます。
※5）MySQLとは、世界でもっとも利用されている「データベース管理システム」です。大容量のデータに対しても高速で動作して、便利な機能がたくさんあるので実用性が高くなっています。オープンソースなので非商用利用であれば無償で使用できるため初心者でも導入しやすいデータベースです。
※6）OAuth（オーオース）とは、SNSやWebサービス間で「アクセス権限の認可」を行うためのプロトコルです。もっとわかりやすく言うと、FacebookやTwitterのログイン情報でログインさせることができるwebサービスでは必須の便利な手法です。現在では2012年に発行されたOAuth 2.0が標準化されています。
※7）継続的インテグレーションとは、ソフトウェア開発において重要な手法です。ビルド（構文チェックや実行エラーがないかのチェックして動作させる方法）やテストを頻繁に繰り返し行なうことにより問題を早期に発見し、開発の効率化・省力化や納期の短縮を図る手法です。特に最近は専用のツールで自動化あるいは半自動化し効率的に実施する方式があります。
■最後に
いかがでしたでしょうか。
webサービスを作るためには、色々と学ばなければならないことが多くて大変だなーと思われたと思いますが「全部するのか・・・」と途方にくれなくても大丈夫です。必要な学習の第一歩としては、例えば「HTMLというものはどういうことができるんだろう」という理解と「実際に触って見て、どんな風になるのかの概念を体得する」ことがとても重要です。
そのレベルで理解を学習し終えたら、具体的な小さなサービス（やコンテンツ）を考えて一つ一つ実際に制作することに取り組んで見ることが大切です。
プロクラスでも初めの理解と実際に触ることがお手頃価格で始められますので、ぜひお試しください！
はじめてのWebサイト制作入門（HTML編）【Lesson1】
はじめてのWebサイト制作入門（CSS編）【Lesson2】
それではー！