はじめに

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

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

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

Web

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

Webとは、ネットワーク上で相互に接続された複数のコンピュータに保存されているテキスト、画像、音声、動画などの様々なデータを相互に紐付けて構成されたシステムで、これを支えているもっとも基本的な技術がHTTP(Hypertext Transfer Protocol), URI(Uniform Resource Identifier), HTML(HyperText Markup Language)です。まず初めに理解すべき点はWebがクライアント/サーバシステムであるということです。

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

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

Web上のクライアント/サーバ間で用いられるアプリケーションプロトコルがHTTPです。HTTPはほぼ全てのプログラミング言語に実装されています。

TCP/IP

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

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

ネットワークインターフェース層
- イーサネット
- Wifi
物理的なケーブル、アダプタの規格
インターネット層
- IP
パケットを指定のIPアドレスに転送するための規格です。IPアドレスとはインターネット上のコンピュータを識別するためのネットワーク層の識別子です。
トランスポート層
- TCP
- UDP
TCP/IPモデルでは、トランスポート層はホストコンピュータ上の適切なアプリケーションプロセスにデータを配送する責任が有る。これは異なったアプリケーション・プロセスからのデータの統計的多重化、すなわちデータのパケット化、およびトランスポート層の各データ・パケット・ヘッダへの送信元／送信先ポート番号の追加を伴う。送信元および送信先のIPアドレスと共に、そのポート番号はネットワーク・ソケット、すなわちプロセス間通信の識別アドレスを構成する。
アプリケーション層
- HTTP
- TELNET
- DNS
TCP/IPモデルにおいては、アプリケーション層は4階層ある内の第4層にあたり、IPのコンピュータネットワークを介したプロセス間通信に使われる通信プロトコルとインターフェースメソッドを含んでいる。アプリケーション層は通信だけを標準化しており、ホスト間のデータ通信チャネルの確立と、クライアントーサーバ間またはピアツーピアのネットワーキング・モデルにおけるデータ交換の管理は、下位のトランスポート層のプロトコルに依存している。

まず、インターネット上のホストにはそれを識別するためのIPアドレスが割り振られます。人間が識別しやすいようにDNSによって対応付けられた文字列がホスト名です。Web上のリソースはホスト名を含むURI(Uniform Resource Identifier)によって一意に識別されます。

URL

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

HTTP/HTTPSを用いて表されるURLの基本的な形式は以下のようになります。

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

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

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

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メッセージの詳細は以下を参照してください。

HTML

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

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

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

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

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

SPA

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

SPAを実現するためのライブラリには代表的なものに以下があります。

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

Web APIでは一般的にJSONやXMLなどのデータフォーマットが使用されます。

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

Web API

Web APIにはいくつかのアーキテクチャが存在します。

REST

最も代表的なものアーキテクチャスタイルがRESTです。RESTとは以下の規則のセットを意味します。

クライアント/サーバ
ステートレスサーバ
キャッシュ
統一インターフェース

リソースはURIによって一意に識別でき、最小限のメソッドによって操作されることを意味します。Web APIにおいてURI、またはHTTP APIにおいてURIとHTTPメソッドによって識別される各インターフェースのことをエンドポイント、エンドポイント毎に処理を設定することをルーティングと言います。
階層化システム
コードオンデマンド

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

RESTful APIを実現する仕様としてOpen APIなどが存在します。

GraphQL

RESTが抱えるいくつかの問題に対して、より柔軟なAPIを提供するために生まれたのがGraphQLです。RESTには以下の問題があります。

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

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

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

{
  hero {
    name
    friends {
      name
    }
  }
}

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

その名に冠している通り、GraphQLにおいてサーバから送信されるデータは全てグラフとして紐付けられています。これらの特性からGraphQLには以下のメリットがあります。

型安全

クライアント側でどのような型のデータが返ってくるかわかる。
柔軟

データをクライアント側で自在に取得できる。
単一のエンドポイント

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

tRPC

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

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

RDBMS

ここからは、バックエンドの主要な役割であるデータベース管理に利用されるデータベース管理システムについて簡単に説明します。データベースとはデータの集合で、それを管理するシステムがデータベース管理システムです。

まず、データベース管理システムはRDBMS(Relational Database Management System)とNoSQLに分類できます。データベース管理システムのデファクトスタンダードはRDBMSです。NoSQLはRDBMS以外のデータベース管理システムの集合を意味する言葉で、RDBMSでは不向きなデータ処理を行う際にしようされます。

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

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

のことです。RDBを操作するための言語がSQLです。ISOによって標準SQLの仕様が定められていますが、各RDBMSによって方言が異なります。代表的なRDBMSが以下です。

ORM

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

Prisma

TypeScript製
TypeORM

TypeScript製
Active Record

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

Python製

フレームワーク

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

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

Ruby on Rails

Ruby製
Laravel

PHP製
Django

Python製

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

Node.js

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

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

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

Node.jsでHTTP APIを構築するための最も一般的なライブラリがExpressです。Expressは上述のhttpモジュールのラッパーです。

Next.js

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

SSR/SSG、ISR
ルーティング
API

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

また、Next.jsの代替としてVueのフレームワークであるNuxt.js等も存在します。

クラウド

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

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

IaaS(Infrastructure as a Service)

インターネット経由のハードウェアやインフラストラクチャの提供
PaaS(Platform as a Service)

インターネット経由のアプリケーション実行用のプラットフォームの提供
SaaS(Software as a Service):

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

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

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

IaC

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

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

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

Terraform
Serverless Framework

FaaSを使用したインフラを構築するためのフレームワークです。さらに、Serverless Frameworkをユースケース毎に抽象化したものとしてServerless Componentsがあります。特にServerless Componentsのプラグインとして、Next.jsをAWS LambdaにデプロイするためのServerless Nextjs Pluginが存在します。

また、インフラをSQLで管理するものとしてIaSQLというものも存在します。

AWS

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

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

ホスティング

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

フロントエンド

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

Vercel

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

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

バックエンド

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

Heroku

Herokuは無料でデータベースやコンテナをホスティングできることで特に有名なPaaSでしたが、無料枠が2022/11/28を持って終了することになりました。
render
Fly.io
Railway

その他

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

Git, GitHub

Gitは、コードのバージョン管理を行うための分散バージョン管理システムです。GitHubはGitで管理されたコードをホスティングするためのサービスです。

Unix, Linux

Linuxはオープンソースで管理されているUnix系オペレーティングシステムカーネルを持つOSです。UnixとLinuxの関係性については、Linuxの歴史を参照してください。

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

セキュリティ

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

テスト

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

エディター

効果的にコードを編集するにはエディターについて知っている必要があります。最もメジャーなエディターがVS Codeです。VS Codeでは拡張機能による拡張やショートカット、マルチカーソル等を利用できます。

コンテナ技術

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

環境

OSはWindows、Macでも構いませんが、Macの方がWeb開発においてはメジャーなので、一般的にMacが推奨されます。WindowsはUnix系OSではないので、WSLをインストールして、Linux上で操作を行います。Macの場合、MacはUnix系OSなのでMac上で操作を行っても特に問題ないですが、limaやAsahi linuxを使用してlinuxを動作させることができます。

学習材

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

Web, TCP/IP

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

Webを支える技術 HTTP、URI、HTML、そしてREST

Webの発展の歴史とその基盤となる各技術についての書籍です。特にHTTP及びRESTについて参考になります。
マスタリングTCP/IP 入門編

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

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

HTML, CSS, SCSS, JavaScript

HTML, CSS, SCSS, JavaScript、その他プログラミング言語等をハンズオン形式で学ぶには、Progateがおすすめです。

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

HTML, CSS

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

作って学ぶ HTML&CSSモダンコーディング

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

ここまでは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チュートリアルの存在

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

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

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

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

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

コマンドライン

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

新しいLinuxの教科書

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

Git, GitHub

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

GitHub実践入門 Pull Requestによる開発の変革
Pro Git

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

オプション Ruby、Ruby on Rails

Progateで。

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

Ruby on Railsチュートリアルにおいて特に重要なのは、MVCのアーキテクチャおよび、Active Record等の役割を理解することです。

実行環境構築

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

JavaScript 2

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

JavaScript本格入門

es6まで対応しています。やや古いので他の書籍を参考にした方が良いかもしれません。
パッケージマネージャについては、以下の公式ドキュメント、または他記事を参照ください。
- npm
- Yarn
さらに詳しく知りたい場合は、以下の書籍が参考になります。
- JavaScript

React

以下の書籍及び公式ドキュメントが参考になります。

Reactハンズオンラーニング

TypeScript

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

プログラミングTypeScript

Docker

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

SQL

MySQLの場合は以下

MySQL徹底入門

PostgreSQLの場合は以下

PostgreSQL徹底入門

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

Prisma

公式ドキュメントが参考になります。

Web API

Open APIについては公式ドキュメントを、GraphQLについては公式ドキュメント、または以下の書籍を参照ください。

初めてのGraphQL

また、tRPCについても公式ドキュメントを参照ください。

Next.js

公式ドキュメントが役に立ちます。またここ最近で、Next.js向けの書籍が増えたので、そちらも参考になると思います。

TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発

AWS

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

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

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

IaC

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

セキュリティ

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

体系的に学ぶ安全なWebアプリケーションの作り方

また、認証、認可についてはAuth0が信頼性の高い情報を積極的に発信しています。また、OIDCについては以下の書籍が参考になります。

OpenID Connect入門

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

記事

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

Qiita
Zenn

Q&A

用語

Keep learning...

さいごに

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

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

はじめに

Web

TCP/IP

URL

HTTP

HTML

SPA

Web API

REST

GraphQL

tRPC

RDBMS

ORM

フレームワーク

Node.js

Next.js

クラウド

IaC

AWS

ホスティング

フロントエンド

バックエンド

その他

Git, GitHub

Unix, Linux

セキュリティ

テスト

エディター

コンテナ技術

環境

学習材

Web, TCP/IP

HTML, CSS, SCSS, JavaScript

HTML, CSS

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

コマンドライン

Git, GitHub

オプション Ruby、Ruby on Rails

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

実行環境構築

JavaScript 2

React

TypeScript

Docker

SQL

Prisma

Web API

Next.js

AWS

IaC

セキュリティ

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

記事

Q&A

用語

Keep learning...

さいごに

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

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