WEB開発の基本と概要
WEBシステムの基本概念
Webシステムとは・・・
Webシステムははインターネットを通じて利用するためのアプリケーションを指します。一番身近な例でいうと、ホームページなどのウェブサイトが挙げられます。それ以外にもクラウドサービス、オンラインストア、Eメール、SNSなどが挙げられます。
Webシステムの他のアプリと比較した利点
Webシステム（Webアプリ）はスマホアプリやデスクトップアプリに比べて、次のような利点があります。
デバイスを選ばず利用可能
Webシステムはブラウザを通じてアクセスや操作ができます。そのため、インターネットとブラウザが利用できれば、どんなデバイス（スマートフォン、タブレット、PC）でも利用可能です。これに対して、スマホアプリやデスクトップアプリの場合は特定のプラットフォーム（iOS、Android、Windows、MacOS等）に特化した開発であるため、デバイス間の互換性が制限されます。
インストール不要
ユーザーはアプリをダウンロードしてインストールする必要がありません。Webブラウザを使って気軽に直接アクセスできます。
継続的な更新
Webシステムはサーバー側で更新されるため、ユーザーは最新版のアプリケーションを自動的に使用できます。スマホアプリやデスクトップアプリの場合、ユーザーがアプリを定期的に更新する必要があります。
開発とメンテナンスの容易さ
Webシステムは複数のプラットフォームに個別に対応する必要がないため、スマホアプリやデスクトップアプリに比べると、相対的に開発コストと時間を抑えることが可能です。
Webシステムの他のアプリと比較した欠点
パフォーマンス
Webアプリはブラウザ上で動くため、PCやスマホ等のハードのリソースもブラウザを通じてアクセスしなければなりません。その結果、スマホアプリやデスクトップアプリに比べて、使用できるリソースも制限され、一般的にパフォーマンスが劣ります。
ハードが保有する機能へのアクセス制限
「パフォーマンス」と同様ですが、Webアプリはスマホやデスクトップが持っている機能（カメラ、GPS、センサー、ハードウェア、メモリ等）へのアクセスが限られることがあります。
オフライン機能の制限
基本的にWebシステムの機能はインターネットを通じてユーザーが利用します。そのため、オフライン時には機能しません。例えば、インターネットにアクセスできない場合、Webシステムは使用できません。
ユーザーインターフェース
Webシステムのユーザーインターフェース（UI）は、HTMLとCSSにより構築されます。HTMLとCSSは、どのようなデバイス上でもブラウザを通じて機能しますが、逆にいうと、あるデバイスに最適化されていないということになります。例えば、HTMLとCSSはスマホアプリに比べて、デザイン面や操作性で制約があります。
Webシステムの仕組みと概要
Webシステムは大きく、クライアントサイドとサーバーサイドの2つの機能が連携し、動いています。それぞれの機能について見ていきましょう。
クライアントサイド（フロントエンド）
ユーザーが直接操作するためのユーザーインターフェイスとその周辺箇所。ChromeやEdgeやFireFoxtなどのブラウザ上で操作するプログラムです。言語としては、HTML、CSS、JavaScriptなどの技術が使われます。
サーバーサイド（バックエンド）
サーバー上で動作し、データの処理や保存を行う部分。PHP、Python、Rubyなどの言語や、データベース技術が関連します。
２つの機能の連携の仕組み
クライアントサイドのブラウザとサーバーサイドのWebサーバーはインターネットを通じてデータのやりとりを行います。このクライアントとサーバー間のデータのやりとりを行う方法とルールが定まっています。それが「HTTPプロトコル」と言います。開発者はHTTPプロトコルに従った開発を行うことで、新たにデータ通信のための方法を考えたり開発する必要なく、また、開発者で共通のやり方で通信することが可能となります。
HTTPプロトコルがどのように動作するのか簡単に解説して見ましょう。
- ウェブサイトへアクセス:
- あなた（ユーザー）がウェブブラウザ（例: Google Chrome, Firefox）を開き、
「https://www.google.com」というサイトにアクセスしたとします。
- あなた（ユーザー）がウェブブラウザ（例: Google Chrome, Firefox）を開き、
- ブラウザによるHTTPリクエスト:
- ブラウザはサイト「https://www.google.com」を公開しているサーバーに、「ページを送って」という意味合いの「HTTPリクエスト」を送信します。
- サーバーの処理:
- 「https://www.google.com」が公開されているサーバーは、あなたからのリクエストを受け取り、要求されたページのデータ（HTMLファイル、画像、スタイルシートなど）を探します。
- ブラウザへのHTTPレスポンス:
- サーバーが必要なデータを見つけると、それをHTTPレスポンスとしてあなたのブラウザに送り返します。このレスポンスには、ウェブページを構成するためのHTML等のデータが含まれています。
- ウェブページの表示:
- ブラウザは受け取ったデータを解析し、画面上にウェブページとして表示します。この作業をブラウザによる「レンダリング」と言います。
Web開発で使用されるプログラミング言語
Webシステム開発において、プログラミング言語は主にクライアントサイド（フロントエンド）、サーバーサイド（バックエンド）、サーバーサイドのデータベースの3つの箇所で使用されます。
クライアントサイド（フロントエンド）
クライアントサイドでは、ブラウザ上で動くユーザーインターフェース（UI）を開発するために、主に3つの技術が使用されます。
- HTML (HyperText Markup Language): ウェブページで表現される、テキストボックスやボタンやセレクトボックスなど、それぞれのパーツの構成を作るための言語です。
- CSS (Cascading Style Sheets): HTMLのそれぞれのパーツに対して、レイアウト、色、形、線、フォントなどののデザイン面での装飾をつけるために使用されます。
- JavaScript: HTMLのそれぞれのパーツに対して、動作や動きやなど主に操作面での機能を加えるのに使われます。例えば、問い合わせページにおいて、HTMLで配置した送信ボタンに対して、実際にデータを送信するための機能をJavaScriptで定義します。
サーバーサイド（バックエンド）
サーバーサイドでは、データ処理、ビジネスロジック、データベースとの連携などを担う言語が使われます。
- PHP: ウェブ開発に広く使用されるサーバーサイドのスクリプト言語です。WordPressなどのCMSにも使われています。
- Python: Django、Flask、FastAPIなどのフレームワークと共に使用されます。また、AI開発やデータ解析分野で非常に人気の言語です。
- Ruby: 日本人プログラマーが開発した言語であり、そのような理由から国内のサーバーサイド開発で、しばしば利用されます。Ruby on Railsというフレームワークを用いた迅速な開発で知られています。
- Java: 1991年にサン・マイクロシステムズ（現在はOracleに吸収合併）で開発された比較的古くからある言語です。そのため、企業内の大規模アプリケーションによく使用されています。
サーバーサイドのデータベース
サーバーサイドの開発では、特にデータの格納、検索、更新、管理などを行うためのシステムとして、データベースが使われます。
- MySQL: オープンソースのリレーショナルデータベース管理システムで、PHPと組み合わせてよく使用されます。ワードプレスにおいてデフォルトのデータベースです。
- PostgreSQL: より高度な機能を持つオープンソースのリレーショナルデータベースです。
- MongoDB: ドキュメント指向のNoSQLデータベースで、JSON様式のドキュメントを使用してデータを格納します。
- Oracle：アメリカのOracle社が提供する企業向けの有償データベースです。ベンダーからの保守が必要な大規模システムで主に利用されます。
当社のWeb開発におけるポイント
当社で開発を受注した際は、プロトタイプを作成しながら、お客様と定期的にミーティングを行いながら開発を進めていきます。専門的にはアジャイル開発という開発手法に沿ったプロジェクト運営となり、開発プロジェクトを小さな単位（これを「スプリント」と言う）にわけ、この単位の終わりに都度、お客様とレビューを行い、プロトタイプを確認いただきながらプロジェクトを進めていきます。
このアジャイル開発の一番のメリットは、お客様と都度、仕様について確認することで当初想定していなかった必要な機能の取りこぼしを防ぐことと、お客様と開発側の認識のズレを極力減らすことになります。
アジャイル開発を行うことで、顧客満足度も向上していることが、実感しています。もし、御社でもシステム開発を依頼する際は、アジャイルによる開発プロジェクトや、プロトタイプによるレビューについて、業者に相談してみるのもいいと思います。
また、当社でも無料のIT相談もお受けし、開発のご依頼も全国にてお受けしております。お気軽に、ご相談ください。
