Webプログラミングのためのリンク集

1. まえがき

Webプログラミングを行うために、重要であると思われる情報へのリンクを集めました。仕様や公式サイトなどを中心としています。

仕様や公式サイトの情報は 「一次情報」 であると言えます（「一次情報」というのは、元の情報をそれ以上遡れない情報のことを言います）。 日頃から一次情報を読んで 正確な理解 を得る癖をつけましょう。これはどれだけ強調してもし過ぎることはないほど重要なことです。

ここで紹介する情報は英語であることが多いですが、日本語に翻訳されていることもあります。翻訳した内容というのは古くなっていたり、一部情報が抜けていたり、間違っていたりすることがあるため、あくまで英文を読むための参考として利用するのが理想です。

2. Web の模式図

Web に関する規格はいろいろありますが、その中でも重要な HTTP, URL(URI), HTML の関係図を載せておきます。

3. Web に関する入門情報

• Web 開発を学ぶ | MDN
  • Web 入門 – Web 開発を学ぶ

4. Web プログラミングに関連する仕様

このページに載せている情報は主に仕様書になります。たくさんありますので、すべてちゃんと覚えることは不可能に近いです。
以下の使い方でよいと思います。

• どこに何が書いてあるか、だいたい覚えておく
• 必要な時に必要なところを読む

1. TCP/IP

Webアプリケーションを書くだけであれば、あまり参照する機会はないかもしれません。

• RFC 1180 – TCP/IP tutorial

2. DNS

• RFC 1034 – Domain names – concepts and facilities
• RFC 1035 – Domain names – implementation and specification
• RFC 8310 – Usage Profiles for DNS over TLS and DNS over DTLS
• RFC 8484 – DNS Queries over HTTPS (DoH)

参考

• DNS入門 – moin.qmail.jp

3. URL

• URL Standard （日本語訳）

4. HTTP

• HTTP (httpbis)

2022年6月

• RFC 9110: HTTP Semantics
• RFC 9111: HTTP Caching
• RFC 9112: HTTP/1.1
• RFC 9113: HTTP/2
• RFC 9114: HTTP/3
• RFC 9218: Extensible Prioritization Scheme for HTTP

HTTP/2 の仕様

• 2015年5月～
• RFC 7540 – Hypertext Transfer Protocol Version 2 (HTTP/2)
  ( 日本語訳 )

HTTP/1.1 の仕様

HTTP/1.1 の最新バージョン(2014年～ ) は以下がセットになっています。

• RFC 7230 – Hypertext Transfer Protocol (HTTP/1.1): Message Syntax and Routing
  ( 日本語訳 )
• RFC 7231 – Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content
  ( 日本語訳 )
• RFC 7232 – Hypertext Transfer Protocol (HTTP/1.1): Conditional Requests
  ( 日本語訳 )
• RFC 7233 – Hypertext Transfer Protocol (HTTP/1.1): Range Requests
  ( 日本語訳 )
• RFC 7234 – Hypertext Transfer Protocol (HTTP/1.1): Caching
  ( 日本語訳 )
• RFC 7235 – Hypertext Transfer Protocol (HTTP/1.1): Authentication
  ( 日本語訳 )

HTTP/1.0 の仕様

• 1996年5月～
• RFC 1945 – Hypertext Transfer Protocol — HTTP/1.0

HTTP の Cookie ヘッダフィールドと Set-Cookie ヘッダフィールド

• RFC 6265 – HTTP State Management Mechanism
• draft-ietf-httpbis-rfc6265bis-02 – Cookies: HTTP State Management Mechanism

関連するその他のRFC

• RFC 7235 – Hypertext Transfer Protocol (HTTP/1.1): Authentication
  • HTTP認証
• RFC 5789 – PATCH Method for HTTP
• RFC 7239 – Forwarded HTTP Extension
  • X-Forwarded-For などを定義している。
• RFC 2965 – HTTP State Management Mechanism

解説サイト

• MDN による HTTP 解説サイト

5. HTML

最新の仕様

WHATWG による仕様書

• HTML Standard（日本語訳）
  • こちらを優先して見ること。
  • GitHub – whatwg/html: HTML Standard
  • 策定プロセス：FAQ — WHATWG

W3C による仕様書

• HTML5 Differences from HTML4
• HTML5
• HTML 5.2
• HTML 5.3

XHTML の仕様

• XHTML 1.0: The Extensible HyperText Markup Language (Second Edition)

HTML 4.01 の仕様

• HTML 4.01 Specification （日本語訳）

Web におけるエンコーディングについての仕様

• Encoding Standard （日本語訳）

HTML チェッカー

特定のウェブページの HTML が正しいかどうかをチェックするサービスです。

• The W3C Markup Validation Service
• Ready to check – Nu Html Checker
  • HTML5 のチェックを行うサービスです。
  • HTML 4.01 以下のテストはできません。
• Markuplint（Webページ上にHTMLを貼り付けてチェックできる）
  • VSCode のプラグイン
  • npm パッケージ

スタイルガイド

• Google HTML/CSS Style Guide

HTML部品

• Patterns | APG | WAI | W3C

6. CSS

CSSに関する仕様書一覧ページ

• CSS current work & how to participate
• All Standards and Drafts – W3C

CSS の現状について

• CSS Snapshot 2023（日本語訳）
• CSS Snapshot 2022（日本語訳）
• CSS Snapshot 2021（日本語訳）
• CSS Snapshot 2020（日本語訳）
• CSS Snapshot 2018（日本語訳）
• CSS Snapshot 2017（日本語訳）

CSS 2 (Level 2)の仕様書（最新版は 2.2）

CSS3 (Level 3) は、CSS2 (Level 2) を土台としています。まずは、CSS2 (Level 2) を学ぶことをお勧めします。

• CSS 2.2 （日本語訳）
• CSS 2.1 よりも、上の CSS2.2 の仕様書を読むことが推奨されているようです。

CSS 3 (Level 3)の仕様書

たくさん仕様書があります。その中から主な仕様書を以下に示します。

• CSS Values and Units Module Level 3 (日本語訳)
• Selectors
  • Selectors Level 4 (W3C Working Draft, 21 November 2018)
    • Selectors Level 4 (Editor’s Draft, 22 February 2021)
  • Selectors Level 3 (Recommendation)
    • セレクタ Level 3 (Recommendation)
• Media Queries
  • メディアクエリー
  • Media Queries Level 5
• CSS Namespaces Module Level 3 (Recommondation) （日本語訳）
• CSS Color Module Level 3 (Recommondation) （日本語訳）
  • CSS Color Module Level 5
• CSS Style Attributes （日本語訳）
• CSS Syntax Module Level 3 (Candidate Recommendation) （日本語訳）
• CSS Animations Level 1
• CSS Transforms Module Level 1
  • CSS Transforms Module Level 2
• CSS Device Adaptation Module Level 1
  • viewport など
• CSS Fonts Module Level 3 （日本語訳）
• CSS Box Sizing Module Level 4
• CSS Display Module Level 3

ブラウザの実装状況

• Can I use… Support tables for HTML5, CSS3, etc

CSS チェッカー

• W3C CSS 検証サービス

SVG viewer

• SVG Editor/Viewer Online

その他

• CSS3の日本語訳集 – 血統の森 web実験小屋
• Web標準仕様 日本語訳一覧

7. JavaScript

TC39-Royalty Free Task Group

• ECMAScript を策定してる技術委員会
• TC39-Royalty Free TG
• Ecma TC39 · GitHub

Tracking ECMAScript Proposals

• The TC39 Process
• GitHub – tc39/proposals: Tracking ECMAScript Proposals

ECMAScript 仕様書

• Standard ECMA-262 (常に最新のページ)
• ECMAScript® 2019 Language Specification
• ECMAScript® 2018 Language Specification
• ECMAScript® 2017 Language Specification
• ECMAScript 2016 Language Specification(ES2016, ES7)
  • 2016年7月策定
• ECMAScript 2015 Language Specification(ES2015, ES6)
  • 2015年6月策定
• ECMAScript Language Specification – ECMA-262 Edition 5.1 （日本語の書籍）
  • 2011年6月策定
• ECMAScript ES5
  • 2009年12月策定

今までのエディションの一覧情報

• JavaScript 言語情報 – JavaScript | MDN

ブラウザ関連技術, Web API

• DOM (Document Object Model)
  • DOM Living Standard （日本語訳）（GitHub）
  • W3C DOM4
  • Document Object Model (DOM) Level 3 Core Specification
  • Document Object Model (DOM) Level 2 Core Specification
• Web IDL (Web API を定義するインタフェース記述言語の仕様)
• UI Events （日本語訳）
• XMLHttpRequest Standard （日本語訳）
• Notifications API Standard
• Fetch Standard （日本語訳）
• Compatibility Standard （日本語訳）
• Console Standard
• Storage Standard （日本語訳）
  • 11.2.1 The Storage interface – HTML Standard
  • Storage – Web API インターフェイス | MDN
• Streams Standard （日本語訳）
• Cross-Origin Resource Sharing
  • HTTP アクセス制御 (CORS) – HTTP | MDN
• 9.3 Web sockets – HTML Standard
  • RFC 6455 – The WebSocket Protocol
  • The WebSocket API
  • WebSockets – Web API インターフェイス | MDN
• Web workers
  • 10 Web workers – HTML Standard
  • Web Workers API – Web API インターフェイス | MDN
  • Worker – Web API インターフェイス | MDN
• Service Worker API
  • Service Workers 1
  • ServiceWorker API – Web API インターフェイス | MDN
• File API
  • File API | W3C
  • Web アプリケーションからファイルを扱う | MDN
  • FileReaderSync – Web APIs | MDN
  • FileReader – Web API インターフェイス | MDN
• Indexed Database API
  • Indexed Database API
  • IndexedDB – Web API インターフェイス | MDN
• WebDriver

参考

• Web Hypertext Application Technology Working Group Standards
• JavaScript 技術概説 – JavaScript | MDN

ブラウザの実装状況

ブラウザの実装状況

• ECMAScript 6 compatibility table
• Can I use… Support tables for HTML5, CSS3, etc

ブラウザ毎の実装状況

• WebKit Web Platform Status
• Chrome Platform Status
• ECMAScript 6 support in Mozilla
• Microsoft Edge | Dev

チュートリアルとレファレンス

• JavaScript | MDN

スタイルガイド

• Google JavaScript スタイルガイド – 日本語訳
• JavaScript Standard Style

コメントの書き方

• Use JSDoc: Index

JavaScriptのパッケージ(ライブラリ)管理ツール

• npm
  • Node.js に付属している。

ちょっとしたコードを試すことができるツール

• CodePen
• Create a new fiddle – JSFiddle
• Online JavaScript Compiler (Editor)
• jsdo.it – Share JavaScript, HTML5 and CSS

セキュリティ対策

• JavaScript とHTML5のセキュリティ対策

実行環境

• Node.js

8. PHP

公式マニュアル

PHP は公式マニュアルサイトの情報が充実しています。

• PHP: PHP マニュアル – Manual

各バージョンのサポート状況

• PHP: Supported Versions

各バージョンの新機能

• PHP: 付録 – Manual

コーディング規約

• PHP-FIG — PHP Framework Interop Group

PHP をちゃんと使うためのリファレンス

• PHP: The Right Way （日本語訳）

PHPのRFC (Request for Comments)

• PHP: rfc

PHPのパッケージ(ライブラリ)管理ツール

• Composer
  • パッケージ(ライブラリ)管理ツール
• Packagist
  • Composer から利用されるPHPパッケージ(ライブラリ)のリポジトリ

ちょっとしたコードを試すことができるツール

• PHP Playground
  • WebAssembly が利用されているらしい。
• PHP Sandbox, test PHP online, PHP tester
  • オンライン
  • PHPのバージョンを指定することができる。
• PsySH
  • コマンドラインで使うツール (REPL)

セキュリティ対策

• 安全なウェブサイトの作り方：IPA 独立行政法人 情報処理推進機構
• PHPのセキュリティ対策（本サイトのページです）

9. データベース

MySQL

• MySQL Documentation

PostgreSQL

• PostgreSQL: Documentation

MongoDB

• MongoDB Documentation

redis

• Redis

10. 電子メール関連

電子メールに関する処理をプログラムで行うことも多いので、関連する仕様書情報を載せておきます。

MIME

• RFC 2045 – Multipurpose Internet Mail Extensions (MIME) Part One: Format of Internet Message Bodies
  ( 日本語訳 ) (日本語訳)
• RFC 2046 – Multipurpose Internet Mail Extensions (MIME) Part Two: Media Types
  • ( 日本語訳 ) ( 日本語訳 )
• RFC 2047 – MIME (Multipurpose Internet Mail Extensions) Part Three: Message Header Extensions for Non-ASCII Text
  ( 日本語訳 ) ( 日本語訳 )
• RFC 4288 – Media Type Specifications and Registration Procedures
• RFC 4289 – Multipurpose Internet Mail Extensions (MIME) Part Four: Registration Procedures
• RFC 2049 – Multipurpose Internet Mail Extensions (MIME) Part Five: Conformance Criteria and Examples

メールの書式

• RFC 5322 – Internet Message Format
  ( 日本語訳 )

SMTP

• RFC 5321 – Simple Mail Transfer Protocol ( 日本語訳 )

POP

• RFC 1939 – Post Office Protocol – Version 3 ( 日本語訳 ) ( 日本語訳 )

IMAP

• RFC 3501 – INTERNET MESSAGE ACCESS PROTOCOL – VERSION 4rev1

11. サイトの品質などをチェックする

SSL の設定をチェックする

• SSL Server Test (Powered by Qualys SSL Labs)

PageSpeed Insights by Google

• PageSpeed Insights
  • サイトの表示速度を測定します。

testmysite by Google

モバイルサイトの読み込み速度とパフォーマンスをテストする – Google

• 「モバイルでの使いやすさ」、「モバイルでの速度」、「デスクトップでの速度」を測定してくれる。

モバイル フレンドリー テスト by Google

モバイル フレンドリー テスト – Google Search Console

• 構造化データ テストツール

AMP テスト by Google

AMP テスト – Google Search Console

12. 全般

• Web Fundamentals | Google Developers

PWA (Progressive web app)

• Progressive Web Apps | Google Developers
• Progressive Web App Checklist | Google Developers

5. アクセシビリティ

• ウェブアクセシビリティ基盤委員会 | Web Accessibility Infrastructure Committee (WAIC)
• Web Content Accessibility Guidelines (WCAG) Overview | Web Accessibility Initiative (WAI) | W3C
• Axe Rules and Remediation Advice | Rules
• アクセシビリティの高い Web サイトを構築する | Microsoft Edge ドキュメント

チェックツール

• WAVE Web Accessibility Evaluation Tool

6. ブラウザ

Chrome

バージョン毎の情報（実装された機能）

• Chrome Platform Status
  • 特定の機能について調べる場合も、ここで調べるのがよい。

Blinkの開発に関する Googleグループ

• blink-dev – Google グループ
  • Googleなどが開発するHTMLレンダリングエンジン Blink の開発用メーリングリスト（のようなもの）。
  • 特定の機能について詳しく知りたい場合には、ここを調べると良い。
  • 進捗具合によってタイトルに決まりがあったり、機能に関して決まった形式のドキュメントがあるなど、予備知識がないと探しづらい。詳しくは、Web 技術の調査方法 | blog.jxck.io を参照。

Google Developers (Tools for Web Developers)

• Tools for Web Developers  |  Google Developers（トップページ）
  • Chrome DevTools
    • コンソール API リファレンス（console.xxx()）
    • コマンドライン API リファレンス

Webサイトの最適化

全般

• Optimize Website Speed With Chrome DevTools | Tools for Web Developers

Performance

• クリティカル リクエスト チェーン | Tools for Web Developers

Opportunities

• リソースの優先度付け – ブラウザの有用性を高める | Web Fundamentals
• Defer unused CSS | Tools for Web Developers
• サイトに初回ペイントの遅延を引き起こすリソースを使用しない | Tools for Web Developers
• Serve Images in Next-Gen Formats | Tools for Web Developers

Diagnostics

• Controlling Font Performance with font-display
  • フォントがダウンロードされる場合、ダウンロード前にどのような表示を行うかについて font-displayディスクリプタで指定する。
• Uses inefficient cache policy on static assets  |  Tools for Web Developers
• JavaScript Bootup Time Is Too High  |  Tools for Web Developers
• Uses An Excessive DOM Size  |  Tools for Web Developers
• クリティカル リクエスト チェーン  |  Tools for Web Developers

Accessibility

• Text elements must have sufficient color contrast against the background Axe Rules | Deque University | Deque Systems
• Frames must have title attribute Axe Rules | Deque University | Deque Systems
• Form <input> elements must have labels Axe Rules | Deque University | Deque Systems
• Links must have discernible text Axe Rules | Deque University | Deque Systems
• サイトで rel=”noopener” を使用して外部アンカーを開く

開発に役立つ拡張機能

• Web Developer
• HTMLエラーチェッカー
• HTML5 Outliner

Firefox

新たなWeb仕様に関するMozillaの見解

• Mozilla Specification Positions
  • 各機能に対する Mozilla のスタンスが分かる。
• mozilla/standards-positions
  • discussion はこちらの Issues で行われている。

開発者向け情報

• Firefox Developer Tools | MDN（トップページ）

Safari

メーリングリスト

• lists.webkit.org Mailing Lists
  • The webkit-dev Archives （WebKit の開発用）

7. ブラウザの動作

• What happens behind the scenes when we type www.google.com in a browser?
• ブラウザのしくみ: 最新ウェブブラウザの内部構造 – HTML5 Rocks

8. Web の学習

• MDN Web Docs
• Google Developers （開発者向け）
  • Web
    • Web Fundamentals
    • Tools
  • Google 検索セントラル
    • ドキュメント
      • Getting started: Advanced users
• Google ヘルプ（一般ユーザー向け）
  • Google Chrome ヘルプ
  • Google 検索 ヘルプ
  • Search Console ヘルプ
• microsoft/Web-Dev-For-Beginners: 24 Lessons, 12 Weeks, Get Started as a Web Developer

9. Webサーバー関連

SSL の設定

• Mozilla SSL Configuration Generator（各ソフトウェアのSSL設定を自動生成する）

10. 利用するサーバーをチェックする

利用するサーバーに割り当てられているIPアドレスがブラックリストに載っていないかチェックする

• IP Address Blacklist Check

その他

• インターネットとは – JPNIC
• Electronic Journal: インターネットの歴史
• RFC Editor（RFCを検索するのに便利）

関連

PHPのセキュリティ対策

2016.06.30

Laravel 5 でのセキュリティ対策 (PHP)

2016.06.30

JavaScript とHTML5のセキュリティ対策

2016.06.30

スポンサードリンク