0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

25日チャレンジAdvent Calendar 2024

Day 1

Webアプリについて学ぼう

Last updated at Posted at 2024-11-30

WEBアプリとは

正しくは「WEBアプリケーション」です。
GoogleやSafariなどのWebブラウザで操作可能なアプリケーションのことを、Webアプリと呼び、Webサーバー上で動作するため、インターネット環境さえあれば利用が可能です。

代表的なWebアプリケーションには動画再生・共有の「YouTube」、メールクライアントの「Gmail」、SNSの「X」などが挙げられます。

Webサイトとの違い

WebサイトとWebアプリでは、「利用できる機能の幅」が異なります。

Webサイト
インターネット上にあるWebページを複数組み合わせて構成されています。
基本的な機能は文章や画像の閲覧などの一方通行(静的)な伝達であることが特徴です。

Webアプリ
コメント・メッセージの投稿や、予約、商品購入、マップの表示など、多様な機能があります。
これらの機能を活用して行う、ユーザーと情報提供者の間で双方向のコミュニケーション(動的)が特徴です。

Webアプリの仕組み

Webアプリは、ユーザーが「フロントエンド」で要求し、「バックエンド」でその要求を処理して「データベース」から情報を抽出する仕組みです。

と言われてもよくわからないと思うので、それぞれの機能を見ていきましょう。

フロントエンド
フロントエンドは、ユーザーが直接目に触れる部分を指し、「クライアントサイド」とも呼ばれています。
ユーザーが文字を入力したり、ボタンをクリックしたり操作できる部分でもあります。
(例:「食べログ」だとお店を検索、ネット予約、口コミの投稿など)

バックエンド
バックエンドは、ユーザーが直接触れない部分を指し、「サーバーサイド」とも呼ばれています。
Webサーバーで処理する部分を担当し、ユーザーがフロントエンドで入力した情報を処理したり、ユーザーの目に見えない部分で格納してあるデータを扱います。
(例:「食べログ」だとユーザーが入力した検索キーワードに基づき、該当するお店を検索結果として表示、見たお店を閲覧履歴として保存)

データベース
データーベースは膨大なデータを管理・保存し、バックエンドでの処理に応じてデータ抽出が可能です。
ユーザーの検索要求に応じて、保存されたデータから適切なものを検索結果として返します。
(例:「食べログ」だとお店の情報や予約のデーターを管理・保存している場所)

Webアプリの開発手順

stap1.作成したいアプリ内容を決める
作成したいアプリの内容を決めます。
内容が曖昧だと作業の進捗に遅れが生じるので、アプリ内容の決定がとても大事です。

stap2.開発言語とフレームワークを選択
作りたいアプリが定まったら、開発言語とフレームワークを選択します。
開発言語にはそれぞれ特徴があり、作りたいアプリ内容に沿って決める必要があります。
また、アプリケーションを開発する際の土台として機能させるソフトウェアのフレームワーク(Angular、Vue、Reactなど)を利用すれば、簡略化したコードでスピーディーに開発できます。

Stap3.開発環境を作る
開発言語やフレームワークのインストールを完了させ開発環境を整えます。

Stap4.Webアプリを開発する
stap1.で決めた、作成したいアプリを開発していきます。

Stap4.完成したWebアプリを公開し動作確認する
完成したアプリをインターネット上に公開し、第三者のユーザー視点でのチェックをしてもらいましょう。

まとめ

Webアプリの仕組みを知ったら、ユーザーが「フロントエンド」で要求し、「バックエンド」でその要求を処理して「データベース」から情報を抽出するというのに納得ですね。

次回はWebアプリの開発でどのような言語が使用されているのか調べてみたいと思います。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?