Webアプリケーション開発基礎編

Webアプリケーションの仕組み

• ブラウザは HTML と CSS と JavaScript しか対応してない
• サーバー側で諸々処理して、3種ファイルを渡してブラウザにお任せ
• Webブラウザ ↔ Webサーバー ↔ APサーバー ↔ Webアプリケーション
• 超絶初心者のためのフロント入門（HTML、CSS、JavaScript） - Qiita

HTML

• HTML の基本 - ウェブ開発を学ぶ - MDN
• Hypertext Markup Language
• Webサイトの本体。主にレイアウトを決めるための言語。

CSS

• Webページのデザインを司っている

JavaScript

• Webページに動きを作ってくれる (例: 画像をクリックしたらタイトル文字列を変える)

ネイティブアプリケーション

• PC/スマホにインストールするアプリケーション
  • Swift(iOS),Kotlin(Android),Electron(PC) など
• Webアプリケーションと対になる存在

各種担当領域

(これらのことをすべてやる人は「フルスタックエンジニア」と呼ばれたりする)

フロントエンド(クライアントサイド)

• 主にユーザが触る画面を担当
• HTML,JavaScript,CSS,jQuery,Vue&Nuxt,React&Next,Angular など

バックエンド(サーバーサイド)

• 主にフロントエンドに渡すデータの処理を担当
• PHP(Laravel),Ruby(Rails),Python(Django,Flask,FastAPI),Node(Express) など

Webフレームワーク

• ライブラリをまとめたもの
• ライブラリとの違いは「書き方を強制されるか否か」
• ライブラリは拡張して使うものだがフレームワークは決められた書き方に沿うほうがやりやすい

インフラ

• Webアプリケーションの開発環境/動作環境を担当
• Linux,Nginx,Docker,MySQL,PostgreSQL,AWS,GCP など

簡単に作ってみる

• 画面を HTML,JavaScript,CSS で作る
• サーバーからデータを渡してみる

余談：最近のWebアプリケーションの構成について

1. バックエンド側で画面を作りきってユーザに渡すパターン
   • バックエンド中心 -> データと画面を混ぜてユーザに渡す
2. SPA/API駆動
   • フロントエンド中心 -> APIを叩いてデータを取りに行く