「そもそもWebアプリとは何か?」「WebサービスやWebアプリとはどう違うのか?」といったところでつまずき、いまひとつ釈然としないまま、なんとなく理解しているという方もいらっしゃると思います。
そこで、まずWebアプリの開発の前に「Webアプリとは要するに何なのか」「他のシステムとはどう違うのか」について、Webアプリケーションの入門編的な解説をします。
その後、Webシステムのしくみと開発言語について解説していきます。
目次
「Webアプリケーション」とは
「Webアプリケーション」という語がわかりにくい理由は、この用語が多くの意味を含んでいるからです。システム開発関係者(SEを含む)は、「Webアプリケーション」という用語を、前後の文脈によって次のような意味で使い分けることがあります。
- 「Webシステム」の同意語
- 「Webサービス」の同意語
- 異なるサーバ間、またはサーバとクライアントの間でHTMLファイルを受け渡しするしくみの総称
- クライアント・サーバ型システムに対して、インターネットとブラウザを利用するシステムの総称
これらの使い分けは「なんとなく感覚的に」行われることが多く、業界共通の定義などはありません。このため「Webアプリケーションとは何なのか?」が非常にわかりにくくなっています。
まとめますと
- ウェブの機能や特徴を利用したアプリケーション
- PHPやRubyといったWebサーバ上で動作するス クリプト言語を利用して開発することが多い
- 動的にコンテンツを生成
- サーバ~クライアント間をHTTPで通信
非常におおざっぱには
「Webブラウザを介して利用するアプリケーション」である、と言うことができるでしょう。
具体的には
ブログ、SNS、掲示板、オンラインショップ
WIKI、オークション etc・・・
WebサイトとWebアプリケーションの違いは?
いろいろな意見がありますが、「Webサイト」は静的なコンテンツでインターネットを介してアクセスされるドキュメントの集合体で、「Webアプリケーション」はWeb技術を用いて提供される一連の機能群のこと。
Webアプリは要求のたびに文書を作成して動的に、対話的で、より豊かなユーザーエクスペリエンスを提供します。
Webアプリのメリット
Webアプリも一般的なクライアント・サーバ型システムと同様、サーバと端末が存在します。
Webアプリの特徴は、サーバと端末とを接続する経路としてインターネットを利用し、端末はブラウザ(もしくは専用アプリ)を介してサーバと情報をやり取りするという点にあります。
インターネットを利用するため、端末はネットに接続できる環境なら世界のどこにあってもよく、端末の増設にも特に制限がありません。また、システムのメンテナンスやアップグレードはサーバサイドだけで行えばよく、メンテナンス性も非常に高いというメリットがあります。
Webシステムの仕組み
Webシステムの基本的な仕組みは、およそ次のように構成されています。(もっとも基礎的な構成)
・クライアントサイド(フロントエンド)……インターネットに接続した端末とWebブラウザ
・サーバーサイド(バックエンド)……ユーザーからのアクセスに対応するWebサーバ、Webサーバが受け取った情報に対応して具体的なデータ処理を行うWebアプリケーションと、それを格納するアプリケーションサーバ、データを格納したデータベースサーバなどから構成されるサーバ群 ユーザーはWebブラウザを操作してサーバにアクセスし、データの閲覧や入出力を行います。
サーバはユーザーから送られてきた指示に従ってデータベースサーバから情報を引き出し、必要に応じてデータを加工し、その結果をユーザー側に送信します。この際、ユーザーに送られる情報はWebブラウザで適切に表示されるよう、HTML形式に加工されます。
ユーザー側のWebブラウザが受け取った情報を表示し、ユーザーはそれを見て次の作業を行います。
Webシステムのサーバとクライアントは上記のようなやり取りを繰り返し、一般的なクライアント・サーバ型システムと同様に情報を処理していきます。
クライアントサイド(フロントエンド)
クライアントサイドとは何なのかを簡単に言うと、「ユーザーが手に触れて見ることのできる領域」のことです。
例えば、今まさにあなたが見ている「この画面(ブラウザ)」も、「スマホ」や「パソコン」も総じて「クライアントサイド」と言います。
下記の3つの要素があります。
- HTML
- CSS
- JavaScript
一つずつ説明いたします。
HTML (HyperText Markup Language)
Webページの文字やリンクなどを指定するマークアップ言語です。
文章構造を記述する仕組みです。
他のドキュメントへのハイパーリンクを設 定できるハイパーテキストで画像・リス ト・表などの高度な表現力を持つ
マークアップとは、コンテンツのはじめと終わりに「タグ」と呼ばれる印をつけて、意味付けをしていくことです。
例 見出しを記述
1 | <h1>見出し文字列です</h1> |
CSS (Cascading Style Sheets)
HTMLを修飾するための言語です。
文字の色やサイズ、レイアウト・デザインなどを指定できます。
HTMLで書かれた構造化された文章のスタイルを指定するための言語です。
実務ではCSSもしくは、スタイルシートと呼ばれることが多いです。
JavaScript
Webサイトの振る舞いを指定できるものです。
プログラミング言語の一つ。
Webブラウザの中でイベントに応じて動作する。
世界の94.9%のWebサイトで使われているという調査結果もある、人気のプログラミング言語。
JavaScriptは名前にJavaとついていますが、プログラミング言語Javaとは全く異なるプログラミング言語ですので、注意しましょう。
HTMLはWebページの構造を、CSSでWebページのデザインを、そしてJavaScriptでWebページの動きを作ることによって、1つの素晴らしいWebページが出来上がるのです。
サーバーサイド(バックエンド)
サーバーサイドとは簡単に言うと、「ユーザーが普段見ることや触れることができない領域」のことです。
もうちょっと掘り下げると、「Webプリケーションの本体が置いてある場所」を指します。
「サーバー(server)」という言葉には元来「提供する」といった意味があります。
つまり、クライアントサイドから求められた処理に対して、情報やデータ等を「提供する」といった意味合いで解釈することができますね。
一般的なサーバーには、求められた処理にあったデータを返す「Webサーバー」や、データ自体の保存などに使用する「データベースサーバー」などがあります。
- Webサーバー…..WebサーバーはWebページを閲覧させるだけでなく、アプリケーションを動作させる上でクライアントへの窓クチの役割を果たします。
クライアントからのリクエストを受け取ったり、動的処理結果を転送したりします。
(Apache,MS IIS,Nginx など) - アプリケーション・サーバー…..クライアントから受け取ったデータをWebサーバーが送り、アプリケーション・サーバーが受取り処理します。
データベースとは?
「データベース」という単語も、聞いたことはあるけどイマイチわからないという方も多いと思います。
データベースとは、「大規模なデータをためておくことができ、検索がしやすい仕組み」のことを言います。
WebアプリケーションやWebサービスでは、必ずといっていいほどデータベースを使用していますので抑えておきたい技術の一つですね。
代表的なDBMSとして以下のようなシステムがあります。
Oracle
MySQL
PostgreSQL
Microsoft SQL Server など
Webアプリを開発するプログラミング言語
まずはWebアプリを開発できるプログラミング言語(の名前)をざっと挙げてみます。
- Ruby
- PHP
- Python
- Java
- JavaScript
- Perl
次にメジャーなプログラミング言語からいくつか紹介します。
Ruby(スクリプト言語)
数あるプログラム言語の中でも、日本人によって考案された数少ないプログラム言語であり、時期的にもJavaやPHPとあまり変わりません。
Rubyを学ぶと、Webページの部分とデータベースの間のやり取りをしてくれるようになるので、ユーザー情報の保存だったり、掲示板などのデータを操作してページ上で表示させるようなやりとりができるようになります。
もともとはWeb開発とは縁の薄いプログラム言語だったのですが、10年ほど前に登場した「Ruby on Rails」のお陰で、急速に広まりました。Railsは楽天やクックパッドなどの有名サイトでも利用されています。
「Ruby on Rails」はWebアプリケーション・フレームワークと呼ばれるもので、Web開発に特化した仕組みのセットだと考えてもらえれば良い。
単純にWebアプリを作ることだけを考えたなら、PHPを選ぶ方が一般的ですが、Rubyの方がPHPよりも汎用的な用途で使うことができます。
PHP(スクリプト言語)
サーバー側のプログラムのための言語。HTMLに埋め込むことができる仕組みを持ちます。HTMLを勉強済みの初心者なら理解しやすく、さらに関数が豊富なので望む機能を実現しやすい点が特長です。
日本では多くのWebサービスに利用されています。PHPはFacebookやYahooなどの大規模サイトでも利用されている、Webアプリの世界では最もメジャーな言語の1つです。ただ、PHPはその利用範囲がWebに限定されているため、汎用性が高いとは言えません。
自分の手でWebサービスを作ってみたいと考えている人は、PHPから学ぶと良いでしょう。PHPは多くのレンタルサーバーで利用できるので、サービスを実際に世の中に公開する時に困ることが少ないです。
CakePHPは、PHPの歴史あるフレームワークです。「ケーキを焼くみたいに簡単に」が名前の由来です。
Java(コンパイラ言語)
長くIT業界をけん引してきたオブジェクト指向言語です。
OSや機器を選ばずあらゆる環境でどこででも動作するという特徴があるので、Web業界だけでなく、組み込みシステムやスーパーコンピューター、モバイル用のアプリケーションまで、様々な分野で使用されています。
Spring FrameworkはJavaのフレームワークです。多くの機能が搭載されています。
Python(スクリプト言語)
文法がシンプルで少ないコード数でプログラムを書くことができ、コードが読みやすいのが特徴。データ分析・解析に役立つライブラリを有しており、機械学習や統計解析の分野でも活用されています。
近年さまざまなプログラミング言語ランキングで上位に位置することが多くなっていますDjangoはPythonのWebフレームワークです。
RubyやPerlも、Pythonと同じく汎用的なスクリプト言語です。この3つの言語は役割がかなりの部分で重なります。どれを選択するべきかは、自分が作ろうと考えているソフトに合ったライブラリが存在するか、そのライブラリの信頼性は高いかなどを基準に決めると良いでしょう。
まとめ
Webシステムの仕組みとWeb開発初心者におすすめのプログラミング言語をご紹介してきました。下記がポイントです。
- 「クライアント」「サーバ」の関係を押さえておく
- HTML、CSSは必須。できればJavaScriptも
- サーバプログラムはJavaかPHP、もしくはPythonがおすすめ
Web開発は今後も広がりを期待できる分野であり、さらに、プログラミング初心者のあなたでも取り組み易い条件が揃っています。
近い将来、ITサービスを作りたい、ITエンジニアとして活躍したいと考えるているようであれば、是非ともチャレンジしていただきたいと思います。