blog-hero-img

ウェブサイトとウェブアプリの違い

pen-icon2023.12.19

この記事は約2分で読めます

Profile Pic

この記事の筆者:三好アキ


🔹 専門用語なしでプログラミングを教えるメソッドに定評があり、1200人以上のビギナーを、最新のフロントエンド開発入門に成功させる。

🔹 Amazonベストセラー1位を複数回獲得している『はじめてつくるReactアプリ with TypeScript』著者。


Amazon著者ページはこちら → amazon.co.jp/stores/author/B099Z51QF2



React、Next.js、TypeScriptなどのお役立ち情報や実践的コンテンツを、ビギナー向けにかみ砕いて無料配信中。登録はこちらから → 無料メルマガ登録

「サイト」と「アプリ」

この記事を読まれているから、これまでHTML/CSSを使った開発を一度はしたことがあると思います。

しかしそうして完成したものは、例えばInstagramやTwitterのように、画像やコメントなどを投稿できるようになっていたでしょうか。

おそらくそうはなっていなかったと思います。

それはHTML/CSSだけで作れるものは、「ウェブサイト」に分類されるものだからです。

一方通行と双方向

ここで「ウェブサイト」と「ウェブアプリケーション(ウェブアプリ)」の違いは何か、という疑問が出てくると思います。

この2つの最大の違いは、ユーザーとのやりとりが「一方通行」か「双方向」かという点にあります。

ウェブアプリの例

ウェブアプリケーションの例として、ここではクチコミを投稿できるサービスを考えてみます。

アクセスをすると、まず最初にたくさんのクチコミがブラウザに表示されます。

これらのクチコミがどこから来たのかを考えてみると、私たちがアクセスする前にすでにたくさんのユーザーがクチコミを投稿していたので、今このように表示されているのがわかります。

つまりユーザーは、このクチコミサービスに対して「クチコミを投稿(作成)する」というアクションを起こせることがわかります。

さらにもう少し考えてみると、例えば自分のクチコミに誤字脱字を見つけた場合は「クチコミを修正する」、クチコミを消したい場合は「クチコミを削除する」というアクションも可能だと推測できます。

このようにユーザーとの間では、単にクチコミサービス側が情報を表示するだけではなく、ユーザーはそこに対して何らかのアクションを起こすことも可能です。

これは情報のやりとりが「双方向」であるといえ、これこそがウェブアプリケーションの特徴になります。

ウェブサイトの例

一方で「ウェブサイト」の例として近くの飲食店のホームページを考えてみましょう。

そこにはメニューやシェフのこだわり、営業時間、電話番号などが書いてありますが、私たちユーザーはその情報に対しアクションを起こして変更を加えたり、または新しく情報を追加したりといったことはできません。

つまり情報の流れがここでは「一方通行」であるのがわかります。

情報の流れ
ウェブサイト 一方通行 企業や飲食店のホームページなど
ウェブアプリケーション 双方向  メルカリ、Twitter、クチコミサービスなどのウェブサービス全般

しかしこれでいつもはっきりと区別がつくのかというと、そうではありません。

例えば飲食店のホームページに「お問い合わせページ」があって、そこからユーザーが連絡を取れるようになっていると、これはもう「一方通行」のやりとりだけというわけではなくなります。

このようにウェブアプリケーションとウェブサイトの境目は曖昧(あいまい)で必ずしも明確なものではなく、また厳密に区別する必要があるわけでもないことを覚えておきましょう。

「ウェブサイト制作」から「ウェブアプリ開発」にスキルを伸ばしたい方は、HTMLとCSSの知識だけでアプリ開発を体験できる下記書籍がおすすめです。

reactbook

【Amazonで見る】

Profile Pic

メルマガ配信中
(from 三好アキ/エンジニア)


React、Next.js、TypeScriptなど最新のウェブ開発のお役立ち情報を、ビギナー向けにかみ砕いて無料配信中。
(*配信はいつでも停止できます)