こんにちは、Webディレクターの因幡です。
Webディレクター歴は10年になり、とくにシステム開発を伴うWebプロジェクトのディレクションを得意としています。エンジニアやデザイナーといったクリエイターの皆さんと連携し、プロジェクトを円滑に進行させる役割を担っています。
私のように、「エンジニアではないけれど、エンジニアと円滑にコミュニケーションをとりながら開発を進めたい」というWeb担当者も少なくないでしょう。
そこで今回は、非エンジニアが知っておくとスムーズに開発が進められるようになる「Webシステムの用語と仕組み」について説明します。
※当記事は2021年8月19日に開催したセミナーの登壇内容を文章化し、一部改変したものです。
目次
そもそも「システム」とは
まずは、システムとは何なのかについて解説します。「システム」で検索すると様々な解説が見つかりますが、ここでは私なりにわかりやすく説明したいと思います。システムとは「いろいろな機能を寄せ集めて成り立たせた仕組み」のことだとお考えください。
アナログの世界で使われている「システム」を例に挙げるとわかりやすいです。たとえば、「システムキッチン」といえば、給湯器やコンロ、食洗機などの機能が集まった仕組みのことを指します。「システム手帳」はカレンダーやアドレス帳、メモなどの機能が備わった手帳です。「教育システム」は教師や教室、教科書、カリキュラムなどの要素で構成されています。
このように、いろいろな機能が集まった仕組みに対して、システムという言葉を用います。
また、システムには必ず「ユーザー」が存在します。
システムキッチンであれば家で料理をする人、システム手帳であればビジネスパーソンや学生、教育システムであれば生徒がユーザーです。
この概念をコンピュータシステムに当てはめてみましょう。コンピュータシステムもアナログの世界と同様に、様々な機能で「ひとまとまりの仕組み」が実現されています。そして、コンピュータを使うユーザーが存在することもアナログのシステムと共通しています。
コンピュータといわれると、目に見えない特殊な世界だと感じて苦手意識を持つ人も多いのですが、実はそこまで特殊な世界というわけではありません。コンピュータシステムは魔法ではなく、必ず物理的に説明がつく仕組みが存在します。
たとえば、「なぜ水道からきれいな水が出るのか？」という疑問に対して、私たちは小学校の生活科の授業で習いました。「浄水場という水をきれいにする施設があり、そこできれいになった水が水道管で各家庭に送られてくるから」と答えることができます。
コンピュータシステムもそれと同じで、物理的に説明が可能です。ただ、コンピュータシステムについては、学校で学ぶ機会が少なく、社会に出てから直面することも多いので、苦手意識を持つ方もいらっしゃるのだと思います。
コンピュータシステムは決して特別な世界ではありません。その点を踏まえたうえで、WebディレクターやWeb担当者が知っておくべき用語と仕組みについて見ていきましょう。
Webシステム基本の用語と仕組み10選
今回、紹介するのはコンピュータシステムのなかでもWebシステムに特化した用語と仕組みです。特に、Web担当者やWebディレクターが実際の業務で頻繁に触れる領域に絞って解説します。
1.コンピュータ、デバイス、スペック
コンピュータとは、電子計算機のことです。そして、デバイスとはコンピュータ端末を意味します。
私たちが普段使うデバイスにはPCやスマホ、タブレットなどの種類がありますが、これらはすべて同じ仕組みで動作しています。
まず、マウスやキーボード、タッチパネルなどの「入力装置」から入力された操作に応じて、データがコンピュータ内部のメモリと呼ばれる「記憶装置」に一次保存されます。
そして、この入力内容に従って、コンピュータの頭脳ともいえるCPUが「演算装置」が処理をおこない、ディスプレイやスピーカーなどの「出力装置」を通じて処理結果をユーザーに提供するという流れです。たとえば、「ファイルをダブルクリック（入力）すると、その情報がCPUで処理され、画面にファイルを表示する（出力）」といった具合です。
これは、人間の「他の人の話を聞いて（入力）、どう返すか考えて（演算）、から返事をする（出力）」という行動に近いものがあります。そのため、システムの仕様説明は、主語をシステムにして擬人的に説明すると、エンジニアに伝わりやすくなります。
次に「スペック」です。スペックとは仕様のことです。ただし、普段の会話上では「性能」に近い意味で使われることが多いと感じます。
コンピューターのスペックについて考えるときは、ハードウェアのスペックとソフトウェアのスペックの2つの視点で確認する必要があります。
ハードウェアのスペックは、工業製品としての物理的な装置の能力です。逆にいえば制約でもあるといえます。たとえば、CPUの種類によって処理速度が変わったり、HDDの容量によって記憶できるデータの量が変わります。人間で例えるなら、頭の回転の速さや背の高さ、運動神経などにあたります。
一方でソフトウェアのスペックとは、コンピューターに何がインストールされているかを指します。例えば、Microsoft Word がインストールされていれば、コンピューターはdocxファイルを読み取ってファイルを表示することができるでしょう。人間でいえば、ビジネスマナーや語学力など、知識やスキルをどれだけ習得しているかに似ています。
ソフトウェアには、OS・ミドルウェア・アプリケーションと呼ばれる階層があり、たとえばOSは、コンピューターのもっとも基本的な動作を司っています。人間でいえば、見る・聞く・声を出すのような、赤ちゃんでもできるもっとも基本的な能力のようなイメージです。そこに必要なミドルウェア・アプリケーションを追加でインストールしていくことで、さまざまな能力を持ったコンピューターとなります。
2.サーバ
サーバもコンピュータの一種です。何らかの「サービス」を提供する役割を持ったコンピュータ端末、あるいはその機能をサーバと呼びます。たとえば、Webサービスを提供するサーバならWebサーバ、メールサービスを提供するサーバならメールサーバと呼ばれます。
なお、サービスを提供するサーバに対して、サービスを受ける側の端末をクライアント端末と呼びます。
WebサイトやWebサービスを公開するには、Webサーバが必要です。Webサーバを選ぶ考え方はPCとも似ています。「そのコンピュータ上で何をしたいのか」「そのためにはどんなスペックが必要なのか」を考えてWebサーバを選択します。
ただし、現在ではWebサーバ用の端末を購入するのではなく、データセンターで管理されている端末を遠隔でレンタル利用する形が主流となっています。
※サーバーに関する初心者向けの解説は下記の記事もおすすめです。 サーバーってそもそもなんなのさ？をやさしく解説します【超初心者ディレクター向け】
Yuka Inaba
3.ネットワーク（通信回線）
ネットワークとは、デバイス同士がコミュニケーションに使用する経路を指します。PCやスマホなどのコンピューターに接続する、LANと呼ばれる経路が一番身近ではないでしょうか。有線LANと無線LANがあり、後者はWi-Fiとも呼ばれますね。
ネットワークには大きく分けて「グローバルネットワーク」と「プライベート（ローカル）ネットワーク」の2種類があります。
グローバルネットワークは、いわゆるインターネットのことであり、世界中に広がるネットワークのことです。一方でプライベートネットワークとは、自宅内や会社内など閉じられたネットワークのことを指します。
4.IPアドレス
IPアドレスは、ネットワーク上における端末の“住所”に相当します。電話番号のように、固有の番号が割り当てられており、ネットワーク上のコンピューター端末を特定できます。
前段のグローバルネットワーク上におけるIPアドレスを「グローバルIPアドレス」、プライベートネットワークにおけるIPアドレスを「プライベートIPアドレス」と呼びます。
IPアドレスは住所ですから、必ず番号がかぶらないように割り当てられます。
特にグローバルIPアドレスは、世界に開かれたインターネット全体における住所ですから、インターネット全体で同じものは存在できません。
一方でプライベートIPアドレスは、閉じられたプライベートネットワークの中だけでかぶらないように割り当てられます。たとえば、企業Aのプライベートネットワークにおける端末aのプライベートIPアドレスと、企業Bプライベートネットワークにおける端末bのプライベートIPアドレスが、同一になるということはありえます。プライベートIPアドレスは部屋番号や内線番号のようなイメージです。
なお、IPアドレスは接続した際に割り振られる仕組みになっていることが多く、何もしなければ毎回変化します。このIPアドレスを固定すると、より厳格に端末同士の接続経路を管理できるメリットがあります。そのため、企業がインターネット利用時に使用するのグローバルIPアドレスや、Webサーバ端末に割り当てられるグローバルIPアドレスは、固定されていることが多いです。
5.ドメイン
前段のIPアドレスは人間にとってわかりにくい数字の羅列になっています。そこで、ネットワーク上の端末をよりわかりやすい名前に置き換えたものがドメインです。
たとえば、グローバルIPアドレス「13.35.49.43」というWebサーバ端末には「liginc.co.jp」というドメイン名がつけられています。ユーザーがliginc.co.jpにアクセスすると、DNSサーバで13.35.49.43に変換され、LIGのWebサイトが表示されるという仕組みです。
ドメイン名も同一のものは世界に1つしか存在できません。他とかぶらないように、使用したいドメイン名をレジストラから取得する必要があります。ドメインの取得と維持に関しては有償です。
取得したドメイン名をどう使用するかについては、DNSサーバに設定する必要があります。たとえば、ドメインをWebサービスに使用するならAレコード、メールサービスに使用するならMXレコードをDNSに設定するといった手続きが必要です。
6.ソフトウェア、アプリケーション
ソフトウェアとは、コンピュータへの命令をコンピュータが理解できる言語で記述したものです。コンピュータが理解できる言語のことをプログラミング言語といいます。
また、ソフトウェアのうち、OS上で動くものをアプリケーションと呼びます。Web制作では多くの場合、アプリケーションを制作することになります。
たとえば、スマホであれば、iOSやAndroidといったOS上に、SafariやChrome、LINE、カメラなどの様々なアプリケーション（通称アプリ）が入っています。Webサーバの場合は、OSの上にアプリケーションが動作するための環境を整えるミドルウェアと呼ばれるソフトウェアが入っています。
7.インターフェース
インターフェースとは「接点」のことです。Web制作においてよく登場するインターフェースとしては、ユーザー・インターフェース（通称UI）とアプリケーション・プログラミング・インターフェース（通称API）が挙げられます。
前者は、ユーザーとアプリケーションの接点を指します。たとえば、スマホの画面にはタッチ操作が可能なアイコンやボタンが表示されていますが、これらがユーザー・インターフェースにあたります。
一方のアプリケーション・プログラミング・インターフェースは、アプリケーションとアプリケーションの接点です。たとえば、AmazonではないECサイトで買い物する際、Amazon Payが使えることがあります。この場合、そのECサイト（アプリケーションA）はAmazon Pay（アプリケーションB）とAPIを通じて連携していることになります。
8.マークアップ、スタイルシート、プログラミング、データベース
これらはすべて、Webサイトを制作する際に使用する言語の名称です。
まず、マークアップは文書構造を定義するための言語です。有名なものに、HTMLがあります。「これは見出しである」「これは本文である」のように、文書の構造を定義します。
スタイルシートは、マークアップとセットで使われる言語です。CSSが有名です。スタイルシートは文書を修飾するための言語で、文字の色や行間などのデザインを作るのに用いられます。
一方的に情報を発信するだけのシンプルなWebサイトであれば、マークアップとスタイルシートだけでも制作は可能です。そこにユーザーとのコミュニケーション機能や、コンテンツの検索機能・管理機能などを加えたい場合は、以下の言語を使用する必要があります。
まずプログラミング言語です。JavaScriptやPHP、Ruby、Python、Javaなど多数の言語が存在します。プログラミング言語は、コンピュータへの命令や業務シナリオを記述するための言語です。例えば、「送信ボタンが押されたら、メールの文章を作成し、メールを送信する」というようなシナリオを記述することができます。
データベース言語は、データベースを操作するための言語です。有名なものに、SQLがあります。データベースとは、ルールに従って整理されたデータの集まりのことです。エクセルで管理する一覧表のようなイメージです。たとえば、ECサイトで会員情報や商品情報を管理する場合、データベースに情報を蓄積し、データベース言語でその内容を管理します。
9.フロントエンド、バックエンド
フロントエンドとバックエンドは、前段とは別の視点で言語を分類する指標です。
フロントエンドとは、サービスを利用する側、つまりクライアント端末側のブラウザ上で処理されるものを指します。具体的には、HTML、CSS、JavaScriptが該当します。
バックエンドとは、サービスを提供する側、つまりサーバ端末側で処理されるものを指します。PHPなどのプログラミング言語で記述されるアプリケーションが該当します。また、その実行環境となるサーバー端末上のミドルウェアやOSを含むこともあります。
フロントエンド・バックエンドにはそれぞれ向き不向きがあるため、サイトに実装したい内容に応じて使い分けます。
フロントエンドはクライアント端末環境で動作するため、「クリックしたら音が鳴る」のような、即時性の求められる処理の実装に向いています。一方で、クライアント端末のスペックが低いと処理がうまくいかないこともあるため、高いスペックを必要としない処理に向いています。さらに、ソースコードが容易に解読できるため、高いセキュリティが求められない処理に向いています。
バックエンドの動作はサーバ端末環境で動作するため、サービス提供側が動作環境を整備できます。よって、スペックの求められる負荷の高い処理や、高いセキュリティを求められる処理にも向いています。一方で、動作時に端末間の通信を要するため、即時性の求められる処理には不向きです。
10.オープンソース
Web制作やシステム開発で用いられるプログラムのソースコードのなかには、インターネットに無料で公開されており、無償で利用できるものがあります。これを、オープンソースと呼びます。これらを利用することで、「車輪の再開発」コストを削減し、効率よく開発をすることができます。
オープンソースは、ライブラリ、フレームワーク、オープンソースソフトウェア（通称OSS）の3種類に分類することができます。
ライブラリはソースコードの図書館のようなものです。「ボタン機能だけを使う」のように、必要な部品だけをピックアップして使用できます。とくにJavaScriptに多く、有名どころではReact、jQuery、D3.jsなどが挙げられます。
フレームワークとは、ソースコードの記述方法の枠組みのことです。アプリケーション全体を、この枠組みに従って記述することで、よくある一連の各機能を一定の品質で効率よく実装することができます。BootstrapやSemantic UIなどのHTML/CSSフレームワーク、Nuxt.jsやVue.js、AngularJSなどのJavaScriptフレームワーク、LaravelやSymphony、CakePHPなどのPHPフレームワークなど挙げられます。
オープンソースソフトウェア（OSS）は、ソフトウェアとして完成しており、インストールしてすぐに使える状態になっていながら、ソースや設定を書き足してカスタマイズもできるものを指します。カスタマイズできるCMSパッケージとして有名なWordPressやbaserCMS、ECパッケージとして有名なEC-CUBEなどが挙げられます。
さらに、サーバー環境によくインストールされるOSやミドルウェア類も、多くがOSSとして提供されています。OSとしてのLinux、WebサーバーとしてのApacheやnginx、DBサーバーとしてのMySQLやPostgresSQL、メールサーバーとしてSendmailやPostfixなどが挙げられます。
さいごに
Web開発プロジェクトを成功させるには、エンジニアだけでなく、Webディレクターがシステムの基礎知識を持っている必要があります。
LIGでは、システムに詳しくないお客様にも伝わるご説明、お客様に寄り添ったご提案を心がけ、実践しております。Webサイト制作やリニューアルをご検討の際は、ぜひお気軽にお問い合わせください。
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
