【出来て当然!?】あなたはアプリケーションの違い・構造〜ちゃんと説明できますか？〜

皆さんこんにちは！ガイアコミュニケーションズ広報担当の佐藤です。
私は直接エンジニアの仕事に関わるポジションでは無いのですが、やはり社内で行なっているIT事業について、把握しておくべき！と考えて現在IT業務について勉強中です🤓✨

前職でもITに関わる仕事はしていたので、今では多少理解はしていますが、最初は異業種からの転職で「アプリケーション」の意味さえもよく分かっていなかったです笑

▍アプリケーションとは何か？

パソコンすらも普段から触れていなかった私にとっては「アプリ」と聞くと『「スマホアプリ」のこと？』と一括りにして考えてしまっていました(笑)

アプリケーションとは、コンピュータ上で特定の作業を行うために作られたソフトウェアのことを指します。より身近な言葉で言うと、「アプリ」と呼ばれることもあります。

＜アプリケーションの例＞

・スマートフォンアプリ

LINE、ツムツム、ゲームなどアプリストアからスマートフォン本体にダウンロードして動作させるアプリケーション。

・パソコンソフト/デスクトップアプリケーション

Word、Excel、PhotoshopなどはPC本体にダウンロードして利用するもの。

・Webアプリケーション

Googleドキュメント、YouTube、ZOZO town、クックパッドなど、デスクトップアプリケーションとは異なり、インターネット接続が必須になるものとして区分けされるケースもありますが、最近ではこれらの境界線が曖昧になっているそうです。

ただ、モバイルアプリやデスクトップアプリであっても、インターネット接続をする事で多種多様な機能を使用することができるようになってきています。

また、近年ではクラウド型が増え、サービスモデルもSaaSをはじめとした形態に変化してきており。多くのサービスがWebアプリケーションと共通する構造を持ってきています。
よく受託開発やSler企業での開発では業務系システム開発とwebアプリケーション開発という分け方をする場合もありますが昨今のプロダクトでは基本的にインターネットを介して機能が提供されることが多いので、共通する構造がとても多いそうです。

ここまででも、元々IT業界で働いていなかった私からしたら馴染みがなく理解しづらい内容でした(笑)

▍Webアプリケーションの構造

クライアントから開発依頼をいただく際や、弊社が二次受けで案件をいただく際、しっかり理解しておかなければならないのが、この構造部分…!!

どんな内容で、どんな環境下で、開発を進めていく予定なのか。案件を引き受ける前にエンジニアだけじゃなく、営業担当や人事に関わる社員はある程度は理解しておいた方が絶対にいいです…!!

エンジニアだけが理解している状況となってしまうと、現場で何か問題が起きた時には開発に関わる人だけでしか解決できず、他方面からフォローすることも出来ません。自社エンジニアをしっかりとフォロー出来るよう、理解を深めておくことをお勧めします👌

Webアプリケーションは、ユーザーがブラウザを通じてアクセスし、様々な機能を利用できるシステムです。その構造は、大きく分けて以下の3層に分けられます。

1. プレゼンテーション層（表示層）

役割: ユーザーが直接目にする部分、つまりWebブラウザに表示される画面を構成します。

◾️ 構成要素

• HTML: Webページの構造を記述
• CSS: Webページのデザインを記述
• JavaScript: Webページに動的な動きやインタラクションを追加

◾️ 機能

• ユーザーインターフェースの提供
• ユーザーからの入力の受け付け
• サーバーへのリクエストの送信

2. アプリケーション層（処理層）

◾️ 役割

ユーザーからのリクエストを受け取り、データベースとの連携やビジネスロジックの実行など、実際の処理を行います。

◾️ 構成要素

• サーバーサイドスクリプト言語（PHP, Ruby, Pythonなど）
• フレームワーク（Laravel, Ruby on Railsなど）

◾️ 機能

• データベースとの連携
• ビジネスロジックの実行
• セキュリティ対策

3. データ層（データ保存層）

◾️ 役割

アプリケーションで利用されるデータを保存します。

◾️ 構成要素

• データベース（MySQL, PostgreSQLなど）

◾️ 機能

• データの保存
• データの検索
• データの更新
• データの削除
• 各層の連携

これらの3層は、以下のような流れで連携します。

1.ユーザーがブラウザでWebアプリケーションにアクセスし、ボタンをクリックしたり、入力フォームに値を入力したりする。

2.ブラウザは、ユーザーの操作をHTTPリクエストとしてサーバーに送信する。

3.サーバーは、HTTPリクエストを受け取り、アプリケーション層のプログラムを実行する。

4.アプリケーション層のプログラムは、必要に応じてデータベースにアクセスし、データを操作する。

5.処理結果に基づいて、HTML、CSS、JavaScriptなどのコードを生成し、ブラウザに返送する。

6.ブラウザは、受け取ったコードを解釈し、Webページをレンダリングする。

例: ブログサイトの場合

プレゼンテーション層: 記事一覧、記事詳細ページ、コメント入力フォームなど

アプリケーション層: 記事の投稿、編集、削除、コメントの保存、ユーザー認証など

データ層: 記事の情報（タイトル、本文、作成日時など）、ユーザーの情報、コメントの情報など

以上です。

私が前職で共に働いていたIT営業の方は、Laravelを言語と思っていたり、サーバーサイドやフロントエンドの違いも曖昧なまま理解していて、結果的にクライアントやエンジニアにも迷惑をかけてしまう事態を起こしていまっていました…😅

「自分はエンジニアではないから」と考えるのではなく、IT業界にいる人材全員が理解を深めることで
コミュニケーションの質の向上・業務効率や質の上昇につながると私は思っています。

弊社ガイアコミュニケーションズでは、エンジニア歴が長いエンジニア社員が多く在籍しています。
何かわからないことや、エンジニアのキャリアプリンについてなど話したいこと・相談したい方などいらっしゃいましたら是非、お気軽にお問合せいただけたらと思います🎵

それではまた次回のストーリーでお会いしましょう🤩!!!