🔥虚無との戦い

🔨Web 開発

16 min read

Web 開発、Web Developmentまとめ.

📱Webサービスの開発. 汎用的なWeb開発技術まとめ.

言語別

🔨バックエンド開発

📝サーバサイド

Server-side. ウェブアプリケーションの機能の一部が実行されるサーバー上の環境.

クライアント（通常はウェブブラウザ）からのリクエストを受け取り, 適切なデータベースのクエリを行ったり, データを処理してクライアントにレスポンスを返す役割.

🔨フロントエンド開発

📝クライアントサイド

Client-Side. ウェブアプリケーションの機能の一部がユーザーのデバイス（通常はウェブブラウザ）上で実行される環境.

🔨フルスタック開発

🔨バックエンド開発と🔨フロントエンド開発を分けずに開発するときのトピック.

HTTP Protocols

Web ブラウザと Web サーバの間でHTML などのコンテンツの送受信に用いられる通信プロトコル.

ref. 📝HTTP Protocols

📝Cookies

HTTP におけるウェブサーバとウェブブラウザ間で状態を管理するプロトコル, またそこで用いられるウェブブラウザに保存された情報のことを指す. ユーザ識別やセッション管理を実現する目的などに利用される.

HTTP Push

HTTP Polling

クライアントがサーバへ定期的にメッセージを送信する.

クライアントは, サーバの状態をしらない.

📝Mine Type

規格上 US-ASCII のテキストしか使用できないインターネットの電子メールでさまざまなフォーマット (書式) を扱えるようにする規格. マイム.

📝Base64

データを64種類の文字列で表現するデータ形式.

📝Base58

📝Base64の改良で, 間違いやすい文字と記号を排除した58文字でデータを表現するデータ形式.

🔖暗号資産の分野で活用されている. たとえば, walletアドレスはbase58形式.

📝Web サーバ

Web Server, HTTPサーバともいう.

クライアントApplicationのHTTPリクエストに応じてHTMLファイルや画像データのレスポンスを返すサービスプログラム.

ex.) Apache, Nginx

📝アプリケーションサーバ

Web Application Server

ビジネスロジックなどを実装したアプリケーションソフトウェアを実行することを専門とするコンピュータネットワーク上のサーバコンピュータ, もしくはそのようなコンピュータ上でのアプリケーションの実行を管理補助するミドルウェア.

ref: アプリケーションサーバ - Wikipedia

基本機能は次の3つ.

  • プログラムの実行環境やデータベースへの接続機能の提供
  • 複数の処理を連結するトランザクションの管理機能
  • 業務処理の流れを制御するビジネスロジックの実装

WebApp Server Examples

Web Application

インターネット (もしくはイントラネット) などのネットワークを介して使用する. アプリケーションソフトウェア.

cf. Desktop Application, Mobile Application

ref: ウェブアプリケーション - Wikipedia

たとえばRuby on Railsを使って自作したアプリはこれを指す.

💡ひとくちメモ

Web ApplicatlionがAPIを提供するサーバになってきたため2019年ごろからiOS, Android, Webアプリの境目がなくなってきたように思う.

すなわちMobile AppとWeb Appの区別がなくなってきており, 数年でまた定義を書き直すことになるかも.

📝Web Server Abstruction

HTTP server abstructionとも. InterfaceによるWebサーバ抽象.

Web Serverと Web アプリがやり取りをするための仕様. 言語ごとにいろいろな仕様がある.

ただ, これらの概念をまとめる概念として一般的な用語がみつからないので便宜的に自分で定義する. 以下解説.

JavaにはServlet及びServet APIがあり, 言語仕様として Web Server - Web Application間の仕様か決まっていた(Java Servletの変遷).

コレを真似るかたちでPythonでWSGIの仕様が作成され他の言語も真似ていった.

WSGIは Web Server Gateway Interfaceの略. もはやこの用語でいいかもしれないが WSGIというとPythonに限定されると誤解しやすい. このServer - Application間の仕様は各言語に存在する.

ただ実際にこれらのWebサーバ抽象を担当するフレームワークをつかうときは, フレームワークに扱ってほしい自作の関数をハンドラとして渡すので, より具体的にはハンドラフレームワークといったほうがイメージしやすいかも.

🔌Web API

📝World Wide WebにかかわるAPIの総称. ただ, 一般的にAPIというとWeb APIを指すことがおおい.

🔌GraphQL

🔌Web APIの📝インタフェース記述言語/IDL.

🔖Web フレームワーク

Web アプリケーションフレームワーク.

Webアプリを作成するためのライブラリを集めたツールセット.

  • Ruby on Rails
  • Python Django
  • Java
    • Play Framework
    • Netty - 非同期のイベント・ドリブンIO用.

Web Archtectures

fr

Web Client
    |
(NetWork)
    |
Web Server
    |
Script/Service
    |
(Connector)
    |
 DataBase

Web Protocols

Presentation Layer

プレゼンテーション層.ユーザインタフェースとコントローラを提供. クラス名は Controller, Action.

Presentation

Presentation Layer の構成要素は以下.

  • HTML (構造)
  • CSS (表現)
  • JavaScript (動作)

これらは絶対に, 絶対に, 絶対に, 分けなければいけないと強調される.

Controller

画面遷移や画面でボタンが押されたときの動作制御やセッション管理など.

Middle-ware Layer

ビジネスロジック層ともいう

これらの定義は, Spring3 から引用: http://gihyo.jp/book/2012/978-4-7741-5380-3?ard=1407982106

トランザクション

分けることのできない一連の情報処理の単位.

データベースにおいては, データに対する一つの論理的操作の事.

  • トランザクション境界

    プレゼンテーション層とトランザクション層の境界.

    簡単に言うと,

    • (開始) xxx Controller から xxxService のメソッド呼び出し.
    • (終了) xxxService のメソッドの return.

ビジネスロジックの分類

クラスの末尾に Service のついた名前や,対象となるオブジェクト名 (Employee, Order) がつく.

  • Service

    ユースケースに表されるような特定業務や特定部署の処理のまとまりをコントロールする.トランザクションの起点.一般的にはステートレス.

  • Domain

    サービスから起動される, ビジネスを行う上で当然認識される顧客や注文といったサービスの集まり. 自分自身がなにものかを示す値と, その値を利用した処理を実現する.

ビジネスロジック・パターン

  • トランザクションスクリプトとは「アクションより起動される一連の手続き」
  • ドメインモデルとは「ドメイン内の名詞によって体系化されたモデル」

いまさらきけない「ドメインモデル」と「トランザクションスクリプト」

  • トランザクションスクリプト

    • ユースケースごとに Service クラスをつくっていく.
    • 手続き処理で記述.処理ごとドメインを呼び出していくだけなので, オブジェクト指向ぽくない.
    • 小規模開発向け. とても簡単で分かりやすい.

  • ドメインモデル

    • 大規模開発向け. とても簡単で分かりやすい.
    • ドメインにロジックを持たせる. (OOP 設計!)

Database Layer

データペースレイヤ. データアクセスレイヤとも.

データベースへのアクセスを抽象化する.クラス名の末尾に DAO (Data Access Object) がつく.

DB Layer 役割

  • RDB へのアクセスをビジネスロジック層から隠蔽
  • 必要なデータを RDB から取得してオブジェクト (domain) にマッピング.

  • O/R マッピング

    Object と Relational DB の対応づけ. 基本的に, DD テーブルの 1 レコードが 1 オブジェクトに対応.

Relational Database

リレーショナルデータベース. デファクトスタンダードな Db 設計.RDB

The Active Record Design Pattern

REST

Restful,Representational State Transfer.分散ハイパーメディアシステムのためのソフトウェアアーキテクチャのスタイルのひとつ. 2 つの意味で使われている.

  • Fielding の REST アーキテクチャスタイルの原則に合わせた Web サービスシステム.
  • RPC スタイルに合わせた簡易な XML+HTTP インターフェイスを採用したシステム (SOAP は使わない).

Representational State Transfer - Wikipedia

Fielding の REST 原則

Fielding の REST 原則に従うシステムは, しばしば RESTful といわれる.

  1. セッションなどの状態管理を行わない (やり取りされる情報はそれ自体で完結して解釈することができる) 」 (Web システムでは, HTTP 自体にはセッション管理の機構はない)
  2. 情報を操作する命令の体系が予め定義・共有されている」 (Web システムでは HTTP の GET や POST などに相当),
  3. すべての情報は汎用的な構文で一意に識別される」 (URL や URI に相当),
  4. 情報の内部に, 別の情報や (その情報の別の) 状態へのリンクを含めることができる (ハイパーメディア的な書式で情報を表現する) 」 (HTML や XML に相当)

http://e-words.jp/w/REST.html

Web HTTP Routing

いわゆるルーティングと呼ばれているもの.

しかしこの言葉自体がいろんな意味を含むので, ここでは Web Application Framework で利用されるものを扱う.

なお Routerは発音注意(らうたー, これを言えないと小馬鹿に見られる).

ルーティングとは, クライアントのリクエスト内容と、サーバーの処理内容を紐付ける作業.

各言語ごとにWebフレームワークがあるように, ルーティングライブラリも各言語ごとにある. Frameworkの中に組み込まれていたりライブラリとして切り出されて使えるものもある.

極論ライブラリをつかわなくてもkey-valueの集合でいい.

endpoint

Webアプリケーションにおけるendpointとは, APIにアクセスするための識別子であり, たいていはURL/URIである.

Server Load Balance

サーバロードバランスは, クライアント/ サーバネットワークにおいて, クライアントとサーバの間にロードバランサー (負荷分散装置) を設置し, 通信アプリケーションの (TCP/UDP) ポート番号をもとに, 2 台~256 台 のサーバが分散処理を行う, コンピュータシステム.

外部のネットワークから見て, ロードバランサは仮想的な 1 台のサーバに見える. つまり, IP アドレスやポート番号は, 背後にあるサーバ群の代表としてロードバランサのものだけが見える.

Load Balancing

コンピュータネットワークにおける技法の一種であり, 作業負荷を多数のコンピュータ/ プロセス/ その他のリソースに分散し, リソースの利用効率を高め性能を向上させる手法.

Web サービスの分類

クラウド関連ページへ -> ASS Classification

Webエンジニア

🔖エンジニア文化

💡WebエンジニアはCSの学位が求められないことが多い職種という闇

Webエンジニア=プロググり師というパワーワード.

  • CSの学位はあった方が良いけど、なくてもなれる仕事
  • 募集が多いのは当然です。面倒で手間がかかるから。
  • 前提となる知識が少なく、数学もデータ構造も求められない、非常に専門性の低い分野
  • 元々未経験からなる人の方が多い職種

基本的にそういう仕事では言語の基本的な使い方を身に付けたら、フレームワークとライブラリを知って使うことがメインで新しいものが出てきはしますが、基本的にはフレームワークやライブラリ、ミドルウェアやクラウド周りなどをツール的に詳しくなって使いこなす、を繰り返すことになり、ググればできる仕事です。そういう仕事を5年10年続けるとWebなら調べれば何でもできるけど、実際は何もできない人の完成です。

昔hatenaで書きましたが、ググってできる仕事は技術とは呼べないし、あなたでなくてもできる仕事です。ググれば誰でもできる事で技術者だ！というなら、それはプロググり師なのでは。

📚Books

プロになるためのWeb技術入門 - 技術評論社

良書だけど売却してしまったな…2021年に技評から電子PDF版が発売されたのはよい.

🖊HTTP も知らないのぉ~? にカチンときたら読むべき! プロになるための Web 技術入門を読んだ. | Futurismo

🔗References

📝MDN

MDN とは, Mozilla Developer Networkの略称. ブラウザのFireFoxなどを開発しているMozilla Foundationが運営している.

https://developer.mozilla.org/ja/

Web技術に関する信頼性の高い情報がここで手に入る.

WikipedaよりもMDNのほうがWeb技術に関しては良質かも.

Web Application Development - coursera

courseraのオンライン講座.

Web Application Development: Basic Concepts | Coursera

ref. 🖊[coursera]Web Application Archtecturesを受講しました | Futurismo

グラフビュー

バックリンク

Recents