モダンスタックでつくるWebアプリケーション 学習ロードマップ 2022/10

## はじめに

この記事を読んでいるということは、何らかの目的でWebアプリケーション開発を学びたい、あるいはその最中であると思います。しかしWeb開発という分野の内容の幅は広く、さらに常にアップデートが行われるため、多くの場合、学習方法は独学によるものになります。

特に独学において問題になるのは、学習すべきことがわからないということが起きることです。世の中には、Webアプリケーション開発用の学習教材や記事は数多存在しますが、それらの情報の殆どはその内容ごとに散在しており、またWebアプリケーション開発において決定的なシラバスというのも存在しません。この記事は、学習すべきことを明確化するため、モダンなWebアプリケーション開発における基礎的な知識、フレームワーク及び参考となる学習教材等を体系的にまとめたものです。

:::note warn

- この記事においてWebアプリケーションは、ブラウザ上で動作するWebアプリケーションのみを対象としています。モバイル用のネイティブアプリケーションに関する情報は含みません。
- この記事は特に初学者を対象としているため、Webに関する初歩的な内容を含みます。
- 詳細な説明による冗長性を避けるため、引用、リンクを多用します。

:::

## Web

> World Wide Web（ワールド・ワイド・ウェブ、略名：WWW）とは、インターネット上で提供されているハイパーテキストシステムである。

[Web](https://ja.wikipedia.org/wiki/World_Wide_Web)とは、ネットワーク上で相互に接続された複数のコンピュータに保存されているテキスト、画像、音声、動画などの様々なデータを相互に紐付けて構成されたシステムで、これを支えているもっとも基本的な技術がHTTP(Hypertext Transfer Protocol), URI(Uniform Resource Identifier), HTML(HyperText Markup Language)です。まず初めに理解すべき点はWebが[クライアント/サーバ](https://ja.wikipedia.org/wiki/%E3%82%AF%E3%83%A9%E3%82%A4%E3%82%A2%E3%83%B3%E3%83%88%E3%82%B5%E3%83%BC%E3%83%90%E3%83%A2%E3%83%87%E3%83%AB)システムであるということです。

> クライアントサーバモデル（英: client-server model）は、機能や情報（サービス）を提供するサーバと、それを利用するクライアントとを分離し、ネットワーク通信によって接続する、コンピュータネットワークのソフトウェアモデル（ソフトウェアアーキテクチャ）である。

クライアント、サーバとはそれそれ、情報を要求する(Request)側と提供する(Response)側という役割を指す言葉です。Webにおいてクライアントとは一般的にユーザーのコンピュータ、ブラウザを指します。

Web上のクライアント/サーバ間で用いられるアプリケーション[プロトコル](https://wa3.i-3-i.info/word11.html)がHTTPです。HTTPはほぼ全てのプログラミング言語に実装されています。

## TCP/IP

HTTPに先立って、まずTCP/IPについて知る必要があります。TCP/IPとは[IETF](https://ja.wikipedia.org/wiki/Internet_Engineering_Task_Force)によって標準化が行われているコンピュータ間での通信プロトコル群の総称です。TCP/IPはほぼ全ての商用および非商用のOSに実装されているため、私達はTCP/IPについて知らずともWebアプリケーションを使用することができます。TCP/IPが現在の標準になった経緯については以下を参照してください。

https://ja.wikipedia.org/wiki/OSI参照モデル#歴史

https://ja.wikipedia.org/wiki/インターネット・プロトコル・スイート#歴史

TCP/IPは階層モデルになっていますが、その中でもHTTPは上記の4層の内、最上位のアプリケーション層を担当するもので、下位のトランスポート層、インターネット層の上に成り立っています。

- ネットワークインターフェース層

  - イーサネット
  - Wifi
  
  物理的なケーブル、アダプタの規格

- インターネット層

  - [IP](https://ja.wikipedia.org/wiki/Internet_Protocol)

  パケットを指定のIPアドレスに転送するための規格です。[IPアドレス](https://ja.wikipedia.org/wiki/IPアドレス)とはインターネット上のコンピュータを識別するためのネットワーク層の識別子です。

- トランスポート層

  - [TCP](https://ja.wikipedia.org/wiki/Transmission_Control_Protocol)
  - UDP

  > TCP/IPモデルでは、トランスポート層はホストコンピュータ上の適切なアプリケーションプロセスにデータを配送する責任が有る。これは異なったアプリケーション・プロセスからのデータの統計的多重化、すなわちデータのパケット化、およびトランスポート層の各データ・パケット・ヘッダへの送信元／送信先ポート番号の追加を伴う。送信元および送信先のIPアドレスと共に、そのポート番号はネットワーク・ソケット、すなわちプロセス間通信の識別アドレスを構成する。

- アプリケーション層

  - [HTTP](https://ja.wikipedia.org/wiki/Hypertext_Transfer_Protocol)
  - TELNET
  - DNS

  > TCP/IPモデルにおいては、アプリケーション層は4階層ある内の第4層にあたり、IPのコンピュータネットワークを介したプロセス間通信に使われる通信プロトコルとインターフェースメソッドを含んでいる。アプリケーション層は通信だけを標準化しており、ホスト間のデータ通信チャネルの確立と、クライアントーサーバ間またはピアツーピアのネットワーキング・モデルにおけるデータ交換の管理は、下位のトランスポート層のプロトコルに依存している。

まず、インターネット上の[ホスト](https://ja.wikipedia.org/wiki/ホスト_%28ネットワーク%29)にはそれを識別するためのIPアドレスが割り振られます。人間が識別しやすいように[DNS](https://ja.wikipedia.org/wiki/Domain_Name_System)によって対応付けられた文字列がホスト名です。Web上の[リソース](https://developer.mozilla.org/ja/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web)はホスト名を含むURI(Uniform Resource Identifier)によって一意に識別されます。

## URL

URL(Uniform Resource Locator)はURIのサブセットで、リソースの場所を表す識別子を意味します。

HTTP/[HTTPS](https://ja.wikipedia.org/wiki/HTTPS)を用いて表されるURLの基本的な形式は以下のようになります。

```
http(s)://{host}{path}
```

例えば、`https://ja.wikipedia.org/wiki/Hypertext_Transfer_Protocol`の場合、各コンポーネントは

- URIスキーム: `https`
- ホスト: `ja.wikipedia.org`
- パス: `/wiki/Hypertext_Transfer_Protocol`

URLの形式の詳細については以下を参照してください。

https://developer.mozilla.org/ja/docs/Learn/Common_questions/What_is_a_URL

## HTTP

HTTPによるリクエストはURLに加えて、HTTPメソッド、ヘッダ、ボディによって構成されます。リクエストの際に送信されるテキストをリクエストメッセージ、レスポンスをレスポンスメッセージと言います。

HTTPのリクエストメッセージは

- リクエストライン

  - リソースを識別するためのURI、
  - リソースに対する処理を示すHTTPメソッド
  - HTTPプロトコルバージョン

  によって構成されます。

  HTTPメソッドをまとめたものが以下です。

  | メソッド | 意味 
  | - | - 
  | GET | リソースの取得
  | POST | リソースの作成
  | PUT | リソースの置換
  | PATCH | リソースの部分的変更
  | DELETE | リソースの削除
  | HEAD | リソースのヘッダー情報の取得
  | OPTIONS | リソースの通信オプションの取得
  | TRACE | リソースのロープバック試験
  | CONNECT | リソースのサーバーとのトンネルの確立

  例えば、HTTP/1.1で`https://developer.mozilla.org/ja/docs/Web/HTTP/Messages`にGETメソッドでリクエストをした場合、リクエストラインは以下のようになります。

  ```
  GET /ja/docs/Web/HTTP/Messages HTTP/1.1
  Host: developer.mozilla.org
  ```

- ヘッダ

  リクエストラインの後に記述されるのがヘッダです。ヘッダはメッセージのメタデータです。詳細は以下を参照してください。

  https://developer.mozilla.org/ja/docs/Web/HTTP/Headers

- ボディ

  ヘッダの後に空行を挟んで記述されるのがボディです。POSTやPUTメソッドでリソースを作成、更新する際にリソースの内容が入ります。

リクエストメッセージ及びレスポンスメッセージあ合わせてHTTPメッセージと言います。HTTPメッセージの詳細は以下を参照してください。

https://developer.mozilla.org/ja/docs/Web/HTTP/Messages

## HTML

ここまでHTML、URIとWeb上での通信の規格について話しましたが、ここで説明するHTMLはWebページを表現するために使用されるマークアップ言語です。マークアップ言語とはテキストの構造化、スタイリングを行うための言語で、現在のHTML5は特に構造化を行うためのマークアップ言語となっています。

HTMLはタグによって括られた要素によって構成されます。

```html
<p>My cat is very grumpy</p>
```

詳細は以下を参照してください。

https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/HTML_basics

WebページはHTMLに加えて、[CSS](https://ja.wikipedia.org/wiki/CSS)及び[JavaScript](https://ja.wikipedia.org/wiki/JavaScript)によって構成されています。CSSはHTMLにスタイリングを行うための[W3C](https://ja.wikipedia.org/wiki/World_Wide_Web_Consortium)によって標準化されているスタイリングシートの仕様で、JavaScriptは[Ecmaインターナショナル](https://ja.wikipedia.org/wiki/Ecmaインターナショナル)によって標準化されている標準ブラウザ上で動作するプログラミング言語です。

## SPA

一昔前のWebアプリケーションでは、サーバー側でHTMLを生成してからクライアントに送信するものが一般的でしたが、JavaScriptによってHTML、CSSを操作してUIに変更を加えることで、Webページを遷移せずにデスクトップアプリケーションのように動作するWebアプリケーションが一般的になりました。このようなアプリケーションをSPA(Single-page application)と言い、対してページごとにHTMLを生成して送信するアプリケーションをMPA(Multi-page application)と言ったりします。

SPAを実現するための[ライブラリ](https://wa3.i-3-i.info/word1473.html)には代表的なものに以下があります。

- [React](https://ja.reactjs.org/)
- [Vue](https://jp.vuejs.org/index.html)
- [Angular](https://angular.io/)
- [Svelte](https://svelte.jp/)

SPAは一度ブラウザ側でレンダリングされた後、JavaScriptでHTTPを使用してサーバと通信を行うことで、データの取得などを行います。このようにアプリケーションから呼び出されるインターフェースを[API](https://wa3.i-3-i.info/word12428.html)といい、Webのクライアント/サーバ間で使用されるAPIをWeb APIと言います。

Web APIでは一般的に[JSON](https://ja.wikipedia.org/wiki/JavaScript_Object_Notation)や[XML](https://ja.wikipedia.org/wiki/Extensible_Markup_Language)などのデータフォーマットが使用されます。

また、UIを担うアプリケーションの分野をフロントエンド、サーバ側でデータの保存、取得、加工などを行うアプリケーションの分野をバックエンド(サーバーサイド)と言います。またこれら2つを合わせてフルスタックと言います。

## Web API

Web APIにはいくつかの[アーキテクチャ](https://wa3.i-3-i.info/word16015.html)が存在します。

### REST

最も代表的なものアーキテクチャスタイルが[REST](https://www.service-architecture.com/articles/web-services/representational-state-transfer-rest.html)です。RESTとは以下の規則のセットを意味します。

- クライアント/サーバ
- ステートレスサーバ
- [キャッシュ](https://developer.mozilla.org/ja/docs/Web/HTTP/Caching)
- 統一インターフェース

  リソースはURIによって一意に識別でき、最小限のメソッドによって操作されることを意味します。Web APIにおいてURI、またはHTTP APIにおいてURIとHTTPメソッドによって識別される各インターフェースのことを[エンドポイント](https://wa3.i-3-i.info/word18427.html)、エンドポイント毎に処理を設定することを[ルーティング](https://wa3.i-3-i.info/word1498.html)と言います。

- 階層化システム
- コードオンデマンド

RESTに則って設計されたAPIをRESTful APIと言います。ただし、厳密にはRESTに則っておらずともURIとHTTPメソッドによって統一されたHTTP APIがRESTと表現される場合もあります。

RESTful APIを実現する仕様として[Open API](https://swagger.io/docs/specification/about/)などが存在します。

### GraphQL

RESTが抱えるいくつかの問題に対して、より柔軟なAPIを提供するために生まれたのが[GraphQL](https://ja.wikipedia.org/wiki/GraphQL)です。RESTには以下の問題があります。

- 取得情報をクライアント側で柔軟に変更できない
- エンドポイントの管理

GraphQLはこれらを解決するためのWeb API上のクエリ言語及びランタイムです。

GraphQLでは単一のエンドポイントに、クライアント側からクエリを発行することでその実行結果を受け取ります。

<blockquote>

```gql
{
  hero {
    name
    friends {
      name
    }
  }
}
```

```json
{
  "data": {
    "hero": {
      "name": "R2-D2",
      "friends": [
        {
          "name": "Luke Skywalker"
        },
        {
          "name": "Han Solo"
        },
        {
          "name": "Leia Organa"
        }
      ]
    }
  }
}
```

</blockquote>

その名に冠している通り、GraphQLにおいてサーバから送信されるデータは全て[グラフ](https://ja.wikipedia.org/wiki/%E3%82%B0%E3%83%A9%E3%83%95%E7%90%86%E8%AB%96)として紐付けられています。これらの特性からGraphQLには以下のメリットがあります。

- 型安全

  クライアント側でどのような[型](https://ja.wikipedia.org/wiki/データ型)のデータが返ってくるかわかる。

- 柔軟

  データをクライアント側で自在に取得できる。

- 単一のエンドポイント

GraphQLエンドポイントをRDBから半自動的に構築できるものとして[Hasura](https://hasura.io/)などのサービスがあります。これらのサービスは、低コストで柔軟なGraphQLエンドポイントを生成できることが大きなメリットですが、データの加工、整形をすることが困難であり、拡張を加えると逆に本来のメリットを失ってしまうというデメリットがあります。また[AWS Amplify](https://aws.amazon.com/jp/amplify/)のように、GraphQLスキーマを使用してDynamoDBに保存するオブジェクトを定義できるサービスも存在します。

### tRPC

GraphQLが柔軟であること以外に特に重要な点が、型安全にデータを取得できるという点です。今日のWebアプリケーション開発では、[静的型付け](https://ja.wikipedia.org/wiki/%E5%9E%8B%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0)言語に勢いがあります。これはエディターの[LSP(Language Server Protocol)](https://en.wikipedia.org/wiki/Language_Server_Protocol)などのコード支援機能が発展したことにより、記述されたプログラミングそのものがドキュメントとして作用するようになったことが要因として大きいです。またフロントエンド/バックエンドの両方でJavaScriptに静的型付けを加えたスーパーセットであるTypeScriptがプログラミング言語としてメジャーになっています。

[tRPC](https://trpc.io/)はGraphQLのようにコードを生成せずとも、TypeScriptで記述されたサーバ/フロント間で簡単に型安全なAPIを構築できるTypeScript製ライブラリです。GraphQLを使用したAPIの開発では、適切なスキーマを構築することは難しく、またDB上のデータからグラフを再現するという困難なタスクを伴います。tRPCでは必要なプロシージャのみを生成し、フロント側から型安全に呼び出すことができるため、簡単にフルスタックアプリケーションを構築できるという大きなメリットがあります。

## RDBMS

ここからは、バックエンドの主要な役割であるデータベース管理に利用される[データベース管理システム](https://wa3.i-3-i.info/word11771.html)について簡単に説明します。データベースとはデータの集合で、それを管理するシステムがデータベース管理システムです。

まず、データベース管理システムは[RDBMS(Relational Database Management System)](https://ja.wikipedia.org/wiki/関係データベース管理システム)と[NoSQL](https://ja.wikipedia.org/wiki/NoSQL)に分類できます。データベース管理システムの[デファクトスタンダード](https://wa3.i-3-i.info/word15280.html)はRDBMSです。NoSQLはRDBMS以外のデータベース管理システムの集合を意味する言葉で、RDBMSでは不向きなデータ処理を行う際にしようされます。

RDBMSとは関係データベースの管理システムで、関係データベース(RDB)とは

> 関係データベースと訳され、データを複数の表として管理し、表と表の関係を定義することで、複雑なデータの関連性を扱えるようにしたデータベース管理方式。

のことです。RDBを操作するための言語が[SQL](https://ja.wikipedia.org/wiki/SQL)です。[ISO](https://ja.wikipedia.org/wiki/国際標準化機構)によって標準SQLの仕様が定められていますが、各RDBMSによって方言が異なります。代表的なRDBMSが以下です。

- [MySQL](https://www.mysql.com/jp/)
- [PostgreSQL](https://www.postgresql.org/)
- [Oracle](https://www.oracle.com/jp/database/)

## ORM

バックエンドアプリケーションではプログラムからデータベースを操作する必要があります。SQLを直接記述したものを実行する場合もありますが、多くの場合、ORM(Object-relational mapping)が使用されます。[ORM](https://ja.wikipedia.org/wiki/オブジェクト関係マッピング)とはデータベースとオブジェクト指向プログラミング言語間でデータをやり取りするための技法及び、一般的にそれを行うライブラリを言います。ORMは各プログラミング言語ごとに様々なライブラリが存在します。ORMの例として以下があります。

- [Prisma](https://www.prisma.io/)

  TypeScript製

- [TypeORM](https://typeorm.io/)

  TypeScript製

- Active Record

  Ruby on Railsの組み込みライブラリ

- [SQLAlchemy](https://www.sqlalchemy.org/)

  Python製

## フレームワーク

ここまで、Web API及びDB関連について説明しましたが、ここからはWebアプリケーションを開発する際に使用されるメジャーな[フレームワーク](https://wa3.i-3-i.info/word12470.html)について紹介していきます。まず、Webアプリケーションフレームワークは大別して、フロントエンド、サーバーサイド、フルスタックフレームワークに分けることができます。これらの分類は実際の使用方法によるもので、特にフルスタックフレームワークと分類されるものは、フロントエンド、サーバーサイドのいずれかとして使われる場合もあります。

[SPA](#spa)の項目で紹介したライブラリは全てフロントエンドフレームワークです。特にメジャーで巨大なエコシステムを持つのがReactです。このセクションではフルスタック及びサーバーサイドフレームワークについて説明します。フルスタックフレームワークにおいて代表的なものが以下です。

- [Ruby on Rails](https://rubyonrails.org/)

  Ruby製

- [Laravel](https://laravel.com/)

  PHP製

- [Django](https://www.djangoproject.com/)

  Python製

これらのライブラリの全てがルーティング、リクエスト処理、ORM、ビューの生成等の機能を備えており、前述のMPAを構築することができます。また、ビュー(HTML)を生成せず、サーバーサイドフレームワークとしてREST APIやGraphQL APIを構築することもできます。

## Node.js

上述のフレームワークは全てJavaScript製ではありませんでしたが、JavaScriptでもサーバーサイドアプリケーションを構築することができます。JavaScriptでサーバーサイドアプリケーションを構築する基盤となるのが[Node.js](https://nodejs.org/ja/)です。

> Node.js はスケーラブルなネットワークアプリケーションを構築するために設計された非同期型のイベント駆動の JavaScript 環境です。

Node.jsはJavaScriptの実行環境を提供するもので、JavaScript実行環境のデファクトスタンダードと言えます。他の実行環境として[Bun](https://bun.sh/)や[Deno](https://deno.land/)等が存在します。Node.jsにはビルトインモジュールとして`http`モジュールが実装されており、これを使ってNode.jsをサーバーとして使用することができます。

Node.jsでHTTP APIを構築するための最も一般的なライブラリが[Express](https://expressjs.com/ja/)です。Expressは上述の`http`モジュールの[ラッパー](https://wa3.i-3-i.info/word191.html)です。

## Next.js

[Next.js](https://ja.wikipedia.org/wiki/Next.js)はNode.jsで動作するReactのフレームワークです。ReactはSPA、つまり単一のページのアプリケーションを構築するためのフロントエンドフレームワークでしたが、Next.jsはReactに以下の機能を追加したものです。

- [SSR/SSG](https://nextjs.org/docs/basic-features/pages#two-forms-of-pre-rendering)、[ISR](https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration)
- ルーティング
- API

Next.jsはReactでSSR/SSGを行うためのものと表現されることが多いですが、特にAPIを追加できるという点も重要です。つまりNext.jsはサーバーサイド、フルスタックアプリケーションとしても利用することができます。さらに、Next.jsを使用したフルスタックフレームワークとして以下等があります。

- [Blitz](https://blitzjs.com/)
- [Redwood](https://redwoodjs.com/)

また、Next.jsの代替としてVueのフレームワークである[Nuxt.js](https://nuxtjs.org/)等も存在します。

## クラウド

ここまで、Webの基本及びWebアプリケーションを実装するためのフレームワークについて説明しましたが、Webアプリケーションはそれだけでは動きません。車があっても道がなかったら移動できないように、Webアプリケーションを稼働させるには、その基盤となるインフラが必要です。

今日のコンピュータネットワークは仮想化技術によって、ソフトウェアを使用した柔軟な提供、共有が可能になりました。これをサービス化したものが[クラウド](https://ja.wikipedia.org/wiki/クラウドコンピューティング)です。クラウドはユーザー及び提供側の管理範囲やスケール可能範囲によって分類されます。製品を販売するのではなく、製品の利用をサービスとして提供するビジネスモデルのことを、as a serviceと言いますが、クラウドとして展開されるサービスはその分類によって、そのサービスのイニシャルにaaSを繋げてXaaSのように呼ばれます。代表的なものが以下です。

- IaaS(Infrastructure as a Service)

  > インターネット経由のハードウェアやインフラストラクチャの提供

- PaaS(Platform as a Service)

  > インターネット経由のアプリケーション実行用のプラットフォームの提供

- SaaS(Software as a Service): 

  > インターネット経由のソフトウェアパッケージの提供

他の種類については以下を参照してください。

https://en.wikipedia.org/wiki/As_a_service

特にIaaSとして代表的なクラウドには以下があります。

- [AWS](https://aws.amazon.com/jp/)
- [Azure](https://azure.microsoft.com/ja-jp/)
- [GCP](https://cloud.google.com/)

## IaC

IaaSは[コンソール画面](https://aws.amazon.com/jp/console/)を用いて管理することができますが、上述のクラウドは全て、非常に多くのサービスによって構成されており、それらのサービス全てを手動で管理することが非常に困難です。

[IaC(Infrastructure as Code)](https://ja.wikipedia.org/wiki/Infrastructure_as_Code)はインフラの構成管理を、コードによって自動化する技術及びそれを実現するためのツールのことです。

代表的なIaCには以下があります。

- [Terraform](https://www.terraform.io/)
- [Serverless Framework](https://www.serverless.com/framework)

  [FaaS](https://en.wikipedia.org/wiki/Function_as_a_service)を使用したインフラを構築するためのフレームワークです。さらに、Serverless Frameworkをユースケース毎に抽象化したものとして[Serverless Components](https://github.com/serverless/components)があります。特にServerless Componentsのプラグインとして、Next.jsをAWS Lambdaにデプロイするための[Serverless Nextjs Plugin](https://www.serverless.com/plugins/serverless-nextjs-plugin)が存在します。

また、インフラをSQLで管理するものとして[IaSQL](https://iasql.com/)というものも存在します。

### AWS

AWSはIaaSのデファクトスタンダードで、そのサービス数は200を超えます。AWSでIaCを行うツールとして以下があります。

- [AWS CloudFormation](https://aws.amazon.com/jp/cloudformation/)
- [AWS SAM](https://aws.amazon.com/jp/serverless/sam/)
- [AWS CDK](https://aws.amazon.com/jp/cdk/)

AWS SAMはAWS CloudFormationの拡張で、Serverless Frameworkと比較されます。AWS CDKは対応のプログラミング言語を用いて、AWS CloudFormationtテンプレートを出力し、プロビジョニングするものです。AWS CDKにはhigh-level constructライブラリによってAWSリソースが抽象化されており、そのリソースのコンセプトを理解するだけで直感的にコードを記述することができます。

## ホスティング

サーバーを借りることや借りてWebアプリケーションやデータベース等をサーバー上で使用できるように置くことをホスティングと言います。IaaSでクラウドを管理することで、自分でWebアプリケーションをホスティングすることもできますが、ホスティングをPaaSとして提供しているサービスがいくつか存在します。

### フロントエンド

フロントエンド(フルスタック)アプリケーションや静的サイトをホスティングできるプラットフォームには以下があります。

- [Vercel](https://vercel.com/)

  Next.jsを開発している同名の会社が提供しているPaaSです。

- [Netlify](https://www.netlify.com/)
- AWS Amplify

  AmplifyはAWSが提供しているサービスで、ホスティング、APIの構築、UIの構築等、Webアプリケーションを開発するための様々な機能を提供しています。

### バックエンド

バックエンド(フルスタック)アプリケーション、データベースをホスティングできるプラットフォームには以下があります。

- [Heroku](https://jp.heroku.com/)

  Herokuは無料でデータベースや[コンテナ](https://ja.wikipedia.org/wiki/Docker)をホスティングできることで特に有名なPaaSでしたが、無料枠が2022/11/28を持って終了することになりました。

- [render](https://render.com/)
- [Fly.io](https://fly.io/)
- [Railway](https://railway.app/)

## その他

ここまで、Webアプリケーション及びインフラの基礎知識とフレームワーク、ツール等の例を紹介しましたが、Webアプリケーションを開発するにはさらに開発するための技術について知る必要があります。ここからは、その他の技術、知識について説明します。

### Git, GitHub

[Git](https://ja.wikipedia.org/wiki/Git)は、コードのバージョン管理を行うための分散バージョン管理システムです。GitHubはGitで管理されたコードをホスティングするためのサービスです。

### Unix, Linux

[Linux](https://ja.wikipedia.org/wiki/Linux)はオープンソースで管理されているUnix系オペレーティングシステムカーネルを持つ[OS](https://ja.wikipedia.org/wiki/オペレーティングシステム)です。[Unix](https://ja.wikipedia.org/wiki/UNIX)とLinuxの関係性については、[Linuxの歴史](https://ja.wikipedia.org/wiki/Linux#歴史)を参照してください。

LinuxはWebサーバーで最も使用されており、また後述のコンテナ技術においても最も一般的なOSです。

### セキュリティ

アプリケーションにおいて、他社に悪用される危険性があるバグ等の欠陥を[脆弱性](https://ja.wikipedia.org/wiki/脆弱性)といいます。Webアプリケーション開発では、アプリケーションに潜む様々な脆弱性に対処しなくてはいけません。また認証、認可及びそれに関わる仕様について知っている必要があります。

### テスト

アプリケーションを開発するには、バグを自動的に検査するためのテストを記述し、実行する必要があります。テストを行う場合、テスト技法について知っている必要があります。

### エディター

効果的にコードを編集するにはエディターについて知っている必要があります。最もメジャーなエディターが[VS Code](https://azure.microsoft.com/ja-jp/products/visual-studio-code/)です。VS Codeでは拡張機能による拡張やショートカット、マルチカーソル等を利用できます。

### コンテナ技術

アプリケーションは実行環境に依存しており、別の環境で動作するとは限りません。アプリケーションをOSレベルで仮想化する技術がコンテナ化です。最もメジャーなコンテナ技術が[Docker](https://ja.wikipedia.org/wiki/Docker)です。

## 環境

OSはWindows、Macでも構いませんが、Macの方がWeb開発においてはメジャーなので、一般的にMacが推奨されます。WindowsはUnix系OSではないので、[WSL](https://ja.wikipedia.org/wiki/Windows_Subsystem_for_Linux)をインストールして、Linux上で操作を行います。Macの場合、MacはUnix系OSなのでMac上で操作を行っても特に問題ないですが、[lima](https://github.com/lima-vm/lima)や[Asahi linux](https://asahilinux.org/)を使用してlinuxを動作させることができます。

## 学習材

ここからは、具体的な学習材、及び学習内容の順序について紹介しますが、あくまで私的な提案となりますのでその点をご留意ください。コミュニティによって作成されたロードマップに[roadmap.sh](https://roadmap.sh/)があります。より包括的なロードマップについてはそちらを参照してください。

### Web, TCP/IP

Web通信の歴史及び、基礎知識については以下が参考になります。

- [Webを支える技術 HTTP、URI、HTML、そしてREST](https://www.amazon.co.jp/Webを支える技術-HTTP、URI、HTML、そしてREST-WEB-PRESS-plus/dp/4774142042/)

  Webの発展の歴史とその基盤となる各技術についての書籍です。特にHTTP及びRESTについて参考になります。

- [マスタリングTCP/IP 入門編](https://www.amazon.co.jp/マスタリングTCP-IP―入門編―-第6版-井上-直也/dp/4274224473/)

  TCP/IPについての書籍です。TCP/IPはWeb上での通信の基盤なので特に重要です。TCP/IP群の各プロトコルについての詳細は書かれていないので、専門の書籍を参考にするとよいです。

- [MDN Web Docs](https://developer.mozilla.org/ja/docs/Web)

  Mozillaによって管理されており、コミュニティによって書かれているWeb技術についてまとめた記事です。統一的にまとまっているため、HTML、CSS、JavaScript、HTTPについて知りたい場合に役立ちます。

### HTML, CSS, SCSS, JavaScript

HTML, CSS, SCSS, JavaScript、その他プログラミング言語等をハンズオン形式で学ぶには、[Progate](https://prog-8.com/)がおすすめです。

ハンズオン系の学習を行う際には、[生産的失敗](https://yuchrszk.blogspot.com/2021/12/Followed.html)を有効活用するとよいと思います。やり方は非常にシンプルで、ある程度内容を読み勧めたらその内容を見ずに実践して、失敗したら答えを見て修正を行います。これだけでもその後の長期記憶にかなり差が出ます。

### HTML, CSS

HTML, CSSで静的Webページをつくれるようになることを目的とします。以下のようなハンズオン系の書籍を一冊クリアすることを推奨します。

- [作って学ぶ HTML&CSSモダンコーディング](https://www.amazon.co.jp/【特典付き】作って学ぶ-HTML-CSSモダンコーディング-Compass-Development/dp/4839977119/)

### プログラミング言語、フレームワークの選択

ここまではWeb開発者なら誰しも必ず通る道ですが、ここからは選択するプログラミング言語、フレームワークによって変わってきます。今日の流行りに合わせるなら推奨されるスタックは、あくまで一つの例となりますが以下のようになると思います。

- フレームワーク: React, Next.js
- API: tRPC
- ORM: Prisma
- データベース: PostgreSQL

しかし、これらの学習は学習曲線が非常に急になる恐れがあります。なぜなら、これらのスタックを全て扱った初学者向けの教材はおそらく、ほとんどないからです。

初学者向けの学習教材として最も優れているフルスタックフレームワークは、おそらくRuby on Railsでしょう。Railsが初学者に適切な理由は以下です。

- > One of the early productivity mottos of Rails went: “You’re not a beautiful and unique snowflake”. It postulated that by giving up vain individuality, you can leapfrog the toils of mundane decisions, and make faster progress in areas that really matter.
- [Ruby on Railsチュートリアル](https://railstutorial.jp/)の存在

Railsの哲学には皆が頻繁に利用する類似のものを共有することで、開発の高速化と協力の促進を図っていますが、それは実際に成功したといえます。Ruby on Railsチュートリアルはその例で、このテキストを勧めて上手くいかない問題が起きた場合でも、ほとんどの場合、Web上で検索すれば同一か類似の問題を発見できるため、学習でつまずく可能性はかなり低いです。加えて、Ruby on Railsチュートリアルはその紹介の通り、アプリケーション開発の0から1を教えてくれます。

一を聞いて十を知るという言葉がありますが、新しいこと学習する上で類推は非常に重要な考え方です。新しい技術について学ぶ場合でも、既知の技術の何を代替するものなのかについて把握できれば、その技術の全貌について知ることができるからです。つまり、Railsを学習することは学習曲線を緩やかにするために有効な手段になります。

しかしながら、Railsはオワコンであるという主張に対して養護できる点は、もはやほとんどないと思います。RubyおよびRailsはとにかくコードに無駄がないように設計されており、これは数年前ならユーザーにとって開発体験を向上させるようになりましたが、結果的にそれは時代に逆行する形になりました。前述の通り、今日の流行りは静的型付け言語であり、実際Rubyエコシステムは衰退しているように見えます。

よって、RailsはRailsを既に使用して開発を継続しているプロジェクトに参加する場合はよいですが、新しいプロジェクトを始める場合にはあまり推奨できませが、学習曲線を緩やかにすることには役立ちます。

なのでここからは、一例としてNext.jsの学習を前提とした上で、オプションとしてRailsの学習法を紹介します。

### コマンドライン

Unix系(Linux)コマンドの操作を見に付けます。全て覚える必要はありませんが、どのようなコマンドがあったかを把握しておくとよいです。以下が参考になります。

- [新しいLinuxの教科書](https://www.amazon.co.jp/新しいLinuxの教科書-三宅-英明/dp/4797380942/)

Windowsの場合はWSL2をインストールしておく必要があります。「windows WSL2 インストール」などで検索してください。

### Git, GitHub

以下の書籍が参考になります。

- [GitHub実践入門 Pull Requestによる開発の変革](https://www.amazon.co.jp/GitHub実践入門-Pull-Requestによる開発の変革-PRESS-plus/dp/477416366X/)
- [Pro Git](https://progit-ja.github.io/)

  Gitの仕組み及び使用する際の一般的なユースケースについて体系的にまとまっています。

### オプション Ruby、Ruby on Rails

Progateで。

### オプション　Ruby on Railsチュートリアル

Ruby on Railsチュートリアルにおいて特に重要なのは、[MVC](https://ja.wikipedia.org/wiki/Model_View_Controller)のアーキテクチャおよび、Active Record等の役割を理解することです。

### 実行環境構築

VS Code, Node.jsのインストールについては環境に合わせてインストール方法を検索してください。また、JavaScriptやReact、Next.jsなどを簡単に実行できるOnline IDEには以下があります。

- [CodeSandbox](https://codesandbox.io/)
- [StackBlitz](https://stackblitz.com/)

### JavaScript 2

JavaScriptの構文、ビルトインモジュールについては以下の書籍が参考になります。

- [JavaScript本格入門](https://www.amazon.co.jp/改訂新版JavaScript本格入門-モダンスタイルによる基礎から現場での応用まで-山田-祥寛/dp/477418411X/)

  [es6](https://ja.wikipedia.org/wiki/ECMAScript)まで対応しています。やや古いので他の書籍を参考にした方が良いかもしれません。

- パッケージマネージャについては、以下の公式ドキュメント、または他記事を参照ください。

  - [npm](https://docs.npmjs.com/)
  - [Yarn](https://yarnpkg.com/)

- さらに詳しく知りたい場合は、以下の書籍が参考になります。

  - [JavaScript](https://www.amazon.co.jp/JavaScript-第7版-David-Flanagan/dp/4873119707/)

### React

以下の書籍及び[公式ドキュメント](https://beta.reactjs.org/)が参考になります。

- [Reactハンズオンラーニング](https://www.amazon.co.jp/Reactハンズオンラーニング-第2版-―Webアプリケーション開発のベストプラクティス-Alex-Banks/dp/4873119383/)

### TypeScript

以下の書籍が参考になります。

- [プログラミングTypeScript](https://www.amazon.co.jp/プログラミングTypeScript-―スケールするJavaScriptアプリケーション開発-Boris-Cherny/dp/4873119049/)

### Docker

Dockerについてはハンズオン系の書籍を進めた後、[公式ドキュメント](https://docs.docker.com/)を参考にするとよいと思います。特にDocker、Dockerfile、Docker Composeについて抑える必要があります。

### SQL

MySQLの場合は以下

- [MySQL徹底入門](https://www.amazon.co.jp/MySQL徹底入門-第4版-MySQL-8-0対応-yoku0825/dp/4798161489/)

PostgreSQLの場合は以下

- [PostgreSQL徹底入門](https://www.amazon.co.jp/PostgreSQL徹底入門-第4版-インストールから機能・仕組み、アプリ作り、管理・運用まで-近藤-雄太/dp/4798160431/)

が参考になります。上記の書籍は特にセットアップ、基礎知識、管理、運用をまとめたものですので、SQLについてはSQLについてのみまとめた別の書籍を推奨します。また、前述のDockerを使用することで簡単に環境を構築できます。

### Prisma

[公式ドキュメント](https://www.prisma.io/docs/)が参考になります。

### Web API

Open APIについては[公式ドキュメント](https://swagger.io/specification/)を、GraphQLについては[公式ドキュメント](https://graphql.org/learn/)、または以下の書籍を参照ください。

- [初めてのGraphQL](https://www.amazon.co.jp/初めてのGraphQL-―Webサービスを作って学ぶ新世代API-Eve-Porcello/dp/487311893X/)

また、tRPCについても[公式ドキュメント](https://trpc.io/)を参照ください。

### Next.js

[公式ドキュメント](https://nextjs.org/docs/getting-started)が役に立ちます。またここ最近で、Next.js向けの書籍が増えたので、そちらも参考になると思います。

- [TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発](https://www.amazon.co.jp/TypeScriptとReact-Next-jsでつくる実践Webアプリケーション開発-手島-拓也/dp/4297129167/)

### AWS

AWSの入門書は基本的にEC2及びVPCなどを使用して、Webサービスのための基本的な構成を作る書籍が多いです。インフラの構築では、特にTCP/IP及び使用するプロトコルについて事前に知っている必要があります。そのプロトコルについてわからない場合は、別途書籍を購入するなどして学習することを推奨します。またAWSの入門において特に重要なのは、リソースのアクセス許可の管理を担う[IAM](https://aws.amazon.com/jp/iam/)です。

AWSに入門する際は以下の書籍が役に立ちます。

- [Amazon Web Services 基礎からのネットワーク＆サーバー構築](https://www.amazon.co.jp/Amazon-Web-Services-基礎からのネットワーク＆サーバー構築-改訂3版-大澤-ebook/dp/B084QQ7TCF/)
- [AWSではじめるインフラ構築入門 安全で堅牢な本番環境のつくり方](https://www.amazon.co.jp/AWSではじめるインフラ構築入門-安全で堅牢な本番環境のつくり方-中垣-健志/dp/4798163430/)

AWSのサービスについて網羅的に知りたい場合は、認定資格用の教材が参考になります。また、インフラは必ずしもクラウドを指さないことに注意してください。

### IaC

IaCとAWSを使用してインフラを構築する場合は、AWS CDKの利用をおすすめします。特に、AWS CDKはTypeScriptによるサジェストと補完を使用することで、ある程度記述することができます。インフラの構築には体系的にまとまった書籍や、ユースケース毎にまとまった情報はほとんど存在しないので、わからない場合はその都度調べる必要があります。

### セキュリティ

Webアプリケーションの脆弱性については、以下の書籍が参考になります。

- [体系的に学ぶ 安全なWebアプリケーションの作り方](https://www.amazon.co.jp/体系的に学ぶ-安全なWebアプリケーションの作り方-第2版-脆弱性が生まれる原理と対策の実践-徳丸/dp/4797393165/)

また、認証、認可については[Auth0](https://auth0.com/resources)が信頼性の高い情報を積極的に発信しています。また、[OIDC](https://ja.wikipedia.org/wiki/OpenID)については以下の書籍が参考になります。

- [OpenID Connect入門](https://www.amazon.co.jp/OpenID-Connect入門-概念からセキュリティまで体系的に押さえる-土岐-孝平-ebook/dp/B08SCCDLJH/)

### その他　参考になるサイト等

#### 記事

入門する際にはまず、入門系の記事を読むことを推奨します。

- [Qiita](https://qiita.com/)
- [Zenn](https://zenn.dev/)

#### Q&A

- [stack overflow](https://stackoverflow.com/)
- [teratail](https://teratail.com/)

#### 用語

- [e-Words](https://e-words.jp/)
- [「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典](https://wa3.i-3-i.info/)

### Keep learning...

## さいごに

この記事では、Webアプリケーションを開発する上での基礎知識及びフレームワークについて紹介しましたが、これでもまだ決して十分ではありません。Webアプリケーション開発を学習する上で特に重要なのは、Webにおける通信技術及び、必要な学習過程を飛ばさないことです。前述の[roadmap.sh](https://roadmap.sh/)に記載されたロードマップは、知識の依存関係として捉え直すことができます。この捉え方は必ずしも正しい訳ではないものの、少なくともそれを反映しています。

Webアプリケーションの世界は進歩が早く最適な学習教材というのも見つけるのが困難なため、学習の指針を立てることがとにかく重要です。この記事が少しでも初学者の方の役に立てばと思います。